/* Inner-page scenes. Each is a [data-pin] section whose --p runs 0 → 1 (scripts/motion.ts).
   Every value reads var(--p, 1): without JS or with reduced motion the scene renders finished. */
.scene { --dock: 0px; }
.scene .pin__stage { isolation: isolate; }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.scene__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15,12,9,.86) 0%, rgba(15,12,9,.45) 40%, rgba(15,12,9,.12) 68%, rgba(15,12,9,.35) 100%); }
.scene__copy { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(clamp(2rem, 7vh, 4.5rem) + var(--dock) + env(safe-area-inset-bottom)); max-width: 62rem; z-index: 3; }
.scene__copy .ph__time { margin: 0 0 .3rem; }
.scene h1, .scene .scene__h { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.9rem, 1rem + 7.6vw, 8.6rem); line-height: .88; letter-spacing: -.03em; margin: 0 0 1rem; }
.scene .lede { margin: 0; }
.scene--night .pin__stage { background: var(--night); color: var(--night-ink); }
.scene--night .lede { color: var(--night-ink); }
.tag-ill { position: absolute; right: var(--gut); top: 5.4rem; z-index: 3; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
/* two copy states that hand over mid-scene */
.st-a { opacity: clamp(0, 1 - (var(--p, 1) - var(--a-out, .3)) * 7, 1); }
.st-b { opacity: clamp(0, (var(--p, 1) - var(--b-in, .62)) * 6, 1); }
.st-a, .st-b { transition: none; }
@media (max-width: 720px) { .scene { --dock: 76px; } .tag-ill { top: 4.6rem; } }

/* ---------- House cleaning: a squeegee pulls the grime off, left to right ---------- */
.sq { --k: clamp(0, (var(--p, 1) - .14) / .56, 1); }
.sq__grime { filter: blur(9px) saturate(.4) brightness(.6) sepia(.4) contrast(.9); transform: scale(1.05); clip-path: inset(0 0 0 calc(var(--k) * 100%)); }
.sq__fog { position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: inset(0 0 0 calc(var(--k) * 100%));
  background: radial-gradient(60% 50% at 30% 40%, rgba(214,206,186,.32), transparent 70%), radial-gradient(40% 40% at 75% 65%, rgba(196,186,160,.28), transparent 70%); }
.sq__blade { position: absolute; top: -2%; bottom: -2%; left: calc(var(--k) * 100%); width: 14px; margin-left: -7px; z-index: 2; border-radius: 4px;
  background: linear-gradient(90deg, #15120f 0 35%, var(--lemon) 35% 70%, #15120f 70%); box-shadow: -18px 0 40px rgba(255,255,255,.18), 10px 0 30px rgba(0,0,0,.5);
  opacity: clamp(0, (1 - var(--k)) * 24, 1); }
.sq__blade::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 120px; transform: translate(-50%, -50%); border-radius: 10px; background: #15120f; border: 2px solid var(--lemon); }

/* the week's list crosses itself off as it passes up the screen */
.strike { list-style: none; padding: 0; margin: 2rem 0 0; columns: 2 18rem; column-gap: 3rem; }
.strike li { position: relative; break-inside: avoid; font-family: var(--sc-font-display); font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); line-height: 1.15; padding: .2rem 0; width: fit-content;
  --s: clamp(0, (var(--p, 1) - .12 - var(--i) * .045) * 9, 1); color: color-mix(in oklab, var(--sc-ink) calc(100% - var(--s) * 55%), transparent); }
.strike li::after { content: ""; position: absolute; left: -.1em; right: -.1em; top: 55%; height: .09em; background: var(--lemon); border-radius: 1em; transform: scaleX(var(--s)); transform-origin: 0 50%; }
.marq { margin-top: clamp(3rem, 8vw, 6rem); display: grid; gap: .6rem; font-family: var(--sc-font-display); font-size: clamp(2.4rem, 1rem + 5vw, 6rem); line-height: 1; white-space: nowrap; }
.marq [data-dir] span { padding-right: .4em; }
.marq [data-dir="1"] { color: var(--sc-ink-soft); font-style: italic; }

/* ---------- Move-out: the boxes leave by the door, one by one ---------- */
.mv { --k: clamp(0, (var(--p, 1) - .1) / .6, 1); }
.mv .scene__img { filter: brightness(calc(.5 + .5 * var(--k))) saturate(calc(.6 + .4 * var(--k))); }
.mv__pile { position: absolute; left: 50%; bottom: calc(14% + var(--dock)); width: min(78vw, 920px); height: min(46vh, 520px); transform: translateX(-50%); z-index: 1; pointer-events: none; }
.mv__box { --e: clamp(0, (var(--p, 1) - .08 - var(--i) * .075) / .2, 1);
  position: absolute; left: var(--x); bottom: var(--y); width: var(--w); aspect-ratio: var(--r, 1.35); border-radius: 4px;
  background: linear-gradient(180deg, #c99a62, #b5844e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 18px 30px rgba(0,0,0,.35);
  display: grid; place-items: center; color: #2a1d10; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: clamp(.75rem, .5rem + 1vw, 1.25rem); text-align: center; line-height: 1.1; padding: .5rem;
  transform: translate3d(calc(var(--e) * 115vw), calc(var(--e) * var(--e) * -6vh), 0) rotate(calc(var(--rot, 0deg) + var(--e) * 16deg)); opacity: clamp(0, (1 - var(--e)) * 6, 1); }
.mv__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; background: rgba(240,224,190,.55); }
.mv__box span { transform: rotate(-3deg); font-family: var(--sc-font-display); font-style: italic; text-transform: none; font-weight: 400; font-size: 1.35em; letter-spacing: 0; }

/* ---------- Office: an example evening slides past, sideways ---------- */
.of .pin__stage { display: grid; grid-template-rows: auto 1fr auto; padding: 6.5rem 0 calc(2rem + var(--dock) + env(safe-area-inset-bottom)); gap: 1.5rem; }
.of__head { padding: 0 var(--gut); }
.of__head h1 { font-size: clamp(2.5rem, 1rem + 5vw, 6.2rem); max-width: 14ch; }
.of__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding: 0 var(--gut); align-items: stretch; }
.mo .of__track { display: flex; width: max-content; transform: translate3d(calc(var(--p, 1) * (100vw - 100%)), 0, 0); }
.of__card { width: auto; min-height: 15rem; border: 1px solid rgba(246,238,226,.22); border-radius: 18px; padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; justify-content: space-between; background: rgba(246,238,226,.04); }
.mo .of__card { width: min(24rem, 76vw); }
.of__card b { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem); line-height: 1; color: var(--lemon); }
.of__card p { margin: 0; font-size: 1.1rem; }
.of__card--photo { position: relative; overflow: hidden; color: var(--sc-ink); background: var(--sc-canvas); border: 0; padding: 0; justify-content: flex-end; }
.mo .of__card--photo { width: min(40rem, 86vw); }
.of__card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.of__card--photo div { position: relative; margin: 1rem; padding: 1rem 1.2rem; background: rgba(247,243,236,.94); border-radius: 12px; }
.of__card--photo b { color: var(--sc-ink); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.of__rail { position: relative; margin: 0 var(--gut); height: 2px; background: rgba(246,238,226,.2); }
.of__rail i { position: absolute; top: 50%; left: calc(var(--p, 1) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lemon); }
.of__rail span { position: absolute; top: .8rem; font-size: .8rem; opacity: .7; } .of__rail span:last-child { right: 0; }
@media (max-height: 700px) { .of__card { min-height: 11rem; } .of__head h1 { font-size: clamp(2.2rem, 1rem + 4vw, 4.4rem); } }

/* ---------- Eco: the fumes rise off the shelf and clear ---------- */
.ec { --k: clamp(0, (var(--p, 1) - .12) / .5, 1); }
.ec .scene__img { filter: blur(calc((1 - var(--k)) * 7px)) saturate(calc(.35 + .65 * var(--k))) brightness(calc(.7 + .3 * var(--k))); transform: scale(calc(1.06 - var(--k) * .06)); }
.ec__haze { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 45%, rgba(170,182,150,.55), rgba(110,120,96,.35) 60%, transparent); opacity: calc(1 - var(--k)); }
.fume { --w: clamp(0, (var(--p, 1) - .04 - var(--i) * .045) / .32, 1);
  position: absolute; left: var(--x); top: var(--y); z-index: 2; pointer-events: none; white-space: nowrap;
  font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: var(--f, clamp(1.3rem, .8rem + 2.6vw, 3.6rem)); color: rgba(246,238,226,.9); text-shadow: 0 2px 24px rgba(0,0,0,.4);
  transform: translate3d(0, calc(var(--w) * -55vh), 0) rotate(var(--rot, 0deg)) scale(calc(1 + var(--w) * .25)); filter: blur(calc(var(--w) * 12px)); opacity: calc(1 - var(--w)); }

/* ---------- Areas: the lake pushes in; each town name fills in like a highlighter pass ---------- */
.ar .scene__img { transform: scale(calc(1.14 - var(--p, 1) * .14)) translate3d(calc((1 - var(--p, 1)) * -2%), 0, 0); filter: brightness(.82); }
.ar__shade { background: linear-gradient(90deg, rgba(15,12,9,.78) 0%, rgba(15,12,9,.45) 45%, rgba(15,12,9,.05) 75%), linear-gradient(to top, rgba(15,12,9,.5), transparent 40%); }
.ar__head { position: absolute; left: var(--gut); top: clamp(5.5rem, 13vh, 8rem); z-index: 3; }
.ar__head .ph__time { margin: 0 0 .2rem; }
.ar .ar__head h1 { font-size: clamp(2.2rem, 1rem + 3.2vw, 4.4rem); margin: 0; }
.ar__towns { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(clamp(1.5rem, 6vh, 4rem) + var(--dock) + env(safe-area-inset-bottom)); z-index: 3; list-style: none; margin: 0; padding: 0; }
.ar__towns li { --k: clamp(0, (var(--p, 1) - .1 - var(--i) * .13) / .14, 1); display: flex; align-items: baseline; gap: .8rem;
  transform: translate3d(calc((1 - var(--k)) * 4vw), 0, 0); }
.ar__name { position: relative; font-family: var(--sc-font-display); font-size: min(1rem + 5.4vw, 10.4vh); line-height: 1.02; letter-spacing: -.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(246,238,226,.45); }
.ar__name::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: var(--night-ink); -webkit-text-stroke: 0; clip-path: inset(-10% calc((1 - var(--k)) * 100%) -10% 0); }
.ar__towns em { font-family: var(--sc-font-display); color: var(--lemon); font-size: clamp(1rem, .8rem + .8vw, 1.5rem); opacity: var(--k); white-space: nowrap; }
@media (max-width: 720px) { .ar__name { font-size: min(9.4vw, 6.4vh); } .ar__towns em { font-size: .9rem; } }

/* ---------- First clean: the receipt prints, then gets stamped ---------- */
.rc .pin__stage { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem; padding: 6rem var(--gut) calc(2rem + var(--dock) + env(safe-area-inset-bottom)); }
.rc { --k: clamp(0, (var(--p, 1) - .06) / .58, 1); --s: clamp(0, (var(--p, 1) - .7) / .14, 1); }
.rc__till { justify-self: center; width: min(25rem, 86vw); }
.rc__slot { height: 22px; border-radius: 12px; background: #050403; box-shadow: inset 0 3px 6px rgba(0,0,0,.8), 0 0 0 1px rgba(246,238,226,.12); }
.rc__feed { overflow: hidden; margin: -11px 14px 0; padding-bottom: 30px; }
.rc__paper { position: relative; background: #fbf8f1; color: #1c1915; padding: 1.6rem 1.4rem 1.8rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92rem; line-height: 1.55;
  transform: translate3d(0, calc((1 - var(--k)) * -100%), 0); box-shadow: 0 20px 40px rgba(0,0,0,.4);
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 6px at 8px 100%, transparent 98%, #000) bottom/16px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 6px at 8px 100%, transparent 98%, #000) bottom/16px 8px repeat-x; }
.rc__paper p { margin: 0; display: flex; justify-content: space-between; gap: 1rem; }
.rc__paper p span:last-child { text-align: right; }
.rc__paper .c { justify-content: center; text-align: center; }
.rc__paper hr { border: 0; border-top: 1px dashed #9b917f; margin: .7rem 0; }
.rc__paper .big { font-weight: 700; font-size: 1.05rem; }
.rc__stamp { position: absolute; right: 8%; bottom: 18%; padding: .3rem .8rem; border: 3px solid #c0392b; color: #c0392b; border-radius: 8px; font-family: var(--sc-font-display); font-size: 2.2rem; line-height: 1;
  transform: rotate(-12deg) scale(calc(2.4 - 1.4 * var(--s))); opacity: var(--s); mix-blend-mode: multiply; }
.rc .big-offer { margin: 0 0 1.2rem; }
@media (max-width: 860px) {
  .rc .pin__stage { grid-template-columns: 1fr; align-content: start; padding-top: 5.4rem; gap: 1rem; }
  .rc .big-offer { font-size: clamp(2.8rem, 1rem + 9vw, 4.6rem); margin-bottom: .4rem; }
  .rc .lede { font-size: 1rem; margin-bottom: .6rem; }
  .rc__paper { font-size: .8rem; padding: 1.1rem 1rem 1.3rem; line-height: 1.45; }
  .rc__copy .row { display: none; }
}

/* ---------- About: "Sick" and "Tired" part, the & swallows the screen ---------- */
.am .pin__stage { background: var(--sc-canvas); color: var(--sc-ink); display: grid; place-items: center; }
.am { --k: clamp(0, (var(--p, 1) - .06) / .5, 1); }
.am__words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .12em; font-family: var(--sc-font-display); font-size: clamp(4rem, 1rem + 15vw, 17rem); line-height: 1; letter-spacing: -.04em; pointer-events: none; }
.am__l { transform: translate3d(calc(var(--k) * -70vw), 0, 0); }
.am__r { transform: translate3d(calc(var(--k) * 70vw), 0, 0); }
.am__amp { font-style: italic; color: var(--lemon); -webkit-text-stroke: 2px var(--sc-ink); transform: scale(calc(1 + var(--k) * var(--k) * 26)); opacity: clamp(0, (1 - var(--k)) * 5, 1); }
.am__disk { position: absolute; left: 50%; top: 50%; width: 12vmin; height: 12vmin; margin: -6vmin; border-radius: 50%; background: var(--lemon); z-index: -1; transform: scale(calc(var(--k) * var(--k) * 22)); }
.am__copy { position: relative; z-index: 2; max-width: 54rem; padding: 0 var(--gut) var(--dock); opacity: clamp(0, (var(--p, 1) - .58) * 7, 1); }
.am__copy .lede { color: var(--sc-ink); }
@media (max-width: 720px) { .am__words { flex-direction: column; gap: 0; } .am__l { transform: translate3d(0, calc(var(--k) * -60vh), 0); } .am__r { transform: translate3d(0, calc(var(--k) * 60vh), 0); } }

/* ---------- Estimate: the fridge note slides over and turns into Ashley's list ---------- */
.hn .pin__stage { background: var(--sc-canvas); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; padding: 6rem var(--gut) calc(2rem + var(--dock) + env(safe-area-inset-bottom)); }
.hn { --k: clamp(0, (var(--p, 1) - .1) / .6, 1); }
.hn__note { justify-self: center; width: min(22rem, 78vw); aspect-ratio: 4 / 5; perspective: 1400px; }
.hn__card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: translate3d(calc((1 - var(--k)) * -14vw), calc((1 - var(--k)) * 4vh), 0) rotate(calc((1 - var(--k)) * -7deg)) rotateY(calc(var(--k) * 180deg)); }
.hn__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; padding: 2.2rem 1.6rem 1.6rem; box-shadow: 0 24px 50px rgba(28,25,21,.22); }
.hn__front { background: #fffdf3 repeating-linear-gradient(transparent 0 2.15rem, rgba(70,110,170,.25) 2.15rem calc(2.15rem + 1px)); background-position: 0 3.1rem; }
.hn__front::before { content: ""; position: absolute; top: -12px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #c0392b); box-shadow: 0 4px 8px rgba(0,0,0,.3); }
.hn__front p { font-family: var(--sc-font-display); font-style: italic; font-size: 1.5rem; line-height: 2.15rem; margin: 0; }
.hn__front p:first-child { font-style: normal; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--sc-font-text); font-weight: 600; margin-bottom: .2rem; }
.hn__back { background: var(--lemon); transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: flex-end; }
.hn__back b { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: .95; }
.hn__back p { margin: .8rem 0 0; }
@media (max-width: 860px) { .hn .pin__stage { grid-template-columns: 1fr; align-content: start; padding-top: 5.6rem; gap: 1.2rem; } .hn__note { width: min(16rem, 66vw); } .hn__front p { font-size: 1.25rem; } .hn h1 { font-size: clamp(2.6rem, 1rem + 8vw, 4rem); } }

/* ---- review round 1 (contact sheets) ---- */
.scene h1, .scene .scene__h { font-size: clamp(2.6rem, 1rem + 5.4vw, 6.6rem); }
.am .scene__h { font-size: clamp(3.4rem, 1rem + 9vw, 9rem); }
.mv__pile { left: auto; right: var(--gut); transform: none; bottom: 24%; width: min(44vw, 640px); height: min(40vh, 440px); }
.of .pin__stage { grid-template-rows: auto auto auto; align-content: center; }
.of__card { min-height: clamp(10rem, 24vh, 14rem); gap: 1.2rem; }
.of__card p { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); }
.mo .of__card--photo { min-height: clamp(13rem, 32vh, 20rem); }
.rc__till { width: min(29rem, 88vw); }
.rc__paper { font-size: 1rem; }
@media (max-width: 860px) {
  .mv__pile { right: auto; left: 50%; transform: translateX(-50%); top: 15%; bottom: auto; width: 90vw; height: 30vh; }
  .rc__paper { font-size: .8rem; }
}
.of__card--photo { min-height: 15rem; }

/* Office ending: the last card grows into a full-bleed photo (insets measured from the card in office.astro) */
.of { --t: clamp(0, var(--p, 1) / .66, 1); --k: clamp(0, (var(--p, 1) - .7) / .24, 1); }
.mo .of__track { transform: translate3d(calc(var(--t) * (100vw - 100%)), 0, 0); }
.mo .of__rail i { left: calc(var(--t) * 100%); }
.mo .of__head, .mo .of__rail { opacity: clamp(0, 1 - var(--k) * 2.5, 1); }
.of__full { display: none; }
.mo .of__full { display: block; position: absolute; inset: 0; z-index: 4; opacity: clamp(0, var(--k) * 40, 1);
  clip-path: inset(calc(var(--ct, 0px) * (1 - var(--k))) calc(var(--cr, 0px) * (1 - var(--k))) calc(var(--cb, 0px) * (1 - var(--k))) calc(var(--cl, 0px) * (1 - var(--k))) round calc(18px * (1 - var(--k)))); }
.of__full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--k) * .12)); }
.of__full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,12,9,.78), rgba(15,12,9,.15) 50%, rgba(15,12,9,.35)); opacity: var(--k); }
.of__fullcopy { position: absolute; z-index: 1; left: var(--gut); bottom: calc(clamp(2rem, 7vh, 4.5rem) + var(--dock) + env(safe-area-inset-bottom)); color: var(--night-ink); opacity: clamp(0, (var(--k) - .55) * 4, 1); }
.of__fullcopy .ph__time { margin: 0 0 .3rem; }
.of__full .tag-ill { color: var(--night-ink); opacity: calc(var(--k) * .7); }