/* ════════════════════════════════════════════════════════════════════════ * BUNYAN — Cinematic Tier System (Sprint 8) * * Tier-conditional motion & visual effects. The active tier is set by * device-tier.js on . * * Philosophy: * - Same DOM, same content. Only motion intensity changes. * - Lite tier has ZERO transforms, filters, particles, or transitions * beyond opacity fades. Targets <1 paint pass per frame. * - Cinematic uses GPU-friendly properties only (transform, opacity, * filter sparingly). No layout-triggering animations. * * Cascade: loaded LAST after motion.css + choreography.css so it can * scope-disable their effects via data-tier. * ════════════════════════════════════════════════════════════════════════ */ /* ───────── Tier-aware motion tokens ───────── */ [data-tier="lite"] { --bn-cinematic-particles-display: none; --bn-cinematic-parallax-strength: 0; --bn-cinematic-tilt-strength: 0deg; --bn-cinematic-blur-veil: 0px; --bn-cinematic-dur-mult: 0; } [data-tier="standard"] { --bn-cinematic-particles-display: block; --bn-cinematic-parallax-strength: 14px; --bn-cinematic-tilt-strength: 4deg; --bn-cinematic-blur-veil: 6px; --bn-cinematic-dur-mult: 1; } [data-tier="cinematic"] { --bn-cinematic-particles-display: block; --bn-cinematic-parallax-strength: 32px; --bn-cinematic-tilt-strength: 9deg; --bn-cinematic-blur-veil: 14px; --bn-cinematic-dur-mult: 1; } /* ───────── LITE — strip every motion-only flourish ───────── * We DON'T hide content. We disable transforms/animations that exist * purely for delight. Page-load reveals still run as instant fades. */ [data-tier="lite"] *, [data-tier="lite"] *::before, [data-tier="lite"] *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; transition-delay: 0ms !important; } [data-tier="lite"] .bn-particles, [data-tier="lite"] .bn-cinematic-only, [data-tier="lite"] .bn-dust-canvas, [data-tier="lite"] .bn-hero-depth-canvas { display: none !important; } [data-tier="lite"] .bn-tilt, [data-tier="lite"] .bn-parallax-layer, [data-tier="lite"] .bn-magnetic { transform: none !important; } /* Reveal-on-scroll: degrade to immediate visibility (no transform) */ [data-tier="lite"] .bn-reveal, [data-tier="lite"] .bn-stagger > * { opacity: 1 !important; transform: none !important; } /* ───────── STANDARD — keep choreography, drop heavy GPU effects ───────── */ [data-tier="standard"] .bn-hero-depth-canvas, [data-tier="standard"] .bn-gaussian-splat { display: none !important; } [data-tier="standard"] .bn-tilt { transition: transform 280ms var(--ease-out-soft, ease-out); } [data-tier="standard"] .bn-magnetic { transition: transform 220ms var(--ease-out-soft, ease-out); } /* ───────── CINEMATIC-ONLY surfaces (hidden everywhere else) ───────── */ [data-tier="standard"] .bn-cinematic-only, [data-tier="lite"] .bn-cinematic-only { display: none !important; } /* ───────── Magnetic CTA (driven by JS — CSS just polishes) ───────── */ .bn-magnetic { display: inline-block; will-change: transform; transition: transform 180ms cubic-bezier(.16, 1, .30, 1); } [data-tier="lite"] .bn-magnetic { will-change: auto; } /* ───────── 3D tilt card (data-tilt attribute hooks JS) ───────── */ .bn-tilt { transform-style: preserve-3d; transition: transform 260ms cubic-bezier(.16, 1, .30, 1); will-change: transform; } [data-tier="lite"] .bn-tilt { will-change: auto; transform-style: flat; } /* ───────── Multi-layer parallax (hero villa) ───────── */ .bn-parallax-scene { position: relative; perspective: 1200px; overflow: hidden; } .bn-parallax-layer { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; will-change: transform; transition: transform 600ms cubic-bezier(.16, 1, .30, 1); } [data-tier="lite"] .bn-parallax-layer { will-change: auto; transition: none; } /* ───────── Dust / particle canvas overlay ───────── */ .bn-dust-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 50; opacity: .85; display: var(--bn-cinematic-particles-display, block); } [data-tier="cinematic"] .bn-dust-canvas { opacity: 1; } /* ───────── Page transition (View Transitions API) ───────── */ @supports (view-transition-name: root) { ::view-transition-old(root) { animation: bn-vt-fade-out 280ms cubic-bezier(.65, .05, .35, 1) forwards; } ::view-transition-new(root) { animation: bn-vt-fade-in 340ms cubic-bezier(.16, 1, .30, 1) forwards; } [data-tier="lite"] ::view-transition-old(root), [data-tier="lite"] ::view-transition-new(root) { animation-duration: 120ms !important; } } @keyframes bn-vt-fade-out { to { opacity: 0; transform: scale(.985); filter: blur(2px); } } @keyframes bn-vt-fade-in { from { opacity: 0; transform: scale(1.015); filter: blur(2px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } /* ───────── Step morph (journey wizard) ───────── */ .bn-step-shot[data-vt-name] { view-transition-name: var(--vt-name, none); } /* ───────── Cinematic counter (cost reveal) ───────── */ .bn-counter { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ───────── Voice orb (cinematic upgrade of mic button) ───────── */ .bn-voice-orb { position: relative; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d68f 0%, #c9a45a 45%, #8a682c 100%); box-shadow: 0 0 0 1px rgba(201, 164, 90, .35), 0 8px 24px rgba(201, 164, 90, .45), inset 0 -8px 16px rgba(80, 50, 10, .35), inset 0 6px 14px rgba(255, 255, 255, .35); display: grid; place-items: center; cursor: pointer; border: 0; transition: transform 220ms cubic-bezier(.16, 1, .30, 1); } .bn-voice-orb:hover { transform: scale(1.06); } .bn-voice-orb.listening { animation: bn-orb-pulse 1.8s ease-in-out infinite; } .bn-voice-orb.listening::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--bn-gold-400, #c9a45a); opacity: .6; animation: bn-orb-halo 1.6s ease-out infinite; } @keyframes bn-orb-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(201,164,90,.35), 0 8px 24px rgba(201,164,90,.45), inset 0 -8px 16px rgba(80,50,10,.35), inset 0 6px 14px rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 1px rgba(201,164,90,.55), 0 12px 36px rgba(201,164,90,.70), inset 0 -8px 16px rgba(80,50,10,.35), inset 0 6px 14px rgba(255,255,255,.50); } } @keyframes bn-orb-halo { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } } [data-tier="lite"] .bn-voice-orb.listening { animation: none; } [data-tier="lite"] .bn-voice-orb.listening::after { display: none; } /* Waveform canvas under the orb */ .bn-voice-wave { position: absolute; inset: auto 0 -28px 0; height: 22px; pointer-events: none; } [data-tier="lite"] .bn-voice-wave { display: none; } /* ───────── Override the voice mic button → cinematic gold orb ───────── * The legacy mic button (#va-mic-btn from voice-agent.js) ships with a * green gradient. On cinematic/standard tiers we promote it to the * Diriyah gold orb language. ID-level selectors used to win specificity. */ [data-tier="cinematic"] #va-mic-btn, [data-tier="standard"] #va-mic-btn { background: radial-gradient(circle at 35% 30%, #f0d68f 0%, #c9a45a 45%, #8a682c 100%) !important; border: 1px solid rgba(201, 164, 90, .55) !important; color: #2a2014 !important; box-shadow: 0 0 0 1px rgba(201, 164, 90, .35), 0 12px 28px rgba(201, 164, 90, .35), inset 0 -8px 16px rgba(80, 50, 10, .35), inset 0 6px 14px rgba(255, 255, 255, .35) !important; } [data-tier="cinematic"] #va-mic-btn.va-listening, [data-tier="standard"] #va-mic-btn.va-listening { background: radial-gradient(circle at 35% 30%, #ffe9b3 0%, #ddc086 45%, #b08840 100%) !important; animation: bn-orb-pulse 1.6s ease-in-out infinite !important; } [data-tier="cinematic"] #va-mic-btn.va-listening::after, [data-tier="standard"] #va-mic-btn.va-listening::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--bn-gold-400, #c9a45a); opacity: .6; animation: bn-orb-halo 1.8s ease-out infinite; pointer-events: none; } [data-tier="cinematic"] #va-mic-btn, [data-tier="standard"] #va-mic-btn { position: fixed; } /* preserve existing positioning */ /* ───────── QA helper badge (only visible with ?qa=1) ───────── */ html[data-qa="1"]::after { content: 'tier: ' attr(data-tier); position: fixed; bottom: 8px; left: 8px; z-index: 99999; background: rgba(0, 0, 0, .75); color: #ddc086; font: 11px/1 ui-monospace, monospace; padding: 4px 8px; border-radius: 4px; pointer-events: none; }