/* ═══════════════════════════════════════════════════════════════
   FRSHOFF COLLECTIVE HUB — MOLTEN SILVER
   Darkness is the default. Red is blood. Silence in every frame.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Molten Silver — locked */
  --ink:        #0A0A0B;
  --gunmetal:   #23262B;
  --steel:      #B9BEC6;
  --platinum:   #E9EAEC;
  --blue-flame: #2E6BFF;
  --crimson:    #B11226;
  --gold:       #C9A24B;

  /* White Dragon warmth */
  --golden-white: #F4ECD8;
  --soft-gold:    #E5C36B;

  --display: "Fraunces", "Noto Serif SC", serif;
  --body:    "Inter", sans-serif;
  --hanzi:   "Noto Serif SC", serif;

  --pad: clamp(1.5rem, 6vw, 7rem);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--steel);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--crimson); color: var(--platinum); }

.hanzi { font-family: var(--hanzi); font-weight: 300; }

/* ── film grain ─────────────────────────────────────────────── */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

/* ── breath vignette — the whole page inhales ~6×/min ───────── */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.65;
  background: radial-gradient(ellipse 130% 100% at 50% 42%, transparent 58%, rgba(4, 4, 5, 0.55) 100%);
  animation: vignette-breathe 10s ease-in-out infinite;
}
@keyframes vignette-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* ── the threshold — you arrive, you choose, the doors part ─── */
html.at-threshold { overflow: hidden; }
.threshold {
  position: fixed; inset: 0;
  z-index: 980; /* over nav, under vignette + grain — film covers the doors */
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}
html.at-threshold .threshold, .threshold.parting { display: flex; }
.threshold[hidden] { display: none; }
.threshold-door {
  position: absolute; left: 0; right: 0;
  height: 50.5%;
  background: #050506;
  transition: transform 1.6s cubic-bezier(0.65, 0, 0.25, 1);
}
.threshold-door--top { top: 0; }
.threshold-door--bottom { bottom: 0; }
/* a hairline of gold light where the doors meet, seen only as they part */
.threshold-door--top::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.45), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.threshold.parting .threshold-door--top { transform: translateY(-102%); }
.threshold.parting .threshold-door--bottom { transform: translateY(102%); }
.threshold.parting .threshold-door--top::after { opacity: 1; }
.threshold-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  max-width: 90vw;
  transition: opacity 0.5s ease;
}
.threshold.parting .threshold-content { opacity: 0; }
.threshold-insignia { width: min(17rem, 56vw); height: auto; aspect-ratio: 1 / 1; }
.threshold-line {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--platinum);
  margin-top: 2.6rem;
  opacity: 0;
  animation: fade-up 1.8s cubic-bezier(0.16, 1, 0.3, 1) 4.9s forwards;
}
.threshold-choices {
  display: flex;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.6rem;
  opacity: 0;
  animation: fade-up 1.8s cubic-bezier(0.16, 1, 0.3, 1) 5.6s forwards;
}
.threshold-btn {
  background: none;
  border: 1px solid rgba(185, 190, 198, 0.28);
  color: var(--platinum);
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-indent: 0.3em; /* optical centre for tracked type */
  padding: 1.1rem 2.1rem;
  cursor: pointer;
  transition: border-color 0.5s ease, color 0.5s ease;
}
#enter-sound:hover, #enter-sound:focus-visible {
  border-color: rgba(201, 162, 75, 0.75);
  color: var(--golden-white);
}
#enter-silence:hover, #enter-silence:focus-visible {
  border-color: rgba(233, 234, 236, 0.7);
}
.threshold-hint {
  margin-top: 2rem;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--steel);
  opacity: 0;
  animation: hint-in 1.8s ease 6.4s forwards;
}
@keyframes hint-in { to { opacity: 0.45; } }

/* while the doors are closed, the gate holds its breath */
html.at-threshold .gate .gh,
html.at-threshold .gate-hanzi .gate-dot,
html.at-threshold .gate-insignia,
html.at-threshold .gate-insignia .in-enso,
html.at-threshold .gate-insignia .in-long,
html.at-threshold .gate-insignia .in-bloom,
html.at-threshold .gate-insignia .in-pearl { animation-play-state: paused; }
html.at-threshold .gate-beam::before { animation-play-state: paused; }

/* ── sound toggle — three quiet bars in the nav ─────────────── */
.sound-toggle {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.sound-toggle[hidden] { display: none; }
.sound-toggle .sb {
  width: 2px; height: 100%;
  background: var(--platinum);
  opacity: 0.75;
  transform: scaleY(0.3);
  transform-origin: bottom;
  animation: sb-sway 2.4s ease-in-out infinite;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.sound-toggle .sb:nth-child(2) { animation-delay: -0.8s; }
.sound-toggle .sb:nth-child(3) { animation-delay: -1.6s; }
@keyframes sb-sway {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
.sound-toggle.muted .sb {
  animation: none;
  transform: scaleY(0.22);
  opacity: 0.4;
}

/* ── typography ─────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  color: var(--platinum);
  line-height: 1.12;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
em { font-style: italic; }
strong { font-weight: 500; color: var(--platinum); }
a { color: var(--steel); text-decoration: none; transition: color 0.4s ease; }
a:hover { color: var(--platinum); }

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--steel);
  opacity: 0.6;
  margin-bottom: 2.2rem;
}
.overline {
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 1.6rem;
}
.lede { max-width: 38rem; margin-top: 1.6rem; }

/* ── reveal motion: slow, pulse-like, never springy ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.lit { opacity: 1; transform: none; }

/* kickers arrive wide, settle into their final tracking */
.kicker.reveal {
  letter-spacing: 0.5em;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              letter-spacing 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kicker.reveal.lit { letter-spacing: 0.34em; }

/* the interstitial takes an even longer breath */
.interstitial .reveal { transition-duration: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .grain { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border: 1px solid rgba(185, 190, 198, 0.35);
  transition: all 0.5s ease;
}
.btn-solid {
  background: var(--platinum);
  color: var(--ink);
  border-color: var(--platinum);
  font-weight: 500;
}
.btn-solid:hover { background: var(--ink); color: var(--platinum); }
.btn-ghost:hover { border-color: var(--platinum); color: var(--platinum); }

/* ── focus — a quiet ring of light ──────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 1px solid rgba(233, 234, 236, 0.55);
  outline-offset: 4px;
}
.signal-form input:focus-visible { outline: none; }

/* ── nav ────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--pad);
  background: linear-gradient(rgba(10, 10, 11, 0.92), rgba(10, 10, 11, 0));
  transition: background 0.6s ease;
}
.nav.scrolled {
  background: rgba(10, 10, 11, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(185, 190, 198, 0.08);
}
.nav-mark {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--platinum);
}
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  border: 1px solid rgba(185, 190, 198, 0.35);
  padding: 0.45rem 1.1rem;
}
@media (max-width: 860px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ── the gate ───────────────────────────────────────────────── */
.gate {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 8rem var(--pad) 6rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(46, 107, 255, 0.07), transparent 70%),
    var(--ink);
}
.gate-halo {
  position: absolute;
  top: 18%; left: 50%;
  width: min(46rem, 90vw); height: min(46rem, 90vw);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 234, 236, 0.05), transparent 62%);
  animation: halo-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
.gate-hanzi {
  font-family: var(--hanzi);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.7em;
  margin-bottom: 2.4rem;
  color: var(--steel);
  opacity: 0.85;
}
.gate-dot { color: var(--crimson); }

/* hanzi placed by hand — first character, second, then the seal dot */
.gh {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: hand-place 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gh-1 { animation-delay: 0.5s; }
.gh-2 { animation-delay: 1.1s; }
.gate-hanzi .gate-dot {
  display: inline-block;
  opacity: 0;
  animation: hand-place 1.2s ease 1.9s forwards;
}
@keyframes hand-place { to { opacity: 1; transform: none; } }

/* ── the insignia — ensō · 龍 · pearl ─────────────────────────
   One continuous gold stroke, ink pressed through paper, then
   the pearl ignites and settles to a coal. Used twice: bright
   at the threshold, dim as presence behind the gate headline. */
.insignia { display: block; }
.in-enso {
  stroke: var(--platinum);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: enso-draw 3.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
/* the brushstroke stops short — 12% stays open. the pearl rests in the gap,
   completing what the ink left unfinished. (twin-天 mark, locked Jul 4) */
@keyframes enso-draw { to { stroke-dashoffset: 0.12; } }
.in-long {
  font-family: var(--hanzi);
  font-weight: 300;
  fill: var(--platinum);
  opacity: 0;
  filter: blur(12px);
  animation: ink-press 2s cubic-bezier(0.16, 1, 0.3, 1) 2.6s forwards;
}
@keyframes ink-press { to { opacity: 0.92; filter: blur(0); } }
/* the two skies — white brother arrives first, black brother answers */
.in-tian-b {
  fill: #101114;
  stroke: var(--steel);
  stroke-width: 2.25px;
  paint-order: stroke;
  animation-delay: 3.3s;
}
.in-bloom {
  fill: var(--crimson);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pearl-bloom 1.5s ease-out 4.3s forwards;
}
@keyframes pearl-bloom {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(4.5); }
}
.in-pearl {
  fill: var(--crimson);
  opacity: 0;
  animation: pearl-ignite 1.5s ease-out 4.3s forwards,
             pearl-coal 10s ease-in-out 5.8s infinite;
}
@keyframes pearl-ignite { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.85; } }
@keyframes pearl-coal { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.55; } }

/* already-lit state — entered via the threshold, or reduced motion */
.insignia-static .in-enso,
.insignia-static .in-long,
.insignia-static .in-bloom,
.insignia-static .in-pearl { animation: none; }
.insignia-static .in-enso { stroke-dashoffset: 0.12; }
.insignia-static .in-long { opacity: 0.92; filter: none; }
.insignia-static .in-bloom { opacity: 0; }
.insignia-static .in-pearl {
  opacity: 0.85;
  animation: pearl-coal 10s ease-in-out infinite;
}

/* hero placement — presence, not logo. breathes at the ambient rate */
.gate-insignia {
  position: absolute;
  top: 41%; left: 50%;
  width: min(30rem, 82vw); height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -54%);
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
  animation: insignia-breathe 10s ease-in-out 7s infinite;
}
@keyframes insignia-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.18; } }

/* one transmission — a slow diagonal beam of platinum, once, on load */
.gate-beam {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.gate-beam::before {
  content: "";
  position: absolute;
  top: -25%; bottom: -25%; left: 0;
  width: 34%;
  background: linear-gradient(90deg,
    transparent,
    rgba(233, 234, 236, 0.04) 35%,
    rgba(233, 234, 236, 0.085) 50%,
    rgba(233, 234, 236, 0.04) 65%,
    transparent);
  transform: translateX(-160%) rotate(14deg);
  animation: beam-sweep 10s cubic-bezier(0.33, 0, 0.35, 1) 1.4s 1 forwards;
}
@keyframes beam-sweep {
  0%   { transform: translateX(-160%) rotate(14deg); }
  100% { transform: translateX(460%) rotate(14deg); }
}

/* gate text sits above the mark; entrance is a slow cascade */
.gate-hanzi, .gate .overline, .gate h1, .gate-sub, .gate-actions { position: relative; z-index: 2; }
.gate .gate-hanzi.reveal  { transition-delay: 0.2s; }
.gate .overline.reveal    { transition-delay: 0.55s; }
.gate h1.reveal           { transition-delay: 0.85s; }
.gate .gate-sub.reveal    { transition-delay: 1.25s; }
.gate .gate-actions.reveal { transition-delay: 1.6s; }

.gate h1 { max-width: 18ch; }
.gate-sub { max-width: 36rem; margin-top: 2rem; opacity: 0.85; }
.gate-actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gate-enter {
  position: absolute;
  bottom: 2.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.55;
  animation: drift 4s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* ── interstitial ───────────────────────────────────────────── */
.interstitial {
  padding: clamp(7rem, 16vh, 12rem) var(--pad);
  text-align: center;
}
/* the one oversized type moment on the site — recognition, at scale */
.interstitial p {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.9rem);
  color: var(--platinum);
  line-height: 1.28;
  opacity: 0.92;
}

/* ── sections ───────────────────────────────────────────────── */
.section {
  padding: clamp(6rem, 12vh, 10rem) var(--pad);
  max-width: 82rem;
  margin: 0 auto;
}

/* movement */
.acronym {
  display: flex;
  gap: clamp(2rem, 8vw, 6rem);
  margin-bottom: 4rem;
  flex-wrap: wrap;
}
.acro-word {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--platinum);
  line-height: 1;
}
.acro-def {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 0.8rem;
}

/* etymology apparatus — the word held open for dissection */
.acro-word::before { content: "[\00a0"; }
.acro-word::after  { content: "\00a0]"; }
.acro-word::before,
.acro-word::after {
  color: var(--steel);
  opacity: 0.32;
  font-weight: 300;
  font-style: normal;
}
/* the two roots answer in different lights:
   FRSH — the hearts (warm gold) · OFF — the alternative path (blue flame) */
.acronym > div:nth-child(1) .acro-def { color: var(--soft-gold); }
.acronym > div:nth-child(2) .acro-def { color: var(--blue-flame); }
.triptych {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.triptych h3 {
  font-size: 0.78rem;
  font-family: var(--body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.1rem;
  opacity: 0.85;
}
.triptych p { font-size: 0.95rem; }

/* ── proof strip ────────────────────────────────────────────── */
.proof {
  padding: clamp(5rem, 10vh, 8rem) var(--pad);
  text-align: center;
  border-top: 1px solid rgba(185, 190, 198, 0.07);
  border-bottom: 1px solid rgba(185, 190, 198, 0.07);
  background: linear-gradient(180deg, var(--ink), #0D0E10 50%, var(--ink));
}
.proof .kicker { margin-bottom: 2.6rem; }
.proof-line {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  color: var(--platinum);
  line-height: 1.25;
}
.proof-sub {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}
/* light passes over the marquee once on reveal — metal catching a beam */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .proof-marquee.lit .proof-line {
    background: linear-gradient(100deg,
      var(--platinum) 42%, #FFFFFF 50%, var(--platinum) 58%);
    background-size: 250% 100%;
    background-position: -40% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: sheen-pass 2.8s ease-in-out 0.6s 1 forwards;
  }
}
@keyframes sheen-pass {
  from { background-position: 130% 0; }
  to   { background-position: -40% 0; }
}
.proof-names {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 3rem;
  margin-top: 3.6rem;
}
.proof-names li {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.45;
  transition: opacity 0.5s ease;
}
.proof-names li:hover { opacity: 0.9; }

/* ── four layers ────────────────────────────────────────────── */
.layers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-top: 3.6rem;
}
.layer {
  border: 1px solid rgba(185, 190, 198, 0.1);
  background: rgba(35, 38, 43, 0.35);
  padding: 2.4rem 1.8rem;
  position: relative;
  overflow: hidden;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.9s ease;
}
.layer:hover { transform: translateY(-4px); }
/* living edge — a 1px border breathing in each entity's accent */
.layer::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--edge, rgba(233, 234, 236, 0.35));
  pointer-events: none;
  animation: edge-breathe 10s ease-in-out infinite;
}
@keyframes edge-breathe {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.32; }
}
.layer-hanzi {
  font-family: var(--hanzi);
  font-size: 2.6rem;
  display: block;
  margin-bottom: 1.4rem;
  color: var(--platinum);
  opacity: 0.9;
  transition: text-shadow 1.2s ease, opacity 1.2s ease;
}
.layer:hover .layer-hanzi { opacity: 1; }
.layer-role {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.7rem;
}
.layer h3 { margin-bottom: 0.6rem; }
.layer p { font-size: 0.86rem; }
.layer-tag {
  margin-top: 1.2rem;
  font-style: italic;
  font-family: var(--display);
  color: var(--platinum);
  opacity: 0.75;
}
/* per-entity accents — each layer carries its own flame */
.layer-td           { --edge: rgba(233, 234, 236, 0.4); }
.layer-td:hover     { border-color: rgba(233, 234, 236, 0.4); }
.layer-black        { --edge: rgba(46, 107, 255, 0.45); }
.layer-black::after { animation-delay: -2.5s; }
.layer-black:hover  { border-color: rgba(46, 107, 255, 0.5); }
.layer-black .layer-hanzi { text-shadow: 0 0 34px rgba(46, 107, 255, 0.5); }
.layer-white        { --edge: rgba(229, 195, 107, 0.45); }
.layer-white::after { animation-delay: -5s; }
.layer-white:hover  { border-color: rgba(229, 195, 107, 0.5); }
.layer-white .layer-hanzi { color: var(--golden-white); text-shadow: 0 0 34px rgba(229, 195, 107, 0.4); }
.layer-fr           { --edge: rgba(185, 190, 198, 0.35); }
.layer-fr::after    { animation-delay: -7.5s; }
.layer-fr:hover     { border-color: rgba(185, 190, 198, 0.4); }
/* hanzi glow like embers under breath */
.layer-td:hover .layer-hanzi, .layer-fr:hover .layer-hanzi { text-shadow: 0 0 22px rgba(233, 234, 236, 0.4); }
.layer-black:hover .layer-hanzi { text-shadow: 0 0 22px rgba(46, 107, 255, 0.8), 0 0 60px rgba(46, 107, 255, 0.35); }
.layer-white:hover .layer-hanzi { text-shadow: 0 0 22px rgba(229, 195, 107, 0.7), 0 0 60px rgba(229, 195, 107, 0.3); }

/* ── spectacle + reel ───────────────────────────────────────── */
.spectacle h2 { max-width: 24ch; }
.reel { margin-top: 4rem; }
/* the frame irises open once, like a projector warming up */
.reel.lit .reel-frame {
  animation: reel-iris 2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
@keyframes reel-iris {
  0%   { clip-path: inset(46% 3% 46% 3%); }
  60%  { clip-path: inset(12% 0 12% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.reel-frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border: 1px solid rgba(185, 190, 198, 0.12);
  background: #0D0E10;
}
.reel-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.06) brightness(0.82);
}
.reel-atmosphere {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(46, 107, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(201, 162, 75, 0.07), transparent 60%),
    #0D0E10;
}
.reel-hanzi {
  font-family: var(--hanzi);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.4em;
  color: var(--platinum);
  opacity: 0.85;
}
.reel-atmosphere p {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
}
.reel-caption {
  margin-top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.45;
  text-align: right;
}

/* ── dragon cores ───────────────────────────────────────────── */
.cores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.2rem;
}
.core {
  padding: clamp(2.6rem, 5vw, 4.5rem);
  border: 1px solid rgba(185, 190, 198, 0.1);
  position: relative;
  overflow: hidden;
}
/* the cores breathe at their own edge, out of phase with each other */
.core::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--edge, rgba(233, 234, 236, 0.35));
  pointer-events: none;
  animation: edge-breathe 10s ease-in-out infinite;
}
.core-black        { --edge: rgba(46, 107, 255, 0.4); }
.core-black::after { animation-delay: -3.5s; }
.core-white        { --edge: rgba(229, 195, 107, 0.4); }
.core-white::after { animation-delay: -8s; }
.core-black {
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(46, 107, 255, 0.1), transparent 60%),
    #0C0D10;
}
.core-white {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(229, 195, 107, 0.1), transparent 60%),
    #15161B;
}
.core-hanzi {
  font-family: var(--hanzi);
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: 0.3em;
  margin-bottom: 1.6rem;
  transition: text-shadow 1.4s ease;
}
.core-black:hover .core-hanzi { text-shadow: 0 0 28px rgba(46, 107, 255, 0.85), 0 0 80px rgba(46, 107, 255, 0.35); }
.core-white:hover .core-hanzi { text-shadow: 0 0 28px rgba(229, 195, 107, 0.7), 0 0 80px rgba(229, 195, 107, 0.3); }
.core-black .core-hanzi { color: var(--steel); text-shadow: 0 0 40px rgba(46, 107, 255, 0.55); }
.core-white .core-hanzi { color: var(--golden-white); text-shadow: 0 0 40px rgba(229, 195, 107, 0.45); }
.core h3 { margin-bottom: 0.5rem; }
.core-role {
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1.6rem;
}
.core p { font-size: 0.93rem; }
.core-line {
  font-family: var(--display);
  font-style: italic;
  color: var(--platinum);
  margin-top: 1.6rem;
  opacity: 0.85;
}
.core-enter {
  display: inline-block;
  margin-top: 2.2rem;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(185, 190, 198, 0.3);
  padding-bottom: 0.35rem;
  transition: border-color 0.5s ease, color 0.5s ease;
}
.core-black .core-enter:hover { color: var(--platinum); border-color: var(--blue-flame); }
.core-white .core-enter:hover { color: var(--golden-white); border-color: var(--soft-gold); }

/* ── the rooms ──────────────────────────────────────────────── */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
  margin-top: 3.6rem;
}
.room {
  border: 1px solid rgba(185, 190, 198, 0.1);
  background: rgba(35, 38, 43, 0.3);
  padding: 2.6rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.9s ease,
              box-shadow 0.9s ease;
}
/* a door opening a crack — light spills from the left edge */
.room::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  background: linear-gradient(90deg, rgba(233, 234, 236, 0.07), transparent 70%);
  opacity: 0;
  transform: translateX(-18%);
  transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
}
.room:hover::before, .room:focus-within::before { opacity: 1; transform: none; }
.room:hover, .room:focus-within {
  border-color: rgba(233, 234, 236, 0.3);
  box-shadow: inset 1px 0 0 rgba(233, 234, 236, 0.28);
}
.room-hanzi {
  font-family: var(--hanzi);
  font-size: 2rem;
  margin-bottom: 1.4rem;
  color: var(--platinum);
  opacity: 0.85;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.1s ease, text-shadow 1.1s ease;
}
.room:hover .room-hanzi, .room:focus-within .room-hanzi {
  transform: translateX(4px);
  opacity: 1;
  text-shadow: 0 0 18px rgba(233, 234, 236, 0.35);
}
.room h3 { margin-bottom: 0.2rem; }
.room-sub {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.2rem;
}
.room p { font-size: 0.9rem; }
.room-note { margin-top: 1.2rem; font-size: 0.8rem; opacity: 0.7; }
.room-cta { margin-top: auto; padding: 0.8rem 1.4rem; font-size: 0.7rem; align-self: flex-start; margin-top: 1.8rem; }
.room-releases {
  list-style: none;
  margin: 1.4rem 0 0.4rem;
}
.room-releases li {
  border-top: 1px solid rgba(185, 190, 198, 0.1);
  padding: 0.7rem 0;
}
.room-releases li:last-child { border-bottom: 1px solid rgba(185, 190, 198, 0.1); }
.room-releases a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.88rem;
}
.room-releases .r-title { font-family: var(--display); color: var(--platinum); font-size: 1rem; }
.room-releases .r-artist {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}
.room-doors { margin-top: 1.4rem; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.room-doors a {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
  border-bottom: 1px solid rgba(185, 190, 198, 0.25);
  padding-bottom: 0.25rem;
}
.room-doors a:hover { opacity: 1; }
.room-soon { opacity: 0.75; }

/* ── hire intake — the door opens into a form ───────────────── */
.hire-form-wrap { margin-top: 1.6rem; }
.hire-form { display: flex; flex-direction: column; gap: 0.9rem; }
.dragnet { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.hf-field { display: flex; flex-direction: column; gap: 0.35rem; }
.hf-field span {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
  opacity: 0.65;
}
.hf-field input,
.hf-field select,
.hf-field textarea {
  background: rgba(10, 10, 11, 0.6);
  border: 1px solid rgba(185, 190, 198, 0.25);
  color: var(--platinum);
  font-family: var(--body);
  font-size: 0.88rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  border-radius: 0;
  transition: border-color 0.5s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hf-field select { color: var(--steel); }
.hf-field textarea { resize: vertical; min-height: 5.5rem; }
.hf-field input:focus,
.hf-field select:focus,
.hf-field textarea:focus { border-color: var(--platinum); }
.hf-field input::placeholder,
.hf-field textarea::placeholder { color: rgba(185, 190, 198, 0.35); }
.hf-send { margin-top: 0.4rem; align-self: flex-start; padding: 0.85rem 1.8rem; font-size: 0.72rem; }
.hf-alt { font-size: 0.74rem; opacity: 0.55; margin-top: 0.2rem; }
.hf-alt a { border-bottom: 1px solid rgba(185, 190, 198, 0.25); padding-bottom: 0.1rem; }
.hf-confirm {
  font-family: var(--display);
  font-style: italic;
  color: var(--platinum);
  opacity: 0.9;
  padding: 1.2rem 0;
}
.soon-mark {
  margin-top: 1.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

/* ── schedule ───────────────────────────────────────────────── */
.schedule h2 { margin-bottom: 3rem; }
.gigs { list-style: none; }
.gig {
  display: grid;
  grid-template-columns: 10rem 1fr auto;
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.6rem 0;
  position: relative;
}
/* hairlines draw themselves, left to right, in sequence */
.gig::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(185, 190, 198, 0.12);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.gig.lit::before { transform: scaleX(1); }
.gig:nth-child(1)::before { transition-delay: 0.1s; }
.gig:nth-child(2)::before { transition-delay: 0.3s; }
.gig:nth-child(3)::before { transition-delay: 0.5s; }
.gig:nth-child(4)::before { transition-delay: 0.7s; }
.gig:nth-child(5)::before { transition-delay: 0.9s; }
.gigs .gig:last-child { border-bottom: 1px solid rgba(185, 190, 198, 0.12); }
.gig-date {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--gold);
}
/* the gold date catches like an ember, then settles */
.gig.lit .gig-date { animation: date-ignite 1.6s ease-out 0.6s both; }
@keyframes date-ignite {
  0%   { opacity: 0; text-shadow: 0 0 0 rgba(201, 162, 75, 0); }
  60%  { opacity: 1; text-shadow: 0 0 14px rgba(201, 162, 75, 0.45); }
  100% { opacity: 1; text-shadow: 0 0 0 rgba(201, 162, 75, 0); }
}
.gig-event {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  color: var(--platinum);
}
.gig-venue { font-size: 0.8rem; opacity: 0.6; display: block; margin-top: 0.2rem; }
.gig-link {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(185, 190, 198, 0.3);
  padding-bottom: 0.25rem;
}
.gig-empty { padding: 2rem 0; font-style: italic; opacity: 0.6; }
@media (max-width: 640px) {
  .gig { grid-template-columns: 1fr; gap: 0.4rem; }
}
.gigs-past-wrap { margin-top: 4rem; }
.gigs-past-label {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.2rem;
}
.gigs-past { list-style: none; }
.gigs-past li {
  display: flex;
  gap: 1.4rem;
  font-size: 0.82rem;
  opacity: 0.55;
  padding: 0.45rem 0;
}
.gigs-past .p-date { letter-spacing: 0.18em; font-size: 0.7rem; min-width: 6.5rem; padding-top: 0.15em; }
.schedule-note { margin-top: 3rem; font-size: 0.82rem; opacity: 0.7; }
.schedule-note a { border-bottom: 1px solid rgba(185, 190, 198, 0.3); }

/* ── practice ───────────────────────────────────────────────── */
.practice-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-top: 3.6rem;
}
.practice-tiers article {
  border: 1px solid rgba(185, 190, 198, 0.1);
  padding: 2.4rem 1.8rem;
}
.tier-num {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--platinum);
  display: block;
  margin-bottom: 1.2rem;
  opacity: 0.8;
}
.practice-tiers h3 { font-size: 1.05rem; margin-bottom: 0.7rem; }
.practice-tiers p { font-size: 0.86rem; }
.tier-depth {
  display: block;
  margin-top: 1.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}
.practice-line {
  margin-top: 3rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--platinum);
  opacity: 0.8;
  max-width: 34rem;
}

/* community pointer */
.community {
  margin-top: 5rem;
  border: 1px solid rgba(185, 190, 198, 0.12);
  padding: 3rem 2rem;
  text-align: center;
  background: rgba(35, 38, 43, 0.25);
}
.community-mark {
  font-family: var(--hanzi);
  font-size: 2.2rem;
  color: var(--platinum);
  opacity: 0.85;
  margin-bottom: 1rem;
}
.community p { font-size: 0.92rem; }

/* ── the door / signal ──────────────────────────────────────── */
.door {
  padding: clamp(7rem, 15vh, 12rem) var(--pad);
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.door::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 5rem;
  background: linear-gradient(var(--crimson), transparent);
  opacity: 0.8;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.door.lit::before { transform: translateX(-50%) scaleY(1); }
.door .lede { margin-left: auto; margin-right: auto; }
.signal-form {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.signal-form input {
  background: transparent;
  border: 1px solid rgba(185, 190, 198, 0.3);
  color: var(--platinum);
  font-family: var(--body);
  font-size: 0.9rem;
  padding: 1rem 1.4rem;
  min-width: min(22rem, 80vw);
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.5s ease;
}
.signal-form input:focus { border-color: var(--platinum); }
.signal-form input::placeholder { color: rgba(185, 190, 198, 0.4); }
.signal-confirm {
  margin-top: 2rem;
  font-family: var(--display);
  font-style: italic;
  color: var(--platinum);
  animation: fade-up 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── footer ─────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(185, 190, 198, 0.08);
  padding: 5rem var(--pad) 3rem;
  background: #08080A;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 3rem;
  max-width: 82rem;
  margin: 0 auto;
}
.footer-head {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.1rem;
}
.footer p, .footer a, .footer li { font-size: 0.86rem; }
.footer-grid a { border-bottom: 1px solid rgba(185, 190, 198, 0.2); padding-bottom: 0.15rem; }
.footer-mails, .footer-links { list-style: none; }
.footer-mails li, .footer-links li { margin-bottom: 0.6rem; }
.footer-base {
  max-width: 82rem;
  margin: 4.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(185, 190, 198, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-mark {
  font-family: var(--display);
  letter-spacing: 0.18em;
  color: var(--platinum);
}
.footer-line { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — everything settles; nothing moves.
   Kept last in the file so it wins the cascade over all effects.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ THE LOST SCROLL — three quiet artifacts ═══════════════════
   1. volume marks (卷一…卷五) — chapters of a handscroll
   2. kicker rods — hairlines that unroll outward from center
   3. the winding thread — a silk cord that fills as you read     */

.k-vol {
  font-family: var(--hanzi);
  color: var(--gold);
  opacity: 0.85;
  letter-spacing: 0.12em;
  font-size: 0.86em;
}

.kicker.reveal {
  position: relative;
  padding-top: 1.15rem;
}
.kicker.reveal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 22rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 190, 198, 0.28), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.kicker.reveal.lit::before { transform: scaleX(1); }

.scroll-thread {
  position: fixed;
  top: 0;
  right: 14px;
  width: 1px;
  height: 100vh;
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.4), rgba(201, 162, 75, 0.15));
  transform: scaleY(0);
  transform-origin: top;
  z-index: 600;
  pointer-events: none;
}
@media (max-width: 640px) { .scroll-thread { right: 8px; } }

@media (prefers-reduced-motion: reduce) {
  .kicker.reveal::before { transform: scaleX(1); transition: none; }

  body::after,
  .gate-halo, .gate-enter,
  .in-enso, .in-long, .in-bloom, .in-pearl,
  .gate-insignia, .insignia-static .in-pearl,
  .threshold-line, .threshold-choices, .threshold-hint,
  .sound-toggle .sb,
  .gh, .gate-hanzi .gate-dot,
  .layer::after, .core::after,
  .reel.lit .reel-frame,
  .proof-marquee.lit .proof-line,
  .gig.lit .gig-date,
  .signal-confirm {
    animation: none;
  }
  .gate-beam { display: none; }
  /* the insignia stands already-drawn */
  .in-enso { stroke-dashoffset: 0.12; }
  .in-long { opacity: 0.92; filter: none; }
  .in-bloom { opacity: 0; }
  .in-pearl { opacity: 0.85; }
  .gate-insignia { opacity: 0.3; }
  /* the threshold appears settled and parts instantly */
  .threshold-line, .threshold-choices { opacity: 1; }
  .threshold-hint { opacity: 0.45; }
  .threshold-door, .threshold-content, .threshold-door--top::after { transition: none; }
  .gh, .gate-hanzi .gate-dot { opacity: 1; transform: none; }
  .layer::after, .core::after { opacity: 0.16; }
  .reveal, .gate .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .kicker.reveal { letter-spacing: 0.34em; }
  .proof-marquee.lit .proof-line {
    background: none;
    color: var(--platinum);
    -webkit-text-fill-color: var(--platinum);
  }
  .gig::before { transition: none; transform: scaleX(1); }
  .door::before { transition: none; transform: translateX(-50%) scaleY(1); }
  .room::before, .room-hanzi, .layer, .room { transition: none; }
  .room:hover .room-hanzi, .layer:hover { transform: none; }
}