/* Introducción: logotipo animado (vídeo de marca) → puertas que se abren → web. Sin barra de carga ni textos. */
#intro { position: fixed; inset: 0; z-index: 9999; background: #FFF4F7; overflow: hidden; animation: introFailsafe 0s 12s forwards; }
html.no-intro #intro { display: none; }
@keyframes introFailsafe { to { visibility: hidden; pointer-events: none; } }

/* El vídeo es 16:9. En horizontal cubre la pantalla; en vertical se amplía para que el logotipo tenga buen tamaño. */
#intro video, .door canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(64vw, 114vh); height: auto; max-width: none; }
@media (max-aspect-ratio: 1/1) { #intro video, .door canvas { width: 122vw; } }
#intro-static { display: none; }

.door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #FFF4F7; will-change: transform; transition: transform .9s cubic-bezier(.76, 0, .18, 1); }
.door.l { left: 0; }
.door.r { right: 0; }
.door .in { position: absolute; top: 0; bottom: 0; width: 100vw; }
.door.l .in { left: 0; }
.door.r .in { right: 0; }
.door.l::after, .door.r::after { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; }
.door.l::after { right: 0; background: linear-gradient(90deg, transparent, rgba(155, 44, 94, .10)); }
.door.r::after { left: 0; background: linear-gradient(270deg, transparent, rgba(155, 44, 94, .10)); }
#intro.open .door.l { transform: translateX(-101%); }
#intro.open .door.r { transform: translateX(101%); }
#intro.fade { opacity: 0; transition: opacity .35s ease; }

/* Movimiento reducido: transición simple (aparece y se desvanece el logotipo) sin vídeo ni puertas. */
html.intro-reduced #intro-video { display: none; }
html.intro-reduced #intro-static { display: block; position: absolute; left: 50%; top: 50%; width: min(300px, 60vw); transform: translate(-50%, -50%); animation: introStatic 1.2s ease both; }
@keyframes introStatic { 0% { opacity: 0; } 35%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* La landing espera a que termine la intro para animar el hero. */
html:not(.intro-done):not(.no-intro) .hero [data-hero] { animation-play-state: paused; }

/* Bordes del vídeo difuminados: durante el barrido rosa inicial no se ve el contorno del rectángulo (el logo queda en el centro). */
#intro video {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

/* Bloqueo de scroll mientras suena la introducción (con salvavidas por si algo falla) */
html.intro-lock, html.intro-lock body { overflow: hidden; overscroll-behavior: none; touch-action: none; animation: introUnlock 0s 11s forwards; }
@keyframes introUnlock { to { overflow: visible; touch-action: auto; } }

/* ---- Entrada breve tras iniciar sesión ---- */
.welcome { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: var(--bg, #fff); opacity: 1; transition: opacity .38s ease; }
.welcome.out { opacity: 0; pointer-events: none; }
.welcome img { width: 96px; height: 96px; border-radius: 26px; animation: welcomePop .9s cubic-bezier(.22, 1, .36, 1) both; box-shadow: 0 18px 50px rgba(232, 70, 124, .35); }
.welcome-ring { position: absolute; width: 96px; height: 96px; border-radius: 30px; border: 3px solid var(--pink); opacity: 0; animation: welcomeRing 1s .15s ease-out both; }
.welcome.calm img, .welcome.calm .welcome-ring { animation: none; }
.welcome.calm .welcome-ring { display: none; }
@keyframes welcomePop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 55% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes welcomeRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
html.welcome-lock, html.welcome-lock body { overflow: hidden; }

/* Sin destello negro: el fondo de la intro es opaco desde el primer píxel y el vídeo aparece con su primer fotograma */
html:not(.no-intro):not(.intro-done) body { background: #FFF4F7; }
#intro video { opacity: 0; transition: opacity .25s ease; background: #FFF4F7; }
#intro video.on { opacity: 1; }
html.intro-reduced #intro video { display: none; }