/* ═══════════════════════════════════════════════════════════════════
   TEMAS E MOVIMENTO

   Seis cenários animados, um por família de jogo, no mesmo princípio
   do site de GTA: cada parte do acervo tem tratamento visual próprio
   em vez de um seletor global de tema.

   Toda animação usa só transform e opacity — as duas propriedades que
   o navegador anima sem recalcular layout. Tudo é desligado em bloco
   no fim do arquivo quando o sistema pede menos movimento.
   ═══════════════════════════════════════════════════════════════════ */

/* ── palco base ───────────────────────────────────────────────────── */
.scene{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  --a:var(--amber);--b:var(--ice);
  background:#07080a;
}
.scene .lyr{position:absolute;inset:-25%;display:block;will-change:transform,opacity}
.scene::after{
  content:"";position:absolute;inset:0;z-index:4;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 35%,transparent 45%,rgba(5,6,7,.72) 100%);
}

/* ── 1. RUÍNAS — Segunda Guerra ───────────────────────────────────── */
/* brasa subindo, fumaça atravessando, horizonte em chamas */
.scene-ruins{background:linear-gradient(180deg,#0d0e0a 0%,#141209 55%,#07080a 100%)}
.scene-ruins .l1{
  background-image:
    radial-gradient(2px 2px at 12% 80%,var(--b),transparent),
    radial-gradient(1.6px 1.6px at 28% 92%,var(--b),transparent),
    radial-gradient(2.4px 2.4px at 47% 74%,var(--b),transparent),
    radial-gradient(1.4px 1.4px at 63% 88%,var(--b),transparent),
    radial-gradient(2px 2px at 79% 70%,var(--b),transparent),
    radial-gradient(1.8px 1.8px at 91% 86%,var(--b),transparent);
  opacity:.75;animation:ember 9s linear infinite;
}
.scene-ruins .l2{
  background:radial-gradient(60% 40% at 30% 70%,color-mix(in srgb,var(--a) 26%,transparent),transparent 70%),
             radial-gradient(50% 35% at 75% 60%,color-mix(in srgb,var(--a) 18%,transparent),transparent 70%);
  filter:blur(14px);animation:drift 26s ease-in-out infinite alternate;
}
.scene-ruins .l3{
  background:linear-gradient(0deg,color-mix(in srgb,var(--b) 34%,transparent) 0%,transparent 32%);
  animation:glowPulse 6s ease-in-out infinite alternate;
}
@keyframes ember{
  from{transform:translate3d(0,12%,0)}
  to{transform:translate3d(-3%,-30%,0)}
}

/* ── 2. FRIO — Guerra Fria e Black Ops ────────────────────────────── */
/* neve caindo, varredura de radar, brasa vermelha no horizonte */
.scene-cold{background:linear-gradient(180deg,#080a0d 0%,#0d1014 60%,#07080a 100%)}
.scene-cold .l1{
  background-image:
    radial-gradient(1.6px 1.6px at 10% 10%,#dfe6ee,transparent),
    radial-gradient(1.2px 1.2px at 31% 42%,#dfe6ee,transparent),
    radial-gradient(1.8px 1.8px at 55% 18%,#dfe6ee,transparent),
    radial-gradient(1.3px 1.3px at 72% 55%,#dfe6ee,transparent),
    radial-gradient(1.6px 1.6px at 88% 28%,#dfe6ee,transparent),
    radial-gradient(1.1px 1.1px at 44% 72%,#dfe6ee,transparent);
  background-size:100% 100%;opacity:.5;animation:snow 14s linear infinite;
}
.scene-cold .l2{
  background:conic-gradient(from 0deg at 50% 60%,
    color-mix(in srgb,var(--a) 30%,transparent) 0deg,transparent 42deg,transparent 360deg);
  opacity:.5;animation:sweep 7s linear infinite;transform-origin:50% 60%;
}
.scene-cold .l3{
  background:radial-gradient(70% 42% at 50% 100%,color-mix(in srgb,var(--a) 34%,transparent),transparent 72%);
  animation:glowPulse 5s ease-in-out infinite alternate;
}
@keyframes snow{
  from{transform:translate3d(0,-22%,0)}
  to{transform:translate3d(-4%,26%,0)}
}
@keyframes sweep{to{transform:rotate(360deg)}}

/* ── 3. DESERTO — Modern Warfare ──────────────────────────────────── */
/* sol pulsando, areia correndo, ar tremendo de calor */
.scene-desert{background:linear-gradient(180deg,#13100a 0%,#1a1409 52%,#07080a 100%)}
.scene-desert .l1{
  background:radial-gradient(34% 34% at 72% 26%,color-mix(in srgb,var(--a) 55%,transparent),transparent 68%);
  filter:blur(6px);animation:sunPulse 7s ease-in-out infinite alternate;
}
.scene-desert .l2{
  background-image:repeating-linear-gradient(100deg,
    color-mix(in srgb,var(--b) 16%,transparent) 0 2px,transparent 2px 26px);
  opacity:.5;animation:sand 18s linear infinite;
}
.scene-desert .l3{
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.05) 0 1px,transparent 1px 7px);
  animation:haze 3.4s ease-in-out infinite alternate;
}
@keyframes sunPulse{
  from{opacity:.55;transform:scale(1)}
  to{opacity:.85;transform:scale(1.08)}
}
@keyframes sand{
  from{transform:translate3d(-6%,0,0)}
  to{transform:translate3d(6%,0,0)}
}
@keyframes haze{
  from{transform:translate3d(0,0,0) scaleY(1)}
  to{transform:translate3d(0,-1.5%,0) scaleY(1.04)}
}

/* ── 4. NÉON — futuros próximos ───────────────────────────────────── */
/* aurora derivando sobre uma grade em fuga */
.scene-neon{background:linear-gradient(180deg,#070a12 0%,#0a0d18 55%,#07080a 100%)}
.scene-neon .l1{
  background:
    radial-gradient(46% 40% at 26% 32%,color-mix(in srgb,var(--a) 42%,transparent),transparent 68%),
    radial-gradient(42% 36% at 74% 58%,color-mix(in srgb,var(--b) 40%,transparent),transparent 70%);
  filter:blur(24px);animation:aurora 22s ease-in-out infinite alternate;
}
.scene-neon .l2{
  inset:auto -25% -30% -25%;height:78%;
  background-image:
    linear-gradient(color-mix(in srgb,var(--a) 34%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--a) 34%,transparent) 1px,transparent 1px);
  background-size:56px 56px;
  transform:perspective(360px) rotateX(70deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 85%);
  mask-image:linear-gradient(0deg,#000 10%,transparent 85%);
  animation:gridRun 4.5s linear infinite;
}
.scene-neon .l3{
  background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--b) 20%,transparent) 100%);
  animation:glowPulse 6s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.05)}
}
@keyframes gridRun{
  from{background-position:0 0,0 0}
  to{background-position:0 56px,56px 0}
}

/* ── 5. ESPAÇO — Infinite Warfare ─────────────────────────────────── */
/* campo de estrelas, limbo de planeta, nebulosa lenta */
.scene-space{background:radial-gradient(120% 90% at 50% 20%,#0a0f1a 0%,#05070c 60%,#04050a 100%)}
.scene-space .l1{
  background-image:
    radial-gradient(1.4px 1.4px at 8% 18%,#fff,transparent),
    radial-gradient(1px 1px at 22% 62%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 38% 30%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 51% 76%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 67% 22%,#fff,transparent),
    radial-gradient(1px 1px at 79% 58%,#fff,transparent),
    radial-gradient(1.7px 1.7px at 91% 36%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 15% 88%,#fff,transparent);
  opacity:.8;animation:starDrift 40s linear infinite;
}
.scene-space .l2{
  background:radial-gradient(44% 44% at 76% 84%,color-mix(in srgb,var(--a) 46%,transparent),transparent 62%);
  filter:blur(10px);animation:glowPulse 9s ease-in-out infinite alternate;
}
.scene-space .l3{
  background:radial-gradient(58% 34% at 26% 26%,color-mix(in srgb,var(--b) 16%,transparent),transparent 72%);
  filter:blur(30px);animation:drift 34s ease-in-out infinite alternate;
}
@keyframes starDrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-6%,3%,0)}
}

/* ── 6. AETHER — Zombies ──────────────────────────────────────────── */
/* fenda pulsando, motes subindo, oscilação cromática */
.scene-aether{background:radial-gradient(110% 90% at 50% 55%,#120b1c 0%,#0a0710 58%,#07080a 100%)}
.scene-aether .l1{
  background:conic-gradient(from 180deg at 50% 50%,
    transparent 0deg,color-mix(in srgb,var(--a) 42%,transparent) 40deg,
    transparent 90deg,color-mix(in srgb,var(--b) 30%,transparent) 210deg,transparent 300deg);
  filter:blur(22px);opacity:.75;animation:riftSpin 26s linear infinite;
}
.scene-aether .l2{
  background-image:
    radial-gradient(2.4px 2.4px at 18% 86%,var(--b),transparent),
    radial-gradient(1.8px 1.8px at 36% 94%,var(--a),transparent),
    radial-gradient(2.8px 2.8px at 58% 78%,var(--b),transparent),
    radial-gradient(1.6px 1.6px at 74% 90%,var(--a),transparent),
    radial-gradient(2.2px 2.2px at 88% 82%,var(--b),transparent);
  opacity:.8;animation:ember 13s linear infinite;
}
.scene-aether .l3{
  background:radial-gradient(40% 40% at 50% 50%,color-mix(in srgb,var(--a) 34%,transparent),transparent 70%);
  animation:riftPulse 3.6s ease-in-out infinite alternate;
}
@keyframes riftSpin{to{transform:rotate(360deg)}}
@keyframes riftPulse{
  from{opacity:.35;transform:scale(.9)}
  to{opacity:.8;transform:scale(1.12)}
}

/* ── compartilhadas ───────────────────────────────────────────────── */
@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(2%,1%,0) scale(1.07)}
}
@keyframes glowPulse{
  from{opacity:.45}
  to{opacity:.95}
}

/* ═══════════════════════════════════════════════════════════════════
   APLICAÇÃO: abertura temática do dossiê de jogo
   ═══════════════════════════════════════════════════════════════════ */
.m-hero-game{position:relative;aspect-ratio:16/6.4;overflow:hidden;border-bottom:1px solid var(--line)}
.m-hero-game .art-poster{position:relative;z-index:2;height:100%;opacity:.92;mix-blend-mode:luminosity}
.m-hero-game .scene{z-index:1}
.m-hero-game .m-hero-tag{
  position:absolute;left:0;right:0;bottom:0;z-index:5;padding:10px 30px;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(0deg,rgba(5,6,7,.94),transparent);
  font-family:"Share Tech Mono",monospace;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-2);
}
.m-hero-game .m-hero-tag b{color:var(--gt-a,var(--amber));font-weight:400}
.m-hero-game .m-hero-tag .bar{
  flex:1;height:1px;background:linear-gradient(90deg,var(--gt-a,var(--amber)),transparent);
}
@media (max-width:640px){.m-hero-game .m-hero-tag{padding:8px 20px;font-size:9.5px;letter-spacing:.16em}}

/* o dossiê inteiro assume as cores do jogo */
.modal.themed{--tone:var(--gt-a)}
.modal.themed .m-sec h4{color:var(--gt-a)}
.modal.themed .m-code{color:var(--gt-a)}
.modal.themed .m-head{--tone:var(--gt-a)}
.modal.themed .quote{border-left-color:var(--gt-a)}
.modal.themed .m-rel button:hover{border-color:var(--gt-b);color:var(--gt-b)}

/* faixa fina de cor no topo do cartão do jogo */
.card.art-wide .card-theme{
  position:absolute;left:0;right:0;top:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--gt-a),var(--gt-b));
}

/* ═══════════════════════════════════════════════════════════════════
   TICKER — faixa de transmissão contínua
   ═══════════════════════════════════════════════════════════════════ */
.ticker{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(90deg,#08090b,#0d1014,#08090b);
  padding:9px 0;margin:0;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,#07080a,transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,#07080a,transparent)}
.ticker-track{display:flex;width:max-content;animation:tickerRun 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  display:flex;align-items:center;gap:12px;padding:0 26px;white-space:nowrap;
  font-family:"Share Tech Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);
}
.ticker-item b{color:var(--bone-2);font-weight:400}
.ticker-item i{width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);flex:0 0 auto}
@keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════════════════
   MOVIMENTO DE INTERFACE
   ═══════════════════════════════════════════════════════════════════ */

/* contador: o número sobe até o valor final quando entra na tela */
.counting{font-variant-numeric:tabular-nums}

/* embaralhamento do título da seção ao aparecer */
.sec-tt h2 em{position:relative}
.scrambling{color:var(--amber)}

/* inclinação leve do cartão sob o cursor */
.card{transform-style:preserve-3d}
.card.tilt{transition:transform .12s ease-out,border-color .2s,box-shadow .2s}

/* varredura de luz que atravessa o cartão no hover */
.card.has-art .card-art::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-120%);
}
.card.has-art:hover .card-art::before{
  animation:cardShine .85s ease-out;
}
@keyframes cardShine{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}

/* pulso no marcador da seção ativa do índice */
.hud a.on .k{animation:kBlink 2.6s ease-in-out infinite}
@keyframes kBlink{0%,100%{opacity:1}50%{opacity:.35}}

/* entrada dos itens da linha do tempo, um após o outro */
.tl-item.rv.in{animation:tlIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes tlIn{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   RESPEITO À PREFERÊNCIA DE MENOS MOVIMENTO
   Uma única regra desliga cenários, ticker, brilhos e entradas.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .scene .lyr,
  .ticker-track,
  .hud a.on .k,
  .card.has-art:hover .card-art::before,
  .tl-item.rv.in{animation:none !important}
  .scene .lyr{opacity:.5}
  .card.tilt{transform:none !important}
}