/* ==========================================================================
   INTRO — video a pantalla completa al entrar o recargar
   Al terminar, tres capas suben en cascada (barrido de cortina) y destapan
   la página. Lógica: modules/intro.js. Mientras dura, <html> lleva la clase
   .intro-active (bloquea el scroll y retrasa la entrada de la portada).
   ========================================================================== */

.intro { display: none; }
.js .intro { position: fixed; inset: 0; z-index: 1000; display: block; pointer-events: auto; }
.intro-layer { position: absolute; inset: 0; overflow: hidden; border-radius: 0; will-change: transform; transition: transform 1s cubic-bezier(.76,0,.24,1), border-radius 1s cubic-bezier(.76,0,.24,1); }
.intro-layer--navy { z-index: 1; background: var(--navy); transition-delay: .26s; }
.intro-layer--cyan { z-index: 2; background: var(--cyan); transition-delay: .13s; }
.intro-layer--video { z-index: 3; display: flex; align-items: center; justify-content: center; background: #0051A6; }
.intro-video { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 1s cubic-bezier(.76,0,.24,1), opacity .6s ease; }
/* Barrido tipo cortina: las capas suben una tras otra con el borde curvo */
.intro.is-done { pointer-events: none; }
.intro.is-done .intro-layer { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 22vh 22vh; }
.intro.is-done .intro-video { transform: translateY(18vh) scale(.9); opacity: 0; }
html.intro-active { overflow: hidden; }
/* El hero espera a que termine la intro para animarse */
.intro-active .hero [data-reveal] { opacity: 0 !important; translate: 0 44px !important; }