/* ============================================================
   home.css: the hero, and his name assembling (act 2, on About
   unless NAME_ACT brings it back).

   Act 1, the hero (his pick, 4 October 2026: hero F from hero-lab):
   his Kinetic Grid on the page's velvet, gold where it bends; on a
   desktop his intro on the left (his names, the value line, the four
   doors) and his photo on the right, as in hero A; on a phone, his
   photo first and the doors at the thumb, as before. It replaced the
   stage (beam, pool, 金 behind him, drifting dust).

   Act 2 is pinned: as you scroll, 金 rises from behind him into the
   first panel of a three-panel folding screen (屏风); 世 arrives out
   of the dark and takes the second; 双 the third. At the end 金世双
   stands over the stage with its pinyin, and he stands under it.
   js/home.js drives the scroll value; this file holds the look.

   Rule from the brief: depth may overlap the type, never the names.
   ============================================================ */

.home { position: relative; --px: 0; --py: 0; --dock: 0px; --ui: 1; --names-o: 1; --ly: 0px; --ls: 1; }

/* one screen since 2 October 2026: the name's two pinned screens (act 2) moved to About */
.hero-track { position: relative; height: 100vh; height: 100svh; }
.hero-pin {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate;
}

.plane {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--px) * var(--depth, 0) * 1px), calc(var(--py) * var(--depth, 0) * 0.6px), 0);
}
.plane--grid     { --depth: 0;  z-index: 0; }
.plane--glyph    { --depth: 9;  z-index: 1; perspective: 1300px; perspective-origin: 50% 30%; }
.plane--portrait { --depth: 16; z-index: 2; }
.plane--names    { --depth: 24; z-index: 3; opacity: var(--names-o); }
.plane--names .names { margin-bottom: calc(-1 * var(--ny, 0px)); }
.plane--meaning  { --depth: 24; z-index: 3; }

/* ---- the meaning of 金世双, as surtitles: each source word, with the characters he took lit in gold ---- */
/* both surtitles show at once (the name rises as one gesture), so they sit side by side, not in one slot */
.meaning {
  position: absolute; left: 50%; bottom: 6.5vh; transform: translateX(-50%);
  width: min(94vw, 46rem);
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(22px, 5vw, 72px);
}
.meaning__card {
  position: relative; flex: 0 1 auto; margin: 0; text-align: center;
  opacity: var(--mo, 0); transform: translateY(calc((1 - var(--mo, 0)) * 10px));
  text-shadow: 0 2px 22px rgba(18, 4, 5, 0.85), 0 1px 3px rgba(18, 4, 5, 0.6);
}
.meaning__zh { display: block; font: 700 clamp(2.1rem, 1.5rem + 1.6vw, 3rem)/1.1 var(--font-zh); letter-spacing: 0.12em; margin-right: -0.12em; }
.meaning__c { color: rgba(247, 239, 228, 0.3); }
.meaning__c.is-his {
  color: color-mix(in srgb, var(--gold) calc(var(--lit, 0) * 100%), rgba(247, 239, 228, 0.3));
  text-shadow: 0 0 26px rgba(212, 168, 83, calc(var(--lit, 0) * 0.55)), 0 2px 22px rgba(18, 4, 5, 0.85);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .meaning__c.is-his { color: var(--gold); opacity: calc(0.3 + 0.7 * var(--lit, 0)); }
}
.meaning__gloss { display: block; margin-top: 0.35em; font: italic 400 clamp(1.15rem, 0.95rem + 0.5vw, 1.45rem)/1.3 var(--font-text); color: var(--warm); }

/* ---- the grid: his Kinetic Grid (js/kinetic-grid.js), on the page's own velvet. It dissolves over the hero's last
   quarter, so the room below begins without a line (codex C2). Its faint dot texture (theirs: 0.7 px every 28 px, at
   5 %) never moves, so it is painted here once rather than on every frame of the canvas ---- */
.plane--grid {
  opacity: 0; transition: opacity 1800ms var(--ease-grace);
  background-image: radial-gradient(circle at 14px 14px, rgba(247, 239, 228, 0.05) 0.7px, rgba(247, 239, 228, 0) 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.kgrid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }

/* ---- the beam: one warm spotlight from above (C2: the dark has a light source). The home hero no longer uses it
   (hero F, 4 October 2026); the lost room (js/lost.js) still stands in it, so it stays here ---- */
.beam {
  position: absolute; left: 50%; top: -8vh;
  width: min(1180px, 96vw); height: 106vh;
  transform: translateX(-50%) rotate(var(--beam-rot, 0deg));
  transform-origin: 50% 0;
  filter: blur(34px);
  opacity: 0;
  transition: opacity 1800ms var(--ease-grace), transform 1600ms var(--ease-grace);
}
.beam__cone {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  clip-path: polygon(43% 0, 57% 0, 79% 100%, 21% 100%);
  background: linear-gradient(to bottom,
      rgba(var(--lamp), 0.34) 0%, rgba(var(--lamp), 0.15) 38%,
      rgba(var(--lamp), 0.07) 72%, rgba(var(--lamp), 0) 100%);
}
.pool {
  position: absolute; left: 50%; bottom: 3vh; z-index: 1;
  width: min(1060px, 92vw); height: 30vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 56%, rgba(var(--lamp), 0.17), rgba(var(--lamp), 0.05) 55%, rgba(var(--lamp), 0) 74%);
  opacity: 0;
  transition: opacity 2000ms var(--ease-grace);
}
/* ---- his name, three characters (positions and scale come from js/home.js) ---- */
.glyphs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 2400ms var(--ease-grace); }
.gl {
  position: absolute; left: 50%; top: 47%;
  font: 900 var(--fb, 90vh)/1 var(--font-zh);
  color: transparent;
  background: linear-gradient(to bottom, rgba(234, 203, 134, 0.2) 0%, rgba(234, 203, 134, 0.075) 55%, rgba(234, 203, 134, 0.018) 88%);
  -webkit-background-clip: text; background-clip: text;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  user-select: none;
}
.gl[data-i="1"], .gl[data-i="2"] { opacity: 0; }

.panel {
  position: absolute; left: 0; top: 0;
  width: var(--pw, 200px); height: var(--ph, 240px);
  display: grid; place-items: center;
  border-radius: 12px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--lamp), 0.2), rgba(var(--lamp), 0) 70%),
    linear-gradient(180deg, #4C2328 0%, #331318 55%, #230b0f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212, 168, 83, 0.36),
    inset 0 1px 0 rgba(255, 228, 180, 0.28),
    0 36px 60px -30px rgba(10, 2, 4, 0.85);
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.panel::before {               /* the lacquered screen's inner frame */
  content: ""; position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px;
  border: 1px solid rgba(212, 168, 83, 0.2); border-radius: 7px;
}
.panel__char {
  position: relative;
  font: 900 var(--fs, 150px)/1 var(--font-zh);
  color: transparent;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(234, 203, 134, 0.22));
}
.py {
  position: absolute; left: 0; top: 0;
  font: 400 clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem)/1 var(--font-ui);
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}

/* ---- the portrait: his own stage photograph, on its own plane ---- */
.portrait {
  position: absolute; left: 50%; top: 6.5vh;
  height: min(70vh, 700px);
  aspect-ratio: 547 / 746;
  transform-origin: 50% 100%;
  transform: translate3d(-50%, calc(var(--rise) + var(--ly)), 0) scale(var(--ls));
  opacity: 0; filter: blur(var(--settle));
  transition: opacity var(--dur-grace) var(--ease-grace), transform var(--dur-grace) var(--ease-grace), filter var(--dur-grace) var(--ease-grace);
  transition-delay: 350ms;
}
.portrait__halo {
  position: absolute; left: 50%; top: -9%;
  width: 96%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--lamp), 0.24), rgba(var(--lamp), 0.07) 58%, rgba(var(--lamp), 0));
  filter: blur(6px);
}
.portrait picture, .portrait__img { display: block; width: 100%; height: 100%; }
.portrait__img {
  object-fit: contain; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, 0.6) 74%, rgba(0, 0, 0, 0.12) 90%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, 0.6) 74%, rgba(0, 0, 0, 0.12) 90%, transparent 97%);
  user-select: none; -webkit-user-drag: none;
}

/* ---- his names: in front of him, never behind him ---- */
.names {
  /* clear of the value line and its proof under it, even on a short laptop screen */
  position: absolute; left: 50%; bottom: max(18vh, 168px);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  text-align: center;
  font-weight: 400;
}
.names__call {
  display: block;
  font: italic 400 clamp(1.3rem, 0.95rem + 0.9vw, 1.95rem)/1.2 var(--font-text);
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-bottom: 0.2em;
}
.names__line {
  display: block;
  font: 400 var(--t-hero)/1.02 var(--font-display);
  color: var(--warm);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 2px 28px rgba(18, 4, 5, 0.65), 0 1px 2px rgba(18, 4, 5, 0.4);
}
.names__zh { font-family: var(--font-zh); font-weight: 700; letter-spacing: 0.03em; }
.names rt {
  font: 400 0.15em/1.4 var(--font-ui);
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: none;
  padding-bottom: 0.25em;
}
/* word-by-word blur-in: Hero Section One, as shipped (0.5 s, 70 ms stagger, 4 px blur, 10 px rise) */
.names .w {
  display: inline-block;
  opacity: 0; filter: blur(4px); transform: translateY(10px);
}
.home.is-in .names .w { animation: word-in 0.5s var(--ease-ui) forwards; animation-delay: var(--wd, 0ms); }
@keyframes word-in { to { opacity: 1; filter: blur(0); transform: translateY(0); } }

/* ---- the doors and the creed fade as the name begins to assemble ---- */
.hud { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; pointer-events: none; opacity: var(--ui); }
.hud.is-off { visibility: hidden; }
.doors {
  position: absolute;
  top: max(var(--gutter), env(safe-area-inset-top)); right: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom)); left: var(--gutter);
  pointer-events: none;
}
.door {
  position: absolute; pointer-events: auto;
  display: grid; gap: 7px; justify-items: start;
  padding: 12px 14px; margin: -12px -14px;
  border-radius: 14px;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-hover) var(--ease-ui), transform var(--dur-hover) var(--ease-ui);
}
.door--tl { top: 0; left: 0; }
.door--tr { top: 0; right: 0; justify-items: end; text-align: right; }
.door--bl { bottom: 0; left: 0; }
.door--br { bottom: 0; right: 0; justify-items: end; text-align: right; }
.door__title {
  position: relative;
  font: 400 clamp(1.55rem, 1.05rem + 1.05vw, 2.2rem)/1.05 var(--font-display);
  color: var(--warm);
  letter-spacing: 0.005em;
}
.door__title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 900ms var(--ease-grace);
}
.door--tr .door__title::after, .door--br .door__title::after { transform-origin: 100% 50%; }
.door__sub { font: italic 400 1.08rem/1.25 var(--font-text); color: var(--warm-muted); }
.door:focus-visible .door__title::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .door:hover .door__title::after { transform: scaleX(1); }
  .home.is-in .door:hover { transform: translateY(-3px); }
  .home.is-in .doors:has(.door:hover) .door:not(:hover) { opacity: 0.42; }
}
.creed {
  position: absolute; left: 50%;
  bottom: max(calc(var(--gutter) + 8px), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  /* between the two bottom doors, so the proof never runs under them */
  width: clamp(340px, calc(100vw - 2 * var(--gutter) - 2 * 250px), 880px);
  text-align: center;
  opacity: 0;
  transition: opacity 1600ms var(--ease-grace);
}
/* the value line: who he is in one breath; the proof under it, small, like credits */
.creed__line { font: italic 400 clamp(1.08rem, 0.96rem + 0.45vw, 1.34rem)/1.3 var(--font-text); color: var(--warm); letter-spacing: 0.01em; }
.creed__proof { margin-top: 7px; font: 500 var(--t-micro)/1.55 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-muted); text-wrap: balance; }
.creed__item { white-space: nowrap; }            /* wrap only between items, never inside one */
.creed__dot { color: var(--gold); padding: 0 0.3em; }

/* ---------------- the entrance ---------------- */
.home.is-lit .plane--grid, .home.is-lit .glyphs { opacity: 1; }
.home.is-in .portrait { opacity: 1; transform: translate3d(-50%, var(--ly), 0) scale(var(--ls)); filter: none; }
.home.is-in .door { opacity: 1; transform: none; transition-delay: var(--dd, 0ms); }
.home.is-in .creed { opacity: 1; transition-delay: 1400ms; }
.home.is-settled .door { transition-delay: 0ms; }
/* once he has arrived, the scroll moves him directly; a transition would make him lag the hand */
.home.is-settled .portrait { transition: opacity var(--dur-grace) var(--ease-grace); }

/* a return visit skips the long wait: the stage is already lit */
.home.is-quick .plane--grid, .home.is-quick .glyphs, .home.is-quick .portrait { transition-duration: 900ms; transition-delay: 0ms; }
.home.is-quick .names .w { animation-duration: 0.5s; animation-delay: calc(var(--wd, 0ms) * 0.35); }
.home.is-quick .door { transition-delay: calc(var(--dd, 0ms) * 0.3); }
.home.is-quick .creed { transition-delay: 300ms; }

/* ---------------- desktop: his intro on the left, his photo on the right (hero A's layout, his pick) ----------------
   The names, the value line and the doors live on different planes, so they share one seam instead of one column:
   his names end just above the middle of the screen, the value line and the doors begin just below it. The doors
   sit as two by two under his words, which keeps the bottom-left corner free for the music pill (codex A7). */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
  .home { --seam: calc(50% - 1.5vh); --col: min(46vw, 640px); --port-h: min(88svh, 880px); }

  /* a little dark behind his words, so the grid stays a texture under them */
  .plane--grid::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(58% 66% at 20% 52%, rgba(27, 7, 10, 0.6), rgba(27, 7, 10, 0) 72%);
  }

  /* centred on its own middle (the entrance moves it by -50%), so its right edge stands 5vw in from the window's */
  .portrait { top: auto; bottom: 0; left: calc(100% - 5vw - var(--port-h) * 0.3667); height: var(--port-h); }
  .portrait__img {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  }

  .names { left: var(--gutter); bottom: calc(100% - var(--seam)); transform: none; width: var(--col); max-width: none; text-align: left; }
  .names__line { font-size: clamp(2.6rem, 5.2vw, 5.4rem); line-height: 1.04; white-space: normal; }
  .names__or { display: block; }

  .creed { left: var(--gutter); top: calc(var(--seam) + 22px); bottom: auto; transform: none; width: var(--col); text-align: left; }

  .doors {
    top: calc(var(--seam) + 80px); right: auto; bottom: auto; left: var(--gutter); width: var(--col);
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px;
  }
  .door {
    position: relative; top: auto; right: auto; bottom: auto; left: auto; margin: 0;
    padding: 14px 6px 16px 0; gap: 6px; border-radius: 0; border-top: 1px solid var(--line-dark);
  }
  .door--tr, .door--br { justify-items: start; text-align: left; }
  .door--tr .door__title::after, .door--br .door__title::after { transform-origin: 0 50%; }
  .door__title { font-size: clamp(1.3rem, 0.85rem + 0.8vw, 1.75rem); }
  .door__sub { font-size: 1.02rem; }
}

/* ---------------- phone: portrait first, doors at the thumb ---------------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .home { --dock: 244px; }             /* the doors, plus the value line and its three proof lines under them */
  .hero-pin { min-height: 540px; }
  .plane--names { --depth: 14; }
  .plane--portrait { --depth: 9; }

  .beam { width: 150vw; height: 92svh; top: -6svh; }
  .beam__cone { clip-path: polygon(40% 0, 60% 0, 88% 100%, 12% 100%); }
  .gl { top: 30svh; }
  .pool { bottom: calc(var(--dock) - 4svh); width: 130vw; height: 22svh; }
  .panel { border-radius: 9px; }
  .panel::before { top: 6px; right: 6px; bottom: 6px; left: 6px; border-radius: 5px; }

  .portrait {
    top: max(5svh, calc(env(safe-area-inset-top) + 10px));
    height: min(calc(100svh - var(--dock) - 13svh), 128vw, 560px);
  }
  .names {
    bottom: calc(var(--dock) + 1.5svh);
    width: calc(100vw - 2 * var(--gutter));
  }
  .names__call { font-size: 1.28rem; }
  .meaning { bottom: calc(var(--dock) - 2svh); gap: 18px; }
  .meaning__zh { font-size: 1.75rem; }
  .meaning__gloss { font-size: 0.98rem; }
  .names__line { font-size: clamp(2.2rem, 10.6vw, 3.1rem); white-space: normal; line-height: 1.04; }
  .names__or { display: block; }

  .doors {
    top: auto; right: var(--gutter); left: var(--gutter);
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 80px);
    display: grid; grid-template-columns: 1fr 1fr;
  }
  .door {
    position: relative; top: auto; right: auto; bottom: auto; left: auto; margin: 0;
    padding: 14px 12px 15px; min-height: 74px; align-content: start; gap: 5px;
    border-radius: 0;
    border-top: 1px solid var(--line-dark);
  }
  .door--tl, .door--bl { border-right: 1px solid var(--line-dark); padding-left: 2px; }
  .door--tr, .door--br { padding-right: 2px; }
  .door__title { font-size: 1.36rem; }
  .door__title::after { bottom: -5px; }
  .door__sub { font-size: 0.98rem; }

  .creed { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100vw - 2 * var(--gutter)); }
  .creed__line { font-size: 1rem; }
  .creed__proof { font-size: 0.66rem; letter-spacing: 0.07em; line-height: 1.5; margin-top: 4px; }
  .creed__item { display: block; }
  .creed__dot { display: none; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .names__call { font-size: 1.1rem; }
  .names__line { font-size: clamp(2rem, 9.6vw, 2.6rem); }
  .door { min-height: 66px; padding-top: 11px; padding-bottom: 11px; }
}
/* short landscape windows: keep the corners, shrink the stage */
@media (min-aspect-ratio: 4/5) and (max-height: 620px) and (min-width: 761px) {
  .home { --seam: calc(50% + 1vh); }
  .names__line { font-size: clamp(2.2rem, 8.5vh, 4rem); }
  .doors { top: calc(var(--seam) + 66px); }
  .door { padding-top: 10px; padding-bottom: 11px; }
  .creed__proof { display: none; }      /* no room for the credits here; the value line stays */
}

@media (prefers-reduced-motion: reduce) {
  .hero-track { height: auto; }
  .hero-pin { position: relative; }
  .plane { transform: none; }
  .beam, .pool, .plane--grid, .glyphs, .portrait, .creed, .door { transition: opacity 500ms linear !important; transition-delay: 0ms !important; }
  .portrait { filter: none; }
  .door { transform: none; }
  .names .w { opacity: 1; filter: none; transform: none; animation: none !important; }
}