/* Kevem Catini · página de links ("Conecte-se com Kevem").
   Poster sizes come from the approved reference, 941 px wide: every length is
   N × --u, where --u is 1% of the .page column, so 1 reference px ≈ 0.1063u. */

@font-face { font-family: 'Anton'; font-weight: 400; font-display: block; src: url(/assets/fonts/anton-400.3603ba9b8f.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'); }
@font-face { font-family: 'Mrs Saint Delafield'; font-weight: 400; font-display: swap; src: url(/assets/fonts/mrs-saint-delafield-400.c998731f8f.woff2) format('woff2'); }

:root {
  --bg: #070405;
  --red: #e6142a;
  --red-text: #ff2b3a;
  --ink: #f5f5f5;
  --muted: #a9a3a4;
  --glass-edge: rgba(255, 92, 92, 0.3);
  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --script: 'Mrs Saint Delafield', 'Brush Script MT', cursive;
  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: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* The grunge plate over the whole page, then film grain (SVG noise as a data: URI; the CSP allows img-src data:). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background: url(/assets/img/grunge.3f47ff6d6c.webp) center / cover;
}

body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 10;
  pointer-events: none;
  opacity: 0.1;
  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");
}

/* The big black-and-grey photo behind everything (the spinning kick in the
   cage), fixed to the screen and fading into the dark at its edges (outside .page, whose container
   containment would pin a fixed child to the column). */
.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  -webkit-mask-image: radial-gradient(farthest-side at 50% 42%, #000 45%, transparent);
  mask-image: radial-gradient(farthest-side at 50% 42%, #000 45%, transparent);
}

.backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

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

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

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

/* ---------- Background: red glow, the cage behind him, smoke, embers ---------- */

.bg { position: absolute; inset: 0 0 auto; height: calc(178 * var(--u)); z-index: -1; pointer-events: none; }
.bg > i { position: absolute; display: block; }

.bg-glow {
  inset: 0 -60%;
  background:
    radial-gradient(calc(34 * var(--u)) calc(40 * var(--u)) at calc(50% + 14 * var(--u)) calc(42 * var(--u)), rgba(214, 16, 28, 0.62), transparent 70%),
    radial-gradient(calc(30 * var(--u)) calc(18 * var(--u)) at calc(50% + 38 * var(--u)) calc(84 * var(--u)), rgba(255, 34, 40, 0.55), transparent 72%),
    radial-gradient(calc(26 * var(--u)) calc(16 * var(--u)) at calc(50% - 16 * var(--u)) calc(86 * var(--u)), rgba(200, 16, 24, 0.4), transparent 72%),
    radial-gradient(calc(90 * var(--u)) calc(70 * var(--u)) at calc(50% + 10 * var(--u)) calc(30 * var(--u)), rgba(110, 4, 12, 0.5), transparent 72%),
    radial-gradient(calc(80 * var(--u)) calc(40 * var(--u)) at 50% calc(150 * var(--u)), rgba(90, 4, 10, 0.35), transparent 72%);
}

/* A chain-link fence seen at an angle, lit red from below, out of focus. */
.bg-cage {
  top: calc(6 * var(--u));
  left: calc(70 * var(--u));
  width: calc(60 * var(--u));
  height: calc(88 * var(--u));
  opacity: 0.75;
  background:
    linear-gradient(90deg, transparent calc(11 * var(--u)), rgba(20, 4, 6, 0.9) calc(11 * var(--u)), rgba(20, 4, 6, 0.9) calc(13 * var(--u)), transparent calc(13 * var(--u))),
    repeating-linear-gradient(45deg, rgba(255, 70, 70, 0.4) 0 1px, transparent 1px calc(2.6 * var(--u))),
    repeating-linear-gradient(-45deg, rgba(255, 70, 70, 0.4) 0 1px, transparent 1px calc(2.6 * var(--u)));
  transform: perspective(calc(80 * var(--u))) rotateY(-38deg);
  transform-origin: left center;
  filter: blur(0.6px);
  -webkit-mask-image: radial-gradient(closest-side at 40% 55%, #000 30%, transparent);
  mask-image: radial-gradient(closest-side at 40% 55%, #000 30%, transparent);
}

/* The smoke texture is a mask: its alpha paints a grey or a red layer. */
.bg-smoke, .hero-smoke {
  -webkit-mask: url(/assets/img/smoke.430517b218.webp) center / 100% 100% no-repeat;
  mask: url(/assets/img/smoke.430517b218.webp) center / 100% 100% no-repeat;
}

.bg-smoke--left { top: calc(30 * var(--u)); left: calc(-22 * var(--u)); width: calc(48 * var(--u)); height: calc(62 * var(--u)); background: #6d6667; opacity: 0.45; transform: scaleX(-1) rotate(8deg); }
.bg-smoke--red { top: calc(118 * var(--u)); left: calc(70 * var(--u)); width: calc(44 * var(--u)); height: calc(56 * var(--u)); background: #b3121d; opacity: 0.35; transform: rotate(-12deg); }

/* Embers: small out-of-focus red dots. */
.bg-bokeh {
  inset: 0;
  background:
    radial-gradient(calc(0.9 * var(--u)) at calc(37 * var(--u)) calc(72 * var(--u)), rgba(255, 50, 50, 0.9), transparent),
    radial-gradient(calc(1.3 * var(--u)) at calc(98 * var(--u)) calc(99 * var(--u)), rgba(255, 50, 50, 0.85), transparent),
    radial-gradient(calc(1 * var(--u)) at calc(96 * var(--u)) calc(118 * var(--u)), rgba(255, 50, 50, 0.8), transparent),
    radial-gradient(calc(0.8 * var(--u)) at calc(2 * var(--u)) calc(123 * var(--u)), rgba(255, 50, 50, 0.8), transparent),
    radial-gradient(calc(1.6 * var(--u)) at calc(92 * var(--u)) calc(56 * var(--u)), rgba(255, 40, 40, 0.55), transparent),
    radial-gradient(calc(0.7 * var(--u)) at calc(84 * var(--u)) calc(44 * var(--u)), rgba(255, 60, 60, 0.7), transparent),
    radial-gradient(calc(1.2 * var(--u)) at calc(4 * var(--u)) calc(95 * var(--u)), rgba(255, 40, 40, 0.5), transparent),
    radial-gradient(calc(0.6 * var(--u)) at calc(58 * var(--u)) calc(4 * var(--u)), rgba(255, 60, 60, 0.6), transparent),
    radial-gradient(calc(2.2 * var(--u)) at calc(97 * var(--u)) calc(80 * var(--u)), rgba(255, 30, 30, 0.4), transparent),
    radial-gradient(calc(0.8 * var(--u)) at calc(30 * var(--u)) calc(160 * var(--u)), rgba(255, 50, 50, 0.6), transparent);
}

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

.hero { position: relative; height: calc(92.5 * var(--u)); }
.hero p { margin: 0; }

.kicker {
  position: absolute;
  top: calc(13.6 * var(--u));
  left: calc(10.2 * var(--u));
  font-size: max(7.5px, calc(1.85 * var(--u)));
  letter-spacing: 0.33em;
  color: #d4cfcf;
  text-transform: uppercase;
  white-space: nowrap;
}

.kicker i, .footer-tag i {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin: 0 1.1em 0 0.7em;
  border-radius: 50%;
  vertical-align: 0.2em;
  background: var(--red);
  box-shadow: 0 0 0.5em rgba(255, 30, 40, 0.8);
}

.title { position: absolute; inset: 0; margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1; }

/* Silver, lit from above. */
.title-pre {
  position: absolute;
  top: calc(18.6 * var(--u));
  left: calc(9.6 * var(--u));
  font-size: calc(7.6 * var(--u));
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #e9e9e9;
  background: linear-gradient(180deg, #ffffff 0%, #ececec 40%, #9c9c9c 62%, #dcdcdc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(0.3 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.7));
}

/* The giant red name: a condensed, slightly tilted slab, darker at the foot,
   worn by the grunge plate, with a dark extrusion and a red bloom. */
.title-name {
  position: absolute;
  top: calc(26 * var(--u));
  left: calc(9.2 * var(--u));
  font-size: calc(19 * var(--u));
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--red);
  background: url(/assets/img/grunge.3f47ff6d6c.webp) center / calc(60 * var(--u)) auto, linear-gradient(180deg, #dc2f31 0%, #ad141b 30%, #760a0f 64%, #3c0305 100%);
  background-blend-mode: color-dodge, normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: rotate(-2.2deg) scale(1, 1.6);
  transform-origin: left top;
  filter: drop-shadow(calc(0.35 * var(--u)) calc(0.5 * var(--u)) 0 #2a0204) drop-shadow(0 0 calc(2.4 * var(--u)) rgba(200, 10, 20, 0.3));
}

.hero-photo {
  position: absolute;
  z-index: 1;
  top: calc(3 * var(--u));
  left: calc(35.4 * var(--u));
  width: calc(41 * var(--u));
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.06) drop-shadow(calc(0.4 * var(--u)) 0 calc(1.6 * var(--u)) rgba(255, 30, 40, 0.55));
  -webkit-mask-image: linear-gradient(180deg, #000 89%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 89%, transparent 96%);
}

/* Red smoke rising around his waist, in front of the photo. */
.hero-smoke {
  position: absolute;
  display: block;
  z-index: 2;
  top: calc(62 * var(--u));
  left: calc(42 * var(--u));
  width: calc(52 * var(--u));
  height: calc(36 * var(--u));
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(180deg, #ff5a4a, #c4101c);
  mix-blend-mode: screen;
  transform: rotate(90deg) scaleY(1.4);
}

.topics {
  position: absolute;
  top: calc(55.6 * var(--u));
  left: calc(9.9 * var(--u));
  z-index: 2;
  font-size: max(6px, calc(1.45 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #d7d1d1;
}

.topics b { margin: 0 0.65em; font-weight: 400; color: var(--red); }

.topics::after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(4.2 * var(--u));
  width: calc(7.4 * var(--u));
  height: calc(0.32 * var(--u));
  background: var(--red);
  box-shadow: 0 0 calc(0.8 * var(--u)) rgba(255, 30, 40, 0.7);
}

.handle {
  position: absolute;
  z-index: 2;
  top: calc(65.1 * var(--u));
  left: calc(9.9 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u));
  height: calc(5.6 * var(--u));
  padding: 0 calc(2.2 * var(--u)) 0 calc(2.4 * var(--u));
  border: calc(0.2 * var(--u)) solid var(--red);
  border-radius: calc(1.1 * var(--u));
  background: linear-gradient(180deg, rgba(60, 8, 12, 0.7), rgba(24, 4, 6, 0.8));
  box-shadow: 0 0 calc(1.8 * var(--u)) rgba(255, 20, 30, 0.35), inset 0 0 calc(1.4 * var(--u)) rgba(255, 30, 40, 0.18);
  color: var(--ink);
  font-size: max(9px, calc(2.2 * var(--u)));
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

/* A bigger, invisible tap area around the small button. */
.handle::before { content: ''; position: absolute; inset: -11px -6px; }

.badge { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); }
.badge-seal { fill: var(--red); }
.badge-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.motto {
  position: absolute;
  top: calc(72.4 * var(--u));
  left: calc(10.3 * var(--u));
  font-size: max(7.5px, calc(1.85 * var(--u)));
  line-height: 1.55;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: #b9b2b3;
}

.aside {
  position: absolute;
  top: calc(62 * var(--u));
  left: calc(85.3 * var(--u));
  font-size: max(5.8px, calc(1.4 * var(--u)));
  line-height: 1.82;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c9c3c3;
}

.aside::after {
  content: '';
  position: absolute;
  left: calc(0.5 * var(--u));
  top: calc(12.4 * var(--u));
  width: calc(0.2 * var(--u));
  height: calc(9.6 * var(--u));
  background: linear-gradient(180deg, var(--red), rgba(230, 20, 42, 0.2));
}

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

.links { position: relative; z-index: 3; display: grid; gap: calc(1.7 * var(--u)); padding: 0 calc(6.6 * var(--u)); }

/* Dark red glass with a lit edge, the look shared by the card and the tiles. */
.feature,
.tile {
  border: 1px solid var(--glass-edge);
  border-radius: calc(1.4 * var(--u));
  background: linear-gradient(125deg, rgba(130, 44, 48, 0.5), rgba(52, 26, 28, 0.62) 42%, rgba(34, 18, 20, 0.7) 68%, rgba(80, 26, 30, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 70, 70, 0.45),
    0 calc(0.8 * var(--u)) calc(2.4 * var(--u)) calc(-0.8 * var(--u)) rgba(255, 24, 36, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.feature { position: relative; height: calc(33.5 * var(--u)); overflow: hidden; }

.feature-main { position: absolute; inset: 0; color: var(--ink); text-decoration: none; }

.feature-photo {
  position: absolute;
  top: -12%;
  left: -1.5%;
  width: 106%;
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 44%), linear-gradient(180deg, #000 66%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 28%, #000 44%), linear-gradient(180deg, #000 66%, transparent 90%);
  mask-composite: intersect;
}

/* The fight photo in dark red: grey first, then multiplied by red. */
.feature-photo img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.12) brightness(0.98); }
.feature-photo::after { content: ''; position: absolute; inset: 0; background: #d24a52; mix-blend-mode: multiply; }

.feature-tag {
  position: absolute;
  top: calc(2.85 * var(--u));
  left: calc(3.5 * var(--u));
  display: flex;
  align-items: center;
  height: calc(3.5 * var(--u));
  padding: 0 calc(2.8 * var(--u));
  border-radius: calc(1.75 * var(--u));
  background: linear-gradient(90deg, #d8111f, #9e0a14);
  box-shadow: 0 0 calc(1.4 * var(--u)) rgba(255, 20, 30, 0.45);
  font-size: max(7px, calc(1.7 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.16em;
}

.feature-title {
  position: absolute;
  top: calc(7.4 * var(--u));
  left: calc(4 * var(--u));
  font-size: calc(6.3 * var(--u));
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-shadow: 0 calc(0.3 * var(--u)) calc(0.8 * var(--u)) rgba(0, 0, 0, 0.6);
}

.feature-title em { font-style: normal; color: var(--red-text); text-shadow: 0 0 calc(1.6 * var(--u)) rgba(255, 30, 40, 0.4); }

.feature-sub {
  position: absolute;
  top: calc(20.2 * var(--u));
  left: calc(4.3 * var(--u));
  font-size: max(6px, calc(1.42 * var(--u)));
  line-height: 1.55;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #bdb6b7;
}

.feature-play {
  position: absolute;
  top: 43.5%;
  left: 72%;
  width: calc(10.6 * var(--u));
  height: calc(10.6 * var(--u));
  translate: -50% -50%;
  border: calc(0.25 * var(--u)) solid rgba(255, 120, 120, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0303c, #b50c17 70%);
  box-shadow: 0 0 0 calc(0.6 * var(--u)) rgba(230, 20, 42, 0.18), 0 0 calc(3.4 * var(--u)) rgba(255, 20, 30, 0.6);
}

.feature-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(3.3 * var(--u));
  border-color: transparent transparent transparent #fff;
}

.feature-bar {
  position: absolute;
  left: calc(1.6 * var(--u));
  right: calc(1.6 * var(--u));
  bottom: calc(0.85 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(2.1 * var(--u));
  height: calc(6.4 * var(--u));
  padding: 0 calc(3 * var(--u)) 0 calc(2.5 * var(--u));
  border: 1px solid rgba(255, 110, 110, 0.22);
  border-radius: calc(1.1 * var(--u));
  background: linear-gradient(90deg, rgba(40, 12, 14, 0.82), rgba(58, 16, 20, 0.7));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  text-decoration: none;
  font-size: max(8.5px, calc(1.8 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.1em;
}

.feature-bar .chev { margin-left: auto; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.7 * var(--u)); }

.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(3.2 * var(--u));
  min-height: max(44px, calc(10.6 * var(--u)));
  padding: 0 calc(4 * var(--u)) 0 calc(3.6 * var(--u));
  color: var(--ink);
  text-decoration: none;
}

.tile-text { display: grid; gap: calc(0.5 * var(--u)); min-width: 0; }
.tile-name { font-size: max(10.5px, calc(2.5 * var(--u))); font-weight: 800; letter-spacing: 0.08em; line-height: 1; }
.tile-sub { font-size: max(9px, calc(1.95 * var(--u))); color: var(--muted); line-height: 1.1; }
.tile-sub--caps { font-size: max(6.2px, calc(1.4 * var(--u))); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }

.tile .chev { margin-left: auto; }
.tile--wide { gap: calc(4.6 * var(--u)); padding-left: calc(4.4 * var(--u)); }
.tile--wide .icon { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); }

.icon { width: calc(5.8 * var(--u)); height: calc(5.8 * var(--u)); flex: none; fill: #fff; }
.icon--yt { width: calc(5.8 * var(--u)); height: calc(4.1 * var(--u)); }
.feature-bar .icon--yt { width: calc(3.9 * var(--u)); height: calc(2.8 * var(--u)); }
.icon--yt .icon-cut { fill: #2a0b0e; }
.icon--line { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

.chev { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); flex: none; fill: none; stroke: #eee; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Footer ---------- */

.footer { position: relative; margin-top: calc(5.2 * var(--u)); padding-bottom: calc(2 * var(--u)); text-align: center; }
.footer p { margin: 0; }

.footer-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--u));
  font-size: max(6.4px, calc(1.5 * var(--u)));
  letter-spacing: 0.72em;
  text-indent: 0.72em;
  text-transform: uppercase;
  color: #d9d4d4;
}

.footer-name::before,
.footer-name::after { content: ''; width: calc(10.4 * var(--u)); height: 1px; background: rgba(255, 255, 255, 0.28); }

.footer-tag {
  margin-top: calc(1.2 * var(--u));
  font-size: max(4.8px, calc(1.05 * var(--u)));
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #9d9697;
}

.footer-tag i { width: 0.4em; height: 0.4em; margin: 0 1.4em 0 0.9em; }

.footer-sign {
  position: absolute;
  top: calc(-2 * var(--u));
  right: calc(8 * var(--u));
  font-family: var(--script);
  font-size: calc(5.2 * var(--u));
  line-height: 1;
  color: #e6e1e1;
  transform: rotate(-9deg);
}

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

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

@media (hover: hover) {
  .feature-main:hover .feature-play { filter: brightness(1.12); }
  .feature-bar:hover,
  .handle:hover { filter: brightness(1.15); }
  .tile:hover { border-color: rgba(255, 110, 110, 0.5); 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) .bg-glow,
  .js:not(.go) .title-name,
  .js:not(.go) .hero-photo img,
  .js:not(.go) .reveal { opacity: 0; animation: failsafe 1ms linear 2500ms forwards; }

  .go .bg-glow { animation: glow-on 600ms ease-out backwards; }
  .go .title-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 .feature { animation-delay: 600ms; }
  .go .tile:nth-child(1) { animation-delay: 680ms; }
  .go .tile:nth-child(2) { animation-delay: 740ms; }
  .go .tile:nth-child(3) { animation-delay: 800ms; }
  .go .tile:nth-child(4) { animation-delay: 860ms; }
  .go .tile--wide { animation-delay: 920ms; }

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

@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 drift { to { translate: calc(-2 * var(--u)) calc(-2.5 * var(--u)); opacity: 0.62; } }

@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 calc(1.8 * var(--u)) rgba(230, 20, 42, 0), 0 0 calc(3.4 * var(--u)) rgba(255, 20, 30, 0.6); } }