/* ═══════════════════════════════════════════════════════════════════ VORTEX × GTA VI — INTRO CINEMATOGRÁFICO + HERO BANNER Collage acumulativo: cada arte entra y SE QUEDA flotando. No hay reemplazo de imágenes, no hay slideshow, no hay video. Estados en #gtavi-intro: is-boot → is-building → is-settling → is-final → is-out ═══════════════════════════════════════════════════════════════════ */ /* ── Guardas globales (las aplica el script inline del ) ── */ html.gtavi-intro-lock, html.gtavi-intro-lock body { overflow: hidden !important; } html.gtavi-intro-off #gtavi-intro { display: none !important; } /* ═══════════════════════════════════════════════════════════ 1 · CONTENEDOR DEL INTRO ═══════════════════════════════════════════════════════════ */ #gtavi-intro{ position: fixed; inset: 0; z-index: 99999; background: #05060e; overflow: hidden; opacity: 1; transition: opacity .82s cubic-bezier(.4,0,.2,1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #gtavi-intro.is-out{ opacity: 0; pointer-events: none; } /* Ambiente neón VORTEX de fondo */ #gtavi-intro::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 42% at 50% 50%, rgba(139,92,246,.22), transparent 70%), radial-gradient(70% 50% at 88% 4%, rgba(34,228,255,.14), transparent 60%), radial-gradient(70% 50% at 8% 96%, rgba(255,45,120,.16), transparent 60%); } /* Viñeta cinematográfica sobre todo el conjunto */ #gtavi-intro::after{ content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(135% 115% at 50% 50%, transparent 54%, rgba(5,6,14,.80) 100%); } /* ═══════════════════════════════════════════════════════════ 2 · ESCENARIO — caja proporcional donde vive el collage Todas las posiciones son % de esta caja ⇒ escala perfecta. ═══════════════════════════════════════════════════════════ */ .gi-stage{ --stage-w: min(96vw, 1500px); --stage-ar: 1672 / 941; /* mismo aspecto del banner final */ position: absolute; top: 50%; left: 50%; width: var(--stage-w); aspect-ratio: var(--stage-ar); transform: translate(-50%, -50%) scale(1); transform-origin: 50% 50%; z-index: 10; /* Retroceso de cámara suave en el lock-in */ transition: transform 1.15s cubic-bezier(.16,.84,.24,1), opacity .95s ease; } #gtavi-intro.is-settling .gi-stage{ transform: translate(-50%,-50%) scale(.963); } #gtavi-intro.is-final .gi-stage{ transform: translate(-50%,-50%) scale(.945); opacity: 0; } /* ═══════════════════════════════════════════════════════════ 3 · TARJETAS DE ARTE .gi-card → posición + entrada (transform propio) .gi-card-fx → flotado permanente (transform propio, sin conflicto) ═══════════════════════════════════════════════════════════ */ .gi-card{ position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--w, 12.5%); /* Estado inicial: fuera de foco, empujada hacia afuera y encogida */ opacity: 0; transform: translate(-50%, -50%) scale(.80) rotate(calc(var(--rot, 0deg) * 2.4)); filter: blur(9px); will-change: transform, opacity, filter; transition: opacity .76s cubic-bezier(.16,.84,.24,1), transform .76s cubic-bezier(.16,.84,.24,1), filter .62s ease-out; } .gi-card.is-in{ opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); filter: blur(0); } /* La imagen nunca se deforma: proporción original intacta */ .gi-card-img{ display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07); user-select: none; -webkit-user-drag: none; } /* Plano establecedor (arte apaisado): actúa como telón de fondo */ .gi-card.is-wide{ z-index: 2; } .gi-card.is-wide .gi-card-img{ opacity: .5; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.7); } /* ── FLOTADO: sutil, independiente, sólo transforms ── */ .gi-card-fx{ display: block; animation: giFloat var(--dur, 7s) ease-in-out var(--dly, 0s) infinite; transform-origin: 50% 50%; } @keyframes giFloat{ 0%,100% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(3px, -7px, 0) rotate(.55deg); } 50% { transform: translate3d(-2px, -10px, 0) rotate(-.4deg); } 75% { transform: translate3d(-4px, -4px, 0) rotate(.3deg); } } /* En el lock-in el flotado se congela donde está: nunca da un salto */ #gtavi-intro.is-settling .gi-card-fx, #gtavi-intro.is-final .gi-card-fx{ animation-play-state: paused; } /* ── EL LOGO: el remate ── El logo NUNCA se desenfoca. Antes, `.gi-card.is-logo` declaraba filter: blur(6px) y, al tener la misma especificidad (0,2,0) que `.gi-card.is-in` pero aparecer DESPUÉS en el archivo, ganaba por orden de cascada: el blur del logo no se retiraba jamás. `.gi-card.is-logo.is-in` sólo tocaba `transform`, así que tampoco lo corregía. Ahora la entrada del logo es exclusivamente opacity + scale. */ .gi-card.is-logo{ transform: translate(-50%, -50%) scale(.88) rotate(0deg); filter: none; /* anula el blur(9px) heredado de .gi-card */ transition: opacity .98s cubic-bezier(.14,.9,.24,1), transform .98s cubic-bezier(.14,.9,.24,1); will-change: transform, opacity; /* sin `filter`: no se rasteriza por filtro */ } .gi-card.is-logo.is-in{ transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: none; /* nítido también en el estado final */ } .gi-card.is-logo .gi-card-img{ border-radius: 0; box-shadow: none; /* drop-shadow es el resplandor de marca (no desenfoca el logo). Se conserva. */ filter: drop-shadow(0 0 44px rgba(139,92,246,.62)) drop-shadow(0 0 90px rgba(34,228,255,.30)); image-rendering: auto; /* remuestreo de calidad, nunca pixelado */ object-fit: contain; /* proporción intacta */ } .gi-card.is-logo .gi-card-fx{ animation-duration: 9s; } /* ═══════════════════════════════════════════════════════════ 4 · BANNER FINAL — el "lock-in" Capa propia a pantalla completa: nunca se recorta. ═══════════════════════════════════════════════════════════ */ .gi-final{ position: absolute; inset: 0; z-index: 30; margin: auto; width: min(96vw, 1500px); max-height: 88svh; max-height: 88vh; height: auto; object-fit: contain; /* jamás recortar el arte */ opacity: 0; transform: scale(1.035); transition: opacity .95s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.16,.84,.24,1); pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } #gtavi-intro.is-final .gi-final, #gtavi-intro.is-out .gi-final{ opacity: 1; transform: scale(1); } /* ═══════════════════════════════════════════════════════════ 5 · BOOT (carga inicial) ═══════════════════════════════════════════════════════════ */ .gi-boot{ position: absolute; left: 50%; bottom: max(2.2rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: .85rem; text-align: center; transition: opacity .6s ease; } #gtavi-intro.is-settling .gi-boot, #gtavi-intro.is-final .gi-boot, #gtavi-intro.is-out .gi-boot{ opacity: 0; } .gi-boot-mark{ font-family: 'Posterama 1984','Barlow Condensed','Barlow',system-ui,sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .42em; text-indent: .42em; font-size: clamp(.6rem, 1.9vw, .8rem); color: #eef0ff; animation: giPulse 2.1s ease-in-out infinite; } .gi-boot-mark b{ background: linear-gradient(100deg,#22e4ff,#8b5cf6 55%,#ff2d78); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes giPulse{ 0%,100%{opacity:.6} 50%{opacity:1} } .gi-track{ width: min(240px, 54vw); height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; } .gi-fill{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#22e4ff,#8b5cf6 55%,#ff2d78); box-shadow: 0 0 12px rgba(34,228,255,.6); transition: width .32s ease-out; } /* ═══════════════════════════════════════════════════════════ 6 · SKIP ═══════════════════════════════════════════════════════════ */ .gi-skip{ position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 60; font-family: 'Posterama 1984','Barlow Condensed','Barlow',system-ui,sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; color: rgba(255,255,255,.85); background: rgba(5,6,14,.5); border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: .62rem 1.05rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .25s, border-color .25s, background .25s, transform .25s, opacity .5s; } .gi-skip:hover, .gi-skip:focus-visible{ color: #fff; border-color: #22e4ff; background: rgba(34,228,255,.16); transform: translateY(-1px); outline: 2px solid #22e4ff; outline-offset: 3px; } #gtavi-intro.is-out .gi-skip{ opacity: 0; } /* ═══════════════════════════════════════════════════════════ 7 · MÓVIL — el escenario pasa a vertical ═══════════════════════════════════════════════════════════ */ @media (max-width: 760px){ .gi-stage{ --stage-w: min(94vw, 560px); --stage-ar: 100 / 147; /* vertical: cabe en pantalla de teléfono */ } .gi-card{ transform: translate(-50%,-50%) scale(.84) rotate(calc(var(--rot,0deg) * 1.8)); } .gi-card-img{ border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); } .gi-final{ width: 94vw; max-height: 70svh; max-height: 70vh; } .gi-skip{ font-size: .6rem; padding: .55rem .85rem; letter-spacing: .16em; } .gi-boot-mark{ letter-spacing: .28em; text-indent: .28em; } /* Desplazamientos más cortos en pantallas pequeñas */ @keyframes giFloat{ 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 25% { transform: translate3d(2px,-4px,0) rotate(.35deg); } 50% { transform: translate3d(-1px,-6px,0) rotate(-.25deg); } 75% { transform: translate3d(-2px,-3px,0) rotate(.2deg); } } } /* Escenario vertical muy estrecho: aún más compacto */ @media (max-width: 380px){ .gi-stage{ --stage-w: 96vw; } } /* Teléfono en horizontal: volvemos al escenario apaisado */ @media (max-height: 520px) and (orientation: landscape){ .gi-stage{ --stage-w: min(96vw, 900px); --stage-ar: 1672 / 941; } .gi-final{ max-height: 84svh; max-height: 84vh; } } /* ═══════════════════════════════════════════════════════════ 8 · MOVIMIENTO REDUCIDO Sin collage: se muestra directamente el banner final. ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ #gtavi-intro, #gtavi-intro *{ animation: none !important; transition-duration: .3s !important; } .gi-stage{ display: none; } .gi-final{ opacity: 1; transform: none; } .gi-card{ filter: none; } } /* ═══════════════════════════════════════════════════════════ 9 · HERO DE LA LANDING — el banner final se queda como héroe Landscape completo, sin recorte, en escritorio y móvil. ═══════════════════════════════════════════════════════════ */ .hero-banner{ display: block; width: min(1400px, 94vw); height: auto; max-height: 62svh; max-height: 62vh; object-fit: contain; /* nunca cover: no se recorta */ margin: 0 auto; border-radius: 12px; box-shadow: 0 26px 70px rgba(0,0,0,.6), 0 0 46px rgba(139,92,246,.18); animation: heroBannerIn 1s cubic-bezier(.16,.84,.24,1) both; } @keyframes heroBannerIn{ from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } @media (max-width: 760px){ .hero-banner{ width: 94vw; max-height: none; /* que se vea completo, aunque quede bajo */ border-radius: 9px; box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 30px rgba(139,92,246,.15); } } @media (prefers-reduced-motion: reduce){ .hero-banner{ animation: none; } }