/* ============================================================
   VERSO — scroll-scrub site design system
   A filmed monograph: inscriptional capitals (Marcellus) carry
   the titles the way lettering is carved into a building; an
   old-style text face (EB Garamond) carries the narration and
   the intertitle cards. Palette is sampled from the footage:
   warm amber highlights, cool slate shadows, one matte ground
   shared with the film. No numbering, no rules, no ornament —
   the held-frame intertitle is the signature.
   ============================================================ */

:root {
  --amber:       #e8c9a6;
  --amber-deep:  #d99b4e;
  --slate:       #2a3138;
  --slate-deep:  #16202e;
  --ink:         #1c242e;
  --ivory:       #f2ede4;
  --ivory-dim:   rgba(242, 237, 228, 0.8);
  --matte:       #0c0f12;

  --display: "Marcellus", "Optima", "Palatino Linotype", "Book Antiqua", serif;
  --text:    "EB Garamond", "Iowan Old Style", "Palatino", Georgia, serif;

  --ease-reveal: cubic-bezier(0.22, 0.6, 0.2, 1);
  --edge: clamp(24px, 6vw, 96px);          /* copy inset from viewport edges */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--matte);
  color: var(--ivory);
  scroll-behavior: smooth;
}

body {
  font-family: var(--text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scroll is locked while the veil is up (class set in markup, removed on lift) */
html.lock, html.lock body { overflow: hidden; height: 100%; }

::selection { background: rgba(217, 155, 78, 0.35); }
:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; }

/* ---------- The film ---------- */

#film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: var(--matte);       /* letterbox matte behind contain-fit frames */
}

/* ---------- Poster fallback (reduced motion / no HEVC) ---------- */

#posters { position: fixed; inset: 0; z-index: 1; display: none; }

html.mode-posters #posters { display: block; }
html.mode-posters #film    { display: none; }

.rm-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;            /* same no-crop rule as the film */
  background: var(--matte);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.rm-poster.active { opacity: 1; }

/* ---------- Cinema frame: vignette + grain ---------- */

/* Soft anamorphic gate: gently heavier top and bottom, a whisper at the
   corners. Sits over the film, under every word. */
#vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.3), rgba(6, 8, 10, 0) 13%, rgba(6, 8, 10, 0) 85%, rgba(6, 8, 10, 0.38)),
    radial-gradient(135% 105% at 50% 50%, rgba(6, 8, 10, 0) 58%, rgba(6, 8, 10, 0.3) 100%);
}

/* Fine print grain over everything but the chrome — title cards included,
   the way a real print carries grain through its intertitles. */
#grain {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 15;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jitter 1.1s steps(1) infinite;
}
@keyframes grain-jitter {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(-2.2%, 1.4%, 0); }
  33%  { transform: translate3d(1.6%, -2.4%, 0); }
  50%  { transform: translate3d(-1.4%, 2.2%, 0); }
  66%  { transform: translate3d(2.4%, 1.2%, 0); }
  83%  { transform: translate3d(-2%, -1.8%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- Chrome ---------- */

#chrome {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  padding: clamp(20px, 3.2vw, 40px);
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 1px 18px rgba(12, 15, 18, 0.4), 0 0 2px rgba(12, 15, 18, 0.2);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.wordmark .sub {
  display: block;
  margin-top: 7px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Over the bright opening sky the chrome flips to slate ink (html.chrome-dark
   is driven from scroll position in js/main.js). */
html.chrome-dark .wordmark {
  color: var(--ink);
  text-shadow: 0 1px 18px rgba(242, 237, 228, 0.45);
}

#hairline {
  position: fixed;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  z-index: 30;
  background: rgba(242, 237, 228, 0.14);
  transition: background 0.5s ease;
}
html.chrome-dark #hairline { background: rgba(28, 36, 46, 0.22); }

#hairline-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--amber), var(--amber-deep));
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

#hint {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 30;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;             /* optically recenters the tracked word */
  text-transform: uppercase;
  color: var(--ivory);
  transition: opacity 0.6s ease, color 0.5s ease;
}
html.chrome-dark #hint { color: var(--ink); }
#hint span {
  display: block;
  animation: hint-breathe 3.2s ease-in-out infinite;
}
@keyframes hint-breathe {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.85; }
}
#hint.gone { opacity: 0; pointer-events: none; }
#hint.gone span { animation-play-state: paused; }

/* ---------- Scenes & copy ---------- */

main { position: relative; z-index: 10; }

.scene { position: relative; min-height: 100svh; }   /* real height set from config */

.copy {
  position: fixed;
  z-index: 10;
  max-width: min(34rem, 86vw);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-reveal), visibility 0s linear 0.7s;
}
.copy.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Children carry the motion so the parent transform stays free for anchoring */
.copy > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--ease-reveal), transform 0.65s var(--ease-reveal);
}
.copy.visible > * { opacity: 1; transform: none; }
.copy.visible > *:nth-child(2) { transition-delay: 0.1s; }
.copy.visible > *:nth-child(3) { transition-delay: 0.2s; }

/* Soft scrims: painted behind the block, never on the video itself */
.copy::before {
  content: "";
  position: absolute;
  inset: -3rem -3.5rem;
  z-index: -1;
  border-radius: 28px;
  pointer-events: none;
}

.copy h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 0.92rem + 1.8vw, 2.4rem);
  line-height: 1.38;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
  text-wrap: balance;
}

.copy .body {
  font-size: clamp(1.04rem, 0.95rem + 0.36vw, 1.2rem);
  line-height: 1.68;
  max-width: 42ch;
  color: var(--ivory-dim);
}

/* Scene 1 — top right, slate ink over the bright sky, faint light halo */
.copy-0 {
  top: clamp(84px, 13vh, 150px);
  right: var(--edge);
  text-align: right;
  color: var(--ink);
}
.copy-0 .body   { color: rgba(28, 36, 46, 0.85); margin-left: auto; }
.copy-0::before {
  inset: -5rem -6rem;
  background: radial-gradient(90% 90% at 65% 22%, rgba(242, 237, 228, 0.24), rgba(242, 237, 228, 0) 55%);
}

/* Scene 2 — lower left, warm white over the dark street, slate scrim */
.copy-1 {
  left: var(--edge);
  bottom: clamp(72px, 14vh, 170px);
}
.copy-1::before {
  background: radial-gradient(130% 130% at 20% 80%, rgba(12, 15, 18, 0.55), rgba(12, 15, 18, 0) 68%);
}

/* Scene 3 — lower left over the seating shadow, faint scrim */
.copy-2 {
  left: var(--edge);
  bottom: clamp(72px, 14vh, 170px);
}
.copy-2::before {
  background: radial-gradient(130% 130% at 20% 80%, rgba(12, 15, 18, 0.38), rgba(12, 15, 18, 0) 66%);
}

/* Scene 4 — left center over dark glass and dusk sky */
.copy-3 {
  left: var(--edge);
  top: 0;
  bottom: 0;
  display: grid;
  align-content: center;
  justify-items: start;
}
.copy-3::before {
  inset: auto -3.5rem;
  top: calc(50% - 14rem);
  height: 28rem;
  background: radial-gradient(120% 120% at 22% 50%, rgba(12, 15, 18, 0.5), rgba(12, 15, 18, 0) 68%);
}

/* ---------- Intertitles ---------- */

/* One card per scene change, centered on the held frame. Opacity and the
   small rise are written per-frame from js/main.js so the card moves 1:1
   with the scrollbar, exactly like the film. */
.interlude {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-content: center;
  padding: 0 var(--edge);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
.interlude p {
  position: relative;
  max-width: 36ch;
  font-family: var(--text);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.22rem, 1rem + 1.5vw, 1.8rem);
  line-height: 1.72;
  letter-spacing: 0.012em;
  color: var(--ivory);
  text-wrap: balance;
}
.interlude p::before {
  content: "";
  position: absolute;
  inset: -5.5rem -7rem;
  z-index: -1;
  border-radius: 48px;
  background: radial-gradient(52% 52% at 50% 50%, rgba(8, 10, 13, 0.5), rgba(8, 10, 13, 0) 68%);
}

/* ---------- CTA ---------- */

.cta {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 0.95rem 1.8rem;
  border: 1px solid rgba(232, 201, 166, 0.55);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory);
  background: rgba(12, 15, 18, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.cta:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--matte);
}

/* ---------- Endcap ---------- */

#endcap {
  position: relative;
  z-index: 20;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 22vh var(--edge) 10vh;
  background: linear-gradient(180deg, rgba(12, 15, 18, 0) 0, var(--matte) 240px);
}

.endcap-anchor { position: absolute; top: 0; }

.endcap-inner { text-align: center; display: grid; justify-items: center; }

.endcap-wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;              /* optically recenters tracked caps */
  text-transform: uppercase;
}
.endcap-tagline {
  margin-top: 1.1rem;
  font-family: var(--text);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  color: var(--amber);
}
.endcap-line {
  margin-top: 3rem;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.endcap-mail {
  margin-top: 1.2rem;
  font-family: var(--text);
  font-size: 1.05rem;
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 237, 228, 0.3);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.endcap-mail:hover { color: var(--amber); border-color: var(--amber); }
.endcap-note {
  margin-top: 4.5rem;
  font-family: var(--text);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(242, 237, 228, 0.42);
}

/* ---------- Loading veil ---------- */

#veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--matte);
  display: grid;
  place-content: center;
  justify-items: center;
  transition: opacity 0.8s ease 0.15s, visibility 0s linear 1s;
}
.veil-wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
}
.veil-tagline {
  margin-top: 1rem;
  font-family: var(--text);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--amber);
  opacity: 0.85;
}
.veil-track {
  width: 150px;
  height: 1px;
  margin-top: 28px;
  background: rgba(242, 237, 228, 0.14);
}
#veil-bar {
  height: 100%;
  background: var(--amber-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s linear;
}
#veil.done { opacity: 0; visibility: hidden; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .copy { transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
  .copy > * {
    transform: none;
    transition: opacity 0.45s ease;
  }
  .copy.visible > * { transition-delay: 0s; }
  .rm-poster { transition: none; }
  #grain { animation: none; }
  #hint span { animation: none; opacity: 0.6; }
}