/* ============================================================
   The Quiet Close — obsidian + gold
   ============================================================ */

/* Geist — self-hosted variable font (body). Fraunces stays for display. */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --obsidian:   #070707;    /* warm near-black — the law */
  --obsidian-2: #0c0c0d;    /* quiet section step */
  --obsidian-3: #111113;    /* elevated surfaces — the law */
  --line:       #1e1d20;

  /* gold system — #b08a36 is THE brand gold; #d8b25e is highlight only (gradient top / hover) */
  --gold:        #b08a36;   /* primary accent */
  --gold-hi:     #d8b25e;   /* highlight ONLY */
  --gold-deep:   #8f6f2b;
  --gold-ring:   #b08a36;
  --gold-grad:   linear-gradient(135deg, #d8b25e 0%, #b08a36 55%, #8f6f2b 100%);
  --gold-hair:   rgba(176, 138, 54, .42);

  /* ivory / ink */
  --ivory:     #f4efe6;
  --ink:       #f4efe6;
  --ink-mute:  #9b958a;
  --ink-faint: #6c675d;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--obsidian); }

body {
  background: transparent; /* the glyph field lives behind everything */
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 720px; }
.center { text-align: center; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--serif); font-weight: 500; line-height: 1.08; color: var(--ivory);
  font-optical-sizing: auto;
}
/* big display: high optical size + slightly tighter editorial tracking */
h1, h2 { letter-spacing: -0.01em; font-variation-settings: "opsz" 144; }
h1 { font-size: clamp(2.7rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.5rem; margin-bottom: .55rem; letter-spacing: -0.005em; font-variation-settings: "opsz" 60; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.15rem;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 11px;
}
/* small gold diamond preceding each eyebrow label */
.eyebrow::before {
  content: ""; width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--gold-grad); flex: 0 0 auto;
}

.lead { font-size: 1.16rem; color: var(--ink-mute); margin-bottom: 1.2rem; }
.lead em { color: var(--ink); font-style: italic; }

/* gilt — gold-gradient text for a key word */
.gilt {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* thin gold underline accent under a headline word */
.u-gold { color: var(--ivory); position: relative; white-space: nowrap; }
.u-gold::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}

/* gold price tag */
.price { color: var(--gold); font-weight: 500; }

/* ---------- the glyph field ----------
   A fixed layer of characters behind every page. Asleep, they are a
   whisper of texture. Around a fine cursor they wake into brand gold.
   Static on touch devices; inert under prefers-reduced-motion. */
#field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  display: grid;
  grid-template-columns: repeat(var(--cols, 20), 1fr);
  grid-template-rows: repeat(var(--rows, 12), 1fr);
  user-select: none;
}
.field__glyph {
  --it: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: .92rem; line-height: 1;
  /* asleep: near-invisible warm dust → awake: gold highlight, never full-loud.
     !important beats the inline fallback colour set by field.js (stale-cache belt). */
  color: hsla(41, calc(20% + var(--it) * 41%), calc(38% + var(--it) * 23%), calc(.07 + var(--it) * .5)) !important;
  text-shadow: 0 0 calc(var(--it) * 13px) rgba(176, 138, 54, calc(var(--it) * .45));
  transform: scale(calc(1 + var(--it) * .1));
  transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}

/* thin gold hairline at the very top of the page */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 100;
  background: linear-gradient(90deg, transparent, var(--gold-hair) 12%, var(--gold-hair) 88%, transparent);
  pointer-events: none;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,7,7,.78);
  -webkit-backdrop-filter: blur(14px); /* iOS Safari */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gold-hair);   /* gold hairline under the nav */
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }

/* ----- logo lockup (seal + wordmark, locked as one unit) ----- */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-size: 1.32rem; font-weight: 600;
  text-decoration: none; line-height: 1;
}
.brand--sm { font-size: 1.12rem; gap: 10px; }
.brand .seal { flex: 0 0 auto; display: block; }
.brand--sm .seal { width: 30px; height: 30px; }
/* wordmark — clean HTML text for guaranteed legibility */
.brand .wm {
  font-family: var(--serif); font-weight: 600; font-size: 1.72rem; line-height: 1;
  letter-spacing: .04em; white-space: nowrap; font-optical-sizing: auto;
}
.brand--sm .wm { font-size: 1.4rem; }
.wm-the, .wm-close { color: var(--ivory); }
.wm-quiet { color: var(--gold); }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a { color: var(--ink-mute); text-decoration: none; font-size: .92rem; letter-spacing: .03em; transition: color .2s; }
.nav__links a:hover { color: var(--gold); }
.nav__cta {
  border: 1px solid var(--gold-ring); color: var(--gold) !important;
  padding: 8px 18px; border-radius: 2px; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem;
}
.nav__cta:hover { background: var(--gold-grad); color: var(--obsidian) !important; border-color: transparent; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding: 15px 30px; border-radius: 2px;
  border: 1px solid transparent; transition: all .22s ease;
}
.btn--lg { padding: 17px 40px; font-size: .94rem; }
.btn--gold {
  background: var(--gold-grad); color: var(--obsidian);
  box-shadow: 0 1px 0 rgba(216,178,94,.3) inset; /* --gold-hi top edge — highlight use */
}
.btn--gold:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 28px -14px rgba(176,138,54,.65); }
.btn--ghost { background: transparent; color: var(--ivory); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--gold-ring); color: var(--gold); }
.btn--ghost .price { color: var(--gold); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(86px, 14vh, 156px) 0 clamp(74px, 12vh, 132px);
  /* transparent base — the glyph field shows through, strongest here */
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(176,138,54,.10), transparent 58%),
    rgba(7,7,7,.42);
}
.hero__inner { max-width: 880px; }
.hero h1 { margin-bottom: 1.4rem; }
.hero__sub {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.4rem; line-height: 1.5; color: var(--ink-mute);
  max-width: 640px; margin-bottom: 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.4rem; }
.hero__note { font-size: .88rem; color: var(--ink-faint); letter-spacing: .02em; }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(72px, 11vh, 122px) 0; }
/* translucent section grounds — the field breathes through, faintly */
.section--problem { background: rgba(12,12,13,.90); }
.section--feature { background: rgba(12,12,13,.90); }
.section--feature.alt { background: rgba(7,7,7,.68); }
.section--apply { background: linear-gradient(180deg, rgba(12,12,13,.78), rgba(7,7,7,.56)); }
.section--coda { background: rgba(7,7,7,.42); padding: clamp(84px,12vh,132px) 0; }

/* gold-hairline + centered diamond divider above every section (brand motif) */
.section::before,
.footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), calc(100% - 56px)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair) 22%, var(--gold-hair) 78%, transparent);
}
.section::after,
.footer::after {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-grad); box-shadow: 0 0 0 5px var(--obsidian);
}

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 2.6rem; }
.card {
  background: var(--obsidian-3); border: 1px solid var(--line);
  border-radius: 3px; padding: 34px 30px; transition: border-color .25s, transform .25s;
}
.card:hover { border-color: rgba(176,138,54,.45); transform: translateY(-3px); }
.card__num { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .12em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.card h3 { margin-top: .7rem; }
.card p { color: var(--ink-mute); font-size: 1.02rem; }

/* ---------- ticks ---------- */
.ticks { list-style: none; margin: 1.6rem 0 2.2rem; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: .9rem; color: var(--ink-mute); font-size: 1.05rem; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold-grad);
}

/* ---------- capture / forms ---------- */
.capture { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; max-width: 540px; }
.capture__input {
  flex: 1 1 240px; background: var(--obsidian); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--sans); font-size: 1rem;
  padding: 15px 18px; border-radius: 2px; transition: border-color .2s;
}
.capture__input--wide { flex: 1 1 100%; }
.capture__input::placeholder { color: var(--ink-faint); }
.capture__input:focus { outline: none; border-color: var(--gold-ring); box-shadow: 0 0 0 3px rgba(176,138,54,.14); }
.capture__fine { font-size: .85rem; color: var(--ink-faint); margin-top: .9rem; }

.placeholder-tag {
  display: inline-block; margin-left: 6px; padding: 2px 9px;
  font-size: .72rem; letter-spacing: .04em; color: var(--gold);
  border: 1px dashed var(--gold-hair); border-radius: 2px;
}

/* ---------- coda ---------- */
.coda { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--ivory); line-height: 1.45; }

/* ---------- footer ---------- */
.footer { position: relative; background: rgba(7,7,7,.86); padding: 52px 0 46px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { color: var(--ink-mute); text-decoration: none; font-size: .9rem; transition: color .2s; }
.footer__links a:hover { color: var(--gold); }
.footer__copy { color: var(--ink-faint); font-size: .85rem; }

/* ---------- reveal animation ---------- */
.section, .hero__inner { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.is-visible { opacity: 1 !important; transform: none !important; }

/* ---------- focus (keyboard) — quiet gold ring, only when earned ---------- */
:focus-visible {
  outline: 1px solid var(--gold-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible { outline-offset: 2px; }

/* ---------- motion: cursor-reactive micro-interactions ----------
   One per formerly-flat section. Desktop fine-pointer only.
   Ceiling: barely-there. Gold acknowledges presence, never performs. */
@media (hover: hover) and (pointer: fine) {

  /* 01 · mechanism cards — a faint gold breath where the cursor rests */
  .card { position: relative; overflow: hidden; }
  .card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%),
                rgba(216,178,94,.055), transparent 72%);
    opacity: 0; transition: opacity .45s ease; pointer-events: none;
  }
  .card:hover::after { opacity: 1; }

  /* 02 · apply — the room leans toward the cursor, barely */
  .section--apply { overflow: hidden; }
  .section--apply::before { z-index: 2; }
  .section--apply .container { position: relative; z-index: 1; }
  .apply-wash {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
                rgba(176,138,54,.04), transparent 74%);
    opacity: 0; transition: opacity .6s ease;
  }
  .section--apply:hover .apply-wash { opacity: 1; }

  /* 03 · coda — a glint crosses the line as the cursor passes */
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .coda--glint {
      background: linear-gradient(100deg,
        var(--ivory) 0%, var(--ivory) calc(var(--gx, 50%) - 14%),
        var(--gold-hi) var(--gx, 50%),
        var(--ivory) calc(var(--gx, 50%) + 14%), var(--ivory) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
  }
}

/* ---------- responsive ---------- */
.nav__toggle { display: none; }

@media (max-width: 680px) {
  /* designed mobile nav — no vanishing links */
  .nav__inner { height: 62px; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--sans); font-size: .82rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-mute);
    padding: 12px 0 12px 12px; /* ≥44px tap target */
  }
  .nav__toggle::after {
    content: ""; width: 5px; height: 5px; transform: rotate(45deg);
    background: var(--gold-grad); transition: transform .25s ease;
  }
  .nav__toggle[aria-expanded="true"] { color: var(--gold); }
  .nav__toggle[aria-expanded="true"]::after { transform: rotate(225deg); }

  /* wordmark sized for small screens — no collision with the toggle */
  .brand .wm { font-size: 1.32rem; }
  .brand .seal { width: 30px; height: 30px; }

  .nav__links {
    position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(7,7,7,.96);
    -webkit-backdrop-filter: blur(16px); /* iOS Safari */
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gold-hair);
    padding: 10px 28px 22px;
    display: none;
  }
  .nav__links.is-open { display: flex; animation: nav-drop .28s ease both; }
  @keyframes nav-drop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
  .nav__links a { font-size: 1.02rem; padding: 13px 0; width: 100%; }
  .nav__links a.nav__cta {
    margin-top: 12px; text-align: center; padding: 13px 18px; width: 100%;
  }

  /* tightened mobile rhythm */
  .container { padding: 0 22px; }
  .section { padding: clamp(56px, 9vh, 84px) 0; }
  .hero { padding: 64px 0 58px; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.1rem); }
  .hero__sub { font-size: 1.18rem; margin-bottom: 1.8rem; }
  h2 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .card { padding: 28px 24px; }
  .cards { gap: 16px; margin-top: 2rem; }
  .coda { font-size: clamp(1.35rem, 6.4vw, 1.8rem); }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
  .capture .btn { flex: 1 1 100%; }
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__links { justify-content: center; }
  .footer__links a { padding: 8px 4px; } /* tap targets */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section, .hero__inner { opacity: 1; transform: none; transition: none; }
  .card::after, .apply-wash { display: none; }
  .field__glyph { transition: none; transform: none; }
  .nav__links.is-open { animation: none; }
  .coda--glint {
    background: none; -webkit-text-fill-color: currentColor; color: var(--ivory);
  }
  .card, .btn, .nav__toggle::after { transition: none; }
  .card:hover { transform: none; }
}

/* ============================================================
   CASINO ROYALE AURA PASS (2026-07-04)
   Private gaming floor after midnight — Monte Carlo, not Vegas.
   Depth from light, blur, and motion — never hue. Palette law
   absolute: only obsidian / ivory / gold may speak.
   One loud thing per view: arrival once, the Floor doorway once.
   ============================================================ */

/* the field breathes between sections (target 4) — a slow opacity tide */
canvas#field { transition: opacity .9s ease; }

/* ---------- 1 · ARRIVAL GRAVITY — the doors of a private room ---------- */
#arrival {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 44%, rgba(176,138,54,.06), transparent 62%),
    var(--obsidian);
  animation: arrival-lift 1.15s cubic-bezier(.4,0,.12,1) forwards;
}
/* a single gold hairline draws across the dark, then the room opens.
   Drawn with transform: scaleX (not width) so there's no layout thrash. */
#arrival::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(320px, 58vw); height: 1px;
  transform: translate(-50%, -50%) scaleX(0); transform-origin: center; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold-hi), var(--gold), transparent);
  box-shadow: 0 0 14px rgba(176,138,54,.55);
  animation: arrival-line 1.15s cubic-bezier(.4,0,.12,1) forwards;
}
@keyframes arrival-lift {
  0%, 58% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes arrival-line {
  0% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
  20% { opacity: .95; }
  52% { transform: translate(-50%, -50%) scaleX(1); opacity: .95; }
  100% { transform: translate(-50%, -50%) scaleX(1); opacity: 0; }
}
/* skipped by scroll — the room opens now, no argument */
html.arrival-skip #arrival { animation: none; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
html.arrival-skip #arrival::after { animation: none; opacity: 0; }

/* the lights coming up — hero rises in staggered beats once the doors part */
html.js-arrival .hero__inner { opacity: 1 !important; transform: none !important; }
html.js-arrival .hero__inner > * { opacity: 0; transform: translateY(15px); }
html.js-arrival.arrived .hero__inner > * {
  opacity: 1; transform: none;
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
html.js-arrival.arrived .hero__inner > *:nth-child(1) { transition-delay: .00s; }
html.js-arrival.arrived .hero__inner > *:nth-child(2) { transition-delay: .09s; }
html.js-arrival.arrived .hero__inner > *:nth-child(3) { transition-delay: .18s; }
html.js-arrival.arrived .hero__inner > *:nth-child(4) { transition-delay: .27s; }
html.js-arrival.arrived .hero__inner > *:nth-child(5) { transition-delay: .34s; }

/* ---------- 2 · DEPTH OF THE TABLE — gold hairlines catching light ---------- */
/* the section divider's gold hairline catches a pass of light as it arrives */
.section::before { background-size: 220% 100%; background-position: 50% 0; }
@media (hover: hover) and (pointer: fine) {
  .section.is-visible::before { animation: hairline-sheen 1.5s cubic-bezier(.4,0,.2,1) .05s 1; }
}
@keyframes hairline-sheen {
  0%   { filter: brightness(1); background-position: 130% 0; }
  45%  { filter: brightness(2.1); }
  100% { filter: brightness(1); background-position: 50% 0; }
}
/* the hero's warm light drifts a touch slower than the scroll — a third plane */
.hero__glow {
  position: absolute; inset: -10% 0 auto 0; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(176,138,54,.10), transparent 60%);
  will-change: transform;
}

/* ---------- 3 · THE DEALER'S HANDS — every element acknowledges the hand ---------- */
/* buttons press like chips settling into felt */
.btn:active { transform: translateY(1px) scale(.985); }
.btn--gold:active {
  box-shadow: inset 0 3px 9px rgba(7,7,7,.5), 0 1px 0 rgba(216,178,94,.22) inset;
  filter: brightness(.98);
}
.btn--ghost:active { box-shadow: inset 0 2px 8px rgba(7,7,7,.5); }
/* magnetic CTAs: JS owns their transform via these vars — press folds in here */
.btn--gold.is-magnetic {
  transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(var(--mgs, 1));
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, filter .22s ease;
}
.btn--gold.is-magnetic:hover { transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(var(--mgs, 1)); }

/* links turn like cards — a gold edge catches the light from the left */
.nav__links a:not(.nav__cta), .footer__links a {
  position: relative; overflow: hidden;
}
.nav__links a:not(.nav__cta)::after, .footer__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.nav__links a:not(.nav__cta):hover::after, .footer__links a:hover::after { transform: scaleX(1); }

/* ---------- 4 · SCENE CHANGES — vignette shifts as you move deeper ---------- */
#vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(7,7,7,.55) 100%);
  opacity: 0; /* scroll-linked per frame — no transition, or it lags the scroll */
}

/* ---------- 6 · LOADING STATES — Dot Matrix, palette law ---------- */
.dotmx { display: inline-flex; gap: 7px; align-items: center; justify-content: center; }
.dotmx i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ivory); opacity: .3;
  animation: dotmx 1s infinite ease-in-out;
}
.dotmx i:nth-child(2) { animation-delay: .14s; }
.dotmx i:nth-child(3) { animation-delay: .28s; }
.dotmx i:nth-child(4) { animation-delay: .42s; }
@keyframes dotmx {
  0%, 78%, 100% { opacity: .22; transform: translateY(0); }
  38% { opacity: 1; transform: translateY(-3px); }
}
.dotmx.done i { background: var(--gold); opacity: 1; animation: none; }

/* ---------- 5 · THE FLOOR DOORWAY — the strongest transition on the site ---------- */
#doorway {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(176,138,54,.08), transparent 55%),
    var(--obsidian);
  transition: opacity .34s ease;
}
#doorway.closing { opacity: 1; pointer-events: auto; }
#doorway .door-line {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center; width: min(340px, 62vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), var(--gold), transparent);
  box-shadow: 0 0 18px rgba(176,138,54,.6); opacity: 0;
}
#doorway.closing .door-line { animation: door-draw .62s cubic-bezier(.4,0,.12,1) forwards; }
@keyframes door-draw {
  0% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
}

/* ---------- reduced motion: the aura holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  #arrival, #doorway { display: none !important; }
  html.js-arrival .hero__inner > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .section.is-visible::before { animation: none !important; }
  .hero__glow { display: none; }
  #vignette { display: none; }
  .btn:active, .btn--gold:active, .btn--ghost:active { transform: none; }
  .btn--gold.is-magnetic { transform: none !important; transition: none; }
  .nav__links a::after, .footer__links a::after { transition: none; }
  .dotmx i { animation: none; opacity: .5; }
  canvas#field { transition: none; }
}