/* Cinematic scroll polish (pairs with flow.js). Loaded after fx.css/cyber.css so it wins.
   Goal: 60 fps. The big costs were live blur behind moving content (backdrop-filter on the nav, the bar and every card),
   blurred words, blended/animated blobs, and whole sections being scaled by scroll. Those are replaced with cheap equivalents. */
html { scroll-behavior: auto; }

/* solid translucent instead of live blur */
.nav, .nav.lux-scrolled, .sticky-cta { -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.lux-scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.sticky-cta { background: rgba(0, 0, 0, .96); }
.step, .aud-card, .rec-card, .fd-card, details, .table-wrap, .alert, .plan:not(.featured) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-a, var(--card)) 94%, transparent), color-mix(in srgb, var(--card-b, var(--card)) 88%, transparent)); }

/* background: still, no blend modes or giant blurs repainting under the scroll */
.lux-blob { animation: none; mix-blend-mode: normal; filter: none; }
.lux-blob.a, .lux-blob.b, .lux-blob.c { opacity: .12; }
.lux-grain { display: none; }

/* headlines: each word rises out of a mask, no blur filter */
.lw > span { filter: none; transform: translate3d(0, 112%, 0); transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .6s ease-out; transition-delay: calc(var(--i, 0) * .055s); }
.lux-h2.in .lw > span { transform: none; }

/* scroll-in for cards and notes: lift and fade with one long, soft ease */
.fx-pre { opacity: 0; transform: translate3d(0, 42px, 0); }
.fx-in { opacity: 1; transform: none; transition: opacity .9s ease-out var(--fx-d, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--fx-d, 0s); }


/* only promote what is moving */
body > section { will-change: auto; transform: none; }

/* ================= the board: a night-lot of alert tiles; scroll and the camera drops into one (flow.js drives it) ================= */
:root { --bd-top: 104px; }
.hero.board { padding: 0; background: #000; position: relative; overflow: visible; }
.hero.board .hero-fx { z-index: 0; top: 0; bottom: auto; height: 100%; opacity: .22; }
.bd-pin { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: 0 0 40px; overflow: hidden; }
.bd-title { order: -1; position: relative; z-index: 3; max-width: 880px; margin: 0 auto; padding: 64px 20px 28px; text-align: center; }
.bd-title h1 { font-family: var(--font-body); font-weight: 900; font-size: clamp(34px, 5.6vw, 76px); letter-spacing: -.035em; line-height: 1; margin: 16px 0 14px; }
.bd-title .lead { max-width: 560px; font-size: clamp(15px, 1.5vw, 18px); color: #b9c4bc; }
.bd-world { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 0 16px; }
.bd-row { display: flex; gap: 14px; justify-content: center; width: 100%; }
.bd-tile { width: min(300px, 30vw); min-width: 150px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(var(--rgb), .26);
  background: linear-gradient(180deg, #06100a, #010302); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bd-top { display: flex; justify-content: space-between; font: 700 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: #6fbf88; }
.bd-team { font-size: clamp(15px, 1.7vw, 21px); font-weight: 800; letter-spacing: -.01em; color: #fff; }
.bd-bot { display: flex; justify-content: space-between; align-items: baseline; }
.bd-bot i { font-style: normal; font-weight: 900; font-size: clamp(18px, 2.2vw, 28px); color: var(--green); text-shadow: 0 0 18px rgba(var(--rgb), .5); }
.bd-bot span { font-weight: 700; color: #cfd8d2; }
.bd-tile.feat { border-color: rgba(var(--rgb), .7); box-shadow: 0 0 36px rgba(var(--rgb), .28), inset 0 0 0 1px rgba(var(--rgb), .15); }
.bd-note { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font: 600 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase; color: #4c7a5b; }
.bd-cue { display: none; }
.bd-detail { position: relative; z-index: 4; padding: 8px 20px 0; }
.bd-in { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.bd-left { text-align: center; }
.bd-left .hero-logo, .bd-left .lux-logo { max-width: 220px; margin: 0 auto; }
.bd-left .cta-row { justify-content: center; }
.bd-left .trust { justify-content: center; }
@media (max-width: 860px) { .bd-in { grid-template-columns: 1fr; gap: 20px; } .bd-tile { width: 44vw; } .bd-row .bd-tile:nth-child(3) { display: none; } }

/* live mode (JS on, motion allowed): a tall track with one pinned screen */
.board.bd-live { height: 300vh; }
.board.bd-live .bd-pin { position: sticky; top: var(--bd-top); height: calc(100vh - var(--bd-top)); min-height: 0; padding: 0; display: block; }
.board.bd-live .bd-world { position: absolute; inset: 0; justify-content: space-between; padding: 5vh 16px 9vh; will-change: transform; backface-visibility: hidden; }
.board.bd-live .bd-title { position: absolute; left: 50%; top: 50%; width: min(880px, 92vw); padding: 0; transform: translate3d(-50%, -50%, 0); }
.board.bd-live .bd-title h1 { margin-top: 12px; }
.board.bd-live .bd-tile { opacity: var(--o, 1); }
.board.bd-live .bd-tile.feat { opacity: 1; }
.board.bd-live .bd-tile.feat > * { opacity: var(--fo, 1); }
.board.bd-live .bd-detail { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 20px; opacity: 0; visibility: hidden; pointer-events: none; }
.board.bd-live .bd-detail.on { pointer-events: auto; }
.board.bd-live .bd-in { width: 100%; }
.board.bd-live .bd-left .lead, .board.bd-live .bd-left .fine { display: none; }
.board.bd-live .bd-cue { display: block; position: absolute; z-index: 3; left: 50%; bottom: 40px; transform: translateX(-50%); text-align: center;
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .3em; text-transform: uppercase; color: #8fe3a9; }
.bd-cue i { display: block; width: 1px; height: 30px; margin: 10px auto 0; background: linear-gradient(#14b24a, transparent); }
.hero > .lux-cue { display: none; }

/* nav + buttons in the reel's register: tiny, spaced capitals and one green pill */
.nav-links a:not(.btn) { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav .btn, .nav-links .btn { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; }
.brand { letter-spacing: .12em; text-transform: uppercase; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .board.bd-live { height: auto; } }

/* keep the title clear of the tile rows on short screens; the promo bar above already carries the offer */
.board.bd-live .bd-title .hero-promo { display: none; }
@media (max-height: 820px) { .board.bd-live .bd-title .lead { display: none; } .bd-tile { padding: 10px 14px; gap: 5px; } .board.bd-live .bd-world { padding-top: 3vh; padding-bottom: 7vh; } }
@media (max-height: 700px) { .board.bd-live .bd-title .eyebrow { display: none; } .bd-title h1 { font-size: clamp(30px, 5vw, 56px); } }
@media (max-height: 820px) { .board.bd-live .bd-cue { display: none; } }
@media (max-height: 760px) { .board.bd-live .bd-left .trust, .board.bd-live .bd-left .hero-logo, .board.bd-live .bd-left .lux-logo { display: none; } .board.bd-live .bd-in { gap: 14px; } }


/* one continuous scroll-linked motion: no timed pop-ins left, so nothing "jumps" from one screen to the next */
.fx-pre, .fx-in { opacity: 1; transform: none; transition: none; }
.board.bd-live .bd-tile { opacity: 1; will-change: opacity; }
.board.bd-live .bd-title, .board.bd-live .bd-detail { will-change: transform, opacity; }
.sec-pre, .sec-in { opacity: 1; transform: none; transition: none; }
.bd-left, .bd-title, .bd-in { text-align: center; }
.bd-in { justify-items: center; align-items: center; }

/* the globe camera (globe.js): fixed behind everything, hero and sections let it show through */
.cl-globe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero.board { background: none; }
.hero.board .hero-fx { display: none; }
section.alt { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 30%, transparent), color-mix(in srgb, var(--bg-2) 42%, transparent)); }
.lux-grid, .lux-vig { opacity: .6; }