/* Drifters & Co. — one green room, lit by tape and film. */

@font-face {
  font-family: 'Rammetto One';
  src: url('./fonts/RammettoOne.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('./fonts/ArchivoVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --ground: #193b29;
  --ground-deep: #0f2a1d;
  --ink: #f3ead8;
  --accent: #bd2f13;
  --font-display: 'Rammetto One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  --font-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --m: 16px;
  --vh: 100vh;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --sprockets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='5' y='7' width='12' height='8' rx='2' fill='%230f2a1d'/%3E%3C/svg%3E");
}
@supports (height: 100lvh) { :root { --vh: 100lvh; } }
@media (min-width: 720px) { :root { --m: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  color: var(--ink);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
html.window-open { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  background: var(--ground);
  color: var(--ink);
}
img, video, svg { display: block; max-width: 100%; }
video { object-fit: cover; background: var(--ground-deep); }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Grain lives on the static green sections only, as a plain background tile; nothing is blended
   over the videos while they play. */
.grainy { background-image: url('./media/grain-soft.png'); background-repeat: repeat; background-size: 256px 256px; }

/* ---------- Scenes: a sticky stage inside a tall section ---------- */
.scene { position: relative; }
.scene > .stage {
  position: sticky; top: 0;
  height: var(--vh);
  overflow: hidden;
}
.js .scene.is-live { height: calc(var(--vh) * (1 + var(--hold))); }

.play-fallback {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border: 0; border-radius: 50%;
  background: var(--ink); color: var(--ground);
  display: grid; place-items: center;
  cursor: pointer;
}
.play-fallback svg { margin-left: 3px; }
.play-fallback[hidden] { display: none; }

/* ---------- Scene A/B: the opening frame ---------- */
.masthead {
  position: absolute; z-index: 3;
  top: max(var(--m), env(safe-area-inset-top));
  left: 0; right: 0;
  display: grid; justify-items: center; gap: 10px;
  color: var(--ground);
  text-align: center;
  pointer-events: none;
}
.js .opening.is-live .masthead {
  position: fixed;
  transform: translateY(calc(var(--hdr, 0) * -160%));
  opacity: calc(1 - var(--hdr, 0));
  will-change: transform, opacity;
}
.wordmark { margin: 0; }
.wordmark img { width: clamp(64px, 17vw, 96px); height: auto; }
.masthead-line {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 5.6vw, 2rem);
  line-height: 1.05; letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 14ch;
}

.opening .valley {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 58%;
  transform: scale(var(--bg-s, 1));
  transform-origin: 50% 60%;
}
.opening .dim {
  position: absolute; inset: 0;
  background: var(--ground-deep);
  opacity: var(--bg-dim, 0);
}
/* Rest composition: one 35mm frame, low right, slightly askew. */
.opening .frame {
  position: absolute;
  right: max(var(--m), env(safe-area-inset-right));
  bottom: calc(9svh + env(safe-area-inset-bottom));
  width: min(70vw, calc(var(--frame-h, 56svh) * 9 / 16));
  aspect-ratio: 9 / 16;
  transform: rotate(-3deg);
  transform-origin: 50% 50%;
  z-index: 2;
}
.opening .frame-clip { position: absolute; inset: 0; background: var(--ink); }
.opening .frame-clip video {
  position: absolute; left: 0; right: 0; top: 7%; height: 86%; width: 100%;
  object-position: 50% 45%;
}
.rail {
  position: absolute; left: 0; right: 0; height: 7%;
  background: var(--ink) var(--sprockets) repeat-x 0 50%;
  background-size: auto 100%;
}
.rail-top { top: 0; }
.rail-bottom { bottom: 0; }
/* Live geometry: the frame is the whole stage, transformed and clipped by the engine. */
.js .opening.is-live .frame {
  inset: 0; width: auto; aspect-ratio: auto;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  will-change: transform;
}
.js .opening.is-live .frame-clip {
  clip-path: inset(var(--ct, 0px) var(--cl, 0px) var(--ct, 0px) var(--cl, 0px));
  background: transparent;
}
.js .opening.is-live .frame-clip video {
  top: 0; height: 100%;
}
.js .opening.is-live .rail {
  left: var(--cl, 0px); right: var(--cl, 0px); height: var(--rail, 0px);
}
.js .opening.is-live .rail-top { top: var(--ct, 0px); transform: translateY(calc(var(--rail-out, 0) * -110%)); }
.js .opening.is-live .rail-bottom { bottom: var(--ct, 0px); transform: translateY(calc(var(--rail-out, 0) * 110%)); }

/* ---------- Scene C: a breath ---------- */
.breath {
  position: relative;
  padding: 16svh var(--m) 12svh;
  background-color: var(--ground);
  overflow: clip;
}
.breath .tagline { width: min(84vw, 560px); height: auto; }
.breath .print {
  width: min(84vw, 560px);
  margin: 8svh auto 0;
  transform: rotate(-2.5deg);
}
.postcard {
  position: relative;
  padding: 4.5% 4.5% 10%;
  background: #e6d7b8 url('./media/grain.png') repeat;
  background-size: 128px 128px;
  clip-path: polygon(0.8% 1.4%, 18% 0.4%, 41% 1.3%, 63% 0.2%, 84% 1.1%, 99.3% 0.6%, 98.9% 22%, 99.7% 47%, 98.8% 71%, 99.4% 98.6%, 78% 99.2%, 55% 98.3%, 33% 99.5%, 12% 98.7%, 0.4% 99.1%, 1.1% 76%, 0.2% 52%, 1% 27%);
}
/* two scuffs and a sun-faded corner: flat shapes in aged-paper tones */
.postcard::before, .postcard::after {
  content: ''; position: absolute; pointer-events: none;
  background: #d8c59c; opacity: .55;
}
.postcard::before { left: -2%; top: 61%; width: 11%; height: 2.2%; transform: rotate(-14deg); }
.postcard::after { right: 3%; bottom: 2.5%; width: 26%; height: 3.5%; background: #f1e6cc; opacity: .7; transform: rotate(2deg); }
.breath .print img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  filter: sepia(.3) saturate(1.12) contrast(.95) brightness(1.03);
}
@media (min-aspect-ratio: 4/5) {
  .opening .frame { --frame-h: 62svh; }
  .breath { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--m); padding-block: 18svh; }
  .breath .tagline { width: min(44vw, 640px); }
  .breath .print { width: min(42vw, 640px); margin: 0 auto; transform: rotate(2deg); }
}
.js .rise { opacity: 0; transform: translateY(24px); }
.js .rise.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .rise.in:nth-child(2) { transition-delay: 90ms; }

/* ---------- Scene D: three tapes ---------- */
.tapes .stage { background: var(--ground-deep); }
.tape-layer {
  position: absolute; inset: 0;
  visibility: hidden;
  transform: translate(var(--x, 0%), var(--y, 0px)) scale(var(--sc, 1));
  clip-path: var(--clip, none);
  opacity: var(--op, 1);
}
.tape-layer.is-on { visibility: visible; }
.tape-layer video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-position: var(--pos, 50% 50%);
}
.tape-layer .dimmer {
  position: absolute; inset: 0;
  background: var(--ground-deep);
  opacity: var(--dim, 0);
}
/* Wide screens: the tape is a tall lit window on the dark ground. */
@media (min-aspect-ratio: 4/5) {
  .tape-layer { left: 0; right: 0; width: calc(var(--vh) * 9 / 16); margin-inline: auto; }
}
/* Rest: the three tapes stacked, each a screen tall. */
.tapes:not(.is-live) .stage { position: static; height: auto; overflow: visible; }
.tapes:not(.is-live) .tape-layer { position: relative; height: var(--vh); visibility: visible; }

/* ---------- Background postcards (Moments and the trailer) ---------- */
.collage {
  position: absolute; inset: 0; z-index: 0;
  overflow: clip;
  pointer-events: none;
  --k: 1;
}
.collage-layer { position: absolute; inset: 0; }
.pc {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(var(--w) * var(--k));
  padding: calc(var(--w) * var(--k) * .045) calc(var(--w) * var(--k) * .045) calc(var(--w) * var(--k) * .1);
  background: #e6d7b8 url('./media/grain.png') repeat;
  background-size: 128px 128px;
  clip-path: polygon(0.8% 1.4%, 18% 0.4%, 41% 1.3%, 63% 0.2%, 84% 1.1%, 99.3% 0.6%, 98.9% 22%, 99.7% 47%, 98.8% 71%, 99.4% 98.6%, 78% 99.2%, 55% 98.3%, 33% 99.5%, 12% 98.7%, 0.4% 99.1%, 1.1% 76%, 0.2% 52%, 1% 27%);
  transform: rotate(var(--r, 0deg));
  opacity: .7;
}
.pc::before, .pc::after {
  content: ''; position: absolute; pointer-events: none;
  background: #d8c59c; opacity: .55;
}
.pc::before { left: -2%; top: 58%; width: 12%; height: 2.4%; transform: rotate(-14deg); }
.pc::after { right: 4%; bottom: 2.5%; width: 28%; height: 3.6%; background: #f1e6cc; opacity: .7; transform: rotate(2deg); }
.pc img { width: 100%; height: auto; display: block; }
@media (min-aspect-ratio: 4/5) { .collage { --k: .55; } }

/* ---------- Scene E: the film roll ---------- */
.reel {
  position: relative;
  padding: 20svh 0 24svh;
  background-color: var(--ground-deep);
  overflow: clip;
  --fh: min(56svh, 520px);
}
.reel-head, .strip { position: relative; z-index: 1; }
.spool {
  position: absolute; left: -27vw; top: 50%;
  width: 54vw; max-width: 420px;
  color: var(--ink);
  transform: translateY(-50%) rotate(var(--spin, 0rad));
  will-change: transform;
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 720px) { .spool { left: -210px; } }
.spool svg { width: 100%; height: auto; }
.reel-head {
  display: flex; align-items: center; gap: 14px;
  padding: 0 max(var(--m), env(safe-area-inset-left));
  margin: 0 0 18px;
  color: var(--ink);
}
.reel-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.5rem);
  line-height: 1; letter-spacing: -.01em;
}
.reel-cue {
  display: block; width: 44px; height: 22px; margin-top: .15em;
  animation: reel-nudge 1.1s ease-in-out infinite;
  transition: opacity .4s var(--ease-out);
}
.reel-cue.is-gone { opacity: 0; animation: none; }
.reel-cue[hidden] { display: none; }
@keyframes reel-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
.strip {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  padding: 10px 0 10px 29vw;
  cursor: grab;
}
@media (min-width: 720px) { .strip { padding-left: 230px; } }
.strip.dragging { cursor: grabbing; }
.strip::-webkit-scrollbar { display: none; }
.film {
  display: flex; align-items: stretch;
  width: max-content;
  margin: 0; padding: 22px 48vw 22px 6px;
  list-style: none;
  background: var(--ink) var(--sprockets) repeat-x 0 0;
  background-size: 22px 22px;
  position: relative;
}
.film::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: var(--sprockets) repeat-x 0 0; background-size: 22px 22px;
}
.fr {
  flex: none;
  padding: 0 5px;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px));
}
.fr button {
  display: block;
  width: calc(var(--fh) * var(--ar, .75)); height: var(--fh);
  padding: 0; border: 0;
  background: var(--ground-deep);
  cursor: pointer;
}
.fr img { width: 100%; height: 100%; object-fit: cover; }
.fr button:active img { opacity: .85; }

/* ---------- Scene F: the closing announcement ---------- */
.closing .stage { background: var(--ground); }
.closing-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
.sheet {
  position: absolute; left: -12%; right: -12%; bottom: -30%; height: 80%;
  background: var(--ground) url('./media/grain-soft.png') repeat;
  background-size: 256px 256px;
  transform: translateY(var(--sy, 0%)) rotate(var(--sr, 0deg));
  transform-origin: 50% 100%;
  will-change: transform;
}
.messages {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  overflow: hidden;
  transform: translateY(var(--sy, 0%));
}
.msg {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  margin: 0;
  padding: 0 max(var(--m), env(safe-area-inset-right)) 0 max(var(--m), env(safe-area-inset-left));
  transform: translateY(var(--my, 0%));
  opacity: var(--mo, 1);
  will-change: transform, opacity;
}
.msg .t { display: block; text-wrap: balance; }
.msg-1 .t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 12.5vw, 7rem);
  line-height: .95; letter-spacing: -.01em;
}
.msg-2 .t {
  font-weight: 760; font-stretch: 112%;
  font-size: clamp(1.6rem, 7.4vw, 4rem);
  line-height: 1.0; letter-spacing: -.025em;
  max-width: 23ch;
}
.msg-3 .t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.6rem, 19vw, 11rem);
  line-height: .9; letter-spacing: -.01em;
}
@media (min-aspect-ratio: 4/5) {
  .closing-photo { object-position: 50% 60%; }
  .msg-1 .t { font-size: clamp(3rem, 8vw, 7rem); }
  .msg-2 .t { font-size: clamp(2rem, 4.4vw, 4rem); max-width: 30ch; }
  .msg-3 .t { font-size: clamp(5rem, 14vw, 12rem); }
}
/* Rest: photograph above, the green half with the three messages stacked. */
.closing:not(.is-live) .stage { position: static; height: auto; overflow: visible; }
.closing:not(.is-live) .closing-photo { position: relative; height: 50svh; }
.closing:not(.is-live) .sheet { display: none; }
.closing:not(.is-live) .messages { position: relative; height: auto; transform: none; padding: 10svh 0 6svh; display: grid; gap: 7svh; }
.closing:not(.is-live) .msg { position: relative; inset: auto; transform: none; opacity: 1; }

/* ---------- The trailer ---------- */
.trailer {
  position: relative;
  padding: 15svh 0 13svh;
  background-color: var(--ground);
  overflow: clip;
}
@media (min-width: 720px) { .trailer { padding-inline: var(--m); } }
.trailer-frame { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.trailer video { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* ---------- Footer ---------- */
.colophon {
  padding: 8svh var(--m) calc(40px + env(safe-area-inset-bottom));
  background-color: var(--ground);
}
.colophon img { width: min(100%, 440px); height: auto; margin: 0 auto; }
.colophon p { margin: 36px 0 0; text-align: center; font-size: 16px; font-weight: 500; }

/* ---------- The photograph window ---------- */
.window {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: transparent; color: var(--ink);
  overscroll-behavior: contain;
}
.window[open] { display: grid; place-items: center; }
.window::backdrop { background: rgb(15 42 29 / .9); }
.window-figure { margin: 0; }
.window img {
  --ar: 1;
  aspect-ratio: var(--ar);
  width: min(94vw, calc(84dvh * var(--ar)));
  height: auto; max-height: 84dvh;
  background: var(--ground-deep);
  object-fit: contain;
}
.window-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
}

/* ---------- Reduced motion: the rest compositions, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel-cue { animation: none; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .spool { transform: translateY(-50%); }
  .fr { transform: none; }
  .js .rise.in { transition: none; }
}