/* ZÓNA24 - page transition: "Signal switch" glitch entrance Activated only when carries .z24-fx (set synchronously by the head gate script when arriving via a nav / CTA navigation). One-shot, ~360ms. Nav stays fixed (z-index 200); all FX live below it (top:92px) and under it. */ @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { /* content slices in + jitters, then locks to a clean frame */ html.z24-fx #main-content { animation: z24GlitchIn 360ms cubic-bezier(.22,1,.36,1) both; backface-visibility: hidden; } /* scanline veil + chromatic flicker over the content area only */ html.z24-fx::before { content: ""; position: fixed; top: 92px; left: 0; right: 0; bottom: 0; z-index: 150; /* above content, below nav(200) + overlay(190) */ pointer-events: none; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(113,226,252,.05) 0, rgba(113,226,252,.05) 1px, transparent 1px, transparent 3px), linear-gradient(90deg, rgba(216,156,1,.05), rgba(113,226,252,.05)); animation: z24Veil 360ms steps(1,end) both; } /* a bright "signal-lock" bar sweeps top->bottom once */ html.z24-fx::after { content: ""; position: fixed; top: 92px; left: 0; right: 0; height: 2px; z-index: 151; pointer-events: none; background: linear-gradient(90deg, transparent, var(--cyan-base,#71E2FC) 30%, #fff 50%, var(--cyan-base,#71E2FC) 70%, transparent); box-shadow: 0 0 16px 2px rgba(113,226,252,.7), 0 0 40px rgba(113,226,252,.5); animation: z24Lock 360ms cubic-bezier(.5,0,.3,1) both; } @keyframes z24GlitchIn { 0% { opacity: 0; transform: translate3d(0,12px,0); filter: brightness(1.5) contrast(1.6); clip-path: inset(0 0 100% 0); } 8% { opacity: 1; transform: translate3d(-9px,0,0); clip-path: inset(0 0 64% 0); } 18% { transform: translate3d(8px,0,0); clip-path: inset(34% 0 30% 0); } 28% { transform: translate3d(-6px,0,0); clip-path: inset(10% 0 66% 0); } 38% { transform: translate3d(5px,0,0); clip-path: inset(56% 0 8% 0); } 50% { transform: translate3d(-3px,0,0); clip-path: inset(0 0 0 0); filter: brightness(1.18) contrast(1.15); } 66% { transform: translate3d(2px,0,0); } 100% { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); } } @keyframes z24Veil { 0% { opacity: 1; } 50% { opacity: .55; } 72% { opacity: .8; } /* flicker */ 100% { opacity: 0; } } @keyframes z24Lock { 0% { top: 92px; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } } } /* Mobile + reduced-motion: clean instant load, no FX */ @media (max-width: 768px), (prefers-reduced-motion: reduce) { html.z24-fx #main-content { animation: none !important; } html.z24-fx::before, html.z24-fx::after { display: none !important; } }