/* AMT — bienvenida (la usan la app, la landing, /planes/ y las páginas de acceso) */
/* ============================================================
   Bienvenida épica (assets/js/welcome.js): saludo → Λ con destello en la cima → se lanza hacia la cámara → golpe en blanco
   ============================================================ */
.welcome { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; overflow: hidden; background: #000; cursor: pointer; transition: opacity .75s ease; }
.welcome.is-out { opacity: 0; pointer-events: none; }
.wl-text-box { position: absolute; padding: 0 24px; text-align: center; transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.welcome.is-text-out .wl-text-box { opacity: 0; filter: blur(8px); transform: scale(.98); }
.wl-text {
  margin: 0; font-size: clamp(24px, 3.1vw, 40px); font-weight: 600; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 255, 255, .28), 0 0 60px rgba(255, 255, 255, .12);
  opacity: 0; filter: blur(10px); transform: translateY(6px);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1);
}
.wl-sub { margin: 16px 0 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); opacity: 0; transition: opacity 1s ease .7s; }
.welcome.is-in .wl-text { opacity: 1; filter: none; transform: none; }
.welcome.is-in .wl-sub { opacity: 1; }

/* el Λ: se revela de abajo arriba; la cámara lo «atraviesa» por su punta (origen del zoom en el trazo) */
.wl-mark { position: absolute; width: clamp(90px, 9vw, 130px); aspect-ratio: 453 / 477; color: #fff; transform-origin: 50% 9%; opacity: 0; will-change: transform; }
.wl-mark svg { display: block; width: 100%; height: 100%; clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); transition: clip-path .7s cubic-bezier(.2, .7, .1, 1); }
.welcome.is-logo .wl-mark { opacity: 1; }
.welcome.is-logo .wl-mark svg { clip-path: inset(0 0 0 0); }
/* destello en la cima */
.wl-glint { position: absolute; left: 50%; top: 2%; width: 0; height: 0; pointer-events: none; }
.wl-glint::before, .wl-glint::after { content: ""; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.wl-glint::before { width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .9) 8%, rgba(255, 255, 255, .25) 26%, transparent 62%); }
.wl-glint::after { width: 520px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent); box-shadow: 0 0 14px #fff; }
.welcome.is-glint .wl-glint::before { animation: wl-glint .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.welcome.is-glint .wl-glint::after { animation: wl-streak .7s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes wl-glint { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
@keyframes wl-streak { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.05); } 25% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.3); } }
/* se lanza hacia nosotros y, mientras se acerca, el negro se desvanece: el dashboard aparece detrás (sin golpe en blanco) */
.welcome.is-zoom .wl-mark { transform: scale(90); transition: transform .77s cubic-bezier(.72, 0, .92, .38); }
.welcome.is-zoom .wl-mark svg { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6)) blur(.4px); }
.welcome.is-reveal { background: rgba(0, 0, 0, 0); pointer-events: none; transition: background-color .5s cubic-bezier(.4, 0, .2, 1) .12s; }
.welcome.is-zoom.is-reveal .wl-mark { opacity: 0; transition: transform .77s cubic-bezier(.72, 0, .92, .38), opacity .3s ease .32s; }
/* Λ ya visible al instante (cuando la animación sigue en otra página) */
.welcome.is-hold .wl-mark svg { clip-path: inset(0 0 0 0); transition: none; }
@media (max-width: 640px) { .wl-text { font-size: 26px; } }

/* llegada a la app tras la bienvenida (assets/js/boot-flash.js): negro con el Λ en el mismo sitio hasta que playReveal lo lanza */
html.wl-boot::before { content: ""; position: fixed; inset: 0; z-index: 600; background: #000; pointer-events: none; }
html.wl-boot::after {
  content: ""; position: fixed; z-index: 601; left: 50%; top: 50%; width: clamp(90px, 9vw, 130px); aspect-ratio: 453 / 477;
  transform: translate(-50%, -50%); pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 453 477'%3E%3Cpath fill='%23fff' d='M214 0h25l214 477h-56L226.5 103 56 477H0z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35));
}
