/* FARKYNG v004 — Legenda (scenes in a loop behind the text) and 404. Package D. Uses tokens.css + plates.css. */

/* Stage: fixed scenes behind the text. Only the active (.on), the outgoing (.out) and the preloaded
   next scene (.next) are rendered, so lazy images of the other scenes are never fetched. Without JS only D01 shows. */
.stage{position:fixed;inset:0;z-index:-2;background:var(--night);overflow:hidden}
.layer{position:absolute;inset:0;margin:0;display:none;opacity:0;transition:opacity 2000ms ease-in-out}
.layer.on,.layer.out,.layer.next{display:block}
.layer.on{opacity:1;z-index:2}
.layer.out{opacity:1;z-index:1;transition:none}
.layer picture,.layer img{width:100%;height:100%}
.layer img{object-fit:cover}
/* Veil: text column always sits on ≥ .74 night (ivory text ≥ 6:1 even over a white pixel). */
.stage::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,
  rgba(10,13,16,.2) 0,rgba(10,13,16,.2) calc(50% - 560px),rgba(10,13,16,.74) calc(50% - 380px),
  rgba(10,13,16,.74) calc(50% + 380px),rgba(10,13,16,.2) calc(50% + 560px),rgba(10,13,16,.2) 100%)}
.temp{position:absolute;right:14px;bottom:14px;z-index:4;font:600 11px/1 var(--ui);letter-spacing:.18em;background:#7a1d12;color:#fff;padding:6px 9px}

/* Reader: intro screen (scene + title), text starts below the fold. */
.reader{position:relative;width:min(744px,100%);margin:0 auto;padding:58vh 32px 40vh;display:grid;justify-items:center;counter-reset:part}
.reader-title{margin:0 0 28vh;font-size:inherit;line-height:1}
.legend-text{width:100%;max-width:680px;font:400 21px/1.85 var(--read);color:#ece4d6;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.legend-text p{margin:0 0 30px}
.legend-text strong{color:var(--bronze-hi);font-weight:400}
.legend-text blockquote{margin:30px 0;padding-left:24px;border-left:2px solid var(--bronze);font-style:italic}

/* Part numerals I–V: bronze square plates, numbers from a CSS counter (no words added to the legend).
   Serif numerals in bright bronze: condensed stamp capitals read as a pause bar at this size (F4). */
.part-mark,.legend-text hr{counter-increment:part;--sq:128px;width:var(--sq);height:var(--sq);margin:0 auto 72px;padding:0;border:0;overflow:visible;
  display:grid;place-items:center;background:url(/assets/v004/plates/A-square.webp) center/100% 100% no-repeat;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.legend-text hr{margin:84px auto 56px}
.part-mark::after,.legend-text hr::after{content:counter(part,upper-roman);display:block;
  font:700 60px/1 var(--read);letter-spacing:.02em;color:var(--bronze-hi);
  text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,236,200,.3),0 0 14px rgba(233,201,154,.25)}
/* No JS: the stage stays on D01, so each part opens with its own scene (noscript image after the separator). */
.legend-text .part-scene{width:100%;height:auto;margin:0 0 56px;border-radius:2px;box-shadow:0 12px 30px rgba(0,0,0,.5)}

/* Krédo (D-100): its own block after the legend (outside .legend-text), centred lines, same reading type. */
.kredo{width:100%;max-width:680px;display:grid;justify-items:center;gap:44px;margin:140px 0 30px;text-align:center}
.kredo .head{margin:0;font:inherit}
.kredo-text{margin:0;font:400 23px/1.8 var(--read);color:#ece4d6;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.kredo-line{display:block;text-wrap:balance}

.reader-end{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;justify-content:center;margin-top:40px}

/* Arrival through the door (home page sets sessionStorage farkyng-door=1): legend.js adds .enter--on,
   golden light fades out. Nothing runs by default, so paused/reduced-motion users and direct visits never see it. */
.enter{position:fixed;inset:0;z-index:80;pointer-events:none;display:none;
  background:radial-gradient(circle at 50% 50%,#ffe7b8,#d9a66f 40%,#3a2817)}
.enter--on{display:block;animation:enter 900ms ease forwards}
@keyframes enter{from{opacity:1}to{opacity:0}}
html.motion-paused .enter{display:none}

/* 404 */
.lost-main{position:relative;min-height:100svh;display:grid;place-items:center;padding:120px var(--gutter) 80px;isolation:isolate;text-align:center}
.lost-scene,.lost-scene img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.lost-scene img{object-fit:cover}
.lost-main::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,13,16,.62)}
.lost-copy{display:grid;justify-items:center;gap:22px}
.lost-copy h1{margin:0;font:400 clamp(30px,4vw,44px)/1.3 var(--read);color:var(--ivory)}
.lost-copy .reader-end{margin-top:12px}

@media (max-width:760px){
  .stage::after{background:rgba(10,13,16,.7)}
  .reader{padding:52vh 22px 34vh}
  .reader-title{margin-bottom:26vh}
  .legend-text{font-size:19px}
  .kredo{margin-top:110px;gap:30px}
  .kredo-text{font-size:clamp(16px,4.5vw,19px);line-height:1.7}
  .kredo-line+.kredo-line{margin-top:.15em}
  .part-mark,.legend-text hr{--sq:104px}
  .part-mark::after,.legend-text hr::after{font-size:48px}
}
@media (prefers-reduced-motion:reduce){.layer{transition:none}.enter{display:none}}
html.motion-paused .layer{transition:none} /* paused mid-fade: no dip into the dark */