/* ============================================================ 4D EXPERIENCE LAYER ------------------------------------------------------------ Volumetric depth parallax · scroll-reactive 3D reveals · narrative "descent" rail. FULLY ADDITIVE: remove the /fourd.css + /fourd.js tags and the base site is unchanged. Every rule is gated on `.fourd` (added to by fourd.js AFTER it initializes) so a JS failure can never leave content hidden. `.fourd.reduced` = motion disabled. Colors reuse the brand CSS vars injected by app.js, so the 4D layer re-skins automatically on rebrand. ============================================================ */ /* ---- VOLUMETRIC BACKGROUND PARALLAX ----------------------- These layers have no transform in styles.css (they animate background-position / filter / nothing), so adding transform here is conflict-free. Scaled up slightly so the parallax shift never reveals an edge. --mx/--my = pointer (-0.5..0.5), --sy = scrollY (px), set by fourd.js. */ .fourd #bg-particles, .fourd .bg-grid, .fourd .bg-radial, .fourd .hero-visual { will-change: transform; } .fourd .bg-radial { transform: scale(1.12) translate3d(calc(var(--mx,0) * 14px), calc(var(--my,0) * 14px), 0); } .fourd .bg-grid { transform: scale(1.08) translate3d(calc(var(--mx,0) * 26px), calc(var(--my,0) * 26px + var(--sy,0) * 0.04px), 0); } .fourd #bg-particles { transform: translate3d(calc(var(--mx,0) * 34px), calc(var(--my,0) * 34px), 0); } .fourd .hero-visual { transform: translate3d(calc(var(--mx,0) * 50px), calc(var(--my,0) * 42px), 0); } /* ---- SCROLL-REACTIVE 3D REVEALS --------------------------- perspective() is baked into the transform (not a parent property) so position:fixed elements are never affected. */ /* lift: text / headers / containers with no other transform */ .fourd [data-reveal="lift"] { opacity: 0; transform: perspective(1200px) translateY(40px) translateZ(-120px) rotateX(8deg); transform-origin: 50% 100%; transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); } .fourd [data-reveal="lift"].in { opacity: 1; transform: none; } /* slab: a wrapper that rises as one plate; its children keep their own hover/idle transforms intact */ .fourd [data-reveal="slab"] { opacity: 0; transform: perspective(1300px) translateY(56px) translateZ(-170px) rotateX(9deg); transform-origin: 50% 100%; transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); } .fourd [data-reveal="slab"].in { opacity: 1; transform: none; } /* fade: children that already own a transform (cards w/ tilt, how-cards w/ hover) — animate opacity ONLY, staggered */ .fourd [data-reveal="fade"] { opacity: 0; transition: opacity .7s ease; } .fourd [data-reveal="fade"].in { opacity: 1; } .fourd [data-reveal="fade"].in:nth-child(1) { transition-delay: .05s; } .fourd [data-reveal="fade"].in:nth-child(2) { transition-delay: .15s; } .fourd [data-reveal="fade"].in:nth-child(3) { transition-delay: .25s; } .fourd [data-reveal="fade"].in:nth-child(4) { transition-delay: .35s; } .fourd [data-reveal="fade"].in:nth-child(5) { transition-delay: .45s; } /* ---- NARRATIVE DESCENT RAIL (injected by fourd.js) --------- */ .fourd .depth-rail { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); height: 320px; z-index: 40; display: flex; gap: 14px; align-items: stretch; pointer-events: none; } .fourd .depth-progress { position: relative; width: 2px; border-radius: 2px; background: rgba(var(--red-rgb), .16); overflow: hidden; } .fourd .depth-progress > span { position: absolute; left: 0; top: 0; width: 100%; height: var(--scroll-progress, 0%); background: linear-gradient(180deg, var(--red-2), var(--red)); box-shadow: 0 0 12px var(--red); transition: height .12s linear; } .fourd .depth-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: auto; } .fourd .depth-nodes li { display: flex; align-items: center; gap: 11px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--ink-dim); opacity: .5; transition: opacity .25s, color .25s; } .fourd .depth-nodes li i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--red); background: transparent; transition: background .25s, box-shadow .25s, transform .25s; } /* labels hidden so the rail never overlaps hero/ladder copy — dots only */ .fourd .depth-nodes li b { display: none; } .fourd .depth-nodes li:hover { opacity: .9; color: var(--ink); } .fourd .depth-nodes li.active { opacity: 1; color: var(--ink); } .fourd .depth-nodes li.active i { background: var(--red); transform: scale(1.15); box-shadow: 0 0 14px var(--red), 0 0 26px rgba(var(--red-rgb), .6); } /* Mobile: rail collapses to a thin gold progress line at the very top */ @media (max-width: 900px) { .fourd .depth-rail { left: 0; top: 0; transform: none; width: 100%; height: 3px; background: rgba(var(--red-rgb), .14); z-index: 70; } .fourd .depth-progress, .fourd .depth-nodes { display: none; } .fourd .depth-rail::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--scroll-progress, 0%); background: linear-gradient(90deg, var(--red-2), var(--red)); box-shadow: 0 0 10px var(--red); transition: width .12s linear; } } /* ---- REDUCED MOTION — everything visible, no parallax ------ */ .fourd.reduced #bg-particles, .fourd.reduced .bg-grid, .fourd.reduced .bg-radial, .fourd.reduced .hero-visual { transform: none !important; } .fourd.reduced [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }