/**
 * @project    Facturacion 2.0
 * @author     Wilber Córdoba (WM TECHNOLOGY)
 * @copyright  Copyright (c) 2026 WM TECHNOLOGY. Todos los derechos reservados.
 * @license    Propietario / Uso Exclusivo Comercial
 */

/* =========================================================================
   Animación de apertura (login.php e index.php).
   El logo se arma en 3D con sus tres piezas reales (M magenta, W cian,
   chevrón naranja), un destello recorre la marca y la app se revela en
   círculo desde el centro del logo.
   Modos (clase en <html>, la pone el script en línea del <head> antes de
   pintar nada, así no hay parpadeo):
     .sp-full    primera apertura de la sesión: animación completa (~1,9 s)
     .sp-quick   recargas / paso del login al panel: versión corta (~0,45 s)
     .sp-reduced el dispositivo pide menos movimiento: solo fundido
   La animación corre MIENTRAS la app carga sus datos; nunca la retrasa
   más de lo necesario (ver assets/js/splash.js).
   ========================================================================= */
.splash{
  --sp-bg:#120A1F; --sp-m:#E04BEA; --sp-w:#16D2F0; --sp-c:#FF8A4C;
  position:fixed; inset:0; z-index:10000; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--sp-bg); color:#F4EEFF;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.splash[hidden]{display:none;}

/* Aurora de fondo: tres manchas de color de la marca, desenfocadas y a la deriva */
.sp-aurora{position:absolute; inset:-20%; filter:blur(70px); opacity:.55;}
.sp-aurora i{position:absolute; border-radius:50%; mix-blend-mode:screen;}
.sp-aurora .a1{width:46vmax; height:46vmax; left:8%;  top:12%; background:radial-gradient(circle, rgba(224,75,234,.75), transparent 65%); animation:sp-drift1 14s ease-in-out infinite alternate;}
.sp-aurora .a2{width:42vmax; height:42vmax; right:6%; top:26%; background:radial-gradient(circle, rgba(22,210,240,.6), transparent 65%);  animation:sp-drift2 16s ease-in-out infinite alternate;}
.sp-aurora .a3{width:30vmax; height:30vmax; left:36%; bottom:4%; background:radial-gradient(circle, rgba(255,138,76,.45), transparent 65%); animation:sp-drift3 12s ease-in-out infinite alternate;}
@keyframes sp-drift1{to{transform:translate(9vmax,6vmax) scale(1.15);}}
@keyframes sp-drift2{to{transform:translate(-8vmax,-5vmax) scale(.9);}}
@keyframes sp-drift3{to{transform:translate(-5vmax,-7vmax) scale(1.2);}}

/* Piso en perspectiva, muy tenue, que avanza hacia quien mira */
.sp-floor{position:absolute; left:-50%; right:-50%; bottom:-10%; height:55%;
  background-image:linear-gradient(rgba(224,75,234,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(22,210,240,.28) 1px, transparent 1px);
  background-size:56px 56px; transform:perspective(420px) rotateX(64deg); transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 85%); mask-image:linear-gradient(to top, #000 0%, transparent 85%);
  opacity:.16; animation:sp-floor 2.4s linear infinite;}
@keyframes sp-floor{to{background-position:0 56px, 0 0;}}
/* Grano fino para que los degradados no se vean planos */
.sp-noise{position:absolute; inset:0; opacity:.07; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.sp-stage{position:relative; display:flex; flex-direction:column; align-items:center; padding:24px;}

/* --- Logo --------------------------------------------------------------- */
.sp-logo{position:relative; width:clamp(112px, 30vmin, 168px); aspect-ratio:1; perspective:900px; transform-style:preserve-3d;}
.sp-logo img{position:absolute; inset:0; width:100%; height:100%; display:block; will-change:transform, opacity, filter;}
.sp-m{filter:drop-shadow(0 0 14px rgba(224,75,234,.55));}
.sp-w{filter:drop-shadow(0 0 14px rgba(22,210,240,.5));}
.sp-c{filter:drop-shadow(0 0 12px rgba(255,138,76,.55));}

/* Destello que recorre SOLO la forma del logo (máscara con el logo real) */
.sp-shine{position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.95) 48%, rgba(255,255,255,.25) 56%, transparent 66%);
  background-size:260% 100%; background-position:120% 0;
  -webkit-mask:url(../img/logo-mark.png) center/contain no-repeat; mask:url(../img/logo-mark.png) center/contain no-repeat;
  mix-blend-mode:overlay;}

/* Onda de choque al encajar las piezas */
.sp-ring{position:absolute; left:50%; top:50%; width:100%; height:100%; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); transform:translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none;
  box-shadow:0 0 30px rgba(224,75,234,.5), inset 0 0 30px rgba(22,210,240,.35);}

/* Chispas que convergen hacia el centro antes de armarse el logo */
.sp-sparks{position:absolute; left:50%; top:50%; width:0; height:0;}
.sp-sparks i{position:absolute; width:4px; height:4px; margin:-2px; border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 8px 2px var(--c, var(--sp-m));
  transform:rotate(var(--a)) translateX(var(--r, 40vmin));}

/* --- Marca y estado ------------------------------------------------------ */
.sp-word{display:flex; gap:.06em; margin-top:22px; font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:clamp(26px, 7vmin, 34px); letter-spacing:.14em; line-height:1; overflow:hidden; padding:2px 0 4px;}
.sp-word span{display:inline-block;
  background:linear-gradient(180deg, #fff 30%, #D9C8F5); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sp-sub{margin-top:8px; font-size:11px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:rgba(244,238,255,.62); padding-left:.42em;}
.sp-bar{position:relative; width:clamp(140px, 42vmin, 200px); height:3px; margin-top:28px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden;}
.sp-bar i{position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(var(--p, .08));
  background:linear-gradient(90deg, var(--sp-m), var(--sp-w) 60%, var(--sp-c)); border-radius:3px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1); box-shadow:0 0 12px rgba(22,210,240,.6);}
.sp-bar i::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); background-size:50% 100%; background-repeat:no-repeat; animation:sp-bar-shine 1.1s linear infinite;}
@keyframes sp-bar-shine{from{background-position:-60% 0;} to{background-position:160% 0;}}
.sp-status{margin-top:12px; min-height:16px; font-size:11.5px; color:rgba(244,238,255,.55); letter-spacing:.04em; text-align:center; max-width:320px;}
.sp-status.err{color:#FF8FA8; font-size:12.5px;}
.sp-skip{position:absolute; bottom:calc(22px + env(safe-area-inset-bottom)); left:0; right:0; text-align:center; font-size:11px; color:rgba(244,238,255,.32); letter-spacing:.06em;}

/* =========================================================================
   Línea de tiempo — modo completo
   ========================================================================= */
.sp-full .sp-sparks i{animation:sp-spark .62s cubic-bezier(.55,0,.9,.4) both; animation-delay:var(--d, 0s);}
@keyframes sp-spark{0%{opacity:0;} 25%{opacity:1;} 100%{opacity:0; transform:rotate(var(--a)) translateX(0);}}

.sp-full .sp-m{animation:sp-in-m .78s cubic-bezier(.2,.9,.25,1.08) .26s both;}
.sp-full .sp-w{animation:sp-in-w .78s cubic-bezier(.2,.9,.25,1.08) .38s both;}
.sp-full .sp-c{animation:sp-in-c .62s cubic-bezier(.3,1.5,.5,1) .66s both;}
@keyframes sp-in-m{
  0%{opacity:0; transform:translate3d(-58%,-6%,-260px) rotateY(-78deg) rotateZ(-8deg); filter:blur(10px) drop-shadow(0 0 0 transparent);}
  60%{opacity:1; filter:blur(0) drop-shadow(0 0 22px rgba(224,75,234,.9));}
  100%{opacity:1; transform:none; filter:drop-shadow(0 0 14px rgba(224,75,234,.55));}
}
@keyframes sp-in-w{
  0%{opacity:0; transform:translate3d(58%,6%,-260px) rotateY(78deg) rotateZ(8deg); filter:blur(10px) drop-shadow(0 0 0 transparent);}
  60%{opacity:1; filter:blur(0) drop-shadow(0 0 22px rgba(22,210,240,.9));}
  100%{opacity:1; transform:none; filter:drop-shadow(0 0 14px rgba(22,210,240,.5));}
}
@keyframes sp-in-c{
  0%{opacity:0; transform:translate3d(0,70%,-120px) rotateX(75deg) scale(.5);}
  100%{opacity:1; transform:none;}
}
/* Encaje: el logo "late" una vez, sale la onda y pasa el destello */
.sp-full .sp-logo{animation:sp-lock .5s cubic-bezier(.3,1.6,.5,1) 1.1s both;}
@keyframes sp-lock{0%{transform:scale(1);} 40%{transform:scale(1.06);} 100%{transform:scale(1);}}
.sp-full .sp-ring{animation:sp-ring .9s cubic-bezier(.1,.6,.3,1) 1.12s both;}
.sp-full .sp-ring.r2{animation-delay:1.26s; border-color:rgba(22,210,240,.45);}
@keyframes sp-ring{0%{opacity:0; transform:translate(-50%,-50%) scale(.7);} 2%{opacity:.9;} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.6);}}
.sp-full .sp-shine{animation:sp-shine .85s ease-in-out 1.15s both;}
@keyframes sp-shine{0%{opacity:1; background-position:120% 0;} 100%{opacity:1; background-position:-30% 0;}}

.sp-full .sp-word span{animation:sp-letter .6s cubic-bezier(.2,.9,.3,1) both;}
.sp-full .sp-word span:nth-child(1){animation-delay:1.16s;}
.sp-full .sp-word span:nth-child(2){animation-delay:1.24s;}
.sp-full .sp-word span:nth-child(3){animation-delay:1.32s;}
@keyframes sp-letter{0%{opacity:0; transform:translateY(110%) rotateX(-80deg);} 100%{opacity:1; transform:none;}}
.sp-full .sp-sub{animation:sp-track .8s cubic-bezier(.2,.8,.2,1) 1.42s both;}
@keyframes sp-track{0%{opacity:0; letter-spacing:.9em;} 100%{opacity:1;}}
.sp-full .sp-bar, .sp-full .sp-status{animation:sp-fade .5s ease .3s both;}
.sp-full .sp-skip{animation:sp-fade .6s ease 2.4s both;}
@keyframes sp-fade{from{opacity:0;} to{opacity:1;}}

/* Modo corto: todo armado, entra con un leve zoom */
.sp-quick .sp-stage{animation:sp-quick .42s cubic-bezier(.2,.8,.2,1) both;}
@keyframes sp-quick{from{opacity:0; transform:scale(.94);} to{opacity:1; transform:none;}}
.sp-quick .sp-skip, .sp-reduced .sp-skip{display:none;}

/* Menos movimiento: sin 3D, sin piso, sin aurora a la deriva */
.sp-reduced .sp-floor, .sp-reduced .sp-sparks, .sp-reduced .sp-ring{display:none;}
.sp-reduced .sp-aurora i, .sp-reduced .sp-bar i::after{animation:none;}
.sp-reduced .sp-stage{animation:sp-fade .25s ease both;}

/* =========================================================================
   Salida: el logo se recoge y la app se abre en círculo desde el centro
   ========================================================================= */
.splash.sp-out .sp-stage{transition:transform .5s cubic-bezier(.7,0,.2,1), opacity .4s ease; transform:scale(.86); opacity:0;}
.splash.sp-out .sp-floor, .splash.sp-out .sp-aurora{transition:opacity .5s ease; opacity:0;}
.sp-revealing{position:relative; z-index:10001; background:var(--bg, #F7F5FB);
  animation:sp-reveal .7s cubic-bezier(.75,0,.2,1) both;}
@keyframes sp-reveal{
  from{clip-path:circle(0% at var(--sp-x, 50%) var(--sp-y, 50%));}
  to{clip-path:circle(150% at var(--sp-x, 50%) var(--sp-y, 50%));}
}
.sp-reduced .sp-revealing{animation:sp-fade .25s ease both;}