/* ============================================================================
   Atmosfera e movimento físico da home. Carrega depois de home.css.
   Só usa cores que já existem na página (lima, tinta, tons de cada era).
   ========================================================================== */
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --sc-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------- scroll suave ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ----------------------------------------------- grão de filme + vinheta --- */
.fx-film { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.fx-film::before {
  content: ""; position: absolute; inset: -60px; background-image: var(--grain, none); background-size: 128px 128px;
  opacity: .5; animation: grain .85s steps(1) infinite; will-change: transform;
}
.fx-film::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 125% 105% at 50% 46%, transparent 58%, rgba(5, 6, 6, .26) 84%, rgba(5, 6, 6, .46) 100%);
}
@keyframes grain {
  0% { transform: translate(0, 0); } 12% { transform: translate(-38px, 22px); } 25% { transform: translate(24px, -41px); }
  37% { transform: translate(-17px, -9px); } 50% { transform: translate(44px, 31px); } 62% { transform: translate(-29px, 47px); }
  75% { transform: translate(12px, -26px); } 87% { transform: translate(-46px, 5px); }
}

/* --------------------------------------------------- campos de partículas -- */
.fx-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.scene--dino .fx-field { z-index: 4; }
.hero__portal .fx-field { z-index: 0; }

/* ----------------------------------------- raios de luz e névoa por camada -- */
.scene--rome { --ray: 212, 154, 108; --hz: 201, 138, 94; }
.scene--greece { --ray: 159, 178, 189; --hz: 159, 178, 189; }
.scene--dino { --ray: 233, 138, 74; --hz: 63, 85, 48; }
.fx-rays {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--ax, 50%); top: var(--ay, 62%); width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax;
  background: repeating-conic-gradient(rgba(var(--ray), .075) 0deg 2deg, transparent 2deg 6.5deg, rgba(var(--ray), .045) 6.5deg 7.6deg, transparent 7.6deg 14deg, rgba(var(--ray), .06) 14deg 16.6deg, transparent 16.6deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, .5) 30%, transparent 74%);
  mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, .5) 30%, transparent 74%);
}
.scene--greece .fx-rays { opacity: .55; }
.scene--dino .fx-rays { opacity: .7; }
.fx-haze {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; overflow: hidden;
  background: linear-gradient(0deg, rgba(var(--hz), 0) 0%, rgba(var(--hz), var(--hz-a, .16)) 40%, rgba(var(--hz), 0) 100%);
}
.fx-haze--mid { height: 42%; --hz-a: .1; }
.scene--dino .fx-haze { --hz-a: .2; }
.scene--dino .fx-haze--mid { --hz: 42, 23, 16; --hz-a: .2; }
.fx-haze::after {
  content: ""; position: absolute; top: 10%; bottom: 0; left: 0; width: 200%;
  background:
    radial-gradient(ellipse 22% 34% at 12% 62%, rgba(var(--hz), .13), transparent 72%),
    radial-gradient(ellipse 26% 28% at 38% 72%, rgba(var(--hz), .1), transparent 70%),
    radial-gradient(ellipse 20% 32% at 70% 58%, rgba(var(--hz), .12), transparent 72%);
  background-size: 50% 100%; background-repeat: repeat-x; animation: mist 95s linear infinite;
}
.fx-haze--mid::after { display: none; }
@keyframes mist { to { transform: translate3d(-50%, 0, 0); } }
.scene__layer { transform-origin: 50% 78%; }
/* a cena do meteoro treme no impacto: promovida para o tremor ser só composição, sem rasterizar de novo */
.scene--dino { will-change: transform; }
.scene--dino .fx-haze::after { animation: none; }

/* camada de escurecimento do céu antes do impacto */
.fx-dim { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 110% 90% at 50% 58%, rgba(7, 11, 8, .3), rgba(7, 11, 8, .78)); will-change: opacity; }

/* ----------------------------------------------------------- cartões ----- */
.card, .kit__items li, .kit__price { --gl: 0; }
.card::after, .kit__items li::after, .kit__price::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(241, 242, 237, .1), rgba(241, 242, 237, .03) 40%, transparent 64%);
  opacity: var(--gl); transition: opacity .45s var(--ease-out-expo);
}
.kit__items li, .kit__price { position: relative; }
.card {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .3), 0 10px 22px -10px rgba(0, 0, 0, .5), 0 34px 60px -30px rgba(0, 0, 0, .7);
}
.weapon, .product, .price-box { transition: translate .7s var(--ease-spring), border-color .3s, box-shadow .6s var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
  .weapon:hover, .product:hover { translate: 0 -7px; border-color: rgba(var(--accent-rgb), .3); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 2px 4px rgba(0, 0, 0, .25), 0 22px 36px -14px rgba(0, 0, 0, .55), 0 54px 80px -34px rgba(0, 0, 0, .75); }
  .weapon.is-equipped:hover { border-color: rgba(var(--accent-rgb), .6); }
}
.kit__items li { transition: border-color .3s; }

/* ----------------------------------------------------- chrome do footer --- */
.close__footer { z-index: 3; }

/* -------------------------------------------------- movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-film::before { animation: none; }
  .fx-haze::after, .hero__portal .glow, .hero__portal .ring { animation: none !important; }
  .act--greece { height: 100svh !important; }
  .act--greece [data-sc-stage] { overflow: clip !important; }
  .rail-view { overflow-x: auto; overflow-y: hidden; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .rail { transform: none !important; }
  .weapon { scroll-snap-align: center; }
  .act--greece.is-compact .rail > .rail__lead { scroll-snap-align: start; }
  .weapon, .product, .price-box { transition: border-color .3s, box-shadow .3s; }
}
.motion-paused .fx-film::before { animation: none; }
.motion-paused .fx-haze::after, .motion-paused .hero__portal .glow, .motion-paused .hero__portal .ring { animation: none !important; }
.motion-paused .weapon, .motion-paused .product, .motion-paused .price-box { transition: border-color .3s, box-shadow .3s; }
.motion-paused .weapon:hover, .motion-paused .product:hover { translate: none; }

/* ------------------------------------------------------------ celular ---- */
@media (max-width: 860px) {
  .fx-rays { width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; }
  .fx-film::after { background: radial-gradient(ellipse 140% 110% at 50% 46%, transparent 62%, rgba(5, 6, 6, .3) 100%); }
  .fx-haze::after { animation: none; }
  .fx-film::before { animation: none; }
}

/* a câmera da arena corre até ±6% para cada lado: as camadas ficam mais largas que o palco */
.scene--greece .scene__layer img { inset: -2% -6% 0 -6%; width: 112%; }

/* leitura do título da arena sobre a arte: halo escuro bem suave atrás do texto, sem caixa */
.act--greece:not(.is-compact) .rail__lead::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -22% -12% -26%; pointer-events: none;
  background: radial-gradient(ellipse 60% 52% at 46% 50%, rgba(8, 9, 9, .66), rgba(8, 9, 9, .3) 55%, transparent 80%);
}

/* qualidade adaptativa: máquina lenta perde só o que é ambiente */
.fx-lite .fx-film::before, .fx-lite .fx-haze::after { display: none; }
.fx-lite .hero__portal .glow, .fx-lite .hero__portal .ring { animation: none; }