/* ===================================================================== SOLUM — immersive.css Phase 1 of the immersive redesign: WebGL hero layer + smooth scroll. Loaded after style.css so it can layer on top of the existing system. Fails gracefully — if JS/WebGL is unavailable nothing here is required. ===================================================================== */ /* ------------------------------------------------------------------ */ /* HERO — living WebGL light field */ /* ------------------------------------------------------------------ */ /* The hero uses `isolation:isolate` with a negative-z background stack: media (-5) → overlay-dark (-4) → overlay-vignette (-3). We slot the light field at -2, so the motes glow on top of the darkened forest photo but stay behind the copy (which sits at the default z-level). pointer-events:none keeps all hero CTAs fully clickable. */ .solum-hero-gl { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); mix-blend-mode: screen; /* motes add light over the photo */ will-change: opacity; } .solum-hero-gl canvas { display: block; width: 100% !important; height: 100% !important; } /* Revealed once the scene has rendered its first frame. Kept deliberately subtle (≈0.45) so the headline, description and CTAs always read first — the motes are atmosphere, never competition for the content. */ .is-gl-ready .solum-hero-gl { opacity: .45; } /* Respect reduced motion — the field renders a single calm frame, and we soften the blend so it never distracts. */ @media (prefers-reduced-motion: reduce) { .solum-hero-gl { transition: none; mix-blend-mode: screen; } .is-gl-ready .solum-hero-gl { opacity: .35; } } /* Lenis smooth-scroll hooks (added by the lib on ) */ 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; }