/* Last Mountain Media — homepage interactions (vanilla, no deps). Pairs with fx.js. Honors prefers-reduced-motion and touch devices. The hero is pre-hidden via the `fx-js` class (set by an inline script) so its entrance never flashes; `fx-fail` is a failsafe that reveals it if fx.js never runs. */ /* === branded text selection (replaces the browser's default blue) === */ ::selection{ background: var(--gold-300); color: var(--slate-900); } /* kill the blue-ish tap flash on mobile; buttons/links have their own pressed states */ html{ -webkit-tap-highlight-color: transparent; } /* === scroll reveals (fx.js adds .fx-reveal to below-the-fold targets, then .fx-in on intersect) === */ .fx-reveal{ opacity:0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); } .fx-reveal.fx-in{ opacity:1; transform:none; } /* === hero load entrance (pre-hidden from first paint via html.fx-js, no flash) === */ html.fx-js .mkt-hero__inner > *{ opacity:0; transform: translateY(30px); } html.fx-js .mkt-hero__inner.fx-hero-go > *{ animation: fx-rise 1s cubic-bezier(.2,.7,.2,1) forwards; } html.fx-js .mkt-hero__inner.fx-hero-go > *:nth-child(2){ animation-delay:.10s; } html.fx-js .mkt-hero__inner.fx-hero-go > *:nth-child(3){ animation-delay:.22s; } html.fx-js .mkt-hero__inner.fx-hero-go > *:nth-child(4){ animation-delay:.36s; } @keyframes fx-rise{ from{ opacity:0; transform: translateY(30px); } to{ opacity:1; transform:none; } } html.fx-fail .mkt-hero__inner > *{ opacity:1 !important; transform:none !important; animation:none !important; } /* === custom cursor (fine-pointer devices only) === */ .fx-cursor, .fx-cursor-dot{ position:fixed; left:0; top:0; pointer-events:none; z-index:9999; border-radius:50%; opacity:0; } .fx-cursor{ width:36px; height:36px; margin:-18px 0 0 -18px; border:1.5px solid color-mix(in srgb, var(--gold-400) 75%, transparent); transition: width .25s ease, height .25s ease, margin .25s ease, background-color .25s ease, opacity .3s ease; } .fx-cursor--hover{ width:60px; height:60px; margin:-30px 0 0 -30px; background: color-mix(in srgb, var(--gold-400) 14%, transparent); } .fx-cursor-dot{ width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background: var(--gold-400); } html.fx-cursor-on, html.fx-cursor-on *{ cursor:none; } html.fx-cursor-on input, html.fx-cursor-on textarea, html.fx-cursor-on select{ cursor:auto; } @media (hover:none),(pointer:coarse){ .fx-cursor, .fx-cursor-dot{ display:none !important; } } @media (prefers-reduced-motion: reduce){ .fx-reveal{ opacity:1 !important; transform:none !important; } html.fx-js .mkt-hero__inner > *{ opacity:1 !important; transform:none !important; animation:none !important; } }