/* scenes part 1: title card, chapter I (road), chapter II (threshold), drip wipe.
   Every pinned scene exposes --p (0..1 scrub progress, set by js/main.js).
   Scene artwork is painted Ottoman-miniature imagery in assets/; the scroll
   engine pans and zooms the paintings like a camera over a scroll. */

.scene { position: relative; }

.scene__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Soft edges at the top and bottom of every pinned stage, so a scene fades
   into its neighbour instead of meeting it at a hard seam. */
.scene__stage::before,
.scene__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 13vh;
  z-index: 9;
  pointer-events: none;
}

.scene__stage::before {
  top: 0;
  background: linear-gradient(to bottom, var(--edge, rgb(3 1 9 / 62%)), transparent);
}

.scene__stage::after {
  bottom: 0;
  background: linear-gradient(to top, var(--edge, rgb(3 1 9 / 62%)), transparent);
}

/* light chapters fade to parchment instead of night */
#s-walk .scene__stage { --edge: rgb(242 232 213 / 55%); }

.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* keep the scrubbed layers on their own compositor layers */
.scene-art,
.road-art,
.th-guardian,
.walk-panel,
.eyes-wrap { will-change: transform; }

/* =============================== TITLE CARD =============================== */

#s-title { height: calc(100vh + 55vh); background: var(--ink); }

#s-title .scene__stage { display: grid; place-items: center; }

.title-sky {
  transform: scale(calc(1.06 + var(--p, 0) * 0.08)) translateY(calc(var(--p, 0) * -3%));
  transform-origin: 50% 40%;
}

.title-stack {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--paper);
  transform: translateY(calc(var(--p, 0) * -14vh));
  text-shadow: 0 2px 30px rgb(10 7 5 / 75%), 0 0 8px rgb(10 7 5 / 55%);
}

.title-stack__eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem);
  color: var(--ochre);
  transform: rotate(-3deg);
  margin-bottom: 0.4em;
}

.title-stack h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 1.4rem + 9.5vw, 11rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.title-stack h1 span { display: block; }

.title-stack h1 .t-studios {
  font-size: 0.32em;
  letter-spacing: 0.55em;
  margin-top: 0.55em;
  font-family: var(--font-display-sc);
}

.title-stack__tag {
  margin-top: 1.6em;
  font-family: var(--font-display-sc);
  font-size: clamp(0.7rem, 0.64rem + 0.3vw, 0.85rem);
  letter-spacing: 0.4em;
  opacity: 0.85;
}

/* The seal: a vermilion ink stamp carrying the site's own display L.
   One roughen pass over the whole thing pits the square's edges and the
   letter together, so they read as a single press onto paper. */
.scroll-seal {
  position: absolute;
  z-index: 4;
  bottom: 5vh;
  left: 50%;
  translate: -50% 0;
  width: clamp(58px, 6.8vw, 86px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-decoration: none;
  border-radius: 7px;
  background: var(--vermilion);
  filter: url(#roughen) drop-shadow(0 8px 20px rgb(0 0 0 / 55%));
  animation: seal-bob 2.6s var(--ease-brush) infinite;
  opacity: calc(1 - var(--p, 0) * 2.5);
}

/* gold rule set inside the stamp, roughened along with everything else */
.scroll-seal::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 2px solid var(--gold);
  border-radius: 3px;
  opacity: 0.9;
}

/* Centred on the glyph's ink, not its line box: measured cap height sits
   0.045em above the box centre, so the letter is nudged back down. */
.seal-mark {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.9vw, 3.85rem);
  line-height: 1;
  color: var(--paper);
  translate: 0 0.045em;
}

@keyframes seal-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ============================ CHAPTER I — ROAD ============================ */

#s-walk { height: calc(100vh + 170vh); background: var(--paper); }

/* the painting is wider than the frame; scroll pans across it */
.road-art {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 136%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  transform: translateX(calc(var(--p, 0) * -26.5%));
}

/* comic panels: framed close-up crops of the paintings */
.walk-panel { position: absolute; z-index: 5; }

.walk-panel .crop {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* panel L: close-up of the lantern-bearer */
.walk-panel .crop img {
  width: 300%;
  max-width: none;
  transform: translate(-50%, -32%);
}

.walk-panel--l {
  top: 12%;
  left: calc(var(--frame-gap) * 2);
  width: clamp(150px, 19vw, 270px);
  aspect-ratio: 4 / 3.1;
  rotate: -1.6deg;
  --seg: clamp(0, calc((var(--p, 0) - 0.10) / 0.14), 1);
  opacity: var(--seg);
  transform: translateY(calc((1 - var(--seg)) * 6vh));
}

.walk-panel--r {
  bottom: 13%;
  right: calc(var(--frame-gap) * 2);
  width: clamp(160px, 21vw, 300px);
  aspect-ratio: 4 / 2.9;
  rotate: 1.8deg;
  --seg: clamp(0, calc((var(--p, 0) - 0.42) / 0.14), 1);
  opacity: var(--seg);
  transform: translateY(calc((1 - var(--seg)) * 6vh));
}

/* panel R: the domed sanctuary on the hill */
.walk-panel--r .crop img {
  width: 340%;
  transform: translate(-72%, -12%);
}

.walk-cap--a {
  position: absolute;
  z-index: 5;
  top: 16%;
  right: calc(var(--frame-gap) * 2.4);
  rotate: 0.8deg;
  --seg: clamp(0, calc((var(--p, 0) - 0.24) / 0.14), 1);
  opacity: var(--seg);
  transform: translateY(calc((1 - var(--seg)) * 4vh));
}

.walk-cap--b {
  position: absolute;
  z-index: 5;
  bottom: 17%;
  left: calc(var(--frame-gap) * 2.6);
  rotate: -1deg;
  --seg: clamp(0, calc((var(--p, 0) - 0.56) / 0.14), 1);
  opacity: var(--seg);
  transform: translateY(calc((1 - var(--seg)) * 4vh));
}

/* closing ink splat that swallows the scene into black */
.walk-out {
  position: absolute;
  z-index: 8;
  inset: -30%;
  display: grid;
  place-items: center;
  pointer-events: none;
  --seg: clamp(0, calc((var(--p, 0) - 0.78) / 0.22), 1);
}

.walk-out svg {
  width: 60%;
  color: var(--ink);
  transform: scale(calc(var(--seg) * 4.4)) rotate(calc(var(--seg) * 24deg));
  opacity: min(1, calc(var(--seg) * 3));
}

/* ========================= CHAPTER II — THRESHOLD ========================= */

#s-threshold { height: calc(100vh + 230vh); background: var(--ink); }

#s-threshold .scene__stage {
  /* slow pull-back from the muqarnas detail to the whole gate */
  --pb: clamp(0, calc((var(--p, 0) - 0.12) / 0.5), 1);
}

.gate-art {
  transform: scale(calc(1.32 - var(--pb, 0) * 0.32));
  transform-origin: 46% 30%;
}

/* the guardian rises from below at the climax */
.th-guardian {
  --seg: clamp(0, calc((var(--p, 0) - 0.62) / 0.22), 1);
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  height: min(88vh, 120vw);
  translate: -50% 0;
  transform: translateY(calc((1 - var(--seg)) * 78%));
  opacity: min(1, calc(var(--seg) * 4));
  filter: drop-shadow(0 0 44px rgb(10 7 5 / 65%));
}

.th-guardian img { height: 100%; width: auto; max-width: none; }

@media (max-width: 1100px) { .th-guardian { filter: none; } }

/* manga speed-line bars sliding from the sides at the climax */
.th-bars { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.th-bars i {
  --seg: clamp(0, calc((var(--p, 0) - 0.72) / 0.22), 1);
  position: absolute;
  height: 13%;
  width: 46%;
  background:
    repeating-linear-gradient(to bottom,
      var(--ink) 0 3px, transparent 3px 9px, var(--ink) 9px 11px, transparent 11px 22px),
    var(--paper);
  border: 3px solid var(--ink);
}

.th-bars i:nth-child(1) { top: 12%; left: 0; transform: translateX(calc((var(--seg) - 1) * 115%)); }
.th-bars i:nth-child(2) { bottom: 14%; right: 0; transform: translateX(calc((1 - var(--seg)) * 115%)); }

.th-cap--a {
  position: absolute;
  z-index: 6;
  top: 14%;
  left: calc(var(--frame-gap) * 2.4);
  rotate: -1deg;
  --seg: clamp(0, calc((var(--p, 0) - 0.06) / 0.12), 1);
  --out: clamp(0, calc((var(--p, 0) - 0.4) / 0.1), 1);
  opacity: calc(var(--seg) - var(--out));
  transform: translateY(calc((1 - var(--seg)) * 4vh));
}

.th-cap--b {
  position: absolute;
  z-index: 6;
  bottom: 12%;
  right: calc(var(--frame-gap) * 2.4);
  rotate: 1.2deg;
  --seg: clamp(0, calc((var(--p, 0) - 0.5) / 0.12), 1);
  opacity: var(--seg);
  transform: translateY(calc((1 - var(--seg)) * 4vh));
}

.th-title {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 8%;
  translate: -50% 0;
  text-align: center;
  color: var(--paper);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-h-chapter);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 26px rgb(10 7 5 / 80%);
  --seg: clamp(0, calc((var(--p, 0) - 0.88) / 0.12), 1);
  opacity: var(--seg);
  letter-spacing: calc(0.3em - var(--seg) * 0.22em);
}

/* ============================== DRIP WIPE ================================ */

#s-drip { height: calc(100vh + 85vh); background: var(--ink); }

.drip-curtain {
  position: absolute;
  inset: 0;
  color: var(--vermilion);
}

.drip-curtain svg {
  width: 100%;
  height: 116%;
  transform: translateY(calc((var(--p, 0) - 1) * 100%));
}

.drip-eye {
  position: absolute;
  z-index: 3;
  bottom: 8%;
  left: 50%;
  translate: -50% 0;
  width: clamp(220px, 34vw, 460px);
  aspect-ratio: 460 / 200;
  border: var(--panel-border) solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 7px 0 rgb(23 18 16 / 85%);
  rotate: -1deg;
  overflow: hidden;
  --seg: clamp(0, calc((var(--p, 0) - 0.55) / 0.2), 1);
  opacity: var(--seg);
  transform: translateY(calc((1 - var(--seg)) * 5vh));
}

.drip-eye img,
.drip-eye video {
  width: 175%;
  max-width: none;
  transform: translate(-19%, -26%);
}

@media (max-width: 860px) {
  .walk-panel--l { top: 9%; width: 34vw; }
  .walk-panel--r { width: 37vw; }
  .walk-cap--a { top: auto; bottom: 40%; right: var(--frame-gap); }
  .walk-cap--b { bottom: 6%; left: var(--frame-gap); }
  .caption-box { max-width: 26ch; }
  .road-art { width: 240%; transform: translateX(calc(var(--p, 0) * -58%)); }
  .gate-art { transform: scale(calc(1.5 - var(--pb, 0) * 0.5)); }
  .th-cap--a { left: var(--frame-gap); }
  .th-cap--b { right: var(--frame-gap); bottom: 20%; }
}