/* INTRO DE ARDUZ (ver public/js/intro.js). Se carga en todas las paginas: pesa 2 KB y solo actua cuando intro.js arma el telon. */ /* layout.eta marca desde el cuando la intro todavia no se mostro en esta visita: la pagina no se ve un instante antes del telon. Por si intro.js no llega, a los 3 s se destapa sola. */ html.intro-esperando body { opacity: 0; animation: intro-destapar 0s 3s forwards; } @keyframes intro-destapar { to { opacity: 1; } } body.intro-abierta { overflow: hidden; } .intro { position: fixed; inset: 0; z-index: 1000; background: #050302; overflow: hidden; font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; } .intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .intro .intro-vfuego { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; overflow: hidden; opacity: 0; transform: translateY(30%); will-change: opacity, transform, filter; -webkit-mask-image: linear-gradient(to top, #000 58%, transparent 100%); mask-image: linear-gradient(to top, #000 58%, transparent 100%); } .intro .intro-vfuego video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; mix-blend-mode: screen; } .intro .intro-vfuego video.intro-vb { transform: scaleX(-1); } .intro .intro-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; } .intro .intro-logo { width: min(64vw, 520px); max-width: 100%; opacity: 0; transform: translateY(40vh) scale(.9); filter: brightness(.15) sepia(1) saturate(6) hue-rotate(-20deg); will-change: transform, filter, opacity; } .intro .intro-lema { font-family: Consolas, "Courier New", monospace; font-size: clamp(12px, 1.6vw, 16px); letter-spacing: .42em; text-transform: uppercase; color: #f0cd84; text-shadow: 0 0 18px rgba(255, 140, 50, .8), 0 1px 4px #000, 0 0 2px #000; opacity: 0; height: 1.4em; white-space: nowrap; } .intro .intro-prende { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(60vw 40vh at 50% 100%, rgba(122, 0, 0, .35), transparent 70%); } .intro .intro-prende img { width: min(46vw, 380px); opacity: .28; filter: brightness(.6) sepia(1) saturate(4) hue-rotate(-15deg) drop-shadow(0 0 30px rgba(255, 90, 20, .25)); } .intro .intro-btn { padding: 14px 30px; border-radius: 999px; border: 1px solid #7a0000; background: linear-gradient(180deg, #e01515, #a30000); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; font-family: inherit; animation: intro-pulsa 1.6s ease-in-out infinite; } .intro .intro-btn:hover { filter: brightness(1.12); } .intro .intro-btn:focus-visible { outline: 2px solid #d8b066; outline-offset: 3px; } @keyframes intro-pulsa { 0%, 100% { box-shadow: 0 6px 22px rgba(204, 0, 0, .28); } 50% { box-shadow: 0 6px 40px rgba(255, 80, 20, .75); } } .intro .intro-prende small { font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8a7a64; } .intro .intro-saltar { position: absolute; right: 22px; bottom: 18px; font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8a7a64; background: none; border: 1px solid #38271f; border-radius: 999px; padding: 7px 14px; cursor: pointer; z-index: 2; } .intro .intro-saltar:hover { color: #f0cd84; border-color: #9e7b51; } .intro.intro-fuera { transition: opacity .9s ease; opacity: 0; pointer-events: none; }