/* ============================================================
   OUR STORY — stage, cinematic layers, intro, timeline,
   text overlay, controls, ending, responsive.
   ============================================================ */

:root {
  --bg: #0a0908;
  --gold: #d9bd83;
  --gold-soft: #e7d3a6;
  --text: #efe9df;
  --text-dim: rgba(239,233,223,.62);
  --serif: "Cormorant Garamond", Georgia, serif;
  --ui: "Hanken Grotesk", system-ui, sans-serif;
  --script: "Petit Formal Script", cursive;

  --machine-w: clamp(248px, 78vw, 360px);
  --disc: calc(var(--machine-w) * 0.50);
  --disc-gap: calc(var(--machine-w) * 0.052);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(140% 90% at 50% 30%, #151210 0%, #0a0908 55%, #060504 100%);
  display: grid;
  place-items: center;
  perspective: 1400px;
}
/* warm environment glow so the dark room reads as lit */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(30% 58% at 50% 46%, rgba(217,189,131,.13), transparent 62%),
    radial-gradient(80% 50% at 50% 108%, rgba(217,189,131,.06), transparent 70%);
}

/* ---------- background video / placeholder layer ---------- */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.bg.is-on { opacity: 1; }

.bg-cell {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.bg-cell.is-show { opacity: 1; }

.bg__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease, transform 16s linear;
  transform: scale(1.06);
  z-index: 1;
}
.bg__media.is-ready { opacity: 1; }
/* slow ken-burns drift for placeholders & video */
.bg__media.is-drift { transform: scale(1.16) translate(1.5%, -1.5%); }

/* cinematic placeholder when no video file present */
.bg__ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 25%, var(--ph-a, #3a2614), transparent 60%),
    radial-gradient(120% 90% at 75% 80%, var(--ph-b, #0d0907), #060504 80%);
}
.bg__ph::before { /* film grain */
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: .5; mix-blend-mode: overlay;
  animation: grainShift 1.2s steps(4) infinite;
}
.bg__ph::after { /* drifting light bloom */
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(40% 30% at 50% 40%, rgba(255,235,200,.10), transparent 70%);
  animation: bloom 14s ease-in-out infinite alternate;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 25%{transform:translate(-4%,2%)}
  50%{transform:translate(3%,-3%)} 75%{transform:translate(-2%,3%)} 100%{transform:translate(2%,-2%)}
}
@keyframes bloom {
  from { transform: translate(-6%, -3%) scale(1); opacity:.7; }
  to   { transform: translate(6%, 4%) scale(1.15); opacity:1; }
}
.bg__ph .ph-label {
  position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%);
  font: 400 11px/1.4 var(--ui);
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.12);
  padding: .5em .9em; border-radius: 2px;
  backdrop-filter: blur(2px);
  white-space: nowrap;
}

/* grade: vignette + blur scrim behind text + filmic darken */
.grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
  background:
    radial-gradient(120% 100% at 50% 42%, transparent 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 58%, rgba(0,0,0,.78) 100%);
}
.stage.state-playing .grade { opacity: 1; }
.stage.state-ending .grade { opacity: .6; }

/* persistent fine grain across everything for film texture */
.filmgrain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: .045; mix-blend-mode: overlay;
}

/* ---------- machine wrapper (camera) ---------- */
.machine-wrap {
  position: relative;
  z-index: 3;
  transform-style: preserve-3d;
  transition: transform 1.8s cubic-bezier(.22,1,.36,1), filter 1.4s ease, opacity 1.6s ease;
  will-change: transform;
}
.machine-fit { transform-origin: top left; }
.stage.state-intro  .machine-wrap {
  transform: translateY(0) scale(.97);
  opacity: .72;
  filter: blur(.4px) drop-shadow(0 30px 70px rgba(0,0,0,.75));
}
.stage.state-browse .machine-wrap { transform: translateY(0) scale(1); }
/* camera zoom toward the machine while a chapter plays */
.stage.state-playing .machine-wrap {
  transform: translateY(-1vh) scale(1.05);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.stage.state-ending .machine-wrap { transform: scale(1.02); }

/* gentle idle float */
@media (prefers-reduced-motion: no-preference) {
  .machine { animation: float 9s ease-in-out infinite; }
  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
}

/* reflection of the machine on the floor */
.machine-wrap::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  bottom: -7%;
  height: 9%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(217,189,131,.18), transparent 70%);
  filter: blur(8px);
  opacity: .7;
  pointer-events: none;
}

/* ---------- timeline ---------- */
.timeline {
  position: absolute;
  z-index: 5;
  display: flex;
  opacity: 0;
  transition: opacity 1s ease;
}
.timeline.is-on { opacity: 1; }
/* desktop: vertical, left of machine */
.timeline {
  left: max(4vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: clamp(14px, 2.4vh, 30px);
}
.tl {
  display: flex; align-items: center; gap: 14px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-dim);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.tl__dot {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(239,233,223,.25);
  transition: all .6s ease;
}
.tl__dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(217,189,131,0);
  transition: border-color .6s ease;
}
.tl__label {
  font: 400 13px/1.2 var(--ui);
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  opacity: .55;
  transition: all .6s ease;
}
.tl.is-current .tl__dot {
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(217,189,131,.7);
}
.tl.is-current .tl__dot::after { border-color: rgba(217,189,131,.5); }
.tl.is-current .tl__label { color: var(--gold-soft); opacity: 1; letter-spacing: .2em; }
.tl.is-done .tl__dot { background: rgba(217,189,131,.55); }
@media (hover: hover) {
  .tl:hover .tl__label { opacity: .9; color: var(--text); }
  .tl:hover .tl__dot { background: var(--gold-soft); }
}
.stage.state-ending .tl__dot { background: var(--gold); box-shadow: 0 0 10px 1px rgba(217,189,131,.6); }
.stage.state-ending .tl__label { color: var(--gold-soft); opacity: .9; }

/* ---------- intro ---------- */
.intro {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(40px, 9vh, 110px) 24px;
  pointer-events: none;
  background: radial-gradient(115% 70% at 50% 48%, rgba(6,5,4,.82), rgba(6,5,4,.34) 52%, rgba(6,5,4,0) 76%);
}
.intro.is-hidden { opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.intro__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 8.5vw, 84px);
  line-height: 1.04;
  letter-spacing: .01em;
  white-space: nowrap;
  margin: 0;
  color: var(--text);
  text-shadow: 0 2px 40px rgba(0,0,0,.85);
}
.intro__title em {
  font-style: italic;
  color: var(--gold-soft);
}
.intro__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 3.6vw, 24px);
  letter-spacing: .02em;
  color: var(--text-dim);
  margin: clamp(22px, 4vh, 40px) 0 0;
  max-width: 22ch;
}
.intro__rule {
  width: 0; height: 1px; margin: clamp(20px,4vh,40px) auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 1.4s ease 1.4s;
}
.intro.show-rule .intro__rule { width: min(220px, 50vw); }

/* buttons */
.btn {
  pointer-events: auto;
  font: 500 13px/1 var(--ui);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,189,131,.45);
  padding: 1.15em 2.1em;
  border-radius: 2px;
  cursor: pointer;
  transition: all .5s cubic-bezier(.22,1,.36,1);
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}
.btn:hover { border-color: var(--gold); color: var(--gold-soft); box-shadow: 0 0 26px -6px rgba(217,189,131,.6); }
.btn:hover::after { transform: translateX(120%); }
.btn--ghost { border-color: rgba(255,255,255,.22); }
.btn--ghost:hover { border-color: rgba(255,255,255,.5); color: #fff; box-shadow: none; }

.intro__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 11vh, 120px);
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  transition: opacity 1s ease 1.6s, transform 1s ease 1.6s;
}
.intro.show-cta .intro__cta { opacity: 1; transform: translateX(-50%); }

/* ---------- chapter text overlay ---------- */
.overlay {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  /* desktop: right column */
  right: max(5vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(40ch, 38vw);
  text-align: left;
}
.overlay.is-on { opacity: 1; }
.overlay__kicker {
  display: flex; align-items: center; gap: .8em;
  font: 400 12px/1 var(--ui);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9em;
}
.overlay__kicker .ln { width: 34px; height: 1px; background: var(--gold); opacity: .6; }
.overlay__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.overlay__date {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 2.6vw, 22px);
  color: var(--gold-soft);
  margin: .45em 0 0;
}
.overlay__script {
  font-family: var(--script);
  font-size: clamp(34px, 6.5vw, 58px);
  color: var(--gold-soft);
  line-height: 1.05;
  margin: .1em 0 0;
}
.overlay__body {
  font-family: var(--serif);
  font-size: clamp(18px, 2.8vw, 24px);
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  margin: 1.1em 0 0;
  text-wrap: pretty;
}
/* staggered reveal helpers */
.reveal { opacity: 0; transform: translateY(18px); }
.overlay.is-on .reveal { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.overlay.is-on .reveal.d1 { transition-delay: .15s; }
.overlay.is-on .reveal.d2 { transition-delay: .35s; }
.overlay.is-on .reveal.d3 { transition-delay: .55s; }
.overlay.is-on .reveal.d4 { transition-delay: .8s; }

/* ---------- controls ---------- */
.controls {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 1s ease;
}
.controls.is-on { opacity: 1; }
/* while hidden the bar must not intercept taps (its buttons opt into
   pointer-events, so disable them explicitly — this was catching the
   intro's Begin button on phones where the two overlap) */
.controls:not(.is-on),
.controls:not(.is-on) .btn,
.controls:not(.is-on) .icon-btn { pointer-events: none; }

/* the manual browse / prev-play-next clusters are retired — the story is
   auto-played and chapters are revisited by tapping the machine. Only the
   mute + "see the end" buttons remain in the bar. */
.ctl-browse, .ctl-play { display: none; }

.icon-btn {
  pointer-events: auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(10,9,8,.5);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all .4s ease;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold-soft); }
.icon-btn svg { width: 18px; height: 18px; }

.nav {
  position: absolute; z-index: 9;
  top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity .8s ease;
}
.nav.is-on { opacity: 1; }
.nav--prev { left: max(2vw, 14px); }
.nav--next { right: max(2vw, 14px); }
.nav .icon-btn { width: 52px; height: 52px; }

/* progress ring inside play button during auto mode */
.play-wrap { position: relative; }
.play-ring { position: absolute; inset: -4px; transform: rotate(-90deg); pointer-events: none; }
.play-ring circle { fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
  transition: stroke-dashoffset .3s linear; opacity:.85; }

/* ---------- ending caption ---------- */
.ending {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: clamp(60px, 16vh, 160px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.ending.is-on { opacity: 1; transition: opacity 1.6s ease; }
.ending__line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 6vw, 56px);
  color: var(--text);
  margin: 0;
  opacity: 0; transform: translateY(16px);
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.ending.show-line .ending__line { opacity: 1; transform: none; transition: opacity 1.6s ease, transform 1.6s ease; }
.ending__heart {
  font-size: clamp(30px, 7vw, 60px);
  color: var(--gold);
  margin-top: .5em;
  opacity: 0; transform: scale(.6);
  text-shadow: 0 0 30px rgba(217,189,131,.7);
}
.ending.show-heart .ending__heart {
  opacity: 1; transform: scale(1);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.34,1.4,.4,1);
  animation: heartbeat 2.6s ease-in-out 1.6s infinite;
}
@keyframes heartbeat { 0%,100%{transform:scale(1)} 12%{transform:scale(1.14)} 24%{transform:scale(1)} 36%{transform:scale(1.08)} 48%{transform:scale(1)} }

/* ---------- save the date (finale) ---------- */
/* the machine glides to the side, clearing space for the card */
.stage.state-savedate .machine-wrap {
  transform: translateX(-27vw) scale(.6);
  opacity: .92;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.stage.state-savedate .grade { opacity: .5; }
.stage.state-savedate .timeline,
.stage.state-savedate .controls { opacity: 0; pointer-events: none; }

.savedate {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 6vh, 80px) 24px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.savedate.is-on { opacity: 1; transition: opacity 1.6s ease; }
.savedate__inner { max-width: 32ch; }
.savedate__kicker {
  display: block;
  font-family: var(--script);
  font-size: clamp(28px, 5.4vw, 46px);
  color: var(--gold-soft);
  line-height: 1;
  opacity: .95;
}
.savedate__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 8vw, 78px);
  line-height: 1.04;
  margin: clamp(10px, 2vh, 20px) 0 0;
  color: #fff;
  text-shadow: 0 2px 34px rgba(0,0,0,.6);
}
.savedate__names em { font-style: italic; color: var(--gold-soft); margin: 0 .08em; }
.savedate__rule {
  width: min(200px, 46vw); height: 1px;
  margin: clamp(18px, 3.4vh, 34px) auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.savedate__date {
  font-family: var(--serif);
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.savedate__loc {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 2.6vw, 22px);
  color: rgba(255,255,255,.82);
  margin: .6em 0 0;
}
.savedate__hint {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: clamp(22px, 4.5vh, 44px) 0 0;
}
/* staggered reveal, mirroring the chapter overlay */
.savedate.is-on .reveal { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1); }
.savedate.is-on .reveal.d1 { transition-delay: .2s; }
.savedate.is-on .reveal.d2 { transition-delay: .45s; }
.savedate.is-on .reveal.d3 { transition-delay: .7s; }
.savedate.is-on .reveal.d4 { transition-delay: .95s; }
.savedate.is-on .reveal.d5 { transition-delay: 1.3s; }

/* the closing line pops into the same cleared space the card will use,
   rather than sitting at the bottom over the machine */
.stage.state-savedate .ending { justify-content: center; padding-bottom: 0; }

/* desktop: machine sits left, card + line centered in the space to its right */
@media (min-width: 720px) {
  .savedate { justify-content: center; padding-left: 28vw; }
  .stage.state-savedate .ending { padding-left: 28vw; }
}

/* ====================================================
   RESPONSIVE — mobile-first device is priority
   ==================================================== */

/* tablet / desktop wider: roomier machine, side timeline + overlay */
@media (min-width: 720px) {
  :root { --machine-w: clamp(320px, 40vw, 420px); }
}
@media (min-width: 1100px) {
  :root { --machine-w: 440px; }
}

/* PHONE: timeline as a dot rail near the bottom, overlay text above it */
@media (max-width: 719px) {
  .timeline {
    left: 0; right: 0; top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: none;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0 14px;
  }
  .tl { gap: 7px; }
  .tl__label,
  .tl.is-current .tl__label { display: none; }   /* dots-only rail on phones */
  .tl { position: relative; }
  .tl__dot { width: 10px; height: 10px; }

  .overlay {
    right: 0; left: 0; top: auto;
    bottom: calc(52px + env(safe-area-inset-bottom));
    transform: none;
    max-width: none;
    padding: 0 26px;
    text-align: center;
  }
  .overlay__kicker { justify-content: center; margin-bottom: .6em; }
  .overlay__kicker .ln { width: 22px; }
  .overlay__date { font-size: 16px; }
  .overlay__script { font-size: clamp(30px, 9vw, 42px); }
  .overlay__body {
    font-size: 16px; line-height: 1.45;
    max-width: 34ch; margin-left: auto; margin-right: auto;
  }

  /* during playback the machine lifts & shrinks so text has room —
     but keeps clear of the top edge */
  .stage.state-playing .machine-wrap { transform: translateY(-16vh) scale(.72); }

  /* finale on phones: machine lifts (with top clearance), card sits below it */
  .stage.state-savedate .machine-wrap { transform: translateY(-22vh) scale(.5); }
  .savedate { align-items: flex-end; padding-bottom: clamp(56px, 14vh, 120px); }
  .stage.state-savedate .ending {
    justify-content: flex-end; padding-left: 0;
    padding-bottom: clamp(56px, 14vh, 120px);
  }

  .nav .icon-btn { width: 46px; height: 46px; }
  /* mute + see-the-end sit in the top-right corner, clear of the bottom
     description and timeline */
  .controls {
    left: auto; bottom: auto;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    transform: none;
    gap: 12px;
  }

  .intro__cta { bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* very short landscape phones */
@media (max-height: 560px) and (max-width: 900px) {
  :root { --machine-w: clamp(180px, 30vh, 240px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .bg__media { transition: opacity 1s ease; }
}