/* ═══════════════════════════════════════════════════════════════════ VORTEX MEDIA · INTRO DE ECOSISTEMA (homepage) Narrativa: ecosistema VORTEX → servicios en vuelo → campaña GTA VI → homepage normal. NO comparte assets ni sesión con el intro de vortex-gtavi-landing.html. Los logos vienen de assets/vortex-ecosystem/ (nunca de BannerFix/). Estados en #vortex-index-intro: is-boot → is-flight → is-hold → is-campaign → is-out ═══════════════════════════════════════════════════════════════════ */ /* ── Guardas globales (las aplica el script inline del ) ── `scrollbar-gutter:stable` se declara aquí además de en la página para que el canal de la barra exista desde el primer pintado incluso si esta hoja carga antes que los estilos en línea. Sin él, activar y desactivar overflow:hidden cambia el ancho del viewport y toda la página salta. */ html { scrollbar-gutter: stable; } /* --vx-sbw lo mide el guard en línea del antes del primer pintado. Compensa el ancho exacto de la barra que overflow:hidden retira. */ html.vii-lock, html.vii-lock body { overflow: hidden !important; } html.vii-lock { padding-right: var(--vx-sbw, 0px); } html.vii-off #vortex-index-intro { display: none !important; } /* ═══ CONTENEDOR ═══ */ #vortex-index-intro{ position: fixed; inset: 0; z-index: 99999; background: #05060e; overflow: hidden; opacity: 1; transition: opacity .8s cubic-bezier(.4,0,.2,1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #vortex-index-intro.is-out{ opacity: 0; pointer-events: none; } /* Ambiente neón VORTEX (cian + violeta) */ #vortex-index-intro::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(58% 44% at 50% 50%, rgba(123,47,255,.24), transparent 70%), radial-gradient(66% 46% at 88% 6%, rgba(0,245,255,.16), transparent 62%), radial-gradient(66% 46% at 8% 94%, rgba(0,245,255,.10), transparent 62%); } /* Viñeta cinematográfica */ #vortex-index-intro::after{ content:""; position:absolute; inset:0; z-index:40; pointer-events:none; background: radial-gradient(135% 115% at 50% 50%, transparent 55%, rgba(5,6,14,.82) 100%); } /* ═══ ESCENARIO — caja proporcional; todo se posiciona en % ═══ */ .vii-stage{ --stage-w: min(96vw, 1500px); --stage-ar: 16 / 9; position:absolute; top:50%; left:50%; width: var(--stage-w); aspect-ratio: var(--stage-ar); transform: translate(-50%,-50%) scale(1); z-index:10; transition: transform 1.1s cubic-bezier(.16,.84,.24,1), opacity .9s ease; } /* Retroceso de cámara al sostener, y salida al revelar la campaña */ #vortex-index-intro.is-hold .vii-stage{ transform: translate(-50%,-50%) scale(.965); } #vortex-index-intro.is-campaign .vii-stage{ transform: translate(-50%,-50%) scale(.90); opacity:0; filter: blur(6px); } /* ═══ LOGO PRINCIPAL VORTEX ═══ El MISMO elemento es la marca de carga y luego el núcleo del ecosistema: no se duplica, viaja de un estado al otro. */ .vii-core{ position:absolute; top:50%; left:50%; width: var(--core-w, 20%); z-index:30; transform: translate(-50%,-50%) scale(1); transition: transform 1.05s cubic-bezier(.16,.84,.24,1), opacity .8s ease; will-change: transform; } .vii-core img{ display:block; width:100%; height:auto; filter: drop-shadow(0 0 40px rgba(0,245,255,.5)) drop-shadow(0 0 90px rgba(123,47,255,.34)); animation: viiCoreBreath 5.5s ease-in-out infinite; } @keyframes viiCoreBreath{ 50%{ transform: scale(1.035); } } /* Durante la carga el núcleo está más grande y centrado */ #vortex-index-intro.is-boot .vii-core{ transform: translate(-50%,-50%) scale(1.28); } /* ═══ LOGOS DE SERVICIO EN VUELO ═══ .vii-logo → posición final + entrada (transform propio) .vii-logo-fx→ flotado permanente (transform propio, sin conflicto) */ .vii-logo{ position:absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--w, 9%); z-index: var(--z, 20); opacity: 0; /* Entra volando desde fuera del encuadre */ transform: translate(-50%,-50%) translate3d(var(--fx,0), var(--fy,0), 0) scale(var(--fs,.55)) rotate(var(--frot,0deg)); filter: blur(10px); will-change: transform, opacity, filter; transition: opacity .82s cubic-bezier(.16,.84,.24,1), transform .92s cubic-bezier(.16,.84,.24,1), filter .66s ease-out; } .vii-logo.is-in{ opacity: 1; transform: translate(-50%,-50%) translate3d(0,0,0) scale(1) rotate(var(--rot,0deg)); filter: blur(0); } .vii-logo img{ display:block; width:100%; height:auto; filter: drop-shadow(0 0 22px rgba(0,245,255,.34)); user-select:none; -webkit-user-drag:none; } /* Marcas mayores con un poco más de presencia (sin superar al núcleo) */ .vii-logo.is-major img{ filter: drop-shadow(0 0 28px rgba(123,47,255,.42)); } /* Flotado sutil e independiente tras la entrada */ .vii-logo-fx{ display:block; animation: viiFloat var(--dur, 7s) ease-in-out var(--dly, 0s) infinite; } @keyframes viiFloat{ 0%,100%{ transform: translate3d(0,0,0) rotate(0deg); } 25% { transform: translate3d(4px,-8px,0) rotate(.6deg); } 50% { transform: translate3d(-3px,-11px,0) rotate(-.45deg); } 75% { transform: translate3d(-5px,-5px,0) rotate(.32deg); } } /* Al sostener/revelar, el flotado se congela: nunca da un salto */ #vortex-index-intro.is-hold .vii-logo-fx, #vortex-index-intro.is-campaign .vii-logo-fx{ animation-play-state: paused; } /* Al revelar la campaña, los logos se alejan y desenfocan (no se borran de golpe) */ #vortex-index-intro.is-campaign .vii-logo{ opacity:0; transform: translate(-50%,-50%) translate3d(calc(var(--ox,0px)), calc(var(--oy,0px)), 0) scale(.82); filter: blur(8px); transition: opacity .78s ease, transform .95s cubic-bezier(.4,0,.2,1), filter .78s ease; } #vortex-index-intro.is-campaign .vii-core{ opacity:0; transform: translate(-50%,-50%) scale(.7); } /* ═══ BANNER FINAL DE CAMPAÑA (GTA VI) ═══ Capa propia a pantalla completa: nunca se recorta. */ .vii-final-banner{ position:absolute; inset:0; margin:auto; z-index:35; width: min(96vw, 1500px); max-height: 86svh; max-height: 86vh; height:auto; object-fit: contain; /* jamás cover: no se recorta */ opacity:0; transform: scale(1.04); 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); } #vortex-index-intro.is-campaign .vii-final-banner, #vortex-index-intro.is-out .vii-final-banner{ opacity:1; transform: scale(1); } /* ═══ CARGA ═══ */ .vii-loading{ position:absolute; left:50%; bottom: max(2.4rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index:50; display:flex; flex-direction:column; align-items:center; gap:.85rem; transition: opacity .55s ease; } #vortex-index-intro.is-flight .vii-loading, #vortex-index-intro.is-hold .vii-loading, #vortex-index-intro.is-campaign .vii-loading, #vortex-index-intro.is-out .vii-loading{ opacity:0; pointer-events:none; } .vii-loading-label{ font-family:'P1984','Posterama 1984',sans-serif; font-weight:100; font-size:clamp(.5rem,1.7vw,.64rem); letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; color:rgba(255,255,255,.72); animation: viiPulse 2.1s ease-in-out infinite; } @keyframes viiPulse{ 0%,100%{opacity:.55} 50%{opacity:1} } .vii-progress{ width:min(240px,54vw); height:2px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden; } .vii-progress-fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#00f5ff,#7b2fff 60%,#ff2fd4); box-shadow:0 0 12px rgba(0,245,255,.6); transition: width .3s ease-out; } /* ═══ SKIP ═══ */ .vii-skip{ position:absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index:60; font-family:'P1984','Posterama 1984',sans-serif; font-weight:900; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; 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; } .vii-skip:hover, .vii-skip:focus-visible{ color:#fff; border-color:#00f5ff; background:rgba(0,245,255,.16); transform:translateY(-1px); outline:2px solid #00f5ff; outline-offset:3px; } #vortex-index-intro.is-out .vii-skip{ opacity:0; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — presets por dispositivo El JS escribe --x/--y/--w desde el manifiesto según el preset. ═══════════════════════════════════════════════════════════ */ /* Tablet */ @media (max-width: 1024px){ .vii-stage{ --stage-w: min(94vw, 900px); --stage-ar: 4 / 3; } } /* Móvil: escenario vertical, logos más pequeños, viajes más cortos */ @media (max-width: 760px){ .vii-stage{ --stage-w: min(94vw, 560px); --stage-ar: 100 / 132; } .vii-logo img{ filter: drop-shadow(0 0 14px rgba(0,245,255,.3)); } .vii-final-banner{ width: 94vw; max-height: 66svh; max-height: 66vh; } .vii-skip{ font-size:.6rem; padding:.55rem .85rem; letter-spacing:.16em; } .vii-loading-label{ letter-spacing:.3em; text-indent:.3em; } /* Desplazamientos de flotado reducidos */ @keyframes viiFloat{ 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); } } } @media (max-width: 380px){ .vii-stage{ --stage-w: 96vw; } } /* Teléfono en horizontal */ @media (max-height: 520px) and (orientation: landscape){ .vii-stage{ --stage-w: min(94vw, 860px); --stage-ar: 16 / 9; } .vii-final-banner{ max-height: 82svh; max-height: 82vh; } } /* ═══ MOVIMIENTO REDUCIDO ═══ Sin vuelo: logo VORTEX → banner de campaña → homepage. */ @media (prefers-reduced-motion: reduce){ #vortex-index-intro, #vortex-index-intro *{ animation: none !important; transition-duration: .3s !important; } .vii-logo{ display:none; } .vii-core{ transform: translate(-50%,-50%) scale(1) !important; } .vii-final-banner{ transform:none; } }