/* ============================================================================ CYORA - 4D Depth Layer (additive, fully reversible) Layered spatial depth + cinematic scroll parallax. Single accent #008abe. Two modes, both applied to by js/cy-depth.js: .cy-depth-on full motion (parallax, scrub, tilt, particle field) .cy-depth-static prefers-reduced-motion -> the SAME layered depth look, frozen (orbs, field, vignette render, zero movement). With JS disabled neither class exists and the site is unchanged. ============================================================================ */ /* ---- Fixed volumetric backdrop: blue glow orbs behind all content ---- */ .cy-depth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; } .cy-depth-on .cy-depth-bg, .cy-depth-static .cy-depth-bg { opacity: 1; } .cy-orb { position: absolute; border-radius: 50%; pointer-events: none; transform: translate3d(0,0,0); } .cy-depth-on .cy-orb { will-change: transform; } /* ---- Cinematic vignette above content (frames the space) ---- */ .cy-depth-vignette { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; background: radial-gradient(ellipse 120% 90% at 50% 42%, transparent 62%, rgba(0,0,4,0.38) 100%); } .cy-depth-on .cy-depth-vignette, .cy-depth-static .cy-depth-vignette { opacity: 1; } /* ---- Hero depth canvas (particle / plane field) ---- */ .cy-hero-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s ease; } .cy-depth-on .cy-hero-canvas.cy-canvas-ready, .cy-depth-static .cy-hero-canvas.cy-canvas-ready { opacity: 1; } /* Hero copy rides its own plane; kill the old fade so scrub owns transform */ .cy-depth-on .hero-content { position: relative; z-index: 3; animation: none; will-change: transform; } .cy-depth-static .hero-content { position: relative; z-index: 3; animation: none; opacity: 1; } .cy-depth-on .hero-bg img { will-change: transform; } /* Deeper bottom fade so scrubbed layers never wash out the proof strip */ .cy-depth-on .hero-bg::before, .cy-depth-static .hero-bg::before { background: linear-gradient(to bottom, rgba(6,6,8,0.2) 0%, transparent 28%, transparent 50%, rgba(6,6,8,0.9) 78%, rgba(6,6,8,1) 100%); } /* ---- Depth entrance for scroll reveals (builds on cy-reveal) ---- */ .cy-depth-on [data-cy-reveal] { transform: perspective(1200px) translate3d(0, 60px, -110px) scale(0.94); } .cy-depth-on [data-cy-reveal].is-visible { transform: perspective(1200px) translate3d(0, 0, 0) scale(1); } /* ---- 3D depth cards: tilt + blue edge glow lift ---- */ .cy-depth-on .cy-tilt { will-change: transform; transition: box-shadow 0.5s ease, border-color 0.5s ease; } .cy-depth-on .cy-tilt:hover { position: relative; z-index: 6; border-color: rgba(0,138,190,0.5) !important; box-shadow: 0 0 0 1px rgba(0,138,190,0.22), 0 24px 70px -16px rgba(0,138,190,0.30), 0 60px 160px -40px rgba(0,138,190,0.34) !important; } /* ---- Scroll parallax planes (rates applied by JS, transform-only) ---- */ .cy-depth-on .cy-parallax { will-change: transform; } /* ---- Reduced motion: freeze, never flatten ---- The engine detects reduced motion itself and applies .cy-depth-static (depth look, zero animation). This block is the belt-and-braces layer: if .cy-depth-on somehow persists, all movement styling is inert. */ @media (prefers-reduced-motion: reduce) { .cy-depth-on [data-cy-reveal], .cy-depth-on [data-cy-reveal].is-visible { transform: none; opacity: 1; transition: none; } .cy-depth-on .cy-tilt { transition: none; } .cy-depth-bg, .cy-depth-vignette, .cy-hero-canvas { transition: none; } }