/* Intro épica: mecha → fuego → desvanecer → entrada del login */
#intro-fuego{
  position:fixed; inset:0; z-index:100000; background:#050805;
  display:block; overflow:hidden; touch-action:manipulation;
  transition:opacity 1.1s ease;
}
#intro-fuego canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#intro-fuego.saliendo{ opacity:0; pointer-events:none; }
#intro-fuego .intro-marca{
  position:absolute; left:0; right:0; bottom:9%; text-align:center;
  font-family:inherit; letter-spacing:.35em; text-transform:uppercase;
  font-size:.8rem; color:#ffd9a0; opacity:0; text-shadow:0 0 14px #ff7a1a;
  transition:opacity 1.2s ease;
}
#intro-fuego .intro-marca.visible{ opacity:.9; }

/* Mientras dura la intro, el login espera oculto */
body.intro-activa .login-overlay{ opacity:0; pointer-events:none; }

/* Al terminar la entrada, el cuadro queda quieto (sin reiniciar la animación base de style.css) */
body:not(.login-entra) .login-card{ animation:none; }

/* Entrada épica del cuadro de login */
body.login-entra .login-overlay{ animation: loginBrasa 1.1s ease-out both; }
body.login-entra .login-card{
  animation: cardEpica 1.2s cubic-bezier(.16,.9,.25,1) both;
}
body.login-entra .login-card > *{
  animation: campoSube .7s ease-out both;
}
body.login-entra .login-card > *:nth-child(1){ animation-delay:.35s }
body.login-entra .login-card > *:nth-child(2){ animation-delay:.45s }
body.login-entra .login-card > *:nth-child(3){ animation-delay:.55s }
body.login-entra .login-card > *:nth-child(4){ animation-delay:.65s }
body.login-entra .login-card > *:nth-child(5){ animation-delay:.75s }
body.login-entra .login-card > *:nth-child(6){ animation-delay:.85s }
body.login-entra .login-card > *:nth-child(7){ animation-delay:.95s }
body.login-entra .login-card > *:nth-child(8){ animation-delay:1.05s }
body.login-entra .login-card > *:nth-child(9){ animation-delay:1.15s }
@keyframes loginBrasa{ from{ background:rgba(60,18,4,.85);} to{ background:rgba(6,12,8,.72);} }
@keyframes cardEpica{
  0%{ opacity:0; box-shadow:0 0 120px 30px rgba(255,120,30,.75); }
  60%{ opacity:1; box-shadow:0 0 70px 10px rgba(255,140,40,.45); }
  100%{ opacity:1; box-shadow:0 24px 60px rgba(0,0,0,.5); }
}
/* Solo opacidad (sin mover ni escalar): así el texto no vibra al terminar */
@keyframes campoSube{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  #intro-fuego{ display:none !important; }
  body.intro-activa .login-overlay{ opacity:1; pointer-events:auto; }
}

/* ===== Animación de bienvenida al ingresar ===== */
#entrada-overlay{
  position:fixed; inset:0; z-index:100001; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 55%, #1c2b20 0%, #0a120d 55%, #050805 100%);
  animation: entAbre .7s cubic-bezier(.65,0,.35,1) both;
}
#entrada-overlay.saliendo{ animation: entCierra .9s ease-in forwards; pointer-events:none; }
@keyframes entAbre{ from{ clip-path: circle(0% at 50% 50%); } to{ clip-path: circle(150% at 50% 50%); } }
@keyframes entCierra{ from{ opacity:1; transform:scale(1); filter:none; } to{ opacity:0; transform:scale(1.18); filter:blur(8px); } }

.ent-centro{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; }
.ent-logo{ position:relative; width:128px; height:128px; display:flex; align-items:center; justify-content:center; }
.ent-logo svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.ent-logo circle{
  fill:none; stroke:#e9b35a; stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  filter: drop-shadow(0 0 6px rgba(255,170,70,.8));
  animation: entAro 1.1s .35s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes entAro{ to{ stroke-dashoffset:0; } }
.ent-logo img{
  width:84px; height:84px; object-fit:contain; mix-blend-mode:screen;
  opacity:0; transform:scale(.6);
  animation: entFuego .9s .55s cubic-bezier(.2,1.2,.4,1) forwards, entLate 1.6s 1.5s ease-in-out infinite;
}
.ent-logo::before{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,140,40,.38) 0%, rgba(255,100,20,.12) 50%, rgba(255,80,0,0) 72%);
  opacity:0; animation: entFuego .9s .55s ease-out forwards;
}
@keyframes entFuego{ to{ opacity:1; transform:scale(1); } }
@keyframes entLate{ 50%{ transform:scale(1.07); } }

.ent-nombre{
  margin-top:22px; font-family: var(--display, Georgia, serif);
  font-size:1.9rem; letter-spacing:.32em; color:#f6e7c8; white-space:nowrap;
}
.ent-nombre span{ display:inline-block; opacity:0; transform:translateY(12px); filter:blur(6px); animation: entLetra .6s ease-out forwards; }
@keyframes entLetra{ to{ opacity:1; transform:none; filter:none; } }
.ent-linea{
  width:0; height:1px; margin:18px 0 14px;
  background: linear-gradient(90deg, transparent, #e9b35a, transparent);
  animation: entLinea .8s 1.9s ease-out forwards;
}
@keyframes entLinea{ to{ width:min(240px, 60vw); } }
.ent-saludo{
  font-size:1.05rem; color:#d9c9a6; letter-spacing:.06em; opacity:0; transform:translateY(10px);
  animation: entSaludo .7s 2.1s ease-out forwards;
}
@keyframes entSaludo{ to{ opacity:1; transform:none; } }

.ent-brasas{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ent-brasas i{
  position:absolute; bottom:-10px; border-radius:50%;
  background: radial-gradient(circle, #fff0b8 0%, #ff9a3a 55%, rgba(255,90,0,0) 75%);
  opacity:0; animation: entBrasa 2.4s linear infinite;
}
@keyframes entBrasa{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:.95; } 100%{ transform:translateY(-75vh) translateX(18px); opacity:0; } }

@media (max-width: 480px){
  .ent-nombre{ font-size:1.35rem; letter-spacing:.24em; }
  .ent-logo{ width:112px; height:112px; } .ent-logo img{ width:72px; height:72px; }
}
@media (prefers-reduced-motion: reduce){ #entrada-overlay{ display:none !important; } }

/* ===== Entrada elegante de la pantalla de inicio ===== */
#vista-inicio.hero-anima .hero-text .label{ animation: hLabel .9s cubic-bezier(.2,.8,.2,1) .15s both; }
#vista-inicio.hero-anima .hero-text h1{ animation: hTitulo 1.2s cubic-bezier(.2,.8,.2,1) .35s both; }
#vista-inicio.hero-anima .hero-text h1 em{ animation: hAcento 1.4s ease-out .9s both; }
#vista-inicio.hero-anima .hero-text p{ animation: hSube .9s cubic-bezier(.2,.8,.2,1) .85s both; }
#vista-inicio.hero-anima .hero-text .actions{ animation: hSube .9s cubic-bezier(.2,.8,.2,1) 1.1s both; }
#vista-inicio.hero-anima .hero-visual{ animation: hVitrina 1.5s cubic-bezier(.16,.9,.25,1) .5s both; }
#vista-inicio.hero-anima .showcase-tag{ animation: hSube .8s ease-out 1.5s both; }
#vista-inicio.hero-anima .showcase-glow{ animation: hResplandor 2s ease-out .6s both; }
#vista-inicio.hero-anima .quote{ animation: hSube .9s ease-out 1.7s both; }
#vista-inicio.hero-anima .info-strip > div{ animation: hSube .8s cubic-bezier(.2,.8,.2,1) both; }
#vista-inicio.hero-anima .info-strip > div:nth-child(1){ animation-delay: 1.5s; }
#vista-inicio.hero-anima .info-strip > div:nth-child(2){ animation-delay: 1.65s; }
#vista-inicio.hero-anima .info-strip > div:nth-child(3){ animation-delay: 1.8s; }

@keyframes hLabel{ from{ opacity:0; transform:translateX(-40px); letter-spacing:.7em; } to{ opacity:1; transform:none; } }
@keyframes hTitulo{ from{ opacity:0; transform:translateY(46px); filter:blur(14px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes hAcento{ 0%{ text-shadow:0 0 0 rgba(200,84,61,0); } 40%{ text-shadow:0 0 28px rgba(255,120,60,.9); } 100%{ text-shadow:0 0 0 rgba(200,84,61,0); } }
@keyframes hSube{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes hVitrina{ from{ opacity:0; transform:translateX(90px) scale(.9); filter:blur(10px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes hResplandor{ 0%{ opacity:0; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.25); } 100%{ opacity:1; transform:scale(1); } }

/* ===== Entrada épica del catálogo ===== */
.barrido-luz{
  position:fixed; inset:-20% -60%; z-index:100002; pointer-events:none;
  background: linear-gradient(105deg, rgba(0,0,0,0) 30%, rgba(255,170,70,.0) 38%, rgba(255,200,110,.55) 49%, rgba(255,255,230,.9) 50%, rgba(255,200,110,.55) 51%, rgba(255,170,70,0) 62%, rgba(0,0,0,0) 70%);
  mix-blend-mode: screen;
  animation: barrido 1s cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes barrido{ from{ transform:translateX(-60%); } to{ transform:translateX(60%); } }

#vista-catalogo.cat-anima .page-head-text h1{ animation: catTitulo 1.1s cubic-bezier(.2,.8,.2,1) .1s both; }
#vista-catalogo.cat-anima .page-head-text h1 em{ animation: hAcento 1.4s ease-out .8s both; }
#vista-catalogo.cat-anima .page-head-text p{ animation: hSube .8s ease-out .55s both; }
#vista-catalogo.cat-anima .page-head-note{ animation: catNota 1.1s cubic-bezier(.2,.8,.2,1) .45s both; }
#vista-catalogo.cat-anima .card-enter{
  animation: cardEpico .95s cubic-bezier(.2,.9,.25,1) both;
  transform-origin: 50% 100%;
}
nav.nav-anima{ animation: navBaja .9s cubic-bezier(.2,.8,.2,1) .1s both; }

@keyframes catTitulo{ from{ opacity:0; transform:translateY(40px) scale(.96); filter:blur(12px); letter-spacing:.06em; } to{ opacity:1; transform:none; filter:none; } }
@keyframes catNota{ from{ opacity:0; transform:translateX(70px); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes cardEpico{
  0%{ opacity:0; transform: perspective(900px) translateY(70px) rotateX(38deg) scale(.88); filter:blur(8px); box-shadow:0 0 0 rgba(120,255,150,0); }
  55%{ opacity:1; filter:none; box-shadow:0 0 34px rgba(120,255,150,.55); }
  100%{ opacity:1; transform: perspective(900px) translateY(0) rotateX(0) scale(1); filter:none; box-shadow:0 0 0 rgba(120,255,150,0); }
}
@keyframes navBaja{ from{ opacity:0; transform:translateY(-70px); } to{ opacity:1; transform:none; } }