/* Kevem Catini · página de links.
   Poster sizes come from the approved mockup, whose column was 310 px wide:
   every poster length is N × --u, where --u is 1% of the .page column. */

@font-face { font-family: 'Anton'; font-weight: 400; font-display: block; src: url(/assets/fonts/anton-400.c8eceeaf24.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-condensed-600.8f6ec0585e.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-condensed-700.605e3d07ab.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-condensed-800.552c149ebb.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/inter-400-500.7facc39ec5.woff2) format('woff2'); }

:root {
  --bg: #060606;
  --red: #e6142a;
  --red-text: #ff3347;
  --ink: #f5f5f5;
  --muted: #9b9b9b;
  --tile: #111111;
  --tile-border: #252525;
  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(120vmax 80vmax at 50% -10%, #2a0306, var(--bg) 60%) var(--bg);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Film grain over the whole page (SVG noise as a data: URI; the CSP allows img-src data:). */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 10;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  --u: min(1vw, 4.8px);
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 28px;
  container-type: inline-size;
}

@supports (width: 1cqw) {
  .page { --u: 1cqw; }
}

/* ---------- Poster ---------- */

.hero { position: relative; height: calc(113.5 * var(--u)); }

.hero-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: calc(200 * var(--u));
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(calc(60 * var(--u)) calc(67 * var(--u)) at 50% calc(67 * var(--u)), rgba(230, 20, 42, 0.62), transparent 72%),
    radial-gradient(calc(130 * var(--u)) calc(90 * var(--u)) at 50% 0, rgba(120, 0, 12, 0.45), transparent 70%);
}

.hero-name {
  position: absolute;
  top: calc(11 * var(--u));
  left: calc(-3.9 * var(--u));
  right: calc(-3.9 * var(--u));
  text-align: center;
  white-space: nowrap;
  font-family: var(--display);
  font-size: calc(36.1 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  color: transparent;
  background: linear-gradient(180deg, #fff 12%, #a8a8a8 60%, #3c3c3c);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

.hero-photo img {
  position: absolute;
  top: calc(22.6 * var(--u));
  left: 50%;
  width: calc(105.2 * var(--u));
  height: auto;
  transform: translateX(-50%);
  filter: contrast(1.06) drop-shadow(0 0 calc(9 * var(--u)) rgba(230, 20, 42, 0.35));
}

.hero-fade {
  position: absolute;
  top: calc(91 * var(--u));
  left: 0;
  right: 0;
  height: calc(40 * var(--u));
  background: linear-gradient(180deg, transparent, var(--bg) 80%);
  pointer-events: none;
}

/* ---------- Identity ---------- */

.cond { font-family: var(--cond); text-transform: uppercase; }

.identity { position: relative; z-index: 2; padding: 0 16px; }

.identity-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 2px solid var(--red);
}

h1 { margin: 0; font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: 0.04em; }

.handle { font-size: 12px; font-weight: 500; color: var(--muted); }

.tagline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 14px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--red-text);
}

.tagline i { width: 4px; height: 4px; background: #5a5a5a; transform: rotate(45deg); }

/* ---------- Links ---------- */

.links { position: relative; z-index: 2; padding: 0 16px; }

.feature {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 9px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--red);
  border-radius: 4px;
  background: var(--red);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(230, 20, 42, 0.3);
}

.feature-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.8);
}

.feature::before,
.feature::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.feature::before { background: var(--red); mix-blend-mode: multiply; opacity: 0.55; }
.feature::after { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85)); }

.feature-play {
  position: absolute;
  z-index: 2;
  left: 82%;
  top: 38%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(230, 20, 42, 0.3);
}

.feature-play::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 14px;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.feature-label {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.1em;
}

.feature-handle {
  margin-left: auto;
  font-family: var(--text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.82);
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.tile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--tile-border);
  border-radius: 3px;
  background: var(--tile);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
}

.icon { width: 17px; height: 17px; flex: none; fill: currentColor; }
.feature-label .icon { width: 20px; height: 20px; }

.footer { margin-top: 22px; text-align: center; font-size: 11px; color: var(--muted); }

/* ---------- Touch and focus ---------- */

.feature,
.tile { transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease; }
.feature:active,
.tile:active { transform: translateY(1px); filter: brightness(1.18); }
.feature:focus-visible,
.tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (hover: hover) {
  .feature:hover { filter: brightness(1.08); }
  .tile:hover { border-color: #3a3a3a; filter: brightness(1.12); }
}

/* ---------- Entrance (about 1.1 s, once) ---------- */

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Hidden until main.js adds .go. The failsafe shows everything at 2.5 s
     even if main.js never runs. */
  .js:not(.go) .hero-glow,
  .js:not(.go) .hero-name,
  .js:not(.go) .hero-photo img,
  .js:not(.go) .reveal { opacity: 0; animation: failsafe 1ms linear 2500ms forwards; }

  .go .hero-glow { animation: glow-on 600ms ease-out backwards; }
  .go .hero-name { animation: name-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms backwards; }
  .go .hero-photo img { animation: photo-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms backwards; }
  .go .hero::after { animation: flash 200ms ease-out 350ms; }
  .go .reveal { animation: rise 260ms ease-out backwards; }
  .go .identity { animation-delay: 600ms; }
  .go .feature { animation-delay: 660ms; }
  .go .tile:nth-child(1) { animation-delay: 720ms; }
  .go .tile:nth-child(2) { animation-delay: 780ms; }
  .go .tile:nth-child(3) { animation-delay: 840ms; }
  .go .tile:nth-child(4) { animation-delay: 900ms; }

  body::after { animation: grain 500ms steps(4) infinite; }
  .feature-play { animation: pulse 2400ms ease-in-out infinite; }
}

@keyframes failsafe { to { opacity: 1; } }

@keyframes glow-on {
  0% { opacity: 0; }
  18% { opacity: 0.85; }
  25% { opacity: 0.3; }
  40% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes name-in { from { opacity: 0; translate: 0 24px; scale: 1.06; } }
@keyframes photo-in { from { opacity: 0; translate: 0 16px; } }
@keyframes flash { 40% { opacity: 0.35; } }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }

@keyframes grain {
  0% { translate: 0 0; }
  25% { translate: -4% 3%; }
  50% { translate: 3% -4%; }
  75% { translate: -3% -2%; }
  100% { translate: 0 0; }
}

@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(230, 20, 42, 0); } }