/* ============================================================
   ONE MAN BAND INDIA — Story Quest (home page only)
   Mobile-first; GSAP enhances, CSS carries the no-JS fallback.
   ============================================================ */

.chapter { position: relative; padding-block: var(--sec-pad); }
.chapter__title { font-size: var(--fs-chapter); }

/* ============ PROLOGUE ============ */
.prologue {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 40px) 0 90px; overflow: hidden;
}
.prologue__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.prologue__photo .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.prologue__photo .slide.on { opacity: 1; }
.prologue__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 22%;
  filter: saturate(0.95) contrast(1.05) brightness(1.12);
}
.prologue::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(8,8,13,0.72), rgba(8,8,13,0.2) 62%, transparent),
    linear-gradient(to top, var(--ink-0) 5%, rgba(8,8,13,0.5) 36%, rgba(8,8,13,0.12) 68%, rgba(8,8,13,0.45) 100%);
}
.prologue__title, .prologue .lede, .prologue .cue { text-shadow: 0 2px 28px rgba(4, 4, 8, 0.75); }
.prologue__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 1; display: flex; gap: 8px; }
.prologue__dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--ink-4); transition: background 0.4s; }
.prologue__dots i.on { background: var(--gold-0); }
.prologue__spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.85;
  background: radial-gradient(circle 340px at var(--sx, 70%) var(--sy, 30%), rgba(242,178,62,0.14), transparent 70%);
}
.prologue__inner { position: relative; z-index: 1; }
.prologue__title { font-size: var(--fs-hero); margin-block: 10px 22px; }
.prologue__title .line { display: block; overflow: hidden; }
.prologue__title .line > span { display: inline-block; }
.prologue__title em { font-style: normal; }
.prologue__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.prologue__scroll {
  position: absolute; right: var(--gutter); bottom: 26px; z-index: 1;
  font-family: var(--ff-cue); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--paper-2); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.prologue__scroll span { width: 1px; height: 44px; background: linear-gradient(var(--gold-0), transparent); display: block; animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============ CH.1 — POSTERS ============ */
.ch1__posters {
  display: grid; gap: 16px; padding: 48px var(--gutter);
  grid-template-columns: repeat(2, 1fr);
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
}
@media (min-width: 720px) { .ch1__posters { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.poster {
  position: relative; border-radius: var(--r-sm); padding: 20px 16px 16px;
  min-height: 190px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--ink-3); background: var(--ink-1);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.poster:hover { transform: rotate(0deg) translateY(-6px); border-color: var(--ink-4); }
.poster__tag { font-family: var(--ff-cue); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-0); }
.poster h3 { font-family: var(--ff-display); font-size: clamp(20px, 3vw, 34px); text-transform: uppercase; line-height: 0.95; margin-top: 4px; }
.poster p { font-family: var(--ff-cue); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-2); }
.poster__role { margin-top: auto; font-size: 13.5px; color: var(--paper-1); border-top: 1px dashed var(--ink-3); padding-top: 10px; }
.poster__role b { color: var(--paper-0); }
.p1 { --tilt: -1.6deg; }
.p2 { --tilt: 1.2deg; background: linear-gradient(160deg, var(--ink-1), #131022); }
.p3 { --tilt: -0.8deg; }
.p4 { --tilt: 1.8deg; background: linear-gradient(200deg, var(--ink-1), #171208); }
.p5 { --tilt: -1.2deg; border-color: var(--gold-dim); }
.p6 { --tilt: 0.9deg; }
.p5 h3 { color: var(--gold-0); }
.ch1__foot { margin-top: 26px; }

/* collectible glint buttons: shared styles live in site.css */
.poster__egg { position: absolute; top: 12px; right: 10px; }

/* ============ CH.2 — THE DIAGNOSIS ============ */
.ch2 { background: linear-gradient(#0a0a10, #0d0709 50%, #0a0a10); padding-block: 0; }
.ch2__pin { min-height: 100svh; display: flex; align-items: center; padding-block: var(--sec-pad); }
.ch2__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .ch2__grid { grid-template-columns: 1.2fr 0.8fr; } }
.ch2__lines { margin-top: 30px; display: grid; gap: 20px; max-width: 52ch; }
.ch2__line { color: var(--paper-1); font-size: var(--fs-sub); line-height: 1.5; }
.ch2__line strong { color: var(--paper-0); }
.ch2__line .red { color: var(--red-0); }
.ch2__doctor {
  font-family: var(--ff-display); text-transform: uppercase; font-size: clamp(26px, 4.6vw, 46px);
  line-height: 1.05; color: var(--red-0);
}
.ch2__doctor cite { display: block; font-family: var(--ff-cue); font-style: normal; font-size: 11px; letter-spacing: 0.2em; color: var(--paper-2); margin-top: 10px; }

.breath { position: relative; width: min(300px, 68vw); margin-inline: auto; }
.breath__ring { transform: rotate(-90deg); }
.breath__bg { fill: none; stroke: var(--ink-3); stroke-width: 6; }
.breath__val {
  fill: none; stroke: var(--gold-0); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 0; /* r=52 → C≈326.7 */
  transition: stroke 0.4s;
}
.breath__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.breath__num b { font-family: var(--ff-display); font-size: clamp(56px, 9vw, 84px); line-height: 1; }
.breath__num span { font-family: var(--ff-cue); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-2); margin-top: 6px; }
.breath.is-low .breath__val { stroke: var(--red-0); }
.breath.is-low .breath__num b { color: var(--red-0); }
.ch2__meter-cap {
  text-align: center; margin-top: 18px;
  font-family: var(--ff-cue); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-2);
}

/* ============ CH.3 — THE COMEBACK ============ */
.ch3 { padding-block: 0; }
.ch3__pin { min-height: 100svh; display: flex; align-items: center; padding-block: var(--sec-pad); }
.ch3__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .ch3__grid { grid-template-columns: 1fr 1fr; } }
.ch3__born { margin-top: 18px; padding: 16px 20px; border-left: 2px solid var(--gold-0); background: var(--ink-1); border-radius: 0 var(--r-md) var(--r-md) 0; }
.ch3__count { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.ch3__count b { font-family: var(--ff-display); font-size: clamp(84px, 13vw, 150px); line-height: 0.9; color: var(--gold-0); font-weight: 400; }
.ch3__count span { font-family: var(--ff-cue); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-2); line-height: 1.7; }
.ch3__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ch3__list li {
  position: relative; font-family: var(--ff-cue); font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--ink-3); border-radius: 6px; padding: 10px 12px 10px 34px;
  color: var(--ink-4); transition: color 0.5s, border-color 0.5s, background 0.5s;
}
.ch3__list li::before {
  content: attr(data-i); position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--ink-4); transition: color 0.5s;
}
.ch3__list li.lit { color: var(--paper-0); border-color: var(--gold-dim); background: color-mix(in srgb, var(--gold-0) 6%, transparent); }
.ch3__list li.lit::before { color: var(--gold-0); }
/* no-JS / reduced-motion default: everything lit (JS unlights before animating) */
.ch3__egg { width: 28px; height: 28px; padding: 3px; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.ch3__egg:hover { transform: translateY(-50%) scale(1.15); }

/* ============ CH.4 — THE RISE ============ */
.ch4 { background: var(--ink-1); }
.ch4__tickets {
  display: grid; gap: 18px; padding: 44px var(--gutter) 0;
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
}
@media (min-width: 720px) { .ch4__tickets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ch4__tickets { grid-template-columns: repeat(4, 1fr); } }
.ticket {
  position: relative; background: var(--ink-0); border: 1px solid var(--ink-3); border-radius: var(--r-md);
  padding: 22px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}
.ticket:hover { transform: translateY(-5px) rotate(-0.5deg); border-color: var(--gold-dim); }
.ticket::before, .ticket::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-1); border: 1px solid var(--ink-3); top: 50%;
}
.ticket::before { left: -10px; }
.ticket::after { right: -10px; }
.ticket__year { font-family: var(--ff-display); font-size: 30px; color: var(--gold-0); }
.ticket h3 { font-size: 20px; line-height: 1.2; }
.ticket p { color: var(--paper-1); font-size: 15.5px; }
.ticket__stub {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--ink-3);
  font-family: var(--ff-cue); font-size: 10px; letter-spacing: 0.3em; color: var(--paper-2);
}
.ticket--photo picture { margin: -22px -22px 4px; }
.ticket--photo img { height: 130px; width: 100%; object-fit: cover; opacity: 0.85; }
.ticket__egg { width: 28px; height: 28px; padding: 3px; }

/* ============ CH.5 — THE ALBUM ============ */
.ch5 { overflow: hidden; }
.ch5__photo { position: absolute; inset: 0; z-index: -1; }
.ch5__photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: saturate(0.8) brightness(1.05); }
.ch5::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--ink-0), transparent 30%, transparent 65%, var(--ink-0)); }
.ch5__inner { display: grid; gap: 26px; justify-items: start; }
.ch5__mantra { font-size: clamp(80px, 17vw, 230px); }
.ch5__hint { font-family: var(--ff-cue); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4); }
.ch5__hint:hover { color: var(--paper-2); }

/* ============ FINALE + JAM RIG ============ */
.finale { padding-bottom: 40px; }
.jam { margin-top: 40px; border: 1px solid var(--ink-3); border-radius: var(--r-lg); background: var(--ink-1); padding: clamp(16px, 2.5vw, 28px); }
.jam__pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .jam__pads { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .jam__pads { grid-template-columns: repeat(7, 1fr); } }
.jam-pad {
  position: relative; display: grid; justify-items: center; gap: 8px;
  border: 1px solid var(--ink-3); border-radius: var(--r-md); padding: 18px 8px 12px;
  color: var(--paper-2); background: var(--ink-0);
  transition: transform 0.12s var(--ease-out), border-color 0.2s, background 0.2s;
}
.jam-pad svg { width: 30px; height: 30px; }
.jam-pad span { font-family: var(--ff-cue); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.jam-pad kbd {
  position: absolute; top: 6px; right: 8px; font-family: var(--ff-cue); font-size: 9px;
  color: var(--ink-4); border: 1px solid var(--ink-3); border-radius: 4px; padding: 1px 5px;
}
.jam-pad.unlocked { color: var(--gold-0); cursor: pointer; }
.jam-pad.unlocked span { color: var(--paper-1); }
.jam-pad.unlocked:hover { border-color: var(--gold-dim); }
.jam-pad.unlocked.hit { transform: scale(0.93); background: color-mix(in srgb, var(--gold-0) 14%, var(--ink-0)); border-color: var(--gold-0); }
.jam-pad.locked { opacity: 0.55; cursor: help; }
.jam-pad.locked .q { font-family: var(--ff-display); font-size: 26px; line-height: 30px; opacity: 0.6; }
.jam__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.jam__bar .btn { padding: 11px 18px; font-size: 10px; }
.jam__bar .btn[data-jam-record].rec { color: var(--red-0); border-color: var(--red-0); }
.jam__status { font-family: var(--ff-cue); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-2); flex: 1; min-width: 180px; }
.jam__egg { width: 30px; height: 30px; padding: 4px; margin-left: auto; }

.finale__stats { margin-top: 44px; }
.finale__quotes { display: grid; gap: 30px; margin-top: 60px; }
@media (min-width: 900px) { .finale__quotes { grid-template-columns: repeat(3, 1fr); } }
.finale__cta { margin-top: 80px; border-top: 1px solid var(--ink-3); padding-top: 56px; }

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .poster { transform: none; }
  .prologue__scroll span { animation: none; }
  [data-collect] { animation: none !important; }
}