/* ============================================================================
   SECTION ENTRY SETTLED — patch finale (caricato per ULTIMO).
   Generalizza a TUTTE le sezioni la tecnica provata in how-to-play della
   comparativa: la sezione entra GIÀ ASSESTATA dal primo frame visibile.
   Solo CSS (niente modifiche a global.js).

   Meccanismo:
   1) la sezione fa SOLO un fade di opacità (niente scale/blur = niente
      "sfoca→nitida"/asestamento della sezione);
   2) le intro dei contenitori/card principali sono disattivate → il contenuto
      appare già nel suo stato finale (la luce interna non si accende "a tandas");
   3) le animazioni decorative girano ANCHE a sezione nascosta, così quando la
      sezione diventa visibile non ripartono da zero (niente ricomposizione di
      bordi/luci nel primo secondo);
   4) il flicker globale non altera le card grandi già visibili.
   ============================================================================ */

/* ---- 1) SEZIONE: solo fade di opacità ---- */
.section {
  transform: none !important;
  filter: none !important;
  filter: blur(0) !important;
  transition:
    opacity 520ms ease,
    visibility 0s linear 520ms !important;
}
.section.is-active {
  transform: none !important;
  filter: none !important;
  transition:
    opacity 520ms ease,
    visibility 0s linear 0s !important;
}

/* ---- 3) animazioni decorative attive anche a sezione nascosta ----
   (sovrascrive il pause di sections.css: così i layer non si "ricompongono"
   quando la sezione appare). */
.section:not(.is-active) * {
  animation-play-state: running !important;
}

/* ---- 4) il flicker globale non tocca le card grandi già visibili ---- */
.section.is-active .flicker-on {
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ---- 2) INTRO principali OFF: contenuto già finale (solo la sezione fa fade) ----
   Non forziamo transform/filter (per NON perdere il tilt/glow di riposo delle card):
   togliamo l'animazione d'ingresso e garantiamo la visibilità. */
#how-to-play.is-active .howto-shell,
#economy.is-active .economy-orbit-system,
#economy.is-active .economy-explanation-card,
#tokenomic.is-active .tokenomic-system,
#tokenomic.is-active .tokenomic-card,
#assets.is-active .assets-hud-card,
#games.is-active .game-card {
  animation: none !important;
  opacity: 1 !important;
}
/* NB: roadmap ESCLUSO: le sue card devono fare l'ingresso a scaletta (vedi roadmap.css). */

/* ---- HOME ----
   La card mantiene solo il glow di riposo (niente power-on d'ingresso); i contenuti
   e le cornici interne appaiono subito (niente reveal ritardato a "tandas"); i barridi
   decorativi (boot-lines / border-flash) restano fermi. */
/* #home.is-active .action-card {
  animation: cardIdleGlow 5s ease-in-out infinite !important;
  opacity: 1 !important;
}
#home.is-active .card-content-reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
#home.is-active .action-card::before,
#home.is-active .action-card::after,
#home.is-active .card-boot-lines::before,
#home.is-active .card-boot-lines::after {
  animation: none !important;
} */


/* ============================================================================
   MOBILE — LINEE NEON CHE PERCORRONO EL BORDE
   Las dos líneas opuestas recorren el perímetro rotando SOLO el layer conic
   mediante transform. Este sistema sustituye al antiguo borde animado pesado.

   IMPORTANTE: mobile-perf.css contiene un "GATING INGRESSO" antiguo que ocultaba
   todos estos bordes hasta .is-intro-done para descargar la entrada. Ese gating
   producía el corte visual al aparecer la cornisa después del contenido. Como el
   sistema actual usa solo transform en compositor, aquí —último CSS de la web—
   anulamos únicamente esa ocultación en móvil: el borde nace junto con la tarjeta
   y comienza a moverse desde el primer frame visible. Desktop sigue intacto.
   ============================================================================ */
@keyframes mobileCardBorderTravel {
  from {
    transform: translate(-50%, -50%) rotate(var(--corner-rot, 0deg));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--corner-rot, 0deg) + 1turn));
  }
}

@media (max-width: 768px) {
  /* ANULACIÓN REAL DEL GATING ANTIGUO.
     mobile-perf.css usa `.section:not(.is-intro-done) ... { visibility:hidden !important; }`.
     La versión anterior de este parche tenía MENOS especificidad (`.section ...`) y, aunque
     estaba cargada después, no podía vencer a otro `!important` más específico. Repetimos
     aquí el mismo estado :not(.is-intro-done), con la misma especificidad y cargados al final:
     ahora el borde es visible desde el primer frame de entrada, no al terminar la intro. */
  .section:not(.is-intro-done) .economy-explanation-card__border,
  .section:not(.is-intro-done) .economy-card__border,
  .section:not(.is-intro-done) .tokenomic-center-display__border,
  .section:not(.is-intro-done) .tokenomic-card__border,
  .section:not(.is-intro-done) .roadmap-card__border,
  .section:not(.is-intro-done) .gm-ring-comp,
  .section:not(.is-intro-done) .home-presale-card__border,
  .section:not(.is-intro-done) .assets-hud-card__border,
  .section:not(.is-intro-done) .howto-shell__border,
  .section:not(.is-intro-done) .howto-access-btn__arc,
  .section.is-intro-done .economy-explanation-card__border,
  .section.is-intro-done .economy-card__border,
  .section.is-intro-done .tokenomic-center-display__border,
  .section.is-intro-done .tokenomic-card__border,
  .section.is-intro-done .roadmap-card__border,
  .section.is-intro-done .gm-ring-comp,
  .section.is-intro-done .home-presale-card__border,
  .section.is-intro-done .assets-hud-card__border,
  .section.is-intro-done .howto-shell__border,
  .section.is-intro-done .howto-access-btn__arc {
    visibility: visible !important;
  }

  /* La animación existe desde el principio, no espera a .is-intro-done. */
  .section .economy-explanation-card__border::before,
  .section .economy-card__border::before,
  .section .assets-hud-card__border::before,
  .section .tokenomic-center-display__border::before,
  .section .tokenomic-card__border::before,
  .section .howto-shell__border::before,
  .section .roadmap-card__border::before,
  .section .gm-ring-comp::before {
    animation: mobileCardBorderTravel 7.2s linear infinite !important;
    animation-play-state: paused !important;
  }

  /* Solo la sección visible consume animación. Empieza en el primer frame de
     entrada; al salir queda congelada en su punto actual durante el fundido. */
  .section.is-active .economy-explanation-card__border::before,
  .section.is-active .economy-card__border::before,
  .section.is-active .assets-hud-card__border::before,
  .section.is-active .tokenomic-center-display__border::before,
  .section.is-active .tokenomic-card__border::before,
  .section.is-active .howto-shell__border::before,
  .section.is-active .roadmap-card__border::before,
  .section.is-active .gm-ring-comp::before {
    animation-play-state: running !important;
    will-change: transform;
  }
}

/* ========================================================================== */
/* DESKTOP ONLY — viaje de sección optimizado (este archivo carga el último)  */
/* Móvil conserva exactamente el sistema anterior.                            */
/* ========================================================================== */
@media (min-width: 769px) {
  .section {
    transform: translate3d(0, 0, 0) scale(0.992) !important;
    filter: none !important;
    transition:
      opacity 420ms cubic-bezier(.4, 0, .2, 1),
      transform 620ms cubic-bezier(.4, 0, .2, 1),
      visibility 0s linear 620ms !important;
  }

  .section.is-active {
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: none !important;
    transition:
      opacity 680ms cubic-bezier(.22, 1, .36, 1),
      transform 880ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0s !important;
  }

  .section.is-section-leaving {
    transform: translate3d(0, var(--section-exit-y, -3.5vh), 0) scale(0.985) !important;
    opacity: 0;
    will-change: transform, opacity;
  }

  .section.is-section-entering:not(.is-active) {
    transform: translate3d(0, var(--section-enter-y, 4vh), 0) scale(0.985) !important;
    opacity: 0;
    will-change: transform, opacity;
  }

  .section.is-active.is-section-entering {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1;
    will-change: transform, opacity;
  }

  /* Durante el viaje se congelan las animaciones de las secciones que no participan.
     La entrante sigue viva mientras está oculta para llegar ya asentada; la saliente y
     las otras cinco dejan de consumir tiempo de estilo/composición. */
  body.sbg-traveling .section:not(.is-active):not(.is-section-entering) * {
    animation-play-state: paused !important;
  }

  /* ROADMAP — recupera la entrada original en escalera.
     La transición general de la sección hacía un fade de 680 ms y escondía visualmente
     los primeros escalones. En la PRIMERA entrada (.rm-stagger), Roadmap se hace visible
     casi de inmediato y sus 4 cards vuelven a encenderse una detrás de otra con los
     tiempos originales definidos en roadmap.css. El resto de secciones no cambia. */
  #roadmap.is-active.is-section-entering.rm-stagger {
    transition:
      opacity 120ms linear,
      transform 880ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0s !important;
  }

  #roadmap.is-active.rm-stagger .roadmap-card {
    animation-play-state: running !important;
  }
}