:root {
  --void: #010000;
  --night: #030d22;
  --night-soft: #071839;
  --portal: #0040ba;
  --energy: #1356e5;
  --paper: #fef7ec;
  --ice: #b7c8db;
  --cyan: #21d4fd;
  --coral: #ff5d6c;
  --magenta: #ff4da6;
  --acid: #84e64d;
  --amber: #ff9b45;
  --violet: #8b6cff;
  --muted: #8094ae;
  --line: rgba(183, 200, 219, .2);
  --panel: rgba(5, 20, 51, .82);
  --radius-lg: 28px;
  --radius-md: 21px;
  --shadow: 0 24px 90px rgba(0, 0, 0, .42);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --depth-x: 0px;
  --depth-y: 0px;
  --depth-soft-x: 0px;
  --depth-soft-y: 0px;
  --depth-inverse-x: 0px;
  --depth-inverse-y: 0px;
  --depth-logo-x: 0px;
  --depth-logo-y: 0px;
}

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

html { scroll-behavior: smooth; background: var(--void); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--paper);
  background: var(--void);
  isolation: isolate;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.intro-is-open { overflow: hidden; }
.no-js .intro { display: none !important; }
.no-js .reveal { opacity: 1; transform: none; }

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Abertura: os ícones são satélites; a marca permanece intacta. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(19, 86, 229, .2), transparent 26%),
    linear-gradient(145deg, #010000 0%, #030d22 57%, #061945 100%);
  transition: opacity .52s ease, visibility .52s ease;
  animation: intro-failsafe 0s linear 7s forwards;
}

.intro.is-closing { opacity: 0; visibility: hidden; pointer-events: none; }
.intro.is-hidden { display: none; }

/* A assinatura de retorno continua reconhecível: o usuário sempre enxerga a história. */
.intro--returning .intro-realm { animation-duration: 1.38s; }
.intro--returning .intro-icon { animation-duration: 1.95s; animation-delay: calc(var(--delay) + .34s); }
.intro--returning .intro__orbit { animation-duration: 2.05s; animation-delay: .06s; }
.intro--returning .intro__core { animation-delay: 1.88s; }
.intro--returning .intro__brand { animation-delay: 2.12s; }
.intro--returning .intro__iris { animation-delay: 3.28s; }

.intro__skip {
  position: fixed;
  z-index: 6;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  min-height: 44px;
  padding: 0 16px;
  color: var(--ice);
  border: 1px solid rgba(183, 200, 219, .32);
  border-radius: 999px;
  background: rgba(3, 13, 34, .72);
  font: 700 12px/1 "Inter", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.intro__skip:hover, .intro__skip:focus-visible { color: var(--paper); border-color: var(--energy); outline: none; }

.intro__halftone {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(rgba(254, 247, 236, .45) .7px, transparent .8px);
  background-size: 12px 12px;
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.intro__realms {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  pointer-events: none;
}

.intro-realm {
  --realm-from: -115%;
  --realm-to: 95%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--night);
  opacity: 0;
  transform: translate3d(0, var(--realm-from), 0) skewX(-7deg) scale(1.05);
  animation: realm-sweep 1.75s var(--ease) forwards;
  box-shadow: 0 0 0 1px rgba(1, 0, 0, .22), 0 0 55px rgba(1, 0, 0, .3);
}

.intro-realm svg { width: clamp(42px, 7vw, 76px); height: clamp(42px, 7vw, 76px); fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.intro-realm b { font-family: "Bangers", Impact, sans-serif; font-size: clamp(16px, 2.5vw, 28px); font-weight: 400; letter-spacing: .12em; writing-mode: vertical-rl; }
.intro-realm--comic { background: var(--paper); animation-delay: 0s; }
.intro-realm--anime { --realm-from: 115%; --realm-to: -95%; background: var(--cyan); animation-delay: .07s; }
.intro-realm--games { color: var(--paper); background: var(--energy); animation-delay: .14s; }
.intro-realm--cinema { --realm-from: 115%; --realm-to: -95%; color: var(--paper); background: var(--coral); animation-delay: .21s; }

.intro__stage { position: relative; z-index: 2; width: min(900px, 100vw); height: min(620px, 100svh); }

.intro__orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(700px, 105vw);
  overflow: visible;
  fill: none;
  stroke: rgba(19, 86, 229, .78);
  stroke-width: 2;
  stroke-dasharray: 8 14;
  transform: translate(-50%, -50%) rotate(-8deg) scale(.35);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(19, 86, 229, .8));
  animation: orbit-arrival 2.65s var(--ease) .16s forwards;
}

.intro__orbit-secondary { stroke: rgba(254, 247, 236, .24); stroke-dasharray: 2 18; }

.intro-icon {
  --sx: 0;
  --sy: 0;
  --tx: 0;
  --ty: 0;
  --rot: 0deg;
  --delay: 0s;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(76px, 13vw, 112px);
  aspect-ratio: 1;
  color: var(--icon-ink, var(--paper));
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 16px var(--icon-glow, rgba(19, 86, 229, .46)));
  opacity: 0;
  animation: icon-ingress 2.45s var(--ease) calc(var(--delay) + .52s) forwards;
}

.intro-icon svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.intro-icon--game { --icon-glow: rgba(33, 212, 253, .62); }
.intro-icon--film { --icon-glow: rgba(255, 93, 108, .58); }
.intro-icon--comic { --icon-glow: rgba(254, 247, 236, .55); }
.intro-icon--ninja { width: clamp(94px, 17vw, 145px); --icon-glow: rgba(255, 77, 166, .62); }
.intro-icon--gauntlet { --icon-glow: rgba(255, 184, 67, .66); }
.intro-icon--anime { width: clamp(82px, 13vw, 112px); --icon-glow: rgba(19, 86, 229, .68); }

.intro__core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 26px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px var(--paper), 0 0 68px var(--energy), 0 0 130px var(--portal);
  animation: core-burst .7s var(--ease) 2.26s forwards;
}

.intro__brand {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  width: min(530px, 82vw);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  animation: brand-lock .82s var(--ease) 2.62s forwards;
}

.intro__brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .64)); }
.intro__signal { display: block; margin-bottom: -2px; color: var(--ice); font-size: clamp(9px, 1.8vw, 12px); font-weight: 800; letter-spacing: .24em; }

.intro__iris {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 140vmax;
  aspect-ratio: 1;
  border: 3px solid var(--energy);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.01);
  box-shadow: 0 0 30px rgba(19, 86, 229, .8), inset 0 0 20px rgba(19, 86, 229, .5);
  animation: iris-open .78s var(--ease) 4.05s forwards;
}

@keyframes orbit-arrival {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-28deg) scale(.35); }
  35% { opacity: 1; }
  100% { opacity: .9; transform: translate(-50%, -50%) rotate(352deg) scale(1); }
}

@keyframes realm-sweep {
  0% { opacity: 0; transform: translate3d(0, var(--realm-from), 0) skewX(-7deg) scale(1.05); }
  22%, 58% { opacity: .94; transform: translate3d(0, 0, 0) skewX(-7deg) scale(1.05); }
  100% { opacity: 0; transform: translate3d(0, var(--realm-to), 0) skewX(-7deg) scale(.92); }
}

@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@keyframes icon-ingress {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(.42) rotate(var(--rot)); }
  18% { opacity: 1; }
  48%, 66% { opacity: 1; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1) rotate(0); }
  88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(24deg); }
}

@keyframes core-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6); }
}

@keyframes brand-lock {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes iris-open {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.01); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); border-width: 1px; }
}

/* Fundo autoral da marca */
.cosmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, var(--void), var(--night) 48%, #020714); pointer-events: none; }
.cosmos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 60%, rgba(1, 0, 0, .48)); pointer-events: none; }

.cosmos__glow { position: absolute; border-radius: 50%; opacity: .34; transform: translate(var(--depth-x), var(--depth-y)); transition: transform 1s ease-out; }
.cosmos__glow--one { width: 72vw; height: 72vw; top: -30vw; left: -28vw; background: radial-gradient(circle, rgba(19, 86, 229, .7), rgba(19, 86, 229, .12) 42%, transparent 72%); }
.cosmos__glow--two { width: 62vw; height: 62vw; right: -31vw; top: 24vh; background: radial-gradient(circle, rgba(0, 64, 186, .62), rgba(0, 64, 186, .1) 44%, transparent 72%); }

.cosmos__grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(183, 200, 219, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 200, 219, .04) 1px, transparent 1px),
    radial-gradient(rgba(254, 247, 236, .34) .75px, transparent .8px);
  background-size: 48px 48px, 48px 48px, 14px 14px;
  mask-image: linear-gradient(180deg, #000, transparent 88%);
}

.cosmos__starstream {
  position: absolute;
  inset: -45%;
  background-image:
    radial-gradient(circle, rgba(254, 247, 236, .9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(33, 212, 253, .65) 0 1px, transparent 1.6px),
    radial-gradient(ellipse, rgba(19, 86, 229, .4) 0 1px, transparent 2px);
  background-position: 0 0, 72px 44px, 31px 103px;
  background-size: 154px 154px, 211px 211px, 287px 287px;
  pointer-events: none;
  will-change: transform;
}
.cosmos__starstream--far { opacity: .18; animation: starstream-far 72s linear infinite; }
.cosmos__starstream--near { opacity: .13; filter: blur(.3px); animation: starstream-near 43s linear infinite; }
.cosmos__stars { position: absolute; inset: -8%; animation: starfield-drift 58s ease-in-out infinite; will-change: transform; }
.star { position: absolute; width: var(--size); height: var(--size); border-radius: 50%; background: var(--paper); opacity: var(--alpha); box-shadow: 0 0 8px rgba(254, 247, 236, .5); }
.star--pulse { animation: star-pulse var(--speed) ease-in-out var(--delay) infinite; }
@keyframes star-pulse { 50% { opacity: .15; transform: scale(.65); } }
@keyframes starfield-drift { 0%, 100% { transform: translate3d(-1.5%, -1%, 0) scale(1); } 50% { transform: translate3d(2%, 2.5%, 0) scale(1.03); } }
@keyframes starstream-far { 0%, 100% { transform: translate3d(-3%, -4%, 0) rotate(-7deg); } 50% { transform: translate3d(4%, 16%, 0) rotate(-7deg); } }
@keyframes starstream-near { 0%, 100% { transform: translate3d(5%, -12%, 0) rotate(12deg) scale(1); } 50% { transform: translate3d(-4%, 12%, 0) rotate(12deg) scale(1.05); } }

.cosmos__orbit { position: absolute; width: min(620px, 78vw); fill: none; stroke: rgba(19, 86, 229, .16); stroke-width: 2; stroke-dasharray: 5 13; }
.cosmos__orbit--left { left: -350px; top: -100px; transform: rotate(24deg) translate(var(--depth-soft-x), var(--depth-soft-y)); }
.cosmos__orbit--right { right: -380px; top: 38%; transform: rotate(-22deg) translate(var(--depth-inverse-x), var(--depth-inverse-y)); }

.cosmos__tokens { position: absolute; inset: 0; pointer-events: none; }
.cosmic-token {
  --token: var(--cyan);
  --token-soft: rgba(33, 212, 253, .22);
  --x1: 20px;
  --y1: -26px;
  --x2: -14px;
  --y2: 18px;
  --r0: -8deg;
  --r1: 4deg;
  --r2: -2deg;
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(78px, 8vw, 112px);
  aspect-ratio: 1;
  color: var(--token);
  opacity: .68;
  filter: drop-shadow(0 12px 15px rgba(0, 0, 0, .58)) drop-shadow(0 0 15px var(--token-soft));
  transform: translate3d(0, 0, 0) rotate(var(--r0));
  animation: token-voyage var(--token-speed, 19s) ease-in-out var(--token-delay, 0s) infinite;
  will-change: transform, opacity;
}
.cosmic-token svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; }
.cosmic-token--gauntlet { top: 7%; left: 3%; --token: #ffc04d; --token-soft: rgba(255, 192, 77, .42); --token-speed: 21s; --token-delay: -4s; }
.cosmic-token--ninja { top: 8%; right: 3%; width: clamp(106px, 11vw, 150px); --token: var(--magenta); --token-soft: rgba(255, 77, 166, .4); --x1: -28px; --y1: 18px; --x2: 12px; --y2: -24px; --token-speed: 24s; --token-delay: -12s; }
.cosmic-token--zombie { top: 29%; left: 2%; --token: var(--acid); --token-soft: rgba(132, 230, 77, .4); --x1: 14px; --y1: -34px; --x2: 30px; --y2: 13px; --token-speed: 23s; --token-delay: -8s; }
.cosmic-token--creeper { top: 32%; right: 2%; --token: #79dd54; --token-soft: rgba(121, 221, 84, .42); --x1: -24px; --y1: -14px; --x2: 15px; --y2: 28px; --token-speed: 18s; --token-delay: -10s; }
.cosmic-token--avengers { top: 53%; left: 2%; width: clamp(82px, 8vw, 114px); --token: var(--energy); --token-soft: rgba(19, 86, 229, .48); --x1: 24px; --y1: 17px; --x2: -8px; --y2: -19px; --token-speed: 19s; --token-delay: -6s; }
.cosmic-token--shield { top: 56%; right: 3%; --token: #e13a4b; --token-soft: rgba(225, 58, 75, .42); --x1: -18px; --y1: 29px; --x2: 23px; --y2: -12px; --token-speed: 24s; --token-delay: -17s; }
.cosmic-token--enderman { bottom: 11%; left: 5%; width: clamp(96px, 10vw, 138px); --token: #d64cff; --token-soft: rgba(214, 76, 255, .4); --x1: 25px; --y1: -19px; --x2: -17px; --y2: -30px; --token-speed: 20s; --token-delay: -13s; }
.cosmic-token--mask { bottom: 7%; right: 6%; --token: #e22f43; --token-soft: rgba(226, 47, 67, .42); --x1: -30px; --y1: -22px; --x2: 12px; --y2: 17px; --token-speed: 25s; --token-delay: -5s; }
.cosmic-token--comic { top: 16%; left: 17%; --token: var(--paper); --token-soft: rgba(254, 247, 236, .3); --token-speed: 28s; --token-delay: -21s; }
.cosmic-token--film { bottom: 27%; right: 16%; --token: var(--coral); --token-soft: rgba(255, 93, 108, .34); --token-speed: 22s; --token-delay: -3s; }
.cosmic-token--rocket { top: 44%; right: 18%; --token: var(--cyan); --token-soft: rgba(33, 212, 253, .32); --token-speed: 27s; --token-delay: -15s; }
.cosmic-token--gauntlet svg { animation: sticker-gauntlet 4.8s ease-in-out infinite; }
.cosmic-token--ninja svg { animation: sticker-ninja 5.4s ease-in-out infinite; }
.cosmic-token--zombie svg { animation: sticker-zombie 4.6s ease-in-out infinite; }
.cosmic-token--creeper svg { animation: sticker-creeper 4.1s steps(2, jump-none) infinite; }
.cosmic-token--avengers svg { animation: sticker-avengers 5.2s ease-in-out infinite; }
.cosmic-token--shield svg { animation: sticker-shield 6.4s ease-in-out infinite; }
.cosmic-token--enderman svg { animation: sticker-enderman 3.8s ease-in-out infinite; }
.cosmic-token--mask svg { animation: sticker-mask 5.8s ease-in-out infinite; }
.cosmic-token--comic svg { animation: sticker-comic 4.4s ease-in-out infinite; }
.cosmic-token--film svg { animation: sticker-film 5.2s ease-in-out infinite; }
.cosmic-token--rocket svg { animation: sticker-rocket 4.9s ease-in-out infinite; }
@keyframes token-voyage {
  0%, 100% { opacity: .5; transform: translate3d(0, 0, 0) rotate(var(--r0)); }
  34% { opacity: .82; transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); }
  68% { opacity: .6; transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)); }
}
@keyframes sticker-gauntlet { 0%, 70%, 100% { transform: rotate(-5deg) scale(1); } 79% { transform: rotate(4deg) scale(1.08); } 88% { transform: rotate(-2deg) scale(1.02); } }
@keyframes sticker-ninja { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.12); } 72% { filter: drop-shadow(0 0 0 transparent); } 82% { filter: drop-shadow(0 0 10px #ff4da6); } }
@keyframes sticker-zombie { 0%, 100% { transform: translateY(3px) rotate(2deg); } 50% { transform: translateY(-8px) rotate(-4deg); } }
@keyframes sticker-creeper { 0%, 70%, 100% { transform: translate(0, 0) rotate(0); } 80% { transform: translate(-5px, 3px) rotate(-3deg) scale(1.05); } 90% { transform: translate(4px, -2px) rotate(3deg); } }
@keyframes sticker-avengers { 0%, 100% { transform: rotate(-5deg) scale(.96); } 50% { transform: rotate(4deg) scale(1.08); filter: drop-shadow(0 0 12px #1356e5); } }
@keyframes sticker-shield { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(11deg) translateY(-5px); } }
@keyframes sticker-enderman { 0%, 100% { transform: translateY(2px) scaleX(1); filter: drop-shadow(0 0 0 transparent); } 47% { transform: translateY(-7px) scaleX(1.03); filter: drop-shadow(0 0 7px #d64cff); } 52% { transform: translateY(-7px) scaleX(.94); } }
@keyframes sticker-mask { 0%, 100% { transform: rotate(-4deg) scale(1); } 45% { transform: rotate(4deg) scale(1.06); } 52% { transform: rotate(3deg) scaleY(.94); } }
@keyframes sticker-comic { 0%, 72%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.14) rotate(-5deg); } 88% { transform: scale(.98) rotate(2deg); } }
@keyframes sticker-film { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-8deg); } 84% { transform: rotate(2deg); } }
@keyframes sticker-rocket { 0%, 100% { transform: translate(-3px, 4px) rotate(-5deg); } 50% { transform: translate(7px, -8px) rotate(3deg); } }

.page-shell { position: relative; z-index: 1; width: min(100% - 32px, 650px); margin-inline: auto; padding: max(34px, env(safe-area-inset-top)) 0 max(48px, env(safe-area-inset-bottom)); outline: none; }

.hero { display: flex; flex-direction: column; align-items: center; padding: 30px 0 20px; text-align: center; }
.hero__status, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--ice); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero__status i, .section-kicker i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--energy); box-shadow: 0 0 12px var(--energy); }

.brand-trigger { position: relative; width: min(100%, 490px); margin: 15px 0 2px; padding: 0; border: 0; background: transparent; cursor: pointer; animation: brand-drift 5.8s ease-in-out infinite; }
.brand-trigger::before { content: ""; position: absolute; z-index: 0; inset: 13% 4% 6%; border-radius: 50%; background: radial-gradient(ellipse, rgba(19, 86, 229, .28), transparent 67%); opacity: .45; transform: scale(.86); animation: brand-aura 4.8s ease-in-out infinite; pointer-events: none; }
.brand-trigger::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(112deg, transparent 34%, rgba(254, 247, 236, .72) 48%, rgba(33, 212, 253, .38) 52%, transparent 66%) 180% 0 / 230% 100% no-repeat; -webkit-mask: url("assets/brand/nerdolaverso-logo.webp") center / contain no-repeat; mask: url("assets/brand/nerdolaverso-logo.webp") center / contain no-repeat; opacity: .34; animation: brand-sheen 5.8s ease-in-out infinite; pointer-events: none; }
.brand-trigger__orbit { position: absolute; inset: 4% 1% 7%; z-index: 0; border: 1px dashed rgba(19, 86, 229, .28); border-radius: 50%; opacity: .2; transform: rotate(-9deg) scale(.82); animation: brand-orbit 19s linear infinite; transition: opacity .25s ease; }
.brand-trigger:hover .brand-trigger__orbit, .brand-trigger:focus-visible .brand-trigger__orbit { opacity: .58; }
.brand-trigger__n-orbit { position: absolute; z-index: 2; left: -1%; top: 1%; width: 35%; height: 47%; border-radius: 50%; pointer-events: none; }
.brand-trigger__n-orbit::after { content: ""; position: absolute; top: 2%; left: 50%; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan), 0 0 18px rgba(33, 212, 253, .75); }
.brand-trigger__n-orbit--one { animation: n-orbit-one 8s linear infinite; }
.brand-trigger__n-orbit--two { inset: 4% auto auto 1%; width: 31%; height: 42%; animation: n-orbit-two 12s linear infinite; }
.brand-trigger__n-orbit--two::after { width: 5px; background: var(--paper); box-shadow: 0 0 8px var(--paper), 0 0 15px rgba(254, 247, 236, .54); }
.brand-trigger:focus-visible { outline: 2px solid var(--energy); outline-offset: 8px; border-radius: 20px; }
.hero__logo { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)); transform: translate(var(--depth-logo-x), var(--depth-logo-y)); transition: transform .6s ease-out, filter .45s ease; animation: brand-light 4.8s ease-in-out infinite; }
.brand-trigger:hover .hero__logo, .brand-trigger:focus-visible .hero__logo { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(19, 86, 229, .32)); }
@keyframes brand-drift { 0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; } 48% { translate: 0 -9px; rotate: -.28deg; scale: 1.012; } 72% { translate: 0 -5px; rotate: .18deg; scale: 1.006; } }
@keyframes brand-orbit { to { transform: rotate(351deg) scale(.92); } }
@keyframes n-orbit-one { to { transform: rotate(360deg); } }
@keyframes n-orbit-two { to { transform: rotate(-360deg); } }
@keyframes brand-light { 0%, 100% { opacity: 1; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)) brightness(1); } 50% { opacity: .99; filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .66)) brightness(1.055); } }
@keyframes brand-aura { 0%, 100% { opacity: .35; transform: scale(.84); } 50% { opacity: .7; transform: scale(1.03); } }
@keyframes brand-sheen { 0%, 52% { background-position: 180% 0; opacity: 0; } 58% { opacity: .42; } 78% { background-position: -80% 0; opacity: .24; } 100% { background-position: -80% 0; opacity: 0; } }

.hero__copy { max-width: 480px; margin: 3px auto 0; color: var(--ice); font-size: clamp(17px, 4vw, 21px); line-height: 1.5; }
.hero__copy strong { color: var(--paper); }

.hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.hero__tags span { padding: 7px 11px; color: var(--ice); border: 1px solid rgba(183, 200, 219, .2); border-radius: 999px; background: rgba(3, 13, 34, .6); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.hero__replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 15px; padding: 0 14px; color: var(--ice); border: 1px solid rgba(183, 200, 219, .22); border-radius: 999px; background: rgba(3, 13, 34, .62); font: 800 10px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .2s var(--ease); }
.hero__replay svg { width: 22px; height: 18px; fill: none; stroke: currentColor; stroke-width: 4; }
.hero__replay:hover, .hero__replay:focus-visible { color: var(--paper); border-color: var(--cyan); outline: none; transform: translateY(-2px); }

.hero__actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; width: 100%; margin-top: 25px; }
.button { min-height: 55px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border-radius: 17px; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .18s var(--ease), border-color .18s ease, background .18s ease; }
.button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.button .button__arrow { width: 17px; margin-left: auto; }
.button--primary { color: var(--paper); border: 1px solid #2b69f4; background: linear-gradient(135deg, var(--energy), var(--portal)); box-shadow: 0 14px 36px rgba(19, 86, 229, .28), inset 0 1px rgba(255, 255, 255, .18); }
.button--ghost { color: var(--ice); border: 1px solid var(--line); background: rgba(3, 13, 34, .7); }
.button:hover, .button:focus-visible { transform: translateY(-3px); outline: none; }
.button--ghost:hover, .button--ghost:focus-visible { color: var(--paper); border-color: rgba(19, 86, 229, .7); }

section { margin-top: 34px; }

.now-card { position: relative; display: grid; grid-template-columns: 1fr 138px; min-height: 226px; overflow: hidden; color: inherit; border: 1px solid rgba(183, 200, 219, .25); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(7, 24, 57, .96), rgba(0, 64, 186, .25)); box-shadow: var(--shadow); text-decoration: none; isolation: isolate; }
.now-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 88% 35%, rgba(19, 86, 229, .44), transparent 29%), linear-gradient(110deg, transparent 45%, rgba(255, 255, 255, .03)); }
.now-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; background: linear-gradient(120deg, transparent, rgba(254, 247, 236, .55), transparent) border-box; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transform: translateX(-100%); transition: opacity .2s ease, transform .8s var(--ease); }
.now-card:hover::after, .now-card:focus-visible::after { opacity: 1; transform: translateX(100%); }
.now-card:focus-visible { outline: 2px solid var(--energy); outline-offset: 4px; }
.now-card__copy { display: flex; flex-direction: column; justify-content: center; padding: 27px 8px 27px 25px; }
.now-card h2 { margin: 12px 0 8px; font-family: "Bangers", Impact, sans-serif; font-size: clamp(28px, 7vw, 39px); font-weight: 400; line-height: .98; letter-spacing: .03em; }
.now-card p { max-width: 340px; margin: 0; color: var(--ice); font-size: 13px; line-height: 1.5; }
.text-link { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--paper); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.text-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; }
.now-card__visual { position: relative; display: grid; place-items: center; }
.now-card__visual > svg { position: relative; z-index: 2; width: 43px; color: var(--paper); fill: none; stroke: currentColor; stroke-width: 3; filter: drop-shadow(0 0 12px rgba(254, 247, 236, .35)); transition: transform .35s var(--ease); }
.now-card:hover .now-card__visual > svg { transform: scale(1.12); }
.now-card__planet { position: absolute; width: 118px; aspect-ratio: 1; border: 2px solid rgba(254, 247, 236, .55); border-radius: 50%; background: radial-gradient(circle at 38% 30%, #2c70ff, var(--portal) 47%, #021027 72%); box-shadow: 0 0 0 14px rgba(19, 86, 229, .08), 0 0 45px rgba(19, 86, 229, .35); }
.now-card__planet::after { content: ""; position: absolute; inset: 42% -22%; border: 4px solid rgba(254, 247, 236, .75); border-radius: 50%; transform: rotate(-15deg); }

.section-heading { margin-bottom: 18px; }
.section-heading h2 { margin: 8px 0 5px; font-family: "Bangers", Impact, sans-serif; font-size: clamp(31px, 8vw, 44px); font-weight: 400; letter-spacing: .035em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.universe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.universe-card { --accent: var(--energy); --accent-soft: rgba(19, 86, 229, .2); position: relative; min-height: 326px; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 46%, rgba(183, 200, 219, .14)); border-radius: 24px; background: #06142f; box-shadow: 0 18px 46px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .035); transition: transform .28s var(--ease), border-color .28s ease, box-shadow .28s ease; isolation: isolate; }
.universe-card:hover { transform: translateY(-6px) rotate(-.25deg); border-color: var(--accent); box-shadow: 0 24px 58px rgba(0, 0, 0, .38), 0 0 24px var(--accent-soft); }
.universe-card__number { position: absolute; z-index: 6; top: 14px; right: 15px; padding: 5px 7px; color: var(--paper); border: 1px solid rgba(254, 247, 236, .36); border-radius: 999px; background: rgba(1, 0, 0, .52); font: 800 9px/1 "Inter", sans-serif; letter-spacing: .14em; backdrop-filter: blur(7px); }
.universe-card__art { position: relative; display: grid; place-items: center; height: 150px; overflow: hidden; border-bottom: 1px solid rgba(254, 247, 236, .15); isolation: isolate; }
.universe-card__art::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; background-image: radial-gradient(rgba(254, 247, 236, .6) .8px, transparent .9px); background-size: 9px 9px; mask-image: linear-gradient(115deg, #000, transparent 76%); }
.universe-card__art::after { content: ""; position: absolute; inset: 0; z-index: 5; border: 1px solid rgba(254, 247, 236, .06); border-radius: 23px 23px 0 0; pointer-events: none; }
.universe-card__art-label { position: absolute; z-index: 4; left: 13px; bottom: 10px; padding: 5px 8px; color: var(--night); border: 2px solid var(--night); background: var(--paper); box-shadow: 3px 3px 0 var(--night); font: 800 8px/1 "Inter", sans-serif; letter-spacing: .11em; transform: rotate(-2deg); }
.universe-card__illustration { position: relative; z-index: 2; width: 112px; height: 112px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .46)); transform-origin: center; }
.universe-card__body { position: relative; min-height: 176px; padding: 18px 18px 20px; background: linear-gradient(160deg, rgba(7, 24, 57, .98), rgba(3, 13, 34, .96)); }
.universe-card__body::after { content: ""; position: absolute; right: -28px; bottom: -38px; width: 100px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 50%; box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 30px color-mix(in srgb, var(--accent) 3%, transparent); }
.universe-card__eyebrow { position: relative; z-index: 1; display: block; margin-bottom: 7px; color: color-mix(in srgb, var(--accent) 68%, var(--paper)); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.universe-card h3 { position: relative; z-index: 1; margin: 0 0 8px; font-family: "Bangers", Impact, sans-serif; font-size: 27px; font-weight: 400; letter-spacing: .045em; }
.universe-card p { position: relative; z-index: 1; margin: 0; color: #aebed0; font-size: 12px; line-height: 1.55; }

.universe-card--heroes { --accent: #ffb83f; --accent-soft: rgba(255, 89, 77, .24); }
.universe-card--heroes .universe-card__art { background: radial-gradient(circle at 73% 26%, rgba(255, 216, 77, .72), transparent 17%), repeating-linear-gradient(135deg, rgba(254, 247, 236, .08) 0 2px, transparent 2px 11px), linear-gradient(145deg, #b31d35, #3b091b 72%); }
.universe-card__illustration--gauntlet { width: 106px; animation: card-gauntlet 4.8s ease-in-out infinite; }
.art-spark { position: absolute; z-index: 1; width: 6px; aspect-ratio: 1; background: var(--paper); transform: rotate(45deg); box-shadow: 0 0 12px #ffd84d; animation: card-spark 2.8s ease-in-out infinite; }
.art-spark--one { left: 18%; top: 25%; }
.art-spark--two { right: 16%; bottom: 22%; animation-delay: -1.2s; }

.universe-card--games { --accent: #b9ff67; --accent-soft: rgba(185, 255, 103, .2); border-color: rgba(185, 255, 103, .42); }
.universe-card--games .universe-card__art { background: radial-gradient(circle at 72% 23%, rgba(202, 255, 143, .25), transparent 18%), repeating-linear-gradient(112deg, transparent 0 17px, rgba(255, 255, 255, .055) 18px 20px, transparent 21px 39px), linear-gradient(145deg, #34422b, #090d0a 72%); }
.universe-card--games .universe-card__art::before { opacity: .42; background: radial-gradient(circle at 17% 31%, rgba(154, 18, 38, .95) 0 3px, transparent 4px), radial-gradient(circle at 25% 39%, rgba(154, 18, 38, .85) 0 7px, transparent 8px), repeating-linear-gradient(24deg, transparent 0 14px, rgba(254, 247, 236, .14) 15px 16px, transparent 17px 31px); background-size: 62px 62px, 104px 104px, auto; mask-image: none; }
.universe-card--games .universe-card__body { background: linear-gradient(160deg, #182317, #050806 88%); }
.universe-card--games .universe-card__art-label { color: #e5ffc9; border-color: #080b09; background: #25341f; box-shadow: 3px 3px 0 #080b09; }
.universe-card__illustration--zombie-head { width: 112px; height: 112px; animation: card-zombie-head 4.6s ease-in-out infinite; }
.game-creeper, .game-enderman { position: absolute; z-index: 1; overflow: visible; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); }
.game-creeper { right: 9px; bottom: 12px; width: 58px; height: 58px; transform: rotate(7deg); animation: game-creeper 5s steps(2, jump-none) infinite; }
.game-enderman { left: 9px; top: 13px; width: 58px; height: 58px; transform: rotate(-8deg); animation: game-enderman 4.4s ease-in-out infinite; }
.blood-swipe { position: absolute; z-index: 1; width: 90px; height: 18px; border-radius: 60% 20% 55% 30%; background: #8f1629; filter: drop-shadow(0 0 7px rgba(143, 22, 41, .5)); transform: rotate(-18deg); }
.blood-swipe::after { content: ""; position: absolute; right: 8px; top: 13px; width: 8px; height: 17px; border-radius: 0 0 8px 8px; background: #8f1629; }
.blood-swipe--one { left: -16px; top: 30px; }
.blood-swipe--two { right: -28px; bottom: 22px; width: 76px; transform: rotate(13deg); }
.game-scratch { position: absolute; z-index: 1; inset: 12px 18px auto auto; width: 48px; height: 64px; border-left: 3px solid rgba(230, 255, 204, .25); border-right: 2px solid rgba(230, 255, 204, .2); transform: rotate(18deg) skewX(-12deg); }

.universe-card--film { --accent: var(--amber); --accent-soft: rgba(255, 155, 69, .2); }
.universe-card--film .universe-card__art { background: repeating-linear-gradient(90deg, rgba(1, 0, 0, .62) 0 7px, transparent 7px 20px), radial-gradient(circle at 70% 26%, rgba(255, 211, 121, .8), transparent 19%), linear-gradient(145deg, #c84e2f, #27101b 74%); }
.universe-card__illustration--clapper { width: 116px; animation: card-clapper 5.2s ease-in-out infinite; }
.film-frame { position: absolute; width: 50px; height: 34px; border: 2px solid rgba(254, 247, 236, .55); background: rgba(1, 0, 0, .38); transform: rotate(-9deg); }
.film-frame--one { left: 7%; top: 16%; }
.film-frame--two { right: 6%; bottom: 13%; transform: rotate(8deg); }

.universe-card--theory { --accent: var(--violet); --accent-soft: rgba(139, 108, 255, .22); }
.universe-card--theory .universe-card__art { background: linear-gradient(118deg, transparent 0 28%, rgba(33, 212, 253, .15) 29% 31%, transparent 32% 62%, rgba(255, 77, 166, .13) 63% 65%, transparent 66%), repeating-linear-gradient(150deg, rgba(139, 108, 255, .12) 0 2px, transparent 2px 18px), linear-gradient(145deg, #2a1761, #050d24); }
.universe-card__illustration--mjolnir { width: 158px; height: 122px; animation: card-mjolnir 5.2s ease-in-out infinite; }
.hammer-lightning { position: absolute; z-index: 1; width: 96px; height: 44px; background: linear-gradient(90deg, transparent, rgba(33, 212, 253, .9), rgba(254, 247, 236, .8), transparent); clip-path: polygon(0 47%, 31% 43%, 42% 4%, 51% 41%, 100% 35%, 58% 56%, 50% 94%, 40% 59%, 0 67%); opacity: .45; animation: hammer-lightning 3.2s ease-in-out infinite; }
.hammer-lightning--one { left: -10px; top: 27px; transform: rotate(-13deg); }
.hammer-lightning--two { right: -11px; bottom: 23px; transform: rotate(15deg) scaleX(-1); animation-delay: -1.6s; }

.universe-card--anime { --accent: var(--magenta); --accent-soft: rgba(255, 77, 166, .22); }
.universe-card--anime .universe-card__art { background: repeating-linear-gradient(164deg, transparent 0 9px, rgba(254, 247, 236, .15) 10px 12px, transparent 13px 22px), radial-gradient(circle at 55% 48%, rgba(224, 40, 62, .48), transparent 28%), linear-gradient(135deg, #7d153f, #16132d 70%); }
.universe-card__ninja-eyes { position: absolute; z-index: 3; top: 14px; left: 50%; width: 210px; height: 120px; overflow: visible; fill: none; stroke: currentColor; opacity: 1; transform: translateX(-50%) rotate(-2deg); filter: drop-shadow(0 11px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(224, 40, 62, .44)); animation: anime-eyes 5.6s ease-in-out infinite; }
.anime-speed { position: absolute; z-index: 2; left: 7%; width: 62%; height: 3px; background: linear-gradient(90deg, transparent, var(--paper)); transform-origin: right; transform: rotate(-14deg); animation: anime-speed 2.6s ease-in-out infinite; }
.anime-speed--one { top: 25%; }
.anime-speed--two { top: 45%; left: 0; animation-delay: -.8s; }
.anime-speed--three { top: 65%; left: 12%; animation-delay: -1.5s; }

.universe-card--comicbook { --accent: #ff4057; --accent-soft: rgba(255, 64, 87, .2); }
.universe-card--comicbook .universe-card__art { background: radial-gradient(rgba(1, 0, 0, .35) 1.4px, transparent 1.6px), linear-gradient(125deg, #f2debd 0 48%, #1356e5 49% 72%, #c32a3e 73%); background-size: 8px 8px, auto; }
.universe-card__illustration--comic { z-index: 3; width: 128px; transform: rotate(-7deg); animation: card-comic-pop 4.8s ease-in-out infinite; }
.comic-shield { position: absolute; z-index: 2; right: 12px; top: 12px; width: 76px; height: 76px; overflow: visible; transform: rotate(11deg); filter: drop-shadow(0 8px 7px rgba(0,0,0,.4)); }
.comic-burst { position: absolute; z-index: 1; left: 5px; top: 4px; width: 82px; height: 82px; background: #ffcc45; clip-path: polygon(50% 0,61% 31%,86% 14%,70% 39%,100% 50%,68% 59%,86% 86%,60% 69%,50% 100%,40% 69%,14% 86%,31% 60%,0 50%,31% 40%,14% 14%,40% 31%); transform: rotate(-8deg); }

@keyframes card-gauntlet { 0%, 70%, 100% { transform: rotate(-4deg) scale(1); } 80% { transform: rotate(5deg) scale(1.07); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .46)) drop-shadow(0 0 12px #ffd84d); } 90% { transform: rotate(-2deg) scale(1.02); } }
@keyframes card-spark { 0%, 100% { opacity: .35; transform: rotate(45deg) scale(.7); } 50% { opacity: 1; transform: rotate(45deg) scale(1.3); } }
@keyframes card-zombie-head { 0%, 100% { transform: translateY(5px) rotate(-2deg); } 46% { transform: translateY(-6px) rotate(3deg); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .46)) drop-shadow(0 0 8px rgba(185, 255, 103, .35)); } 52% { transform: translateY(-5px) rotate(-2deg) scaleY(.96); } }
@keyframes game-creeper { 0%, 72%, 100% { transform: rotate(7deg) translate(0, 0); } 82% { transform: rotate(3deg) translate(-4px, -3px) scale(1.06); } }
@keyframes game-enderman { 0%, 100% { transform: rotate(-8deg) translateY(0); opacity: .72; } 50% { transform: rotate(-4deg) translateY(-6px); opacity: 1; filter: drop-shadow(0 0 8px rgba(214, 76, 255, .75)); } }
@keyframes card-clapper { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-9deg) scale(1.04); } 85% { transform: rotate(2deg); } }
@keyframes card-mjolnir { 0%, 100% { transform: translateY(2px) rotate(-2deg) scale(.98); } 47% { transform: translateY(-6px) rotate(1.5deg) scale(1.025); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .46)) drop-shadow(0 0 11px rgba(33, 212, 253, .44)); } 52% { transform: translateY(-4px) rotate(-1deg) scale(1.015); } }
@keyframes hammer-lightning { 0%, 100% { opacity: .18; scale: .72; } 45% { opacity: .82; scale: 1.05; } 53% { opacity: .32; scale: .9; } 61% { opacity: .92; scale: 1.12; } }
@keyframes anime-eyes { 0%, 43%, 52%, 100% { transform: translateX(-50%) rotate(-2deg) scaleY(1); } 48% { transform: translateX(-50%) rotate(-2deg) scaleY(.1); } }
@keyframes anime-speed { 0%, 100% { opacity: .16; transform: rotate(-14deg) scaleX(.35); } 50% { opacity: .8; transform: rotate(-14deg) scaleX(1); } }
@keyframes card-comic-pop { 0%, 72%, 100% { transform: rotate(-7deg) scale(1); } 80% { transform: rotate(-3deg) scale(1.08); } 88% { transform: rotate(-8deg) scale(.98); } }

.link-stack { display: flex; flex-direction: column; gap: 10px; }
.link-card { --accent: var(--energy); --accent-soft: rgba(19, 86, 229, .12); position: relative; display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; min-height: 82px; padding: 13px 17px; overflow: hidden; color: inherit; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 19px; background: rgba(5, 20, 51, .88); background: linear-gradient(100deg, rgba(5, 20, 51, .9), color-mix(in srgb, var(--accent) 8%, rgba(5, 20, 51, .82))); text-decoration: none; transition: transform .2s var(--ease), border-color .2s ease, background .2s ease; }
.link-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 58%, var(--accent-soft)); opacity: .34; transition: opacity .2s ease; }
.link-card:hover, .link-card:focus-visible { transform: translateX(4px); border-color: var(--accent); background: rgba(7, 28, 67, .95); outline: none; }
.link-card:hover::before, .link-card:focus-visible::before { opacity: 1; }
.link-card__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; aspect-ratio: 1; color: var(--paper); border: 1px solid rgba(183, 200, 219, .34); border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--paper)); border-radius: 16px; background: linear-gradient(145deg, rgba(19, 86, 229, .72), var(--accent-soft)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, var(--night)), var(--accent-soft)); box-shadow: 0 0 22px var(--accent-soft); }
.link-card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.link-card--tiktok .link-card__icon,
.link-card--whatsapp .link-card__icon { border-radius: 50%; }
.link-card--tiktok .link-card__icon svg,
.link-card--whatsapp .link-card__icon svg { width: 28px; height: 28px; }
.link-card--tiktok { --accent: var(--magenta); --accent-soft: rgba(255, 77, 166, .13); }
.link-card--whatsapp { --accent: #37d67a; --accent-soft: rgba(55, 214, 122, .13); }
.link-card--mail { --accent: var(--amber); --accent-soft: rgba(255, 155, 69, .13); }
.link-card--tiktok .link-card__icon svg { animation: link-note 3.8s ease-in-out infinite; }
.link-card--whatsapp .link-card__icon svg { animation: link-ring 4.6s ease-in-out infinite; }
.link-card--mail .link-card__icon svg { animation: link-mail 5.2s ease-in-out infinite; }
@keyframes link-note { 0%, 78%, 100% { transform: translateY(0) rotate(0); } 84% { transform: translateY(-3px) rotate(-4deg); } 91% { transform: translateY(1px) rotate(2deg); } }
@keyframes link-ring { 0%, 82%, 100% { transform: rotate(0); } 87% { transform: rotate(-7deg); } 93% { transform: rotate(7deg); } }
@keyframes link-mail { 0%, 84%, 100% { transform: translateX(0); } 90% { transform: translateX(3px); } 95% { transform: translateX(-2px); } }
.link-card__copy { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.link-card__copy strong { font-family: "Bangers", Impact, sans-serif; font-size: 22px; font-weight: 400; letter-spacing: .04em; }
.link-card__copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.link-card__action { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; color: var(--ice); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.link-card__action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 3; transition: transform .2s ease; }
.link-card:hover .link-card__action svg { transform: translateX(3px); }

.brand-finale { position: relative; display: grid; place-items: center; min-height: 510px; margin-top: 58px; overflow: hidden; border: 1px solid rgba(19, 86, 229, .32); border-radius: 34px; background: radial-gradient(circle at 50% 46%, rgba(19, 86, 229, .32), transparent 34%), linear-gradient(160deg, rgba(5, 20, 51, .98), rgba(1, 0, 0, .98)); box-shadow: 0 30px 90px rgba(0, 0, 0, .42), inset 0 0 70px rgba(19, 86, 229, .08); text-align: center; isolation: isolate; }
.brand-finale::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .25; background-image: radial-gradient(rgba(254, 247, 236, .7) .8px, transparent .9px); background-size: 13px 13px; mask-image: radial-gradient(circle at center, #000, transparent 76%); animation: finale-stars 22s linear infinite; }
.brand-finale::after { content: ""; position: absolute; inset: auto -10% -38%; z-index: -1; height: 58%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at center, rgba(19, 86, 229, .33), transparent 67%); animation: finale-horizon 5.8s ease-in-out infinite; }
.brand-finale__universe { position: absolute; inset: 0; pointer-events: none; }
.brand-finale__ring { position: absolute; top: 48%; left: 50%; width: 78%; height: 38%; border: 2px solid rgba(33, 212, 253, .3); border-radius: 50%; transform: translate(-50%, -50%) rotate(-10deg); box-shadow: 0 0 24px rgba(33, 212, 253, .12); animation: finale-ring 15s linear infinite; }
.brand-finale__ring--two { width: 62%; height: 54%; border-color: rgba(254, 247, 236, .16); transform: translate(-50%, -50%) rotate(18deg); animation-direction: reverse; animation-duration: 20s; }
.brand-finale__satellite { position: absolute; z-index: 2; width: 62px; height: 62px; overflow: visible; filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .48)); }
.brand-finale__satellite--shield { left: 7%; top: 19%; animation: finale-satellite-one 8s ease-in-out infinite; }
.brand-finale__satellite--avengers { right: 8%; top: 23%; animation: finale-satellite-two 9.4s ease-in-out infinite; }
.brand-finale__kicker { align-self: end; z-index: 4; margin-bottom: -10px; color: var(--ice); font-size: 9px; font-weight: 800; letter-spacing: .24em; }
.brand-finale__logo-wrap { position: relative; z-index: 3; width: min(96%, 600px); animation: finale-logo 5.6s ease-in-out infinite; }
.brand-finale__logo-wrap img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .72)) drop-shadow(0 0 11px rgba(19, 86, 229, .25)); }
.brand-finale__shine { position: absolute; z-index: 2; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(254, 247, 236, .78) 49%, rgba(33, 212, 253, .34) 53%, transparent 66%) 180% 0 / 230% 100% no-repeat; -webkit-mask: url("assets/brand/nerdolaverso-logo.webp") center / contain no-repeat; mask: url("assets/brand/nerdolaverso-logo.webp") center / contain no-repeat; animation: finale-shine 4.8s ease-in-out infinite; }
.brand-finale > p { align-self: start; z-index: 4; margin: -22px 0 0; color: var(--paper); font-family: "Bangers", Impact, sans-serif; font-size: 24px; letter-spacing: .05em; }
@keyframes finale-stars { to { background-position: 52px 39px; } }
@keyframes finale-horizon { 0%, 100% { opacity: .45; transform: scale(.92); } 50% { opacity: .8; transform: scale(1.08); } }
@keyframes finale-ring { to { transform: translate(-50%, -50%) rotate(350deg); } }
@keyframes finale-satellite-one { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(12px, -15px) rotate(7deg); } }
@keyframes finale-satellite-two { 0%, 100% { transform: translate(0, 0) rotate(6deg); } 50% { transform: translate(-14px, 13px) rotate(-8deg); } }
@keyframes finale-logo { 0%, 100% { transform: translateY(0) scale(1); } 48% { transform: translateY(-13px) scale(1.025); } 72% { transform: translateY(-7px) scale(1.012); } }
@keyframes finale-shine { 0%, 46% { background-position: 180% 0; opacity: 0; } 56% { opacity: .58; } 78% { background-position: -80% 0; opacity: .25; } 100% { background-position: -80% 0; opacity: 0; } }

.footer { display: flex; flex-direction: column; align-items: center; margin-top: 22px; padding-top: 24px; color: var(--muted); border-top: 1px solid var(--line); text-align: center; }
.footer p { margin: 10px 0 5px; font-size: 12px; }
.footer small { font-size: 10px; }

.easter-egg { position: fixed; z-index: 80; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); padding: 13px 18px; color: var(--night); border: 2px solid var(--night); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 var(--energy); font-family: "Bangers", Impact, sans-serif; font-size: 23px; letter-spacing: .04em; opacity: 0; pointer-events: none; transform: translate(-50%, 20px) rotate(-2deg) scale(.8); transition: opacity .2s ease, transform .35s var(--ease); white-space: nowrap; }
.easter-egg.is-visible { opacity: 1; transform: translate(-50%, 0) rotate(-2deg) scale(1); }

.reveal { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s var(--ease); }
.motion-ready .reveal { opacity: 0; transform: translateY(18px); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 740px) {
  .cosmic-token { width: 68px; opacity: .62; }
  .cosmic-token--gauntlet { left: -8px; --x1: 8px; --x2: 2px; }
  .cosmic-token--ninja { right: -17px; width: 96px; --x1: -7px; --x2: 5px; }
  .cosmic-token--zombie { left: -10px; --x1: 6px; --x2: 12px; }
  .cosmic-token--creeper { right: -11px; --x1: -8px; --x2: 4px; }
  .cosmic-token--avengers { left: -8px; width: 72px; --x1: 8px; --x2: -3px; }
  .cosmic-token--shield { right: -8px; --x1: -7px; --x2: 8px; }
  .cosmic-token:nth-child(n + 8) { display: none; }
  .cosmos__starstream--near { opacity: .09; }
}

@media (max-width: 520px) {
  .page-shell { width: min(100% - 24px, 650px); padding-top: max(20px, env(safe-area-inset-top)); }
  .hero { padding-top: 22px; }
  .hero__actions { grid-template-columns: 1fr; }
  .button { min-height: 52px; }
  .now-card { grid-template-columns: 1fr 104px; min-height: 218px; }
  .now-card__copy { padding: 23px 2px 23px 20px; }
  .now-card__planet { width: 88px; }
  .now-card__visual > svg { width: 34px; }
  .universe-grid { grid-template-columns: 1fr; }
  .link-card { grid-template-columns: 50px 1fr 22px; gap: 11px; padding: 12px; }
  .link-card__icon { width: 50px; }
  .link-card__action { font-size: 0; }
  .link-card__action svg { width: 20px; height: 20px; }
  .intro__signal { letter-spacing: .17em; }
  .intro__realms { grid-template-columns: repeat(2, 1fr); }
  .intro-realm { min-height: 50svh; }
  .intro-realm b { writing-mode: horizontal-tb; font-size: 17px; }
  .intro-realm svg { width: 46px; height: 46px; }
  .intro-realm--comic, .intro-realm--anime { align-self: start; }
  .intro-realm--games, .intro-realm--cinema { align-self: end; grid-row: 2; }
  .intro-realm--games { grid-column: 1; }
  .intro-realm--cinema { grid-column: 2; }
  .intro-icon { width: 78px; }
  .intro-icon--ninja { width: 104px; }
  .intro-icon--anime { width: 82px; }
  .intro-icon--game { --tx: -88px !important; --ty: -62px !important; }
  .intro-icon--film { --tx: 88px !important; --ty: -63px !important; }
  .intro-icon--comic { --tx: -95px !important; --ty: 54px !important; }
  .intro-icon--ninja { --tx: 95px !important; --ty: 55px !important; }
  .intro-icon--gauntlet { --tx: -44px !important; --ty: 105px !important; }
  .intro-icon--anime { --tx: 38px !important; --ty: -116px !important; }
  .intro__brand { width: min(510px, 91vw); }
  .brand-trigger__n-orbit { opacity: .72; }
  .universe-card { min-height: 310px; }
  .universe-card__art { height: 146px; }
  .universe-card__body { min-height: 164px; }
  .brand-finale { min-height: 430px; border-radius: 27px; }
  .brand-finale__logo-wrap { width: 102%; }
  .brand-finale__satellite { width: 48px; height: 48px; }
  .brand-finale__kicker { letter-spacing: .17em; }
  .cosmic-token:nth-child(n + 8) { display: none; }
}

@media (max-width: 350px) {
  .page-shell { width: min(100% - 18px, 650px); }
  .now-card { grid-template-columns: 1fr; }
  .now-card__visual { display: none; }
  .hero__tags span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .intro { display: none !important; }
  .reveal { opacity: 1; transform: none; }
  .cosmos__glow, .hero__logo { transform: none; }
  .cosmos__starstream, .cosmos__stars, .cosmic-token, .cosmic-token svg, .brand-trigger, .brand-trigger::before, .brand-trigger::after, .brand-trigger__orbit, .brand-trigger__n-orbit, .hero__logo, .universe-card__illustration, .universe-card__ninja-eyes, .game-creeper, .game-enderman, .art-spark, .blood-swipe, .hammer-lightning, .anime-speed, .brand-finale::before, .brand-finale::after, .brand-finale__ring, .brand-finale__satellite, .brand-finale__logo-wrap, .brand-finale__shine, .link-card__icon svg { animation: none !important; }
}

.reduce-motion-live .intro { display: none !important; }
.reduce-motion-live .cosmos__starstream, .reduce-motion-live .cosmos__stars, .reduce-motion-live .cosmic-token, .reduce-motion-live .cosmic-token svg, .reduce-motion-live .brand-trigger, .reduce-motion-live .brand-trigger::before, .reduce-motion-live .brand-trigger::after, .reduce-motion-live .brand-trigger__orbit, .reduce-motion-live .brand-trigger__n-orbit, .reduce-motion-live .hero__logo, .reduce-motion-live .universe-card__illustration, .reduce-motion-live .universe-card__ninja-eyes, .reduce-motion-live .brand-finale::before, .reduce-motion-live .brand-finale::after, .reduce-motion-live .brand-finale__ring, .reduce-motion-live .brand-finale__satellite, .reduce-motion-live .brand-finale__logo-wrap, .reduce-motion-live .brand-finale__shine, .reduce-motion-live .link-card__icon svg,
.data-saver .cosmos__starstream, .data-saver .cosmos__stars, .data-saver .cosmic-token { animation: none !important; }
.data-saver .cosmos__starstream { display: none; }
.page-paused * { animation-play-state: paused !important; }

@media (prefers-contrast: more) {
  :root { --muted: #c6d3e3; --line: rgba(254, 247, 236, .48); }
  .link-card, .universe-card, .now-card { border-width: 2px; }
}