/* ================================================================
   Homepage film: a scroll-directed, cinematic homepage.

   Without JS (or with reduced motion) every scene renders as a
   normal stacked section. The `.cinema` class on <html> pins each
   scene's stage and lets story.js drive it with:
     --p   scene progress, 0 → 1
     --lp  local progress for elements with data-range
     .is-on / .is-past on elements with data-beat
   ================================================================ */

/* ================================================================
   Player bar
   ================================================================ */

.bar {
  font:
    600 0.72rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--bar);
  padding: 0 var(--pad);
  background: var(--black);
}

.speed {
  font:
    600 0.72rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex: none;
  min-width: 3.4rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgb(248 229 234 / 35%);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  transition:
    color 0.3s,
    border-color 0.3s;
}

.speed:hover {
  color: var(--acid);
  border-color: var(--acid);
}

.play {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid rgb(248 229 234 / 35%);
  border-radius: 50%;
  transition: border-color 0.3s;
}

.play:hover {
  border-color: var(--acid);
}

.play-icon {
  width: 10px;
  height: 12px;
  margin-left: 2px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.is-playing .play-icon {
  margin-left: 0;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.timecode,
.runtime {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

.progress {
  position: relative;
  flex: 1;
  height: 32px;
  cursor: var(--cursor-pointer);
  touch-action: none;
}

.progress::before,
.progress-fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgb(248 229 234 / 16%);
  transition: height 0.2s, margin 0.2s;
}

.progress-fill {
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: none;
}

.progress:hover::before,
.progress:hover .progress-fill {
  height: 4px;
  margin-top: -2px;
}

.progress-chapters a {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  margin-left: -12px;
}

.progress-chapters a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid var(--dim);
  border-radius: 50%;
  background: var(--black);
  transition:
    transform 0.25s var(--ease),
    background 0.25s,
    border-color 0.25s;
}

.progress-chapters a.is-reached::before {
  border-color: var(--crimson);
  background: var(--crimson);
}

.progress-chapters a:hover::before,
.progress-chapters a:focus-visible::before {
  transform: scale(1.5);
  border-color: var(--paper);
}

.progress-chapters span {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  padding: 0.55rem 0.75rem;
  background: var(--paper);
  border-radius: 4px;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.25s,
    transform 0.25s var(--ease);
}

.progress-chapters a:hover span,
.progress-chapters a:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.progress-chapters a:first-child span {
  left: 0;
  transform: translate(-12px, 6px);
}

.progress-chapters a:first-child:hover span,
.progress-chapters a:first-child:focus-visible span {
  transform: translate(-12px, 0);
}

.progress-chapters a:last-child span {
  left: auto;
  right: 0;
  transform: translate(12px, 6px);
}

.progress-chapters a:last-child:hover span,
.progress-chapters a:last-child:focus-visible span {
  transform: translate(12px, 0);
}

/* ================================================================
   Scene system
   ================================================================ */

.scene {
  position: relative;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  gap: 4rem;
  min-height: 100svh;
  padding: calc(var(--bar) + 3rem) var(--pad);
  overflow: hidden;
}

.cinema .scene {
  height: var(--len);
}

.cinema .stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  gap: 0;
}

.cinema .beat {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(32px);
  transition:
    opacity 0.9s var(--ease),
    transform var(--slow) var(--ease),
    visibility 0s 0.9s;
}

.cinema .beat.is-past {
  transform: translateY(-32px);
}

.cinema .beat.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s;
}

.chapter-card {
  position: relative;
  z-index: 2;
  text-align: center;
}

.chapter-card .kicker {
  margin-bottom: 1.5rem;
}

/* ================================================================
   Opening
   ================================================================ */

.scene-opening .stage {
  background: radial-gradient(ellipse at 50% 60%, #221a26 0%, var(--black) 70%);
}

.opening-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  pointer-events: none;
}

.cinema .opening-art {
  opacity: calc(0.18 + var(--p) * 0.5);
  transform: scale(calc(1.35 - var(--p) * 0.35)) rotate(calc(var(--p) * -6deg));
  filter: blur(calc((1 - var(--p)) * 3px));
}

.opening-presents {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.opening-sub {
  max-width: 24ch;
  font:
    italic 400 clamp(1.6rem, 3.6vw, 2.8rem) / 1.1 "Instrument Serif",
    serif;
}

.begin {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding: 0.95rem 1.4rem 0.95rem 1.6rem;
  border: 1px solid rgb(248 229 234 / 40%);
  border-radius: 999px;
  font:
    700 0.8rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition:
    background 0.3s,
    color 0.3s;
}

.begin b {
  display: inline-block;
  animation: nudge 1.8s var(--ease) infinite;
}

.begin:hover {
  background: var(--paper);
  color: var(--ink);
}

@keyframes nudge {
  50% { transform: translateY(4px); }
}

.opening-title {
  position: relative;
  text-align: center;
}

.opening-title .kicker {
  margin-bottom: 2rem;
}

.opening-title h1 {
  font-size: clamp(3.4rem, 12vw, 11rem);
}

.opening-title h1 span {
  display: block;
}

.opening-title h1 em {
  letter-spacing: -0.03em;
}

.cinema .opening-title h1 span {
  clip-path: inset(0 0 100% 0);
  transform: translateY(40%);
  transition:
    clip-path 1.2s var(--ease),
    transform 1.2s var(--ease);
}

.cinema .opening-title.is-on h1 span {
  clip-path: inset(-10% -5% -20% -5%);
  transform: none;
}

.cinema .opening-title.is-on h1 span:nth-child(2) {
  transition-delay: 0.15s;
}

.cinema .opening-title.is-on h1 span:nth-child(3) {
  transition-delay: 0.3s;
}

/* ================================================================
   Chapter I: The tangle
   ================================================================ */

.tangle-line {
  width: 100%;
  max-width: 1200px;
}

.tangle-line path {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tangle-line circle {
  fill: var(--acid);
}

.cinema .tangle-line {
  position: absolute;
  inset: var(--bar) 0 auto;
  height: 62%;
  margin: auto;
  opacity: calc(0.45 + var(--p) * 0.55);
}

.line-copy {
  position: relative;
  max-width: 20ch;
  text-align: center;
  font:
    700 clamp(2rem, 4.8vw, 4.4rem) / 1.05 Archivo,
    sans-serif;
  letter-spacing: -0.035em;
}

.cinema .line-copy {
  align-self: end;
  margin-bottom: 4vh;
}

.line-copy-final {
  display: grid;
  justify-items: center;
  gap: 2rem;
}

.line-copy-final em {
  color: var(--acid);
}

/* ================================================================
   Chapter II: One team (horizontal dolly)
   ================================================================ */

.scene-team .stage {
  background: var(--paper);
  color: var(--ink);
}

.scene-team em {
  color: var(--crimson);
}

.scene-team .kicker {
  color: var(--crimson);
}

.track {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.cinema .scene-team .stage {
  place-items: center start;
}

.cinema .track {
  flex-wrap: nowrap;
  width: max-content;
  transform: translateX(var(--shift, 0));
  will-change: transform;
}

.panel {
  flex: 0 0 min(80vw, 400px);
  min-height: min(58svh, 520px);
}

.panel-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  flex-basis: min(86vw, 680px);
}

.panel-intro h2 {
  font-size: clamp(3rem, 7vw, 6.5rem);
}

.panel-intro p:last-child {
  max-width: 30ch;
  font-size: 1.15rem;
}

.cap {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  overflow: hidden;
}

.cap:nth-child(odd) {
  background: var(--crimson);
}

.cap-num {
  position: absolute;
  right: -0.06em;
  bottom: -0.22em;
  font:
    800 clamp(9rem, 16vw, 14rem) / 1 Archivo,
    sans-serif;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(248 229 234 / 35%);
}

.cap svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cap h3 {
  margin-top: auto;
  font:
    800 clamp(1.8rem, 3vw, 2.6rem) / 1 Archivo,
    sans-serif;
  letter-spacing: -0.035em;
  max-width: 10ch;
}

.cap p {
  position: relative;
  max-width: 28ch;
  margin-top: 1rem;
  color: rgb(248 229 234 / 80%);
}

.cinema .cap {
  transform: rotate(calc((var(--p) - 0.5) * -3deg));
}

.panel-outro {
  display: grid;
  place-items: center;
  flex-basis: min(60vw, 320px);
}

/* ================================================================
   Chapter III: The work (shot-by-shot)
   ================================================================ */

.shot {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.shot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top;
}

.shot-caption {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding-top: 1.5rem;
}

.shot-count {
  font:
    italic 400 1.6rem/1 "Instrument Serif",
    serif;
  color: var(--rose);
}

.shot small {
  font:
    700 0.72rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.shot h3 {
  margin-bottom: 0.75rem;
  font:
    800 clamp(2.2rem, 6vw, 5.5rem) / 0.95 Archivo,
    sans-serif;
  letter-spacing: -0.045em;
}

.cinema .scene-work .stage {
  padding: 0;
}

.cinema .shot {
  position: absolute;
  inset: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s var(--ease);
}

.cinema .shot.is-on,
.cinema .shot.is-past {
  clip-path: inset(0);
  transform: none;
}

.cinema .shot.is-on {
  z-index: 1;
}

.cinema .shot img {
  height: 100%;
  aspect-ratio: auto;
  filter: brightness(0.8);
  transform: scale(calc(1.22 - var(--lp, 0) * 0.22)) translateY(calc(var(--lp, 0) * -2%));
}

.cinema .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 4 6 / 92%) 0%, rgb(5 4 6 / 62%) 42%, rgb(5 4 6 / 10%) 80%),
    linear-gradient(0deg, rgb(5 4 6 / 90%) 0%, transparent 55%),
    linear-gradient(180deg, rgb(5 4 6 / 85%) 0%, transparent 24%);
}

.cinema .shot-caption {
  position: absolute;
  z-index: 1;
  left: var(--pad);
  bottom: calc(var(--bar) + 5vh);
  max-width: min(90vw, 760px);
  padding: 0;
}

.cinema .shot-caption > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.9s var(--ease);
}

.cinema .shot.is-on .shot-caption > * {
  opacity: 1;
  transform: none;
}

.cinema .shot.is-on .shot-caption > :nth-child(2) { transition-delay: 0.45s; }
.cinema .shot.is-on .shot-caption > :nth-child(3) { transition-delay: 0.55s; }
.cinema .shot.is-on .shot-caption > :nth-child(4) { transition-delay: 0.7s; }
.cinema .shot.is-on .shot-caption > :first-child { transition-delay: 0.35s; }

/* ================================================================
   Chapter IV: Mileage
   ================================================================ */

.scene-mileage .stage {
  background: var(--crimson);
}

.scene-mileage em,
.scene-mileage .kicker {
  color: var(--paper);
}

.scene-mileage .chapter-card em {
  color: var(--acid);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100%, 1200px);
  border-top: 1px solid rgb(248 229 234 / 40%);
}

.stats div {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 2rem 1.5rem 0 0;
}

.stats div + div {
  padding-left: 1.5rem;
  border-left: 1px solid rgb(248 229 234 / 40%);
}

.stats strong {
  font:
    800 clamp(4rem, 10vw, 9rem) / 0.9 Archivo,
    sans-serif;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.stats span {
  max-width: 14ch;
  font-size: 1.05rem;
}

/* ================================================================
   Chapter V: Credits and the ask
   ================================================================ */

.scene-finale .stage {
  background: var(--black);
}

.credits {
  width: 100%;
  text-align: center;
}

.credits-roll {
  display: grid;
  gap: 1.25rem;
}

.credits-roll .kicker {
  margin-top: 3rem;
  color: var(--dim);
}

.credits dl {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}

.credits dl div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.credits dt {
  text-align: right;
  color: var(--dim);
}

.credits dd {
  margin: 0;
  text-align: left;
  font-weight: 600;
}

.credits-line {
  font:
    700 clamp(1.4rem, 3vw, 2.2rem) / 1.1 Archivo,
    sans-serif;
  letter-spacing: -0.02em;
}

.credits-line em {
  font-size: 1.4em;
}

.cinema .credits {
  align-self: stretch;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
}

.cinema .credits-roll {
  transform: translateY(calc(100svh - var(--lp, 0) * (100svh + 100%)));
}

.finale-card {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  text-align: center;
}

.finale-card h2 {
  font-size: clamp(3.4rem, 11vw, 10rem);
}

.finale-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.1rem 1.4rem 1.1rem 1.8rem;
  background: var(--crimson);
  border-radius: 999px;
  font:
    700 0.9rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 0.3s,
    color 0.3s;
}

.finale-cta:hover {
  background: var(--acid);
  color: var(--ink);
}

.finale-links {
  display: flex;
  gap: 1.75rem;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--dim);
}

.finale-links a:hover {
  color: var(--paper);
}

.finale-legal {
  font-size: 0.8rem;
  color: var(--dim);
}

/* ================================================================
   Small screens
   ================================================================ */

@media (max-width: 860px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .stats div:nth-child(n + 3) {
    padding-top: 2.5rem;
  }

  .credits dl div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .credits dt,
  .credits dd {
    text-align: center;
  }

  .cinema .shot-caption {
    right: var(--pad);
  }

  .runtime,
  .timecode {
    display: none;
  }

  .progress-chapters a {
    width: 16px;
    margin-left: -8px;
  }

  .tangle-line path {
    stroke-width: 7;
  }

  .tangle-line circle {
    r: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain,
  .begin b {
    animation: none;
  }

  .bar {
    transition: none;
  }
}