/* ═══════════════════════════════════════════════════════════════════════════ DECK & DOCK rev16 — #perf coverflow CONFORMANCE + REPAIR LAYER (BRI-539) Additive. Enqueue AFTER 02-page-styles-rev15.css. rev15 files untouched. Canonical: growth deck .hcar (brighternightsgrowth.netlify.app, curl 2026-08-15, 4,217,170 bytes) machine-transformed to #perf .bnl-rot / .bnl-dcard. Card text, count, media and page-local colors unchanged by construction. REPAIRS (defects live in 02-page-styles-rev15.css, fixed here by later cascade so the shipped rev15 file is never edited): R1 · @keyframes bnl-card-float / bnl-card-shadow were referenced but never defined — idle float was a silent no-op. Defined here. R2 · The winning pos-0 transform uses var(--bnl-ry)/var(--bnl-rx) with no fallback; nothing sets them off-hover, so the front card's transform was invalid (flat) except while a fine pointer tracked the stage. Fixed two ways: @property registration gives the vars real initial values everywhere, and every transform restated here carries ,0deg fallbacks for engines without @property. R3 · NOT live here: Deck rev15's own rev12 note restored the prefers-reduced-motion wrapper and closed the 860px block — this package self-repaired the flat-desktop failure the others carry. The correct guards are restated below anyway (harmless duplication, keeps every page's layer byte-comparable). Note · #perf nav ships arrows only, no dots — layer requires none. ═══════════════════════════════════════════════════════════════════════════ */ /* R1/R2 — register the tilt/float custom properties (harmless site-wide) */ @property --bnl-ry { syntax: ''; inherits: false; initial-value: 0deg; } @property --bnl-rx { syntax: ''; inherits: false; initial-value: 0deg; } @property --bnl-fy { syntax: ''; inherits: false; initial-value: 0px; } /* R1 — the missing keyframes (canonical idle-float amplitudes) */ @keyframes bnl-card-float{ 0%,100%{--bnl-ry:-3.5deg;--bnl-rx:2.2deg;--bnl-fy:0px} 50%{--bnl-ry:3.5deg;--bnl-rx:4.8deg;--bnl-fy:-6px} } @keyframes bnl-card-shadow{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.94);opacity:.82} } /* ── STAGE — canonical geometry at conformance size (+9%, per Roofline rev28 precedent: 2026-08-15 staging ruling, cards larger than canonical) ── */ #perf .bnl-rot__stage{ position:relative;height:406px; perspective:1100px;perspective-origin:50% 46%; transform-style:preserve-3d; touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none; } #perf .bnl-rot__stage.is-drag{cursor:grabbing} /* stronger stage glow — 18% primary mix (conformance), canonical footprint */ #perf .bnl-rot__glow{ position:absolute;left:50%;top:8px;width:min(760px,94vw);height:300px; margin-left:max(-380px,-47vw);pointer-events:none;border-radius:50%; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 68%); } #perf .bnl-rot__item{ --w:70vw; position:absolute;left:50%;top:0;width:var(--w);height:375px; margin-left:calc(var(--w) / -2); transform-style:preserve-3d; transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease, filter .66s ease; will-change:transform; } #perf .bnl-rot__stage.is-drag .bnl-rot__item{transition:none} #perf .bnl-rot__item.is-tracking{transition:transform .12s linear} #perf .bnl-rot__item .bnl-dcard{height:100%} /* ── COVERFLOW GEOMETRY — canonical, with safe var fallbacks (R2) ── */ #perf .bnl-rot__item[data-pos="0"]{ transform:translateX(0) translateY(var(--bnl-fy,0px)) translateZ(0) rotateY(calc(-9deg + var(--bnl-ry,0deg))) rotateX(calc(3.5deg + var(--bnl-rx,0deg))) scale(1); opacity:1;filter:none;z-index:5; } #perf .bnl-rot__item[data-pos="1"]{ transform:translateX(70%) translateZ(-140px) rotateY(-46deg) rotateX(5deg) scale(.9); opacity:.6;filter:blur(.8px) !important;z-index:3; } #perf .bnl-rot__item[data-pos="-1"]{ transform:translateX(-70%) translateZ(-140px) rotateY(32deg) rotateX(5deg) scale(.9); opacity:.6;filter:blur(.8px) !important;z-index:3; } #perf .bnl-rot__item[data-pos="2"], #perf .bnl-rot__item[data-pos="-2"]{ transform:translateX(0) translateZ(-360px) rotateY(-9deg) rotateX(3.5deg) scale(.82); opacity:.14;filter:blur(2.5px) !important;z-index:1; } /* first-paint guard: markup ships data-pos 0,1,2,3 and pos 3 had no rule before the driver's first render() normalizes it */ #perf .bnl-rot__item[data-pos="3"]{ transform:translateX(0) translateZ(-360px) rotateY(-9deg) rotateX(3.5deg) scale(.82); opacity:.14;filter:blur(2.5px) !important;z-index:1; } #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner{pointer-events:auto} #perf .bnl-rot__item:not([data-pos="0"]) .bnl-dcard__inner{pointer-events:none} /* ── FRONT-CARD GLOW + HALO — stronger, color stays page-local ── */ #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner{ box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 0 48px -12px color-mix(in srgb, var(--color-primary) 55%, transparent), 0 2px 0 rgba(255,255,255,.04) inset; } #perf .bnl-rot__item[data-pos="0"] .bnl-dcard--install .bnl-dcard__inner, #perf .bnl-rot__item[data-pos="0"] .bnl-dcard--design .bnl-dcard__inner{ box-shadow:-16px 28px 48px -20px rgba(0,0,0,.9), 0 0 48px -12px color-mix(in srgb, var(--color-pink) 55%, transparent), 0 2px 0 rgba(255,255,255,.04) inset; } #perf .bnl-rot__item[data-pos="0"]::before{ content:"";position:absolute;inset:-14px;border-radius:26px;pointer-events:none;z-index:-1; background:radial-gradient(60% 60% at 50% 46%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 74%); filter:blur(10px); } /* ── INTERNAL PARALLAX (restated so R3's flattening is out-cascaded) ── */ #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__head{transform:translateZ(30px)} #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb{transform:translateZ(24px)} #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__rule{transform:translateZ(18px)} #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__hook{transform:translateZ(13px)} #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__list{transform:translateZ(8px)} #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:translateZ(20px)} /* ── SPECULAR GLARE — restated; R3 had set it display:none on desktop ── */ #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner::after{ content:"";display:block;position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:3; background:radial-gradient(240px circle at var(--bnl-mx,50%) var(--bnl-my,26%), rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, transparent 64%); opacity:0;transition:opacity .32s ease;mix-blend-mode:screen; } #perf .bnl-rot__item[data-pos="0"].is-tracking .bnl-dcard__inner::after{opacity:1} /* ── SHADOW ── */ #perf .bnl-rot__shadow{ position:absolute;left:50%;top:375px;width:min(340px,50vw);height:24px; margin-left:max(-178px,-26vw);border-radius:50%;pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,.82) 0%, rgba(0,0,0,.34) 46%, transparent 74%); filter:blur(9px); transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease; } #perf .bnl-rot__stage.is-drag .bnl-rot__shadow{transition:none} /* ── IDLE FLOAT — coarse pointers only; desktop uses the driver's tilt. !important beats R3's stray animation:none!important on ≥860 touch. ── */ @media (hover:none){ #perf .bnl-rot__item[data-pos="0"]{animation:bnl-card-float 7s ease-in-out infinite !important} #perf .bnl-rot__shadow{animation:bnl-card-shadow 7s ease-in-out infinite !important} } /* ── BREAKPOINTS — conformance sizing (+9% over canonical 352×424/452) ── */ @media (min-width:560px){ #perf .bnl-rot__item{--w:327px} } @media (min-width:860px){ #perf .bnl-rot__stage{height:496px;perspective:1500px} #perf .bnl-rot__item{--w:384px;height:464px} #perf .bnl-rot__item[data-pos="1"]{transform:translateX(76%) translateZ(-170px) rotateY(-44deg) rotateX(4deg) scale(.9)} #perf .bnl-rot__item[data-pos="-1"]{transform:translateX(-76%) translateZ(-170px) rotateY(30deg) rotateX(4deg) scale(.9)} #perf .bnl-rot__item[data-pos="2"], #perf .bnl-rot__item[data-pos="-2"], #perf .bnl-rot__item[data-pos="3"]{transform:translateX(0) translateZ(-440px) rotateY(-9deg) rotateX(3deg) scale(.82)} #perf .bnl-rot__item[data-pos="1"], #perf .bnl-rot__item[data-pos="-1"]{opacity:.6} #perf .bnl-rot__item[data-pos="2"], #perf .bnl-rot__item[data-pos="-2"], #perf .bnl-rot__item[data-pos="3"]{opacity:.14} #perf .bnl-rot__shadow{top:468px;width:330px;margin-left:-165px;height:30px} #perf .bnl-rot__glow{height:360px} #perf .bnl-rot__item .bnl-dcard__body{padding:26px 26px 24px} } /* ── REDUCED MOTION — the guards R3 leaked into the desktop block, homed correctly. Scoped to this carousel only. ── */ @media (prefers-reduced-motion:reduce){ #perf .bnl-rot__stage{perspective:none} #perf .bnl-rot__item{transition:none;animation:none !important;filter:none !important} #perf .bnl-rot__item[data-pos="0"]{transform:none;animation:none !important} #perf .bnl-rot__item[data-pos="1"],#perf .bnl-rot__item[data-pos="-1"], #perf .bnl-rot__item[data-pos="2"],#perf .bnl-rot__item[data-pos="-2"], #perf .bnl-rot__item[data-pos="3"]{transform:none;opacity:0;pointer-events:none} #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__head, #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__verb, #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__rule, #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__hook, #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__list, #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__cta{transform:none} #perf .bnl-rot__item[data-pos="0"] .bnl-dcard__inner::after{display:none} #perf .bnl-rot__shadow{animation:none !important} } /* ── DECK-SPECIFIC — rev15 carries a properly-guarded ≥820 desktop float (rev12 restoration). With the keyframes now defined above, that float would fight the driver's pointer tilt on fine pointers. Canonical behavior floats on coarse pointers only; neutralized here. ── */ @media (hover:hover) and (pointer:fine){ #perf .bnl-rot__item[data-pos="0"]{animation:none} #perf .bnl-rot__shadow{animation:none} }