/* ============================================================
   Splash cinematográfica — Real Powerboats
   Identidade própria (não é a Ferrari): azul-marinho profundo,
   petróleo e grafite, com o vermelho da marca só como um traço
   quase imperceptível. Sequência: véu revela o fundo escuro →
   brilho central + reflexo horizontal → logo surge por cima →
   traço vermelho → repouso → fade out.
   ============================================================ */

:root{
  --splash-bg-1:#050b12;
  --splash-bg-2:#0a1a26;
  --splash-petrol:#0f2e38;
  --splash-line:#eef4f8;
  --splash-accent:#8a231c;
}

.splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, var(--splash-bg-2) 0%, var(--splash-bg-1) 68%, #020609 100%);
  opacity:1;
  transition:opacity 900ms cubic-bezier(.4,0,.2,1), filter 900ms cubic-bezier(.4,0,.2,1);
}
.splash.is-leaving{
  opacity:0;
  filter:blur(14px);
  pointer-events:none;
}
.splash.is-hidden{ display:none; }

.splash__stage{
  position:relative;
  width:min(560px, 70vw);
  height:min(340px, 46vh);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* -------- 1. véu inicial: revela o fundo antes de qualquer outra coisa -------- */
.splash__veil{
  position:absolute; inset:0; z-index:5;
  background:var(--splash-bg-1);
  animation:splashVeil 640ms cubic-bezier(.4,0,.2,1) 0ms both;
}
@keyframes splashVeil{
  0%{ opacity:1; }
  100%{ opacity:0; visibility:hidden; }
}

/* -------- 2. brilho suave central -------- */
.splash__glow{
  position:absolute;
  width:70%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(120,165,200,.35) 0%, rgba(120,165,200,0) 70%);
  filter:blur(30px);
  opacity:0;
  transform:scale(.85);
  animation:splashGlow 2200ms cubic-bezier(.4,0,.2,1) 80ms both;
}
@keyframes splashGlow{
  0%{ opacity:0; transform:scale(.85); }
  35%{ opacity:1; transform:scale(1); }
  100%{ opacity:.55; transform:scale(1.04); }
}

/* -------- 3. linha de luz horizontal (reflexo sobre o oceano) -------- */
.splash__sweep{
  position:absolute;
  top:52%;
  left:-45%;
  width:35%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--splash-line) 50%, transparent);
  filter:blur(1px);
  box-shadow:0 0 22px 3px rgba(180,210,255,.30);
  opacity:0;
  animation:splashSweep 1000ms cubic-bezier(.45,0,.2,1) 260ms both;
}
@keyframes splashSweep{
  0%{ left:-45%; opacity:0; }
  14%{ opacity:1; }
  50%{ left:32%; opacity:.9; }
  86%{ opacity:0; }
  100%{ left:110%; opacity:0; }
}

/* -------- 4. logotipo -------- */
.splash__logowrap{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.splash__logo{
  width:min(200px, 30vw);
  height:auto;
  opacity:0;
  filter:blur(7px);
  transform:scale(.94);
  animation:splashLogo 1050ms cubic-bezier(.25,.1,.2,1) 1150ms both;
}
@keyframes splashLogo{
  0%{ opacity:0; filter:blur(7px); transform:scale(.94); }
  100%{ opacity:1; filter:blur(0); transform:scale(1); }
}

/* pequeno traço vermelho da marca — quase um sussurro */
.splash__accent{
  width:34px;
  height:2px;
  margin-top:16px;
  background:var(--splash-accent);
  border-radius:2px;
  opacity:0;
  transform:scaleX(.4);
  animation:splashAccent 700ms ease-in-out 2150ms both;
}
@keyframes splashAccent{
  0%{ opacity:0; transform:scaleX(.4); }
  100%{ opacity:.5; transform:scaleX(1); }
}

/* frase da marca, logo abaixo do traço vermelho */
.splash__tagline{
  margin-top:14px;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--splash-line);
  opacity:0;
  transform:translateY(6px);
  animation:splashTagline 700ms cubic-bezier(.4,0,.2,1) 2350ms both;
}
@keyframes splashTagline{
  0%{ opacity:0; transform:translateY(6px); }
  100%{ opacity:.75; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .splash, .splash__glow, .splash__sweep, .splash__logo, .splash__accent, .splash__veil, .splash__tagline{
    animation:none !important;
    transition:opacity 300ms linear !important;
  }
  .splash__veil{ opacity:0; visibility:hidden; }
  .splash__glow{ opacity:.4; }
  .splash__logo{ opacity:1; filter:none; transform:none; }
  .splash__accent{ opacity:.5; transform:none; }
  .splash__tagline{ opacity:.75; transform:none; }
  .splash__sweep{ opacity:0; }
}

@media (max-width:640px){
  .splash__stage{ width:82vw; height:40vh; }
  .splash__logo{ width:38vw; }
  .splash__tagline{ font-size:.68rem; }
}