/* The mountain. Part Five: the approach, the seal face, and five lines through stone.
   Register "seal": ink warmed from within, the Buddha's gold without institutional ambition. */

.js-only { display: none; }
.js .js-only { display: revert; }
.js .stone-controls.js-only { display: flex; }

.mtn-head { position: relative; z-index: 1; }
.mtn-head .lede { max-width: 34rem; }
.mtn-hint { margin-top: 2.2rem; color: var(--muted); }
.mtn-hint::after { content: " \2193"; }

/* ------------------------------------------------------------------ shared sticky scene */
.mtn-approach, .mtn-seal { position: relative; }
.js .mtn-approach { height: 440vh; }
.js .mtn-seal { height: 360vh; }
.mtn-sticky { position: relative; overflow: hidden; isolation: isolate; min-height: 34rem; }
.js .mtn-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.mtn-sticky > canvas.ink-field { z-index: 0; }

/* ------------------------------------------------------------------ the approach */
.mtn-approach { --hum: 1; --stamp: 0; background: #130c09; }
/* The painted approach (mountain.js); without JavaScript, a still of the same silhouette. */
.mtn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.mtn-range { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.js .mtn-range, html:not(.js) .mtn-canvas { display: none; }
/* A pool of shadow under the captions, so the lines read over mist. */
.js .mtn-approach .mtn-sticky::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
  background: radial-gradient(110% 85% at 10% 100%, rgba(10, 6, 4, .7), rgba(10, 6, 4, .34) 48%, rgba(10, 6, 4, 0) 78%);
}

.mtn-instruments { position: absolute; z-index: 3; top: calc(var(--masthead-h) + 1.4rem); right: var(--gutter); text-align: right; }
.mtn-instruments [data-leagues] { font-size: 2.6rem; letter-spacing: 0; color: #f2e8da; font-weight: 400; display: inline-block; min-width: 2ch; }
.hum { display: flex; gap: 3px; align-items: center; justify-content: flex-end; height: 2.2rem; margin: .6rem 0 .3rem; }
.hum span { width: 3px; background: rgba(242, 232, 218, .55); border-radius: 1px; height: calc((.08 + var(--h, .5) * .92) * var(--hum) * 100% + 1px); transition: height .25s linear; }
.js .hum span { animation: hum 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -71ms); }
@keyframes hum { 50% { transform: scaleY(.55); } }
.hum-label { font-size: .7rem; }

.mtn-captions { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(2.5rem, 10vh, 6rem); max-width: 40rem; }
.mtn-cap { margin: 0; font-size: var(--step-2); line-height: 1.25; font-weight: 350; color: #f7eddd; text-shadow: 0 2px 24px rgba(0, 0, 0, .75); font-variation-settings: "opsz" 48; }
.no-js .mtn-cap, html:not(.js) .mtn-cap { margin-bottom: 1.4rem; }
/* The novel's own words, set apart from the room's, with where they were filed. */
.mtn-quote { font-style: italic; }
.mtn-cite { display: block; margin-top: .7rem; font-style: normal; font-size: .68rem; color: rgba(242, 232, 218, .62); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.js .mtn-cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-ink), transform .9s var(--ease-ink); }
.js .mtn-cap.is-on { opacity: 1; transform: none; }
html:not(.js) .mtn-captions { position: relative; left: auto; right: auto; bottom: auto; padding: 40vh var(--gutter) 3rem; }

.mtn-checkpoint { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: end; }
.mtn-checkpoint p { margin: 0; font-size: var(--step-1); line-height: 1.4; }
.checkpoint { position: relative; width: 5.2rem; height: 6.4rem; }
.checkpoint-paper { position: absolute; left: 0; bottom: 0; width: 5.2rem; height: 5.6rem; background: #efe9dc; box-shadow: 0 8px 24px rgba(0,0,0,.5); transform: rotate(-3deg); overflow: hidden; }
.checkpoint-lines { position: absolute; inset: .7rem .7rem 2rem; background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(26,24,16,.35) 7px 8px); }
.checkpoint-mark { position: absolute; right: .55rem; bottom: .55rem; width: 1.7rem; height: 1.7rem; border: 2px solid #b01c08; background: rgba(200,32,0,.12); opacity: calc(var(--stamp) * 3 - 2); box-shadow: inset 0 0 0 2px rgba(200,32,0,.5); }
.checkpoint-stamp { position: absolute; right: .2rem; bottom: calc(.3rem + (1 - var(--stamp)) * 3.2rem); width: 2.3rem; height: 3.2rem; background: linear-gradient(90deg, #3a1a0c, #6a3418 45%, #2a1208); border-radius: 3px 3px 1px 1px;
  box-shadow: 0 10px 18px rgba(0,0,0,.5); opacity: calc(1.4 - var(--stamp) * .4); }
.checkpoint-stamp::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: .5rem; background: #801000; border-radius: 1px; }

/* ------------------------------------------------------------------ the seal face */
.mtn-seal { --pan: 0; --reveal: 0; }
.cliff { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 300%; transform: translateY(calc(-66.666% * (1 - var(--pan)))); will-change: transform; }
.cliff-slope, .cliff-face { position: absolute; left: 0; right: 0; height: 42%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.cliff-face { top: -4%; background:
  radial-gradient(55% 45% at 50% 52%, rgba(200,64,26,.32), transparent 72%),
  linear-gradient(180deg, rgba(20,10,6,.1), rgba(20,10,6,.4)); }
.cliff-middle { top: 29%; background:
  repeating-linear-gradient(176deg, rgba(0,0,0,.14) 0 3px, transparent 3px 44px),
  repeating-linear-gradient(170deg, rgba(255,140,80,.04) 0 1px, transparent 1px 90px),
  linear-gradient(180deg, rgba(90,32,12,.18), rgba(40,18,10,.3)); }
.cliff-lower { top: 62%; background:
  radial-gradient(9px 6px at 12% 22%, rgba(0,0,0,.35), transparent 70%), radial-gradient(14px 9px at 34% 58%, rgba(0,0,0,.3), transparent 70%),
  radial-gradient(11px 7px at 62% 36%, rgba(0,0,0,.32), transparent 70%), radial-gradient(18px 10px at 81% 70%, rgba(0,0,0,.3), transparent 70%),
  radial-gradient(7px 5px at 90% 18%, rgba(0,0,0,.35), transparent 70%), radial-gradient(12px 7px at 48% 84%, rgba(0,0,0,.3), transparent 70%);
  background-size: 220px 160px; }
.cliff-lower::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,18,10,.2), rgba(14,8,6,.7)); }
.seal-face { position: absolute; z-index: 2; left: 50%; top: 52%; width: min(64vh, 78vw); aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(.9 + var(--pan) * .1)); opacity: calc(var(--pan) * 1.6 - .4); }
.seal-glyph { width: 100%; height: 100%; overflow: visible; }
.seal-glyph .glyph-stroke { fill: url(#seal-gold); }
.seal-glyph .glyph { filter: url(#brush-edge); }
.seal-measure { position: absolute; left: -2.6rem; top: 8%; bottom: 8%; width: 1px; background: rgba(242,232,218,.45); opacity: var(--reveal); }
.seal-measure::before, .seal-measure::after { content: ""; position: absolute; left: -5px; width: 11px; height: 1px; background: rgba(242,232,218,.6); }
.seal-measure::before { top: 0; } .seal-measure::after { bottom: 0; }
.seal-measure .label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; background: rgba(20,12,8,.9); padding: .1rem .5rem; font-size: .66rem; }
.seal-wei { position: absolute; right: -9%; bottom: 7%; height: 16%; width: auto; opacity: calc(var(--reveal) * 1.2); }

.slope-steps { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--masthead-h) + 1.6rem); list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.slope-steps li { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,232,218,.62); transition: color .5s; padding-left: 1rem; border-left: 1px solid rgba(242,232,218,.18); }
.slope-steps li.is-on { color: #f2e8da; border-left-color: var(--gold-2); }
.seal-captions { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(2rem, 8vh, 5rem); max-width: 34rem; }
.seal-cap { margin: 0; font-size: var(--step-1); line-height: 1.35; color: #f7eddd; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.js .seal-cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity .7s var(--ease-ink); }
.js .seal-cap.is-on { opacity: 1; }
/* Without JavaScript: the seal face as the climb ends, 封 set in the brush face in place of the
   drawn strokes, the measure and the scribe beside it, and both lines under it. */
.seal-text { font-family: var(--f-brush); font-size: 860px; fill: url(#seal-gold); text-anchor: middle; dominant-baseline: central; }
.js .seal-text { display: none; }
html:not(.js) .mtn-seal { --pan: 1; --reveal: 1; }
html:not(.js) .mtn-seal .mtn-sticky { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: calc(var(--masthead-h) + 1.6rem) var(--gutter) clamp(2.5rem, 8vh, 4rem); background: radial-gradient(120% 90% at 70% 30%, #5a200c 0%, #261208 45%, #120806 100%); }
html:not(.js) .slope-steps { position: relative; left: auto; top: auto; order: -1; }
html:not(.js) .slope-steps li:last-child { color: #f2e8da; border-left-color: var(--gold-2); }
html:not(.js) .seal-face { position: relative; left: auto; top: auto; transform: none; align-self: center; margin: 1.5rem 0 2.5rem; opacity: 1; }
html:not(.js) .seal-captions { position: relative; left: auto; right: auto; bottom: auto; }
html:not(.js) .seal-cap + .seal-cap { margin-top: 1rem; }

/* ------------------------------------------------------------------ five lines */
.lines { position: relative; padding: clamp(4rem, 12vh, 8rem) 0 2rem; }
.lines-head .section-title { margin: .8rem 0 1rem; max-width: 16ch; }
.lines-intro { font-size: var(--step-1); line-height: 1.45; color: var(--fg-2); max-width: 34rem; }

.lines-stage {
  --warm: 0; --jade: 0; --hand: 0;
  position: relative; isolation: isolate; overflow: hidden; margin: 2.5rem 0 0; height: clamp(30rem, 78vh, 46rem);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #120906; cursor: pointer; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.lines-stage.is-done { cursor: default; }
/* The painted stone (mountain.js): dark until the painting arrives; without JavaScript, the
   same painting, dim and cool, as it is before a hand is laid on it. */
.stone-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-ink); }
.lines-stage.is-painted .stone-canvas { opacity: 1; }
.stone-still { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 46%; filter: brightness(.5) saturate(.6); pointer-events: none; }
/* The character in the painted stone: gold worked into the rock (overlay keeps the grain of the
   stone inside the strokes), clearer as the stone warms. */
.stone-glyph { position: absolute; z-index: 1; left: 50%; top: 46%; width: min(58vh, 70vw); height: min(58vh, 70vw); transform: translate(-50%, -50%); opacity: calc(.28 + var(--warm) * .32); mix-blend-mode: overlay; pointer-events: none; }
.stone-glyph .glyph-stroke { fill: #e8b838; filter: blur(1px); }
.hand { position: absolute; z-index: 2; width: clamp(6rem, 12vw, 9.5rem); height: auto; left: 50%; top: 50%; transform: translate(-50%, -55%) scale(calc(1.18 - var(--hand) * .18)); opacity: var(--hand); mix-blend-mode: screen; pointer-events: none; transition: opacity .8s var(--ease-ink); }
.lines-stage.is-lifted .hand { opacity: .32; transition: opacity 4s ease; }
.voice {
  position: absolute; z-index: 3; left: 50%; top: 20%; width: min(40rem, calc(100% - 2 * var(--gutter))); transform: translateX(-50%);
  text-align: center; text-wrap: balance; font-size: var(--step-3); line-height: 1.15; font-weight: 350; color: #fff2de; font-variation-settings: "opsz" 60;
  text-shadow: 0 0 30px rgba(240,64,32,.55), 0 2px 18px rgba(0,0,0,.8); pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease-ink), filter 1.1s var(--ease-ink); filter: blur(6px);
}
.voice.is-on { opacity: 1; filter: none; }
.voice.is-wei { font-size: var(--step-1); line-height: 1.4; color: #cdb9a4; text-shadow: 0 2px 16px rgba(0,0,0,.8); font-style: italic; }
.voice.is-narr { font-size: var(--step-1); font-style: italic; color: rgba(242,232,218,.75); text-shadow: 0 2px 16px rgba(0,0,0,.9); }
/* The shard is dim until the stone warms and it answers; its label stays legible over the rock. */
.jade { position: absolute; z-index: 3; right: var(--gutter); top: 1.2rem; display: flex; align-items: center; gap: .7rem; }
.jade .label { font-size: .66rem; color: rgba(242,232,218, calc(.74 + var(--jade) * .2)); text-shadow: 0 0 2px rgba(10,6,4,.9), 0 1px 8px rgba(10,6,4,.95); }
.jade-shard { width: 1.4rem; height: 1.8rem; background: linear-gradient(140deg, #3cb0a0, #145040 55%, #0a3828); clip-path: polygon(30% 0, 100% 18%, 82% 100%, 0 76%);
  opacity: calc(.35 + var(--jade) * .65); filter: drop-shadow(0 0 calc(var(--jade) * 18px) rgba(60,176,160,.9)); box-shadow: 0 0 0 1px rgba(60,176,160,.4); }
.stone-controls { position: absolute; z-index: 4; left: 50%; bottom: .7rem; transform: translateX(-50%); flex-direction: column; align-items: center; gap: .6rem; width: max-content; max-width: calc(100% - 2rem); transition: opacity .6s; }
.stone-press {
  display: inline-flex; align-items: center; gap: .9rem; min-height: 3.4rem; padding: .5rem 1.3rem .5rem .6rem; border-radius: 3rem;
  border: 1px solid rgba(232,184,56,.5); background: rgba(20,10,4,.72); color: #f6e9cc; font-size: 1.02rem; cursor: pointer; touch-action: none;
  transition: border-color .3s, transform .3s var(--ease-ink);
}
.stone-press:hover { border-color: var(--gold-1); }
.stone-press.is-holding { transform: scale(.98); border-color: var(--red-1); }
.stone-press[aria-disabled="true"] { opacity: .75; cursor: default; }
.press-ring { position: relative; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid rgba(232,184,56,.5); overflow: hidden; flex: none; }
.press-fill { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(240,64,32,.7) calc(var(--p, 0) * 1turn), transparent 0); }
.press-ring::after { content: ""; position: absolute; inset: 30% 34% 26%; border-radius: 40% 40% 45% 45%; background: rgba(255,210,122,.8); }
.stone-press [data-press-label] { text-wrap: balance; }
.press-toggle { color: #cdb9a4; text-shadow: 0 1px 8px rgba(10,6,4,.9); }
/* Under the two controls, in the same column: it wraps there instead of running under them. */
.press-help { margin: 0; text-align: center; text-wrap: balance; font-size: .82rem; line-height: 1.45; color: rgba(242,232,218,.74); text-shadow: 0 0 2px rgba(10,6,4,.9), 0 1px 8px rgba(10,6,4,.95); }
.lines-stage.is-pressed .stone-controls { opacity: 0; pointer-events: none; transition: opacity .6s; }

.lines-record { padding-top: 2.5rem; }
.record-label { margin-bottom: 1rem; }
.transcript { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 1px solid var(--rule); max-width: 44rem; display: grid; gap: 1rem; }
.transcript li { position: relative; line-height: 1.45; }
.transcript li::before { content: ""; position: absolute; left: calc(-1.2rem - 4px); top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.t-who { display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.t-voice { font-size: var(--step-1); color: #fff2de; }
.t-voice::before { background: var(--red-2) !important; box-shadow: 0 0 10px rgba(224,48,16,.8); }
.t-wei { color: var(--fg-2); font-style: italic; }
.t-narr { color: var(--muted); font-size: .98rem; }
.t-final { font-size: var(--step-2); line-height: 1.25; }
.t-palm { font-style: italic; color: var(--fg-2); }         /* the novel's own words, not a stage note */
.transcript li.is-new { animation: arrive 1.2s var(--ease-ink); }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.stage-dock { position: absolute; z-index: 5; left: 50%; bottom: 2.4rem; transform: translateX(-50%); width: min(40rem, calc(100% - 2rem)); display: grid; justify-items: center; gap: .8rem; pointer-events: none; }
.stage-dock > * { pointer-events: auto; }
.asks, .js .asks { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.ask { border-color: rgba(232,184,56,.5); background: rgba(20,10,4,.72); color: #f6e9cc; border-radius: 3rem; padding-inline: 1.3rem; animation: arrive 1s var(--ease-ink); }
.ask:hover { border-color: var(--gold-1); background: rgba(40,16,6,.8); }
.lines-end { text-align: center; padding: 1rem 1.2rem; background: rgba(16,8,4,.78); border: 1px solid rgba(232,184,56,.25); backdrop-filter: blur(6px); animation: arrive 1.2s var(--ease-ink); }
.lines-end .btn-row { justify-content: center; }
.lines-end-note { color: #f2e8da; margin-bottom: .8rem; }
.lines-end .btn-quiet { color: #cdb9a4; }

.next-room { margin-top: 3rem; }

@media (max-width: 760px) {
  .mtn-instruments [data-leagues] { font-size: 1.9rem; }
  .seal-measure { left: -1.2rem; }
  .seal-wei { right: -4%; }
  .voice { top: 12%; font-size: var(--step-2); }
  .lines-stage { height: 34rem; }
  .slope-steps { top: calc(var(--masthead-h) + .8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hum span { animation: none; }
  .voice { filter: none; }
}
html.reduce-motion .js .hum span, html.reduce-motion .hum span { animation: none; }