/* ================= THE STONERS SHOP — parallax story page =================
   Sections stack one after another. Inside each, layers move at different
   rates against the scroll (see story.js). The locked design language still
   holds: the films are painted on paper, so every piece of artwork FEATHERS
   INTO THE PAPER at its edges instead of sitting in a box — as you scroll,
   one world dissolves into the next through the page itself.
========================================================================= */

:root {
  --paper: #faf7f1;
  --paper-2: #f2ece1;
  --ink: #241f18;
  --ink-dim: #6b6255;
  --amber: #9c5c14;
  --amber-soft: #e2953f;
  --clay: #a8442a;
}

/* the page is the paper; artwork is laid onto it */
body { background: var(--paper); color: var(--ink); }

/* ---------------- section shell ---------------- */
.act {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;                 /* layers overshoot; keep them in the act */
  isolation: isolate;
}
.act--tall { min-height: 130svh; }

/* Every layer is absolutely placed and oversized, so translating it never
   exposes an edge. story.js writes the transform. */
.layer {
  position: absolute;
  inset: -14% -4%;
  pointer-events: none;
  will-change: transform;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.layer img, .layer video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* the paper feather — top and bottom of every act */
.act::before {
  content: '';
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(var(--paper) 0%, rgba(250,247,241,0.55) 9%, transparent 22%,
                    transparent 74%, rgba(250,247,241,0.6) 89%, var(--paper) 100%);
}
/* a soft side wash so type always has somewhere to sit */
.act--left::after {
  content: '';
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, rgba(250,247,241,0.86) 0%, rgba(250,247,241,0.3) 34%, transparent 58%);
}
.act--right::after {
  content: '';
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(270deg, rgba(250,247,241,0.86) 0%, rgba(250,247,241,0.3) 34%, transparent 58%);
}

/* ---------------- copy block ---------------- */
.copy {
  position: relative; z-index: 10;
  width: min(520px, 42vw);
  margin-left: 7vw;
  will-change: transform;
}
/* extra clearance on the right so the copy never runs into the rail */
.act--right .copy { margin-left: auto; margin-right: 10vw; text-align: right; }

.copy__num {
  font-family: var(--font-display); font-size: clamp(4rem, 11vw, 9.5rem);
  line-height: 0.8; color: transparent;
  -webkit-text-stroke: 1.5px rgba(156,92,20,0.5);
  margin-bottom: 0.1em;
  user-select: none;
}
.copy__tag {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--amber); font-weight: 600;
  margin-bottom: 14px;
}
.copy h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.04; margin-bottom: 16px;
  text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 30px rgba(250,247,241,0.85);
}
.copy h2 em { font-style: italic; color: var(--amber); }
.copy p {
  color: rgba(36,31,24,0.86); font-weight: 300; margin-bottom: 14px;
  text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 26px rgba(250,247,241,0.8);
}
.copy .btn { margin-top: 14px; }

/* each line lifts in when the act becomes active */
.copy > * { opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.act.in .copy > * { opacity: 1; transform: none; }
.act.in .copy > *:nth-child(2) { transition-delay: 0.07s; }
.act.in .copy > *:nth-child(3) { transition-delay: 0.14s; }
.act.in .copy > *:nth-child(4) { transition-delay: 0.21s; }
.act.in .copy > *:nth-child(5) { transition-delay: 0.28s; }
.act.in .copy > *:nth-child(6) { transition-delay: 0.35s; }

/* ---------------- overture ---------------- */
.overture { min-height: 100svh; text-align: center; place-content: center; }
.overture .copy { width: min(760px, 88vw); margin: 0 auto; text-align: center; }
.overture h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 10vw, 8rem); line-height: 0.92;
  text-shadow: 0 1px 14px rgba(250,247,241,0.95), 0 0 34px rgba(250,247,241,0.85);
}
.overture h1 em { font-style: italic; color: var(--amber); }
.overture__kicker {
  font-size: 0.74rem; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--amber); font-weight: 600; margin-bottom: 22px;
}
.overture__sub {
  max-width: 440px; margin: 24px auto 0; color: rgba(36,31,24,0.84); font-weight: 300;
  text-shadow: 0 1px 14px rgba(250,247,241,0.95);
}
.scroll-cue {
  margin-top: 40px; display: block; font-size: 0.68rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(36,31,24,0.55);
}
.scroll-cue::after {
  content: ''; display: block; width: 1px; height: 44px; margin: 12px auto 0;
  background: linear-gradient(var(--amber), transparent);
  animation: drip 1.9s 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; }
}

/* ---------------- film-hero acts ----------------
   The loop sits in a shaped frame that is itself feathered into the paper,
   so the footage bleeds rather than sitting in a hard rectangle. */
.filmframe {
  position: absolute; z-index: 4;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1180px, 88vw); aspect-ratio: 16 / 8.6;
  border-radius: 260px / 180px;
  overflow: hidden;
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 52%, transparent 88%);
          mask-image: radial-gradient(ellipse 78% 76% at 50% 50%, #000 52%, transparent 88%);
}
.filmframe video, .filmframe img { width: 100%; height: 100%; object-fit: cover; }
/* the film sits opposite the copy */
.act--left  .filmframe { left: 60%; }
.act--right .filmframe { left: 40%; }

/* ---------------- the cut-out characters ----------------
   These are OBJECTS sitting in the world, not backdrops — so they override
   the full-bleed .layer box and get an explicit size and footing. */
.l-stone {
  inset: auto;                       /* cancel the .layer full-bleed box */
  z-index: 3;
}
.l-stone img {
  width: 100%; height: auto;
  object-fit: contain;
}

#act-hopkins .l-stone {
  left: 1%; bottom: 21%; width: min(600px, 48%);
}
#act-hopkins .l-stone img { filter: drop-shadow(0 26px 30px rgba(36,31,24,0.22)); }
#act-hopkins .l-fg { z-index: 5; inset: auto -4% -12% -4%; height: 46%; }
#act-hopkins .l-fg img { object-fit: cover; object-position: center bottom; }

/* Lone Stone: small in a big empty world — the silence is the composition */
#act-lone-stone .l-stone {
  left: 11%; bottom: 30%; width: min(300px, 23%);
}
#act-lone-stone .l-stone img { filter: drop-shadow(0 18px 22px rgba(36,31,24,0.2)); }

/* ---------------- Struck Quartz: the fracture ---------------- */
.fracture {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  width: 100%; height: 100%;
}
.fracture path {
  fill: none; stroke: rgba(36,31,24,0.5); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(250,247,241,0.9));
}

/* ---------------- Pierre: rising spores ---------------- */
.spores { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.spore {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,214,0.95), rgba(226,149,63,0.15) 62%, transparent 72%);
  animation: rise linear infinite;
}
@keyframes rise {
  from { transform: translateY(0) scale(0.7); opacity: 0; }
  14%  { opacity: 0.9; }
  86%  { opacity: 0.7; }
  to   { transform: translateY(-62vh) scale(1.15); opacity: 0; }
}

/* ---------------- Chalkou: starfield at three depths ---------------- */
.stars { position: absolute; inset: -20%; z-index: 2; pointer-events: none; will-change: transform; }
/* warm motes, not white stars — white vanishes against the paper */
.stars span {
  position: absolute; border-radius: 50%;
  background: rgba(156,92,20,0.5);
  box-shadow: 0 0 7px rgba(226,149,63,0.75);
}

/* ---------------- drifting pebbles (ties the acts together) ---------------- */
.pebble {
  position: absolute; z-index: 8; pointer-events: none;
  border-radius: 52% 48% 46% 54%;
  background: linear-gradient(150deg, rgba(120,110,96,0.5), rgba(90,82,70,0.38));
  border: 1.5px solid rgba(36,31,24,0.4);
  will-change: transform;
  opacity: 0.55;
}

/* ---------------- closing act ---------------- */
.finale { text-align: center; }
.finale .copy { width: min(640px, 88vw); margin: 0 auto; text-align: center; }
.finale__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------------- chapter rail + progress ---------------- */
.rail {
  position: fixed; right: 2.4vw; top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 15px;
}
/* The tick is the button; the label is taken out of flow so every tick lines
   up on the same right edge instead of being pushed around by label length. */
.rail button {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  background: none; border: none; padding: 0;
  cursor: pointer; color: rgba(36,31,24,0.42); font-family: var(--font-body);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.3s;
}
.rail button span {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap; pointer-events: none;
  background: rgba(250,247,241,0.94); padding: 4px 9px; border-radius: 5px;
}
.rail button i { width: 24px; height: 2px; background: currentColor; display: block; transition: width 0.35s cubic-bezier(0.22,1,0.36,1); }
.rail button:hover { color: rgba(36,31,24,0.9); }
.rail button:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail button.on { color: var(--amber); }
.rail button.on i { width: 44px; }
/* the label is hover-only — showing it on the active act drove it straight
   through the copy, which sits against the same edge */

.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(36,31,24,0.1); z-index: 62; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--clay), var(--amber)); }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  /* Portrait has no room for art and copy side by side, so the act splits
     into bands: artwork lives in the top ~46%, copy sits below it on paper.
     Every layer is clipped to that upper band so nothing sits under the text. */
  .act { min-height: 112svh; align-content: end; padding-bottom: 9vh; }
  .overture, .finale { min-height: 100svh; align-content: center; padding-bottom: 0; }
  .act--tall { min-height: 118svh; }

  .layer { inset: -8% -4% 54% -4%; }
  .overture .layer, .finale .layer { inset: -8% -4%; }
  /* must come after .layer here, or the band's `top` beats the `bottom`
     each cut-out is placed with and the character drifts off the art band */
  .l-stone { inset: auto; }

  .copy { width: auto; margin: 0 7vw; }
  .act--right .copy { margin: 0 7vw; text-align: left; }
  .copy__num { font-size: clamp(3.2rem, 16vw, 5.4rem); }
  .copy p { font-size: 0.96rem; margin-bottom: 11px; }

  /* wash only where the copy actually is */
  .act--left::after, .act--right::after {
    background: linear-gradient(rgba(250,247,241,0) 0%, rgba(250,247,241,0.06) 30%,
                                rgba(250,247,241,0.78) 46%, var(--paper) 58%);
  }
  .act::before {
    background: linear-gradient(var(--paper) 0%, rgba(250,247,241,0.5) 8%, transparent 20%,
                                transparent 84%, var(--paper) 100%);
  }

  .filmframe {
    width: 116vw; left: 50% !important; top: 26%;
    aspect-ratio: 16/11; border-radius: 160px / 120px;
  }
  .rail { display: none; }

  #act-hopkins .l-stone { left: 4%;  bottom: 60%; width: 60%; }
  #act-hopkins .l-fg    { inset: auto -4% 44% -4%; height: 16%; }

  /* the pebbles are a depth flourish for the wide layout — in portrait they
     just drift across the copy, so they go */
  .pebble { display: none; }
  #act-lone-stone .l-stone { left: 12%; bottom: 60%; width: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .layer, .copy, .stars, .pebble { transform: none !important; }
  /* the frame still needs its centering — only the scroll offset goes */
  .filmframe { transform: translate(-50%, -50%) !important; }
  .spore { animation: none; opacity: 0.5; }
  .copy > * { opacity: 1; transform: none; }
}