/* Scroll choreography. JS writes progress (0..1) into custom properties; without JS everything is static and readable.
   --p   hero: viewfinder window → full-bleed frame
   --rp  reel: vertical scroll → horizontal film travel */

/* ---------- hero: through the viewfinder ---------- */
.hero-track { --p: 0; position: relative; height: 230svh; margin-inline: calc(var(--side) * -1) calc(var(--side-r) * -1); }
.no-js .hero-track, .reduced .hero-track { height: auto; }
.hero-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid;
  --ix: 33%; --iy: 13%;
}
.no-js .hero-stage, .reduced .hero-stage { position: relative; height: calc(100svh - var(--header-h)); }
.hero-photo {
  position: absolute; inset: 0; margin: 0;
  clip-path: inset(calc(var(--iy) * (1 - var(--p))) calc(var(--ix) * (1 - var(--p))) round calc(4px * (1 - var(--p))));
  will-change: clip-path;
}
.hero-photo img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 38%;
  transform: scale(calc(1.16 - .16 * var(--p)));
  transform-origin: 50% 35%;
}
.hero-photo::before { /* dims the frame as it fills the screen so the next section reads */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55)); opacity: var(--p);
}
.hero-vf {
  position: absolute; z-index: 2; pointer-events: none; --c: #f4efe6; --l: 26px;
  inset: calc((var(--iy) + 2.2%) * (1 - var(--p)) + 18px * var(--p)) calc((var(--ix) + 1.4%) * (1 - var(--p)) + 18px * var(--p));
  opacity: calc(1 - var(--p) * .6);
}
.hero-stage .af-dot {
  position: absolute; z-index: 2; left: 50%; top: 32%; width: 34px; height: 24px; translate: -50% -50%;
  border: 1.5px solid var(--accent); opacity: calc(1 - var(--p) * 1.6);
  animation: af-blink 1.4s steps(2, jump-none) .5s 3 both;
}
.hero-copy {
  position: absolute; inset: auto var(--side-r) clamp(56px, 9svh, 110px) var(--side); z-index: 3;
  display: grid; gap: 14px; pointer-events: none;
}
.hero-name {
  margin: 0; display: flex; justify-content: space-between; gap: 0 4vw;
  font-family: var(--font-display); font-weight: var(--display-weight); color: #f4efe6;
  font-size: clamp(4.6rem, 17vw, 17rem); line-height: .78; letter-spacing: -.02em;
  mix-blend-mode: difference;
}
.hero-name span:first-child { transform: translateX(calc(-6vw * var(--p))); }
.hero-name span:last-child { font-style: italic; transform: translateX(calc(6vw * var(--p))); }
:root[data-variant="film"] .hero-name { mix-blend-mode: normal; color: var(--ink); font-size: clamp(3.8rem, 13vw, 12rem); }
:root[data-variant="film"] .hero-name span:last-child { font-style: normal; }
:root[data-variant="film"] .hero-photo::before { background: linear-gradient(180deg, transparent 30%, rgba(236, 228, 213, .9)); }
:root[data-variant="film"] .hero-vf { --c: var(--ink); }
.hero-eyebrow { color: #e9e3d8; mix-blend-mode: difference; }
:root[data-variant="film"] .hero-eyebrow { color: var(--muted); mix-blend-mode: normal; }
.hero-readout {
  position: absolute; z-index: 3; top: calc(var(--header-h) + 18px); left: var(--side); right: var(--side-r);
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; color: #d9d3c8; mix-blend-mode: difference;
}
.hero-readout b { font-weight: 500; }
.hero-readout .frame-count { margin-left: auto; order: -1; }
:root[data-variant="film"] .hero-readout { color: var(--muted); mix-blend-mode: normal; }
.hero-stage .scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0; color: #e9e3d8; mix-blend-mode: difference;
  flex-direction: column; opacity: calc(1 - var(--p) * 4);
}
@media (max-width: 760px) {
  .hero-stage { --ix: 9%; --iy: 17%; }
  .hero-name { font-size: clamp(4rem, 23vw, 9rem); flex-direction: column; }
  .hero-name span:last-child { align-self: flex-end; }
  .hero-readout { justify-content: flex-start; }
  .hero-stage .scroll-cue { display: none; }
}
@media (min-width: 761px) and (max-aspect-ratio: 4/3) { .hero-stage { --ix: 24%; } }

/* ---------- intro manifesto: words develop like a print ---------- */
.intro { display: grid; gap: clamp(28px, 4vw, 48px); padding-block: clamp(80px, 14vw, 180px) clamp(56px, 8vw, 100px); }
.manifesto {
  margin: 0; max-width: 22ch; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance;
}
.manifesto .w { opacity: .14; transition: opacity .35s ease; }
.manifesto .w.on { opacity: 1; }
.no-js .manifesto .w, .reduced .manifesto .w { opacity: 1; }
.intro-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.intro .hand-note { justify-self: end; }

/* ---------- selected frames: editorial spread with gentle vertical parallax ---------- */
.selected { padding-block: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); }
.spread { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2.4vw, 36px); row-gap: clamp(48px, 9vw, 140px); align-items: start; }
.sf { position: relative; margin: 0; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
.sf:nth-child(4n + 1) { grid-column: 1 / span 5; }
.sf:nth-child(4n + 2) { grid-column: 7 / span 6; margin-top: clamp(40px, 14vw, 220px); }
.sf:nth-child(4n + 3) { grid-column: 2 / span 6; }
.sf:nth-child(4n + 4) { grid-column: 9 / span 4; }
.sf.is-wide:nth-child(4n + 1) { grid-column: 1 / span 7; }
.sf.is-tall:nth-child(4n + 2) { grid-column: 8 / span 4; }
.sf.is-wide:nth-child(4n + 4) { grid-column: 6 / span 7; }
.reel-open { display: block; width: 100%; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; overflow: hidden; }
.reel-open img { width: 100%; height: auto; }
.sf-cap { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sf-cap .edge { color: var(--edge); }
:root[data-variant="film"] .reel-open { background: var(--film); padding: 8px 8px 22px; }
@media (max-width: 760px) {
  .spread { grid-template-columns: 1fr; row-gap: 44px; }
  .sf:nth-child(n) { grid-column: 1; margin-top: 0; width: 86%; }
  .sf:nth-child(even) { justify-self: end; }
}
.reduced .sf, .no-js .sf { transform: none; }

/* ---------- marquee ---------- */
.marquee { --dir: 1; overflow: hidden; margin-inline: calc(var(--side) * -1) calc(var(--side-r) * -1); padding-block: clamp(22px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; animation-direction: var(--marquee-dir, normal); }
.marquee span { display: inline-block; padding-right: .6em; white-space: nowrap; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: 1; }
.marquee i { font-style: normal; color: var(--accent); font-size: .5em; vertical-align: middle; padding-inline: .3em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- focus pull: frames start soft and snap sharp as they arrive ---------- */
.js .focus img { filter: blur(14px) saturate(.6); transform: scale(1.04); opacity: 0; transition: filter 1.1s var(--ease), transform 1.3s var(--ease), opacity .6s ease; }
.js .focus.in-focus img { filter: none; transform: none; opacity: 1; }
.reduced .focus img { filter: none !important; transform: none !important; opacity: 1 !important; }

/* ---------- AF cursor (fine pointers only) ---------- */
.af-cursor {
  position: fixed; left: 0; top: 0; z-index: 70; width: 92px; height: 66px; pointer-events: none;
  display: grid; place-items: center; opacity: 0; transform: translate3d(-200px, -200px, 0);
  transition: opacity .2s ease, width .25s var(--ease), height .25s var(--ease);
  --c: #f4efe6; --l: 14px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
  mix-blend-mode: difference;
}
.af-cursor span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #f4efe6; }
.af-cursor.on { opacity: 1; }
.af-cursor.locked { width: 78px; height: 56px; --c: var(--accent); }
.has-cursor .shot-open, .has-cursor .reel-open { cursor: none; }
@media (hover: none), (pointer: coarse) { .af-cursor { display: none; } }

/* header turns solid once the hero is gone */
.top { transition: background-color .3s ease, border-color .3s ease; }
.over-hero .top { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.over-hero .top .logo, .over-hero .top .nav-links a, .over-hero .top .seg, .over-hero .top .icon-link, .over-hero .menu-btn { color: #f4efe6; border-color: rgba(244, 239, 230, .35); }
.over-hero .top .seg [aria-current="true"], .over-hero .top .seg [aria-pressed="true"] { background: #f4efe6; color: #141311; }
:root[data-variant="film"].over-hero .top .logo, :root[data-variant="film"].over-hero .top .nav-links a { color: var(--ink); }

.reduced .marquee-track { animation: none; }