/* ===================================================================== DIVE & THRIVE — V3 PRO MOTION CSS --------------------------------------------------------------------- Motion tokens + behaviour layer. Pairs with dt-motion.js. Brand tokens live in dive-thrive.css — never restyled here. GOLDEN RULE (progressive enhancement): When JS never runs OR prefers-reduced-motion is on, ALL reveal/split/ count content is fully visible at full opacity with no transform. Animation is layered ON TOP via .dtm-on (JS sets it on ). ===================================================================== */ :root { /* -- Motion language (exact values from MOTION-CONTRACT.md) -- */ --ease-cine: cubic-bezier(.16,1,.3,1); /* big cinematic reveals */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-inout: cubic-bezier(.65,0,.35,1); --dur-reveal: 620ms; --dur-micro: 200ms; --dur-exit: 150ms; --stagger: 70ms; --reveal-rise: 32px; /* within 24–40px range */ } /* ===================================================================== 1. REVEALS — hidden state applies ONLY when JS is on (.dtm-on) and motion is allowed (NOT .dtm-reduced). Otherwise content is visible. ===================================================================== */ html.dtm-on:not(.dtm-reduced) [data-reveal]{ opacity:0; transform:translate3d(0, var(--reveal-rise), 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-cine); transition-delay:var(--reveal-delay, 0ms); } html.dtm-on:not(.dtm-reduced) [data-reveal="fade"] { transform:none; } html.dtm-on:not(.dtm-reduced) [data-reveal="scale"] { transform:scale(.94); } html.dtm-on:not(.dtm-reduced) [data-reveal="left"] { transform:translate3d(calc(-1 * var(--reveal-rise)),0,0); } html.dtm-on:not(.dtm-reduced) [data-reveal="right"] { transform:translate3d(var(--reveal-rise),0,0); } html.dtm-on:not(.dtm-reduced) [data-reveal="clip"] { transform:none; clip-path:inset(0 0 100% 0); transition:clip-path var(--dur-reveal) var(--ease-cine), opacity var(--dur-reveal) var(--ease-out); transition-delay:var(--reveal-delay, 0ms); } /* arrived state */ html.dtm-on:not(.dtm-reduced) [data-reveal].is-revealed{ opacity:1; transform:none; clip-path:inset(0 0 0 0); } /* ===================================================================== 2. SPLIT TEXT — per-unit reveal. Units sit hidden, rise in. ===================================================================== */ .dt-split__unit{ display:inline-block; will-change:transform,opacity; } .dt-split__unit--space{ white-space:pre; } /* preserves spaces between words */ html.dtm-on:not(.dtm-reduced) [data-split] .dt-split__unit{ opacity:0; transform:translate3d(0, var(--reveal-rise), 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-cine); transition-delay:var(--split-delay, 0ms); } html.dtm-on:not(.dtm-reduced) [data-split].is-revealed .dt-split__unit{ opacity:1; transform:none; } /* ===================================================================== 3. TILT — 3D card tilt. Vars driven by JS. ===================================================================== */ .dt-tilt{ transform-style:preserve-3d; transform:perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition:transform var(--dur-micro) var(--ease-out); will-change:transform; } .dt-tilt__layer{ transform:translate3d(0,0, var(--tilt-depth, 0px)); transition:transform var(--dur-micro) var(--ease-out); } /* ===================================================================== 4. MAGNETIC — button eases toward cursor. Vars driven by JS. ===================================================================== */ .dt-magnetic{ transform:translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0); transition:transform var(--dur-micro) var(--ease-out); } /* ===================================================================== 6. NAV CONDENSE — hook only; module owns the visual styling. ===================================================================== */ [data-nav]{ transition:background var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), backdrop-filter var(--dur-micro) var(--ease-out); } /* ===================================================================== 7. SCROLL PROGRESS BAR ===================================================================== */ [data-scroll-progress]{ transform:scaleX(0); transform-origin:left center; will-change:transform; } /* ===================================================================== 8. MARQUEE — continuous horizontal loop. JS clones a track. ===================================================================== */ [data-marquee]{ overflow:hidden; } .dt-marquee__track{ display:inline-flex; flex-wrap:nowrap; white-space:nowrap; will-change:transform; animation:dt-marquee var(--marquee-dur, 30s) linear infinite; } [data-marquee]:hover .dt-marquee__track, [data-marquee]:focus-within .dt-marquee__track{ animation-play-state:paused; } @keyframes dt-marquee{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } html.dtm-reduced .dt-marquee__track{ animation:none; } /* ===================================================================== 9. SMOOTH ANCHORS — CSS half; JS handles sticky-nav offset. ===================================================================== */ html{ scroll-behavior:smooth; } /* ===================================================================== REDUCED MOTION — kill everything. Belt-and-braces alongside the .dtm-on gating above (covers the case where JS sets .dtm-reduced). ===================================================================== */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } html.dtm-reduced [data-reveal], html.dtm-reduced [data-split] .dt-split__unit, html.dtm-reduced [data-split], html.dtm-reduced [data-count-to]{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; } html.dtm-reduced .dt-tilt, html.dtm-reduced .dt-magnetic{ transform:none !important; transition:none !important; }