/* splash.css — splash cinematográfica de 3s, versão densa
 *
 * Timeline orquestrada:
 *  0.00s  → backdrop visível + radial pulse no centro
 *  0.05s  → anel orbital começa a girar (4s/volta, persiste)
 *  0.20s  → 12 partículas explodem do centro
 *  0.30s  → logo emerge (scale 0.5 → 1) com easing spring
 *  0.80s  → linhas brand riscam pra fora (left + right)
 *  0.80s  → 3 dots satélite aparecem no anel
 *  1.10s  → impacto: onda concêntrica brand pulsa para fora
 *  1.20s  → título "RAFAEL" entra letra por letra
 *  1.50s  → título "MENDES" entra com glitch
 *  1.70s  → tagline aparece
 *  1.90s  → progress bar enche em 1000ms
 *  2.80s  → iris-out começa
 *  3.00s  → splash removida do DOM
 */
@layer animations {
  /* Trava scroll do html quando splash ativa */
  html.is-splash-active,
  html.is-splash-active body {
    overflow: hidden !important;
  }

  /* ============ SPLASH CONTAINER ============ */
  .splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background:
      radial-gradient(
        ellipse 70% 60% at 50% 50%,
        color-mix(in oklab, var(--brand-soft) 30%, transparent) 0%,
        transparent 65%),
      var(--bg-deep);
    isolation: isolate;
    cursor: pointer;
    /* leave state usa clip-path iris-out, não opacity */
    clip-path: circle(150% at 50% 50%);
    transition: clip-path 700ms var(--ease-in-out),
                visibility 0ms linear 700ms;
  }

  /* Pulse radial atrás — desde o frame 0 */
  .splash::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 50% 50%,
      color-mix(in oklab, var(--brand) 38%, transparent) 0%,
      color-mix(in oklab, var(--brand-deep) 15%, transparent) 35%,
      transparent 65%);
    animation: splash-pulse 2.4s var(--ease-in-out) infinite;
    z-index: -1;
  }

  /* Grid industrial sutil — com vinheta forte */
  .splash::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right,  color-mix(in oklab, var(--brand) 12%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklab, var(--brand) 12%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, black 15%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, black 15%, transparent 80%);
    opacity: 0.7;
    z-index: -1;
  }

  /* ============ CONTEÚDO INTERNO ============ */
  .splash__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6);
    max-inline-size: 90vw;
  }

  /* ============ PARTÍCULAS DE IMPACTO ============
   * 12 partículas que explodem radialmente do centro do logo no frame 0.2s.
   * Cada uma vai num ângulo diferente (30° de separação).
   * Pop forte: opacidade 1 → 0, scale 0 → 1, translate radial.
   */
  .splash__burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
  }
  .splash__burst-particle {
    position: absolute;
    inline-size: 6px;
    block-size: 6px;
    background: var(--brand-hot);
    border-radius: 50%;
    box-shadow:
      0 0 8px var(--brand-hot),
      0 0 16px var(--brand-glow);
    opacity: 0;
    transform: translate(0, 0) scale(0);
    animation: splash-burst 1100ms var(--ease-out) 200ms forwards;
  }
  /* 12 partículas, ângulos a cada 30° — cada uma é trasladada via custom property */
  .splash__burst-particle:nth-child(1)  { --angle: 0deg; }
  .splash__burst-particle:nth-child(2)  { --angle: 30deg; }
  .splash__burst-particle:nth-child(3)  { --angle: 60deg; }
  .splash__burst-particle:nth-child(4)  { --angle: 90deg; }
  .splash__burst-particle:nth-child(5)  { --angle: 120deg; }
  .splash__burst-particle:nth-child(6)  { --angle: 150deg; }
  .splash__burst-particle:nth-child(7)  { --angle: 180deg; }
  .splash__burst-particle:nth-child(8)  { --angle: 210deg; }
  .splash__burst-particle:nth-child(9)  { --angle: 240deg; }
  .splash__burst-particle:nth-child(10) { --angle: 270deg; }
  .splash__burst-particle:nth-child(11) { --angle: 300deg; }
  .splash__burst-particle:nth-child(12) { --angle: 330deg; }

  /* ============ LOGO + ANEL ORBITAL ============ */
  .splash__logo-wrap {
    position: relative;
    inline-size: clamp(120px, 22vw, 200px);
    block-size: clamp(120px, 22vw, 200px);
    opacity: 0;
    transform: scale(0.5);
    animation: splash-logo-in 900ms var(--ease-spring) 300ms forwards;
  }
  .splash__logo {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    filter:
      drop-shadow(0 0 24px color-mix(in oklab, var(--brand) 80%, transparent))
      drop-shadow(0 0 56px color-mix(in oklab, var(--brand) 40%, transparent));
    z-index: 2;
  }

  /* Anel orbital — círculo brand fino que gira indefinidamente atrás do logo */
  .splash__ring {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    border: 1px dashed color-mix(in oklab, var(--brand) 55%, transparent);
    box-shadow:
      inset 0 0 24px color-mix(in oklab, var(--brand) 25%, transparent),
      0 0 32px color-mix(in oklab, var(--brand) 25%, transparent);
    opacity: 0;
    animation:
      splash-ring-in 600ms var(--ease-out) 500ms forwards,
      splash-ring-spin 4s linear 500ms infinite;
  }
  /* Anel secundário, contra-rotaciona */
  .splash__ring--inner {
    inset: 8%;
    border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
    border-radius: 50%;
    border-top-color: var(--brand-hot);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: var(--brand);
    box-shadow: none;
    animation:
      splash-ring-in 600ms var(--ease-out) 700ms forwards,
      splash-ring-spin-reverse 3s linear 700ms infinite;
  }

  /* Dots satélite no anel — 3 pontos brand que ficam fixos enquanto o anel gira */
  .splash__satellite {
    position: absolute;
    inline-size: 10px;
    block-size: 10px;
    background: var(--brand-hot);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--brand-hot);
    opacity: 0;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    /* posição é vista como rotação ao redor do centro do logo + translate radial */
    animation:
      splash-satellite-in 500ms var(--ease-out) forwards;
    transform: translate(-50%, -50%) rotate(var(--orbit, 0deg)) translateY(calc(-1 * clamp(75px, 14vw, 130px)));
  }
  .splash__satellite:nth-child(1) { --orbit: 0deg;   animation-delay: 800ms; }
  .splash__satellite:nth-child(2) { --orbit: 120deg; animation-delay: 900ms; }
  .splash__satellite:nth-child(3) { --orbit: 240deg; animation-delay: 1000ms; }

  /* ============ ONDA CONCÊNTRICA DE IMPACTO ============
   * Quando o logo termina de aparecer, uma onda brand pulsa pra fora,
   * como o impacto de um halter caindo no chão.
   */
  .splash__impact {
    position: absolute;
    inset: 50%;
    inline-size: 0;
    block-size: 0;
    border: 2px solid var(--brand-hot);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: splash-impact 900ms var(--ease-out) 1100ms forwards;
  }

  /* Linhas brand laterais — riscam pra fora a partir do logo */
  .splash__line {
    position: absolute;
    inset-block-start: 50%;
    block-size: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--brand) 30%,
      var(--brand-hot) 70%,
      transparent 100%);
    box-shadow: 0 0 12px var(--brand-glow);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center;
    animation: splash-line-in 700ms var(--ease-out) 800ms forwards;
  }
  .splash__line--left {
    inset-inline-end: calc(100% + var(--sp-4));
    inline-size: clamp(60px, 16vw, 160px);
    transform-origin: right;
  }
  .splash__line--right {
    inset-inline-start: calc(100% + var(--sp-4));
    inline-size: clamp(60px, 16vw, 160px);
    transform-origin: left;
  }

  /* ============ TÍTULO "RAFAEL MENDES" ============ */
  .splash__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--fg);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
  }
  .splash__title-word {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: splash-word-in 700ms var(--ease-out) forwards;
  }
  .splash__title-word--first  { animation-delay: 1200ms; }
  .splash__title-word--second {
    color: var(--brand);
    -webkit-text-stroke: 1px var(--brand);
    animation: splash-word-in 700ms var(--ease-out) 1500ms forwards,
               splash-glitch 280ms steps(2) 2300ms 2;
  }

  /* ============ TAGLINE ============ */
  .splash__tagline {
    font-size: clamp(0.7rem, 1.4vw, 0.85rem);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--fg-muted);
    text-align: center;
    margin-block-start: calc(-1 * var(--sp-2));
    opacity: 0;
    transform: translateY(8px);
    animation: splash-fade-up 500ms var(--ease-out) 1700ms forwards;
  }
  .splash__tagline-dot {
    display: inline-block;
    inline-size: 4px;
    block-size: 4px;
    background: var(--brand);
    border-radius: 50%;
    margin-inline: 0.6em;
    vertical-align: middle;
  }

  /* ============ PROGRESS BAR ============ */
  .splash__progress {
    position: relative;
    inline-size: clamp(180px, 28vw, 320px);
    block-size: 2px;
    background: color-mix(in oklab, var(--fg) 12%, transparent);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-block-start: var(--sp-4);
    opacity: 0;
    animation: splash-fade-up 400ms var(--ease-out) 1900ms forwards;
  }
  .splash__progress::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    background: linear-gradient(
      90deg,
      var(--brand-soft) 0%,
      var(--brand) 40%,
      var(--brand-hot) 100%);
    box-shadow: 0 0 16px var(--brand-glow);
    animation: splash-progress 1000ms var(--ease-in-out) 1950ms forwards;
  }

  /* ============ LEAVE STATE — iris-out ============ */
  .splash.is-leaving {
    clip-path: circle(0% at 50% 50%);
    pointer-events: none;
    transition: clip-path 700ms var(--ease-in-out);
  }
  .splash.is-leaving .splash__stage {
    transform: scale(1.15);
    opacity: 0;
    transition: transform 700ms var(--ease-out),
                opacity 400ms var(--ease-out) 200ms;
  }

  /* ============ KEYFRAMES ============ */
  @keyframes splash-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50%      { opacity: 0.85; transform: scale(1.12); }
  }
  @keyframes splash-logo-in {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes splash-ring-in {
    to { opacity: 1; }
  }
  @keyframes splash-ring-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes splash-ring-spin-reverse {
    to { transform: rotate(-360deg); }
  }
  @keyframes splash-satellite-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes splash-burst {
    0%   { opacity: 0;   transform: translate(0, 0) scale(0); }
    20%  { opacity: 1;   transform: translate(
             calc(cos(var(--angle)) * 30px),
             calc(sin(var(--angle)) * 30px)
           ) scale(1); }
    100% { opacity: 0;   transform: translate(
             calc(cos(var(--angle)) * clamp(140px, 22vw, 260px)),
             calc(sin(var(--angle)) * clamp(140px, 22vw, 260px))
           ) scale(0.4); }
  }
  @keyframes splash-impact {
    0%   {
      inline-size: 0;
      block-size: 0;
      opacity: 0.8;
      border-width: 3px;
    }
    100% {
      inline-size: clamp(280px, 40vw, 480px);
      block-size: clamp(280px, 40vw, 480px);
      opacity: 0;
      border-width: 1px;
    }
  }
  @keyframes splash-line-in {
    to { transform: translateY(-50%) scaleX(1); }
  }
  @keyframes splash-word-in {
    to { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes splash-glitch {
    0%   { transform: translate(0, 0); filter: none; }
    33%  { transform: translate(-2px, 0); filter: hue-rotate(-15deg); }
    66%  { transform: translate(2px, 0); filter: hue-rotate(15deg); }
    100% { transform: translate(0, 0); filter: none; }
  }
  @keyframes splash-fade-up {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes splash-progress {
    0%   { inline-size: 0; }
    100% { inline-size: 100%; }
  }

  /* ============ REDUCED MOTION ============ */
  @media (prefers-reduced-motion: reduce) {
    .splash {
      clip-path: none !important;
      transition: opacity 200ms linear, visibility 0ms linear 200ms;
    }
    .splash.is-leaving {
      opacity: 0;
      clip-path: none !important;
    }
    .splash::before,
    .splash__logo-wrap,
    .splash__line,
    .splash__title-word,
    .splash__tagline,
    .splash__progress,
    .splash__progress::after,
    .splash__ring,
    .splash__satellite,
    .splash__impact,
    .splash__burst-particle {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
    }
    .splash__line { transform: translateY(-50%) scaleX(1); }
    .splash__progress::after { inline-size: 100%; }
    .splash__burst-particle { display: none; }
    .splash__impact { display: none; }
  }
}

/* ============================================================
 * FASE 2 — HARDENING DA SPLASH (bloco aditivo, v20)
 * Não remove nem altera nenhuma regra acima; apenas sobrepõe.
 * ============================================================ */
@layer animations {
  /* Visibilidade presa à classe pré-paint (adicionada pelo script
   * síncrono do <head>):
   *  - JS desabilitado → classe nunca existe → splash nem aparece
   *    (progressive enhancement de verdade);
   *  - retorno na sessão → classe não é adicionada → zero flash
   *    da splash enquanto o JS deferido não roda;
   *  - reduced-motion → head não adiciona a classe → splash pulada
   *    por completo, sem cobrir a tela. */
  .splash {
    visibility: hidden;
    pointer-events: none;
  }
  html.is-splash-active .splash {
    visibility: visible;
    pointer-events: auto;
    /* CAMADA 2 — rede CSS independente: mesmo que NENHUM JS rode
     * após a injeção da classe, esta animação esvanece e tira a
     * splash de cena sozinha. O `forwards` aqui segura o estado
     * FORA de cena (opacity 0 + hidden) — direção benigna, o
     * oposto do anti-padrão da cortina. Delay de 3800ms > fluxo
     * normal (~3600ms): em operação saudável nunca é percebida. */
    animation: splash-auto-teardown 500ms linear 3800ms forwards;
  }
  @keyframes splash-auto-teardown {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; pointer-events: none; }
  }
  /* Reduced-motion: splash não existe. Nem 400ms de cobertura. */
  @media (prefers-reduced-motion: reduce) {
    .splash { display: none !important; }
  }
}