/* ========================================================================== EZDesign — WHOLE-SITE CINEMATIC SCROLL LAYER Loads AFTER staging.css. Turns the page into one guided journey: a fixed scene-rail (navigable), and per-section "camera arrival" choreography as you scroll into each scene. Real-photo / honest approach (see web-build skill → references/scroll-world, Approach B). Progressive enhancement: only active when cinematic.js adds .cine-on to ; fully off for reduced-motion; the rail hides on small screens. It never hijacks the wheel. ========================================================================== */ /* --- Scene rail: a dot per scene, fixed to the right, tracks your position --- */ .scene-rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 90; display: none; flex-direction: column; gap: 15px; } .cine-on .scene-rail { display: flex; } .scene-rail a { position: relative; width: 12px; height: 12px; display: block; } .scene-rail a::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgba(47, 47, 43, 0.26); transition: background 0.3s ease, transform 0.3s ease; } .scene-rail a.on::after { background: var(--accent); transform: scale(1.55); } .scene-rail a:hover::after { background: var(--dark-accent); } .scene-rail a::before { content: attr(data-label); position: absolute; right: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-accent); background: rgba(248, 246, 242, 0.94); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hairline); box-shadow: var(--soft-shadow); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .scene-rail a:hover::before, .scene-rail a.on::before { opacity: 1; } @media (max-width: 960px) { .cine-on .scene-rail { display: none; } } /* --- Camera arrival: each scene settles into place as you reach it --- */ .cine-on .cine-section { opacity: 0; transform: translateY(48px) scale(0.988); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .cine-on .cine-section.in { opacity: 1; transform: none; } /* The hero is already its own cinematic moment — never fade the first paint */ .cine-on .hero-immersive.cine-section { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cine-on .cine-section { opacity: 1 !important; transform: none !important; transition: none; } .scene-rail a::after, .scene-rail a::before { transition: none; } }