/* Page chrome: reset, colour field, header, buttons, solid panels, utilities. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Solid panels. Glass is kept only for the wheel frames (wheel.css). */
.panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* Soft colour field behind the page */
.atmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.atmos i { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; will-change: transform; }
.atmos .b1 { left: 40%; top: -15%; background: radial-gradient(closest-side, var(--glow1), transparent); animation: drift1 30s ease-in-out infinite alternate; }
.atmos .b2 { left: -30%; top: 45%; background: radial-gradient(closest-side, var(--glow2), transparent); animation: drift2 36s ease-in-out infinite alternate; }
.atmos__haze { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; mix-blend-mode: screen; transition: opacity 2s linear; }
.atmos__haze.is-on { opacity: .3; } /* two copies crossfade to loop (loop.js); the 2s matches its FADE */
.atmos__embers { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; } /* steady while a phone's address bar comes and goes */
.atmos .b3 { left: 55%; top: 55%; background: radial-gradient(closest-side, var(--glow3), transparent); animation: drift1 40s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-12vw, 10vh) scale(1.08); } }
@keyframes drift2 { to { transform: translate(14vw, -12vh) scale(.94); } }

/* Header: a plain full-width bar */
.top { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.top__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 64px; width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.top__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: var(--display-weight); letter-spacing: -.02em; font-size: 18px; white-space: nowrap; }
.top__logo { display: block; width: auto; height: 24px; flex: none; } /* the gem, drawn in assets/logo/mark.svg */
.top nav { display: flex; gap: clamp(12px, 2.4vw, 28px); align-items: center; position: relative; }
.top nav a { text-decoration: none; font-size: 15px; color: var(--soft); transition: color .2s; }
.top nav a:hover { color: var(--fg); }
.top nav a[aria-current="true"] { color: var(--fg); }
.top nav a.top__cta { background: var(--fg); color: var(--bg); border-radius: var(--radius); padding: 10px 16px; font-weight: 600; display: inline-flex; align-items: center; gap: .3em; }
@media (max-width: 640px) { .top nav a:not(.top__cta) { display: none; } }

/* Section marker: slides under the link for the section in view (motion.js) */
.top__marker { position: absolute; left: 0; top: 0; width: var(--mw, 0); height: 2px; border-radius: 1px; background: var(--accent); transform: translate(var(--mx, 0), var(--my, 0)); opacity: 0; pointer-events: none; transition: opacity .2s; }
.top__marker.is-on { opacity: 1; }
.top__marker.is-ready { transition: transform .5s var(--spring), width .5s var(--spring), opacity .2s; }
@media (max-width: 640px) { .top__marker { display: none; } }

/* Main call to action: the label rolls up to a fresh copy, and the arrow nudges on */
.roll { display: inline-block; overflow: hidden; white-space: nowrap; }
.roll__in { position: relative; display: inline-block; }
.roll__in::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.top__arrow { display: inline-block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .roll__in, .top__arrow { transition: transform .5s var(--spring); }
  .top__cta:hover .roll__in, .top__cta:focus-visible .roll__in { transform: translateY(-100%); }
  .top__cta:hover .top__arrow, .top__cta:focus-visible .top__arrow { transform: translateX(3px); }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius); font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--accent); }

/* Lite mode (quality.js): the background holds still and the embers and haze go */
.is-lite .atmos i { animation: none; will-change: auto; }
.is-lite .atmos__embers, .is-lite .atmos__haze { display: none; }
@media (prefers-reduced-motion: reduce) { .atmos i { animation: none; } .atmos__embers, .atmos__haze { display: none; } .top__marker.is-ready { transition: opacity .2s; } }

/* Lenis smooth scrolling (js/smooth.js) */
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; }
.lenis.lenis-smooth iframe { pointer-events: none; }