/* ═══════════════════════════════════════════════════════════════════ Blossom House — Immersive Layer · CSS Loads only when body has class .bh-immersive (set server-side from the BH_IMMERSIVE_ENABLED feature flag) AND has class .bh-immersive-on (set by JS bootstrap after Lenis/cursor init). Phase 1: cursor styles + a few global immersive primitives. Future phases add their own scoped rules into this file. ═══════════════════════════════════════════════════════════════════ */ /* ───── Lenis smooth-scroll primitives ───────────────────────────── */ /* Lenis attaches data-lenis-* attributes; we set the recommended overrides. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* CSS variable Lenis main.js exposes for downstream parallax */ :root { --bh-scroll-velocity: 0; } /* ───── Custom cursor · "the tuning device" ──────────────────────── */ /* Hide native cursor on devices that get the custom one (caller gates this). */ html.bh-cursor-on, html.bh-cursor-on * { cursor: none !important; } /* But re-show native cursor for accessibility on form fields — visitors need to see text caret, file inputs, etc. */ html.bh-cursor-on input, html.bh-cursor-on textarea, html.bh-cursor-on select, html.bh-cursor-on [contenteditable] { cursor: auto !important; } .bh-cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 999999; opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: difference; } .bh-cursor.is-visible { opacity: 1; } .bh-cursor__dot, .bh-cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform, width, height, border; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease; } /* Dot — small, bright, mix-blend-mode: difference paints inverse-of-bg */ .bh-cursor__dot { width: 6px; height: 6px; background: #f4c828; /* warm gold from The Becoming palette */ box-shadow: 0 0 8px rgba(244, 200, 40, 0.4); } /* Ring — trails the dot, normally invisible */ .bh-cursor__ring { width: 6px; height: 6px; border: 1px solid transparent; opacity: 0; } /* State: link/button hover — ring grows to 28px with crosshair feel */ .bh-cursor.is-link .bh-cursor__dot { width: 4px; height: 4px; opacity: 0.7; } .bh-cursor.is-link .bh-cursor__ring { width: 32px; height: 32px; border-color: #f4c828; opacity: 0.7; } /* State: image hover — ring grows larger, magnetic pull happens in JS */ .bh-cursor.is-image .bh-cursor__dot { width: 8px; height: 8px; background: #fff5d8; } .bh-cursor.is-image .bh-cursor__ring { width: 56px; height: 56px; border-color: #f4c828; opacity: 0.5; /* Soft RGB ghost — chromatic-aberration feel without a shader */ box-shadow: -2px 0 0 rgba(244, 200, 40, 0.18), 2px 0 0 rgba(28, 107, 92, 0.18); } /* State: hovering the Becoming mark — cursor steps aside */ .bh-cursor.is-mark .bh-cursor__dot, .bh-cursor.is-mark .bh-cursor__ring { opacity: 0; transform-origin: center; } /* ───── Reduced motion fallbacks ─────────────────────────────────── */ /* If the user toggles reduced-motion mid-session, hide the cursor entirely (the JS also tears it down, but defense in depth). */ @media (prefers-reduced-motion: reduce) { .bh-cursor { display: none !important; } html.bh-cursor-on, html.bh-cursor-on * { cursor: auto !important; } } /* ───── Touch devices ────────────────────────────────────────────── */ @media (pointer: coarse) and (hover: none) { .bh-cursor { display: none !important; } html.bh-cursor-on, html.bh-cursor-on * { cursor: auto !important; } } /* ═══════════════════════════════════════════════════════════════════ PHASE 2 · Scroll orchestration + typography motion ═══════════════════════════════════════════════════════════════════ */ /* ───── Split-text base + reveal-ready states ────────────────────── */ /* JS wraps each WORD in .bh-split-word (inline-block, non-breaking) and each letter inside that in .bh-split-letter. Word cohesion is critical — without it the browser will wrap mid-word at letter boundaries ("amed this house"). GSAP animates the letters from {opacity: 0, blur, y: 8} to settle. Until the parent gets .bh-split-ready, letters render normally so SSR/non-JS shows the text. */ .bh-split-word { display: inline-block; white-space: nowrap; /* the load-bearing rule — prevents mid-word breaks */ } .bh-split-letter { display: inline-block; will-change: opacity, transform, filter; } /* When the parent has .bh-split-ready, the letters start invisible — GSAP then reveals them on scroll trigger. Prevents the initial flash of unrevealed letters before JS catches up. */ .bh-split-ready .bh-split-letter { opacity: 0; } /* ───── Will-change hints for GSAP-animated targets ──────────────── */ /* Keeps the GPU layers warm so the scroll-scrub stays buttery. */ html.bh-immersive-on .fp-transmission__phi, html.bh-immersive-on .fp-freq-card__img img, html.bh-immersive-on .fp-freq-card__img picture, html.bh-immersive-on .fp-eco-card, html.bh-immersive-on .hero video, html.bh-immersive-on .fp-hero video, html.bh-immersive-on .bh-hero video { will-change: transform; } /* ═══════════════════════════════════════════════════════════════════ PHASE 3 · WebGL Fluid Field — behind The Transmission ═══════════════════════════════════════════════════════════════════ */ /* The host (.fp-transmission) becomes a positioning context for the canvas. */ html.bh-immersive-on .fp-transmission { position: relative; } /* Full-bleed canvas, behind all the existing content (z-index 0). The φ watermark and inner text stay above (their z-index is typically 1+). */ .bh-fluid-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* don't intercept clicks; mouse-move handler is on host */ opacity: 0.72; /* visible depth without competing with the existing section character */ mix-blend-mode: screen; /* gold luminance peaks add to ink BG; never darkens */ } /* Make sure existing inner content of .fp-transmission sits above the canvas */ html.bh-immersive-on .fp-transmission > *:not(.bh-fluid-field) { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════ PHASE 4 · Transmission audio · sound toggle ♩ ═══════════════════════════════════════════════════════════════════ */ .bh-sound-toggle { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border: 1px solid rgba(200, 168, 130, 0.45); border-radius: 50%; background: rgba(26, 22, 18, 0.55); color: #C8A882; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; } .bh-sound-toggle:hover { transform: scale(1.08); border-color: rgba(244, 200, 40, 0.8); } .bh-sound-toggle:focus-visible { outline: 2px solid #f4c828; outline-offset: 3px; } .bh-sound-toggle.is-on { background: rgba(244, 200, 40, 0.18); border-color: rgba(244, 200, 40, 0.8); color: #f4c828; box-shadow: 0 0 18px rgba(244, 200, 40, 0.35); animation: bh-sound-breath 4s ease-in-out infinite; } @keyframes bh-sound-breath { 0%, 100% { box-shadow: 0 0 18px rgba(244, 200, 40, 0.35); } 50% { box-shadow: 0 0 26px rgba(244, 200, 40, 0.55); } } .bh-sound-glyph { display: inline-block; transform: translateY(-1px); } /* On touch, sit a little farther from the edge to avoid swipe gestures */ @media (pointer: coarse) { .bh-sound-toggle { bottom: 76px; right: 16px; } } /* ═══════════════════════════════════════════════════════════════════ PHASE 5 · View Transitions · cross-page smoothness ═══════════════════════════════════════════════════════════════════ */ /* Browsers that support the View Transitions API use this to cross-fade the root snapshot during navigation. The Becoming mark + site header carry view-transition-name (set by JS) so they stay put — only the surrounding content cross-fades. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } ::view-transition-old(root) { animation-name: bh-fade-out; } ::view-transition-new(root) { animation-name: bh-fade-in; } @keyframes bh-fade-out { to { opacity: 0; } } @keyframes bh-fade-in { from { opacity: 0; } } /* Persistent elements get a brief soft pulse on landing — feels like a blink rather than a snap. */ ::view-transition-old(bh-becoming-mark), ::view-transition-new(bh-becoming-mark) { animation-duration: 0.5s; animation-timing-function: ease-out; } ::view-transition-new(bh-becoming-mark) { animation-name: bh-mark-settle; } @keyframes bh-mark-settle { 0% { opacity: 0.7; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } /* ───── Reduced motion: opt out of every Phase 2 effect ──────────── */ @media (prefers-reduced-motion: reduce) { .bh-split-letter { /* Make sure letters are always visible — JS bails on reduced-motion but defense-in-depth via CSS too. */ opacity: 1 !important; filter: none !important; transform: none !important; } html.bh-immersive-on .fp-transmission__phi, html.bh-immersive-on .fp-freq-card__img img, html.bh-immersive-on .fp-freq-card__img picture, html.bh-immersive-on .fp-eco-card, html.bh-immersive-on .hero video, html.bh-immersive-on .fp-hero video, html.bh-immersive-on .bh-hero video { will-change: auto; transform: none !important; filter: none !important; } /* Hide the fluid field entirely — the JS also bails, but defense-in-depth */ .bh-fluid-field { display: none !important; } /* Stop the sound toggle's breathing animation under reduced-motion */ .bh-sound-toggle.is-on { animation: none !important; } }