/* ============================================================ BGDE — enhance.css Award-feel layer: loader, page-transition curtain, custom cursor, magnetic CTAs. All reduced-motion-safe. ============================================================ */ /* --------------------------------------------------------------- 1. INTRO LOADER (pure CSS pseudo-elements on so it can paint before exists — no FOUC). Toggled by an early inline script that adds .bgde-loading; enhance.js swaps to .bgde-loaded. --------------------------------------------------------------- */ html.bgde-loading, html.bgde-loading body { overflow: hidden; } html.bgde-loading::before, html.bgde-loading::after { content: ""; position: fixed; z-index: 100000; pointer-events: none; } /* Black sheet */ html.bgde-loading::before { inset: 0; background: #0a0a0a; transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1); } /* Chartreuse monogram, masked from the BGDE mark */ html.bgde-loading::after { inset: 0; background-color: #d8ff3c; -webkit-mask: url("assets/bgde-monogram.svg") center / 132px auto no-repeat; mask: url("assets/bgde-monogram.svg") center / 132px auto no-repeat; animation: bgde-load-pulse 1.1s cubic-bezier(0.45, 0, 0.2, 1) infinite; transition: opacity 0.36s ease, transform 0.7s cubic-bezier(0.76, 0, 0.24, 1); } @keyframes bgde-load-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.02); } } /* Exit: sheet slides up, monogram fades */ html.bgde-loaded::before { transform: translateY(-101%); } html.bgde-loaded::after { opacity: 0; transform: scale(1.08); } /* --------------------------------------------------------------- 2a. PRE-PAINT ARRIVAL COVER The head snippet adds html.bgde-reveal BEFORE first paint when arriving from an internal link, so the chartreuse panel is already covering the viewport when the new page renders — no flash of un-covered content. enhance.js then peels it away by adding .bgde-reveal-out. --------------------------------------------------------------- */ html.bgde-reveal::before { content: ""; position: fixed; inset: 0; z-index: 99992; background: var(--lime); pointer-events: none; transform: translateY(0); } html.bgde-reveal::after { content: ""; position: fixed; inset: 0; z-index: 99993; pointer-events: none; background-color: #0a0a0a; -webkit-mask: url("assets/bgde-monogram.svg") center / 96px auto no-repeat; mask: url("assets/bgde-monogram.svg") center / 96px auto no-repeat; } html.bgde-reveal.bgde-reveal-out::before { transform: translateY(-101%); transition: transform 0.66s cubic-bezier(0.76, 0, 0.24, 1); } html.bgde-reveal.bgde-reveal-out::after { opacity: 0; transform: translateY(-14px); transition: opacity 0.32s ease, transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); } html.bgde-reveal.bgde-reveal-out, html.bgde-reveal.bgde-reveal-out body { overflow: hidden; } /* --------------------------------------------------------------- 2b. OUTGOING CURTAIN (cover-in on click) A chartreuse panel sweeps up to cover the page we're leaving, then navigation happens. Driven by enhance.js. --------------------------------------------------------------- */ .bgde-curtain { position: fixed; inset: 0; z-index: 99990; background: var(--lime); transform: translateY(100%); pointer-events: none; will-change: transform; display: flex; align-items: center; justify-content: center; } .bgde-curtain__mark { width: 96px; height: auto; color: #0a0a0a; opacity: 0; transform: translateY(12px); } /* covering: slide up to fill */ .bgde-curtain.is-covering { animation: bgde-curtain-in 0.62s cubic-bezier(0.76, 0, 0.24, 1) forwards; } .bgde-curtain.is-covering .bgde-curtain__mark { animation: bgde-mark-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards; } /* revealing handled by pre-paint html.bgde-reveal cover (§2a) */ @keyframes bgde-curtain-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes bgde-mark-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------- 3. CUSTOM CURSOR (desktop, fine-pointer only) A trailing ring that grows over interactive elements. Native cursor stays visible for usability; the ring uses blend mode. --------------------------------------------------------------- */ .bgde-cursor { position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1.5px solid var(--lime); border-radius: 50%; pointer-events: none; z-index: 99980; transform: translate3d(-50%, -50%, 0); transition: width 0.22s var(--ease-out), height 0.22s var(--ease-out), background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), opacity 0.3s ease; opacity: 0; mix-blend-mode: difference; } .bgde-cursor.is-active { opacity: 1; } .bgde-cursor.is-hot { width: 58px; height: 58px; background: var(--lime); border-color: var(--lime); } .bgde-cursor.is-down { width: 26px; height: 26px; } /* Only paint the custom cursor where a real pointer exists */ @media (hover: none), (pointer: coarse) { .bgde-cursor { display: none !important; } } /* --------------------------------------------------------------- 4. MAGNETIC CTAs — enhance.js sets --mx/--my offsets --------------------------------------------------------------- */ .bgde-magnetic { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* --------------------------------------------------------------- 5. Richer scroll reveal — clip-mask rise for [data-rise] --------------------------------------------------------------- */ [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } [data-rise].in { opacity: 1; transform: none; } [data-rise-delay="1"] { transition-delay: 0.07s; } [data-rise-delay="2"] { transition-delay: 0.14s; } [data-rise-delay="3"] { transition-delay: 0.21s; } [data-rise-delay="4"] { transition-delay: 0.28s; } @media (prefers-reduced-motion: reduce) { html.bgde-loading::before, html.bgde-loading::after { display: none !important; } html.bgde-reveal::before, html.bgde-reveal::after { display: none !important; } .bgde-curtain { display: none !important; } .bgde-cursor { display: none !important; } .bgde-magnetic { transform: none !important; } [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; } }