/* ============================================================
   splash.css — Abertura cinematográfica · 2500ms exatos
   ------------------------------------------------------------
   Linguagem visual herdada do sistema Rafael Mendes (anel
   orbital, progress, saída em iris-out) e afinada ao registro
   do Victor: ouro + azul, sereno e científico — sem o glitch/
   vermelho agressivo do original fitness.

   Posse: a splash anima só os próprios nós (transform/opacity/
   clip-path). O hero segue dono das suas keyframes; .splash-hold
   só governa play-state. Relógio EXATO de 2,5s vive em splash.js
   (âncora no primeiro frame renderizado).

   Roteiro (T0 = primeiro frame com a splash pintada). Beats
   distribuídos para não haver tempo morto — anéis giram, blooms
   respiram e a barra avança o tempo todo:
     0.04s  anéis orbitais surgem e começam a girar (persistem)
     0.12s  logo emerge (scale spring, ~0.7s) + halo expande
     0.30s  barra de progresso desenha — cronômetro da cena
     0.90s  tagline ouro sobe e permanece (≈250ms após o logo)
     ~1.35s barra ACELERA no trecho final (nunca aparenta travar)
     1.80s  iris-out: círculo fecha no centro + conteúdo recolhe
     2.50s  cortina concluída → nó removido (splash.js)

   Failsafes: gate inline libera o hold em 4s · keyframe
   splash-failsafe dissolve em 4s. Nada prende o conteúdo.
   ============================================================ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 1200; /* acima de --z-progress (1100) */
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      color-mix(in srgb, var(--brand-accent) 7%, transparent) 0%, transparent 65%),
    var(--bg-deep);
  overscroll-behavior: contain;
  touch-action: none;
  isolation: isolate;
  /* Saída em IRIS-OUT (assinatura Rafael) — o círculo fecha no centro
     revelando o hero. Easing suave (não-elástico). visibility vira só
     depois do clip. */
  -webkit-clip-path: circle(150% at 50% 50%);
  clip-path: circle(150% at 50% 50%);
  transition:
    clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    visibility 0s linear 0.7s;
  animation: splash-failsafe 0.6s ease 4s forwards;
}

/* Atmosfera dual-tone — ouro respira à frente, azul ao fundo, contrafase. */
.splash::before,
.splash::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.splash::before {
  width: clamp(320px, 60vw, 560px);
  height: clamp(320px, 60vw, 560px);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand-accent) 10%, transparent) 0%, transparent 68%);
  animation: splash-bloom 3.4s var(--ease-in-out) infinite alternate;
}
.splash::after {
  width: clamp(420px, 78vw, 760px);
  height: clamp(420px, 78vw, 760px);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand-primary) 7%, transparent) 0%, transparent 70%);
  animation: splash-bloom 3.4s var(--ease-in-out) -1.7s infinite alternate-reverse;
}

/* IRIS-OUT — estado de saída disparado por .splash--exit (JS é dono do tempo) */
.splash--exit {
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
  visibility: hidden;
}

.splash__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: 0 var(--container-px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.55s var(--ease-out);
}
/* No iris-out o conteúdo expande levemente e dissolve (eco do Rafael). */
.splash--exit .splash__inner {
  opacity: 0;
  transform: scale(1.12);
}

/* ----------------------------------------------------------
   ATO 1 — A marca + anéis orbitais
---------------------------------------------------------- */
.splash__brand {
  position: relative;
  display: inline-flex;
  place-items: center;
}

.splash__logo img {
  height: clamp(80px, 9vw + 48px, 116px);
  width: auto;
  filter: var(--logo-filter, none)
    drop-shadow(0 0 22px color-mix(in srgb, var(--brand-accent) 35%, transparent))
    drop-shadow(0 8px 28px rgba(0, 0, 0, 0.5));
  opacity: 0;
  transform: scale(0.82);
  animation: splash-logo-in 0.7s var(--ease-spring) 0.12s forwards;
}
[data-theme="light"] .splash__logo img {
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--brand-accent) 30%, transparent))
    drop-shadow(0 5px 16px rgba(15, 15, 18, 0.18));
}

/* Anel orbital — tracejado fino que gira indefinidamente atrás da marca.
   Técnica do Rafael, em ouro sereno (sem o glow vermelho intenso). */
.splash__ring {
  position: absolute;
  inset: clamp(-58px, -8vw, -42px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--brand-accent) 42%, transparent);
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--brand-accent) 14%, transparent),
    0 0 28px color-mix(in srgb, var(--brand-accent) 12%, transparent);
  opacity: 0;
  animation:
    splash-ring-in 0.4s var(--ease-out) 0.04s forwards,
    splash-spin 12s linear 0.04s infinite;
}
/* Anel interno contra-rotaciona, com um arco em ouro mais vivo. */
.splash__ring--inner {
  inset: clamp(-34px, -5vw, -24px);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 26%, transparent);
  border-top-color: var(--brand-accent-soft);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: color-mix(in srgb, var(--brand-accent) 55%, transparent);
  box-shadow: none;
  animation:
    splash-ring-in 0.4s var(--ease-out) 0.12s forwards,
    splash-spin-rev 9s linear 0.12s infinite;
}

/* Halo — pulso único de chegada irradiando da marca. */
.splash__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(170px, 30vw, 230px);
  height: clamp(170px, 30vw, 230px);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 55%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
  animation: splash-halo 1s var(--ease-out) 0.2s forwards;
}

/* ----------------------------------------------------------
   ATO 3 — O cronômetro (progress bar)
---------------------------------------------------------- */
.splash__meter {
  position: relative;
  width: clamp(180px, 30vw, 280px);
  height: 2px;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.splash__track {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  opacity: 0;
  animation: splash-fade 0.35s var(--ease-out) 0.2s forwards;
}
.splash__line {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg,
    var(--brand-accent-soft) 0%, var(--brand-accent) 45%, var(--brand-accent-deep) 100%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand-accent) 40%, transparent);
  /* base linear + easing por keyframe: avança constante e SURGE no fim,
     batendo 100% junto do disparo do iris-out (1.8s). */
  animation: splash-draw 1.5s linear 0.3s forwards;
}

/* ----------------------------------------------------------
   ATO 2 — A mensagem (uma tagline, palco fixo, zero CLS)
---------------------------------------------------------- */
.splash__phrases {
  position: relative;
  width: min(100%, 34ch);
  height: 2.2em;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-secondary);
}
.splash__phrase {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  opacity: 0;
  transform: translate3d(0, calc(-50% + 12px), 0);
}
/* Tagline única em ouro — sobe ~250ms após o logo assentar e permanece
   até o iris-out dissolver o palco. */
.splash__phrase--final {
  background: linear-gradient(100deg, var(--brand-accent), var(--brand-accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: splash-rise-center 0.6s var(--ease-spring) 0.9s forwards;
}
[data-theme="light"] .splash__phrase--final {
  background-image: linear-gradient(100deg, var(--brand-accent-deep), var(--brand-accent));
}

/* ----------------------------------------------------------
   Keyframes — transform/opacity/clip-path apenas
---------------------------------------------------------- */
@keyframes splash-logo-in {
  0%   { opacity: 0; transform: scale(0.82); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes splash-ring-in   { to { opacity: 1; } }
@keyframes splash-spin      { to { transform: rotate(360deg); } }
@keyframes splash-spin-rev  { to { transform: rotate(-360deg); } }
@keyframes splash-rise-center { to { opacity: 1; transform: translate3d(0, -50%, 0); } }
@keyframes splash-halo {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.55); }
  30%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.22); }
}
/* Avanço constante (nunca trava) e surto acelerado no trecho final. */
@keyframes splash-draw {
  0%   { transform: scaleX(0);    animation-timing-function: linear; }
  64%  { transform: scaleX(0.52); animation-timing-function: cubic-bezier(0.65, 0, 0.85, 0.1); }
  100% { transform: scaleX(1); }
}
@keyframes splash-fade  { to { opacity: 1; } }
@keyframes splash-bloom { to { transform: scale(1.06); } }
@keyframes splash-failsafe { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------------
   Hold de palco — congela a entrada do hero enquanto a splash existe.
------------------------------------------------------------------ */
.splash-hold .hero__title,
.splash-hold .hero__sub,
.splash-hold .hero__cta,
.splash-hold .hero__trust,
.splash-hold .hero__media-tag,
.splash-hold .hero__title.splitting .char {
  animation-play-state: paused;
}

/* ------------------------------------------------------------------
   Skips — sessão repetida ou reduced-motion: splash nem pinta.
------------------------------------------------------------------ */
.splash-skip .splash { display: none; }

@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}