/* ORA motion (29-Sep-2026): proof & motion layer promoted from the Opus lab (02, 03, 07, 08). Layers on top of site.css + funnel.css; never edits them. Doctrine: transform + opacity on the compositor, no scroll-scrubbing, no pinning. Everything here is progressive enhancement. Files: motion.js (view transitions + hero tilt), beat-gl.js (lit closing beat), scrubber.js (Case 001). */ /* ===================================================================== 1. Cross-page View Transitions (lab 03) Both documents opt in; Chrome 126+ / Safari 18.2+ morph, everything else just navigates. The header and the Install pill share names, so they sit perfectly still across pages. The product-page hero is named here; the matching lineup row on index.html is named by motion.js only for the row that was clicked (a name must be unique per page). ===================================================================== */ @view-transition{ navigation:auto; } /* names apply only while a transition is being captured (html.vt-on, set by motion.js on pageswap and by the head hook on pagereveal): a named element is a stacking context and a backdrop root, which would flatten the frosted nav pill's blur if it were left on. vt-hero = the product hero is on screen (a morph from off-screen, e.g. a footer link, reads as a glitch) */ html.vt-on .nav-logo{ view-transition-name:ora-logo; } html.vt-on .nav-pill{ view-transition-name:ora-pill; } html.vt-on .nav-install{ view-transition-name:ora-install; } html.vt-on .nav-burger{ view-transition-name:ora-burger; } html.vt-on.vt-hero .ppd-hero .ppd-stage > :first-child{ view-transition-name:ora-hero-media; } html.vt-on.vt-hero .ppd-hero .ppd-name{ view-transition-name:ora-hero-id; } ::view-transition-group(*){ animation-duration:.46s; animation-timing-function:cubic-bezier(0.16,1,0.3,1); } ::view-transition-old(root){ animation:.22s ease-out both ora-vt-out; } ::view-transition-new(root){ animation:.34s .08s cubic-bezier(0.16,1,0.3,1) both ora-vt-in; } /* text and pills keep their proportions while the box morphs (the default fit-to-width would blow "W¹" up to "W¹ Web" width) */ ::view-transition-old(ora-hero-id),::view-transition-new(ora-hero-id), ::view-transition-old(ora-pill),::view-transition-new(ora-pill){ height:100%; width:auto; } @keyframes ora-vt-out{ to{ opacity:0; } } @keyframes ora-vt-in{ from{ opacity:0; transform:translateY(10px); } } /* a page that arrived by a view transition must already show its hero (and a still header): the load-time blur-up would otherwise fade in what the morph just placed */ html.vt-in .nav-row, html.vt-in .nav-sub, html.vt-in .ppd-hero .reveal, html.vt-in .ppd-hero .ppd-stage > :first-child{ opacity:1!important; visibility:visible!important; transform:none!important; filter:none!important; } @media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important; } } /* ===================================================================== 2. The closing black beat, lit (lab 02) funnel.css paints the plate (::before) and the black scrim (::after). beat-gl.js slots a canvas between them; it fades in only once the first lit frame is drawn, so the plain plate is always what shows without WebGL, on touch, under reduced motion, or off-screen. ===================================================================== */ .closebeat.plate > .cb-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .9s var(--ease); pointer-events:none; } .closebeat.plate > .cb-gl.on{ opacity:1; } .cb-live{ display:block; margin:0; max-width:46ch; text-align:center; font-size:.8rem; line-height:1.5; color:rgba(255,255,255,.62); } .cb-live[hidden]{ display:none; } .cb-live b{ color:#fff; font-weight:400; } .cb-live .dot{ display:inline-block; vertical-align:.08em; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--accent); animation:ora-ping 2.4s var(--ease) infinite; } @keyframes ora-ping{ 0%{ box-shadow:0 0 0 0 rgba(255,94,31,.55); } 70%,100%{ box-shadow:0 0 0 9px rgba(255,94,31,0); } } /* M¹ Mirror does not load funnel.css; its closing beat carries the same plate treatment, scoped to .cb-own so it can never fight funnel.css on the pages that do load it */ .closebeat.cb-own{ position:relative; overflow:hidden; background:#000; color:#fff; margin-top:clamp(56px,9vh,120px); padding-block:clamp(90px,16vh,200px); } .closebeat.cb-own::before{ content:""; position:absolute; inset:0; background:url(ds/plate-reflective.webp) no-repeat right center / cover; opacity:.95; } .closebeat.cb-own::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 38%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.15) 100%); } .closebeat.cb-own .cb-in{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(18px,3vh,30px); } .closebeat.cb-own .cb-line{ margin:0; font-size:clamp(1.9rem,4vw,3.8rem); font-weight:300; letter-spacing:-.025em; line-height:1.08; max-width:20ch; } .closebeat.cb-own .cb-sub{ margin:0; font-size:clamp(1rem,1.25vw,1.25rem); color:rgba(255,255,255,.6); max-width:46ch; line-height:1.45; } .closebeat.cb-own .cb-ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; } .closebeat.cb-own .cb-ghost{ color:#fff; border-color:rgba(255,255,255,.4); } .closebeat.cb-own .cb-lockup{ height:clamp(28px,3.2vw,44px); width:auto; opacity:.92; margin-top:clamp(20px,4vh,40px); } @media (max-width:760px){ .closebeat.cb-own::before{ background-image:url(ds/plate-reflective-900.webp); background-position:78% center; } .closebeat.cb-own::after{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.82) 45%,rgba(0,0,0,.9) 100%); } } /* ===================================================================== 3. Camera vs ORA split scrubber in Case 001 (lab 07) One side-by-side video drawn twice into one canvas, so the halves cannot drift. Without JS the slot keeps its plain