/* ============================================================ LFG MOTION — site-wide cinematic layer (styles) Loaded on every page after lfg.css. ============================================================ */ /* ---------- first-paint cover (so the loader never flashes content). Failsafe: if JS dies, the cover dissolves on its own after 3s. */ html.lfgm-loading::before, html.lfgm-fast::before { content: ""; position: fixed; inset: 0; background: #0B0B0C; z-index: 8990; animation: lfgm-failsafe 0.4s ease 3s forwards; } @keyframes lfgm-failsafe { to { opacity: 0; visibility: hidden; } } /* ---------- luxe preloader ---------- */ .lfgm-loader { position: fixed; inset: 0; z-index: 9000; background: #0B0B0C; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; will-change: transform; } .lfgm-loader svg { width: 88px; height: 88px; } .lfgm-word { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.5em; text-indent: 0.5em; color: #E6C66E; opacity: 0; white-space: nowrap; } /* ---------- page-transition curtain ---------- */ .lfgm-curtain { position: fixed; inset: 0; z-index: 9000; background: #0B0B0C; border-top: 1px solid rgba(201, 162, 75, 0.65); transform: translateY(101%); will-change: transform; } /* ---------- split headline wrappers ---------- */ .lfgm-w { display: inline-block; overflow: hidden; vertical-align: bottom; } .lfgm-w--free { overflow: visible; } /* the cursive accent keeps its swashes */ .lfgm-wi { display: inline-block; will-change: transform; } /* ---------- slow metallic shimmer on the cursive accent ---------- */ @media (prefers-reduced-motion: no-preference) { h1 .script { background-image: linear-gradient(110deg, var(--gold-deep) 0%, var(--gold-bright) 30%, var(--gold) 48%, var(--gold-bright) 70%, var(--gold-deep) 100%); background-size: 220% 100%; animation: lfgm-shimmer 8s ease-in-out infinite alternate; } @keyframes lfgm-shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } } } /* ---------- cursor glow (desktop only, injected by JS) ---------- */ .lfgm-glow { position: fixed; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; pointer-events: none; z-index: 2400; border-radius: 50%; background: radial-gradient(circle, rgba(230, 198, 110, 0.065), transparent 65%); mix-blend-mode: screen; } html[data-theme="light"] .lfgm-glow, html[data-ltc-theme="warm"] .lfgm-glow { mix-blend-mode: multiply; background: radial-gradient(circle, rgba(154, 123, 46, 0.05), transparent 65%); } /* ---------- ambient gold dust (injected by JS, sits behind content) ---------- */ .lfgm-dust { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* ---------- card hover: gold edge-light following the pointer ---------- */ @media (pointer: fine) and (prefers-reduced-motion: no-preference) { .panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(420px circle at var(--lfgm-x, 50%) var(--lfgm-y, 50%), rgba(230, 198, 110, 0.09), transparent 60%); } .panel:hover::after { opacity: 1; } } /* ---------- "written-on" ink reveal for cursive accent words ---------- JS adds .lfgm-ready to and .lfgm-inked per word when it scrolls into view; the word wipes in left-to-right like it's being written. Without JS (or with reduced motion) words simply stay visible. */ @media (prefers-reduced-motion: no-preference) { html.lfgm-ready .script { -webkit-mask-image: linear-gradient(100deg, #000 46%, rgba(0, 0, 0, 0) 54%); mask-image: linear-gradient(100deg, #000 46%, rgba(0, 0, 0, 0) 54%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 115% 0; mask-position: 115% 0; /* failsafe: if no trigger ever fires, the word writes itself in anyway */ animation: lfgm-ink 2.4s cubic-bezier(0.5, 0.08, 0.45, 0.95) 4s both; } html.lfgm-ready .script.lfgm-inked { animation: lfgm-ink 2.4s cubic-bezier(0.5, 0.08, 0.45, 0.95) both; } /* h1 accents keep their metallic shimmer after the ink finishes */ html.lfgm-ready h1 .script.lfgm-inked { animation: lfgm-ink 2.4s cubic-bezier(0.5, 0.08, 0.45, 0.95) both, lfgm-shimmer 8s ease-in-out 3.2s infinite alternate; } @keyframes lfgm-ink { to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } } } @media (prefers-reduced-motion: reduce) { html.lfgm-loading::before, html.lfgm-fast::before { display: none; } .lfgm-loader, .lfgm-curtain, .lfgm-glow, .lfgm-dust { display: none; } }