/* El splash es oscuro FIJO. Si el usuario tiene el tema claro, el lienzo de la
   pagina (html background = #f4f5f8) asoma por el area segura de la PWA y se ve
   una franja casi blanca abajo. Mientras el splash este visible forzamos lienzo
   oscuro y color-scheme oscuro; la clase la pone/quita splash-screen.js. */
html.splash-on, html.splash-on body{background:#0a0a0a !important;color-scheme:dark}
/* Y ocultamos la app debajo. La barra inferior (.botnav) es position:fixed CON
   backdrop-filter, y Safari dibuja esos elementos ENCIMA aunque su z-index sea
   200 contra el 99999 del splash: en tema claro su fondo es #ffffff al 88% y se
   veia como una franja blanca abajo, sobre el splash.
   visibility (no display:none) para que el layout siga midiendose: initSiri()
   necesita getBoundingClientRect() del canvas del hero durante el arranque. */
html.splash-on #app{visibility:hidden}
/*
 * bySophia AI — Premium intro splash screen
 * Cardzy pattern, bySophia warm palette (orange/amber/light-orange).
 *
 * 3.5s en total (era 7.4s: sobraban ~3s de espera muerta al final):
 *   - Layer 1: radial gradient background (warm dark)
 *   - Layer 2: 3 floating blurred orbs (12s loop, staggered)
 *   - Layer 3: ~120 sparkle particles (canvas, animated by JS)
 *   - Layer 4: logo frame with 3 pulsing rings + glow + waveform mark
 *   - Layer 5: 'BYSOPHIA AI' title letter-by-letter drop animation
 *   - Layer 6: tagline fade-in (i18n via localStorage 'sophia-lang')
 *   - Layer 7: 3 bouncing loader dots
 *   - Fade-out at 6.6s, fully gone at 7.4s
 *
 * Usage: link this stylesheet + load splash-screen.js + ensure HTML markup
 * exists in body (see splash-screen.js inline template or copy HTML from
 * /assets/splash-screen.html).
 */

.splash-screen{
  position:fixed;inset:0;z-index:99999;
  /* background-COLOR opaco ADEMAS del degradado: iOS Safari 26 muestrea el color
     de los elementos fixed que tocan los bordes para tenir su barra, y un
     radial-gradient sin color no le sirve -> franja clara abajo en el iPhone.
     Es seguro porque este splash se oculta con display:none (.gone), no con
     opacity. Ver skill_ios_safari_fill_screen_svh_lvh_gray_strip. */
  background-color:#0a0a0a;
  background-image:radial-gradient(ellipse at center,#1a0e08 0%,#0a0a0a 50%,#000 100%);
  /* Cubrir tambien la franja del area segura en la PWA de iOS. */
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  animation:splashFadeOut .6s ease-out 3.2s forwards;
}
.splash-screen.gone{display:none}

#splash-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.7}

.splash-bg-orbs{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.splash-orb{
  position:absolute;border-radius:50%;filter:blur(80px);
  opacity:.55;animation:splashOrbFloat 12s ease-in-out infinite;
}
.splash-orb-1{
  width:380px;height:380px;
  background:radial-gradient(circle,#FF6B2B,transparent 70%);
  top:-10%;left:-10%;
}
.splash-orb-2{
  width:420px;height:420px;
  background:radial-gradient(circle,#fbbf24,transparent 70%);
  bottom:-15%;right:-10%;
  animation-delay:-4s;
}
.splash-orb-3{
  width:320px;height:320px;
  background:radial-gradient(circle,#FFAA6B,transparent 70%);
  top:30%;right:20%;
  animation-delay:-8s;opacity:.4;
}
@keyframes splashOrbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.1)}
  66%{transform:translate(-30px,40px) scale(.95)}
}

.splash-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  animation:splashContentEnter .9s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes splashContentEnter{
  0%{opacity:0;transform:translateY(20px) scale(.92)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes splashFadeOut{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(1.05);filter:blur(8px);pointer-events:none}
}

/* Logo frame with rings */
.splash-logo-frame{
  position:relative;width:160px;height:160px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;
}
.splash-logo-glow{
  position:absolute;inset:-20px;
  background:radial-gradient(circle,rgba(255,107,43,.6),transparent 65%);
  filter:blur(20px);
  animation:splashLogoGlowPulse 2.4s ease-in-out infinite;
}
@keyframes splashLogoGlowPulse{
  0%,100%{opacity:.6;transform:scale(.95)}
  50%{opacity:1;transform:scale(1.15)}
}
.splash-logo-ring{
  position:absolute;border-radius:50%;
  border:2px solid rgba(255,107,43,.4);
  animation:splashRingExpand 2.5s ease-out infinite;
}
.splash-ring-1{inset:10%;animation-delay:0s}
.splash-ring-2{inset:0%;animation-delay:.6s;border-color:rgba(251,191,36,.35)}
.splash-ring-3{inset:-10%;animation-delay:1.2s;border-color:rgba(255,170,107,.3)}
@keyframes splashRingExpand{
  0%{transform:scale(.6);opacity:0}
  30%{opacity:1}
  100%{transform:scale(1.6);opacity:0}
}
.splash-logo-mark{
  position:relative;z-index:3;
  width:96px;height:96px;border-radius:24px;
  background:linear-gradient(135deg,#FF6B2B 0%,#fbbf24 50%,#FF3D00 100%);
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 12px 40px rgba(255,107,43,.55));
  animation:splashLogoEntrance 1.2s cubic-bezier(.34,1.56,.64,1) forwards,
            splashLogoBreath 3s ease-in-out 1.2s infinite;
  transform-origin:center;
}
.splash-logo-mark svg{width:60%;height:60%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
@keyframes splashLogoEntrance{
  0%{opacity:0;transform:scale(.3) rotate(-180deg)}
  60%{opacity:1;transform:scale(1.15) rotate(10deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}
@keyframes splashLogoBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

/* Title — letter-by-letter entrance */
.splash-title{
  font-family:'Inter',sans-serif;
  font-size:60px;font-weight:900;
  letter-spacing:-2px;margin:0 0 8px;
  display:flex;gap:0;align-items:baseline;
}
/* Colores del wordmark = los del landing, copiados EXACTO (regla de marca):
   BYSOPHIA en blanco, AI en naranja con glow. Antes las 8 letras iban pintadas
   con un degradado naranja (background-clip:text), asi que "BYSOPHIA" salia
   naranja y no coincidia con el logo de la app ni del sitio. */
.splash-title-letter{
  display:inline-block;
  color:#ffffff;-webkit-text-fill-color:#ffffff;
  animation:splashLetterDrop .85s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(.55s + var(--i) * 80ms);
  opacity:0;transform:translateY(40px) rotateX(90deg);
  transform-origin:center bottom;
}
.splash-title-ai{
  color:#FF6B2B;-webkit-text-fill-color:#FF6B2B;
  text-shadow:0 0 20px rgba(255,107,43,.5);
  margin-left:10px;
  animation-delay:calc(.55s + 8 * 80ms) !important;
}
@keyframes splashLetterDrop{
  0%{opacity:0;transform:translateY(40px) rotateX(90deg)}
  100%{opacity:1;transform:translateY(0) rotateX(0)}
}
.splash-tagline{
  color:rgba(255,255,255,.7);font-size:15px;letter-spacing:1px;
  margin:0 0 32px;
  opacity:0;animation:splashTaglineFade .6s ease 1.9s forwards;
}
@keyframes splashTaglineFade{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:translateY(0)}
}

.splash-loader{
  display:flex;gap:8px;opacity:0;
  animation:splashTaglineFade .5s ease 2.2s forwards;
}
.splash-loader span{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#FF6B2B,#fbbf24);
  animation:splashLoaderBounce 1.2s ease-in-out infinite;
  box-shadow:0 0 12px rgba(255,107,43,.6);
}
.splash-loader span:nth-child(2){animation-delay:.15s}
.splash-loader span:nth-child(3){animation-delay:.3s}
@keyframes splashLoaderBounce{
  0%,80%,100%{transform:scale(.6);opacity:.5}
  40%{transform:scale(1.2);opacity:1}
}

@media (max-width:480px){
  .splash-logo-frame{width:130px;height:130px}
  .splash-logo-mark{width:78px;height:78px;border-radius:18px}
  .splash-title{font-size:44px}
  .splash-tagline{font-size:13px}
}