/* ===================================================
   WELCOME SCREEN - Dr. Simi 5s Animation
   =================================================== */
.welcome-body { margin:0; overflow:hidden; }

.welcome-screen{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(ellipse at center, #1e4ea3 0%, #0a2a5e 60%, #061a3e 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.welcome-screen.fade-out{ animation: welcomeOut 0.7s ease forwards; }
@keyframes welcomeOut{
  to{ opacity:0; visibility:hidden; transform:scale(1.05); }
}

.welcome-bg{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* Floating health icons */
.floating-icons{ position:absolute; inset:0; pointer-events:none; }
.icon-float{
  position:absolute; color:rgba(255,255,255,0.15); font-size:42px;
  animation: floatY 6s ease-in-out infinite;
}
.i1{ top:8%;  left:6%;  font-size:56px; animation-delay:.0s;}
.i2{ top:20%; right:10%; font-size:48px; animation-delay:.6s;}
.i3{ top:65%; left:8%;   font-size:38px; animation-delay:1.2s;}
.i4{ top:78%; right:14%; font-size:50px; animation-delay:.4s;}
.i5{ top:38%; left:14%;  font-size:34px; animation-delay:1.5s;}
.i6{ top:14%; right:30%; font-size:40px; animation-delay:.9s;}
.i7{ top:72%; left:42%;  font-size:36px; animation-delay:2s;}
.i8{ top:30%; right:42%; font-size:44px; animation-delay:1.8s;}
@keyframes floatY{
  0%,100%{ transform:translateY(0) rotate(0); opacity:.12 }
  50%{ transform:translateY(-26px) rotate(8deg); opacity:.28 }
}

/* Healing rays */
.healing-rays{
  position:absolute; width:600px; height:600px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(120,200,255,.18) 20deg, transparent 40deg,
                              transparent 90deg, rgba(120,200,255,.14) 110deg, transparent 130deg,
                              transparent 180deg, rgba(255,255,255,.12) 200deg, transparent 220deg,
                              transparent 270deg, rgba(120,200,255,.18) 290deg, transparent 310deg);
  border-radius:50%;
  filter: blur(8px);
  animation: spinRays 6s linear infinite;
  opacity:.85;
}
@keyframes spinRays{ to{ transform:rotate(360deg);} }

/* Stage */
.stage{
  position:relative;
  width:560px; height:560px;
  display:flex; align-items:center; justify-content:center;
}

/* Healing pulse rings */
.healing-pulse{
  position:absolute; width:280px; height:280px; border-radius:50%;
  border:3px solid rgba(120,210,255,.55);
  box-shadow: 0 0 60px rgba(120,210,255,.5), inset 0 0 40px rgba(255,255,255,.25);
  animation: pulseOut 1.6s ease-out infinite;
}
.healing-pulse.delay{ animation-delay:.8s; }
@keyframes pulseOut{
  0%{ transform:scale(.4); opacity:.9 }
  100%{ transform:scale(2.2); opacity:0 }
}

/* SIMI dancer - frame swap + bounce */
.simi-dancer{
  position:relative;
  width:340px; height:440px;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)) drop-shadow(0 0 30px rgba(120,210,255,.45));
  animation: simiDance 0.6s ease-in-out infinite alternate;
  z-index:5;
}
@keyframes simiDance{
  0%{ transform:translateY(0) rotate(-3deg) scale(1);}
  100%{ transform:translateY(-22px) rotate(3deg) scale(1.04);}
}
.simi-frame{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0;
  animation: frameSwap 1.2s steps(1) infinite;
}
.simi-frame.frame-1{ animation-delay: 0s;   }
.simi-frame.frame-2{ animation-delay: .3s;  }
.simi-frame.frame-3{ animation-delay: .6s;  }
.simi-frame.frame-4{ animation-delay: .9s;  }
@keyframes frameSwap{
  0%, 24%   { opacity:1; }
  25%, 100% { opacity:0; }
}

.simi-shadow{
  position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:240px; height:24px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
  filter: blur(4px);
  animation: shadowPulse .6s ease-in-out infinite alternate;
}
@keyframes shadowPulse{
  0%{ transform:translateX(-50%) scale(1); opacity:.55 }
  100%{ transform:translateX(-50%) scale(.7); opacity:.3 }
}

/* Virus / bacteria - they appear and get neutralized */
.virus{
  position:absolute; font-size:62px; color:#ff5a7a;
  filter: drop-shadow(0 0 14px rgba(255,90,122,.7));
  animation: virusAttack 5s ease-in-out forwards;
  z-index:3;
}
.virus-1{ top:18%; left:6%;  animation-delay:.2s;}
.virus-2{ top:14%; right:8%; color:#ffb84a; animation-delay:.6s;}
.virus-3{ bottom:14%; left:10%; color:#9b5cff; animation-delay:1s; font-size:54px;}
.virus-4{ bottom:18%; right:8%; color:#ff5a7a; animation-delay:1.4s;}

@keyframes virusAttack{
  0%   { transform: scale(0) rotate(0); opacity:0; }
  15%  { transform: scale(1.1) rotate(20deg); opacity:1; }
  40%  { transform: scale(1) translate(20px,10px) rotate(-15deg); opacity:1; }
  55%  { transform: scale(1.2) translate(0,0) rotate(40deg); opacity:1; filter: drop-shadow(0 0 22px rgba(255,255,255,.95)); }
  70%  { transform: scale(.3) rotate(180deg); opacity:.4; filter:hue-rotate(120deg) brightness(2);}
  100% { transform: scale(0) rotate(360deg); opacity:0; }
}

/* Sparkles */
.sparkles{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.sparkle{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle, #fff 0%, #aee2ff 40%, transparent 70%);
  box-shadow: 0 0 18px #fff, 0 0 30px #7ed5ff;
  animation: sparkleFly 1.6s ease-out infinite;
}
.s1{ top:30%; left:30%; animation-delay:.0s;}
.s2{ top:60%; left:65%; animation-delay:.2s;}
.s3{ top:25%; left:70%; animation-delay:.4s;}
.s4{ top:70%; left:30%; animation-delay:.6s;}
.s5{ top:45%; left:20%; animation-delay:.8s;}
.s6{ top:50%; left:78%; animation-delay:1s;}
.s7{ top:20%; left:50%; animation-delay:1.2s;}
.s8{ top:80%; left:50%; animation-delay:1.4s;}
@keyframes sparkleFly{
  0%{ transform:scale(0) translateY(0); opacity:0;}
  30%{ transform:scale(1.4) translateY(-30px); opacity:1;}
  100%{ transform:scale(0) translateY(-80px); opacity:0;}
}

/* Brand text */
.welcome-brand{ position:relative; z-index:7; text-align:center; margin-top:-30px;}
.welcome-title{
  font-family:'Montserrat',sans-serif; font-weight:900;
  font-size: clamp(40px, 7vw, 88px); line-height:.95; letter-spacing:-.02em;
  color:#fff; margin:0; text-shadow:0 8px 30px rgba(0,0,0,.35);
}
.welcome-title span{
  display:inline-block; opacity:0; transform:translateY(30px);
  animation: titleIn .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.welcome-title .t1{ animation-delay:1.2s; color:#fff; margin-right:.18em;}
.welcome-title .t2{ animation-delay:1.5s; color:#7ed5ff; margin-right:.18em;}
.welcome-title .t3{ animation-delay:1.8s; color:#ffd84a;}
@keyframes titleIn{ to{ opacity:1; transform:translateY(0);} }

.welcome-tag{
  color:#cfe6ff; font-family:'Inter',sans-serif; font-weight:500;
  margin-top:14px; font-size:18px; letter-spacing:.06em; opacity:0;
  animation: titleIn .7s ease 2.2s forwards;
}

.welcome-loader{
  margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation: titleIn .6s ease 2.6s forwards;
}
.loader-bar{
  width:280px; height:4px; background:rgba(255,255,255,.18); border-radius:99px; overflow:hidden;
}
.loader-bar span{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg,#7ed5ff,#fff,#ffd84a);
  border-radius:99px;
  animation: loadFill 2.4s ease forwards;
}
@keyframes loadFill{ to{ width:100%; } }
.loader-text{ color:#9bbce6; font-size:13px; font-family:'Inter',sans-serif; margin:0; letter-spacing:.05em;}

@media (max-width:640px){
  .stage{ width:90vw; height:60vh; }
  .simi-dancer{ width:240px; height:320px;}
  .healing-pulse{ width:200px; height:200px;}
  .healing-rays{ width:380px; height:380px;}
}

/* ===== Estado FROZEN (despues de 5 s): congelamos la animacion ===== */
.welcome-screen.frozen .icon-float,
.welcome-screen.frozen .healing-rays,
.welcome-screen.frozen .simi-dancer,
.welcome-screen.frozen .simi-frame,
.welcome-screen.frozen .simi-shadow,
.welcome-screen.frozen .healing-pulse,
.welcome-screen.frozen .virus,
.welcome-screen.frozen .sparkle,
.welcome-screen.frozen .welcome-title span,
.welcome-screen.frozen .welcome-tag,
.welcome-screen.frozen .loader-bar span{
  animation: none !important;
}
/* Al congelar: dejamos visible el frame final del Dr. Simi */
.welcome-screen.frozen .simi-frame{ opacity:0; }
.welcome-screen.frozen .simi-frame.frame-4{ opacity:1; }
/* Virus ya neutralizados */
.welcome-screen.frozen .virus{ opacity:0; transform:scale(0); }
/* Pose final triunfante del Dr. Simi */
.welcome-screen.frozen .simi-dancer{
  transform: translateY(-8px) rotate(0) scale(1.05);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)) drop-shadow(0 0 50px rgba(255,216,74,.65));
}
/* Loader y tag se ocultan suavemente al congelar */
.welcome-screen.frozen .welcome-loader{ opacity:0; transform:translateY(-10px); transition:opacity .5s, transform .5s; }
.welcome-screen.frozen .welcome-title span{ opacity:1; transform:translateY(0); }

/* ===== Boton ENTRAR ===== */
.welcome-enter-wrap{
  position:relative;
  margin-top: 28px;
  opacity:0; visibility:hidden;
  transform: translateY(20px) scale(.9);
  transition: opacity .6s cubic-bezier(.2,.9,.3,1.2), transform .6s cubic-bezier(.2,.9,.3,1.2);
  pointer-events:none;
  z-index:10;
}
.welcome-enter-wrap.show{
  opacity:1; visibility:visible;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.btn-enter{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  padding: 18px 46px;
  font-family:'Montserrat',sans-serif;
  font-weight:900; font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing:.18em;
  color:#0a2a5e;
  background: linear-gradient(135deg, #ffe169 0%, #ffd84a 45%, #ffb800 100%);
  border:none;
  border-radius: 99px;
  box-shadow:
    0 20px 50px rgba(255,184,0,.55),
    0 6px 20px rgba(0,0,0,.35),
    inset 0 -4px 0 rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.55);
  cursor:pointer;
  overflow:hidden;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: enterPulse 1.8s ease-in-out infinite;
}
.btn-enter:hover{
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 28px 60px rgba(255,184,0,.7),
    0 10px 25px rgba(0,0,0,.4),
    inset 0 -4px 0 rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.7);
}
.btn-enter:active{ transform: translateY(0) scale(.98); }
.btn-enter i{ font-size:1.1em; }
.btn-enter .enter-arrow{
  transition: transform .3s ease;
}
.btn-enter:hover .enter-arrow{ transform: translateX(6px); }
.enter-glow{
  position:absolute; inset:-2px;
  border-radius: 99px;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.85), transparent 30%, transparent 60%, rgba(255,255,255,.55), transparent);
  filter: blur(2px);
  animation: enterRot 3s linear infinite;
  z-index:-1;
}
@keyframes enterRot{ to{ transform: rotate(360deg);} }
@keyframes enterPulse{
  0%, 100%{ box-shadow: 0 20px 50px rgba(255,184,0,.55), 0 6px 20px rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.55); }
  50%{ box-shadow: 0 26px 70px rgba(255,184,0,.85), 0 8px 28px rgba(0,0,0,.4), inset 0 -4px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.7); }
}
.enter-hint{
  margin: 14px 0 0; color:#aecbf0; font-family:'Inter',sans-serif;
  font-size:13px; letter-spacing:.05em; opacity:.8;
}

@media (max-width:640px){
  .btn-enter{ padding: 16px 38px; }
  .welcome-enter-wrap{ margin-top: 22px; }
}

/* Hidden by default until intro completes */
.hidden{ display:none !important; }