/* ═══════════════════════════════════════════════
   One Year — in motion
   Kinetic type + masked photography, scrubbed by the
   song. Palette: ink, cream, gold, and a maroon pulled
   from the kurta and saree in the photos.
   ═══════════════════════════════════════════════ */
:root {
  --ink: #12100d;
  --cream: #f1e8d6;
  --gold: #c39b57;
  --maroon: #6e1f2a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

.stage { position: fixed; inset: 0; overflow: hidden; }
.layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  isolation: isolate;   /* keep each scene's stacking self-contained */
}
.ink { background: var(--ink); color: var(--cream); }
.cream { background: var(--cream); color: var(--ink); }
.maroon { background: var(--maroon); color: var(--cream); }
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.abs { position: absolute; }
.fill { position: absolute; inset: 0; }

/* film grain — static, cheap, adds texture */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* masked word reveal: .m clips, .w moves */
.m { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.04em 0.08em; margin-bottom: -0.08em; }
.w, .c { display: inline-block; will-change: transform; }

/* ── type styles ─────────────────────────────── */
.t-serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.t-sans { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.t-label { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.45em; font-size: clamp(0.62rem, 1.2vw, 0.8rem); }
.gold { color: var(--gold); }
.outline { color: transparent !important; -webkit-text-stroke: 1.5px var(--stroke, var(--cream)); }
.huge { font-size: clamp(4.5rem, 19vw, 17rem); line-height: 0.86; }
.big { font-size: clamp(3rem, 11vw, 9rem); line-height: 0.95; }
.mid { font-size: clamp(2rem, 6.6vw, 5.4rem); line-height: 1.04; }
.small { font-size: clamp(1.2rem, 3vw, 2rem); line-height: 1.3; }

/* intro */
.s0-line { width: min(60vw, 560px); height: 1px; background: var(--gold); transform-origin: center; }
.s0-date { font-family: var(--sans); font-weight: 300; letter-spacing: 0.3em; font-size: clamp(1.6rem, 5vw, 3.2rem); margin-bottom: 1.6rem; }
.s0-names { margin-top: 1.6rem; color: var(--gold); }
.iris {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--cream);
}

/* stacked text blocks within one layer */
.block {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
}
.block.left { align-items: flex-start; text-align: left; padding-left: 9vw; }

/* ring of days */
.ring { width: min(78vmin, 640px); height: min(78vmin, 640px); }
.ring line { stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.ring-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* odometer */
.odo-row { display: flex; align-items: baseline; gap: 1.4rem; margin: 0.4rem 0; }
.odo { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1em; line-height: 1; font-family: var(--sans); font-weight: 600; font-size: clamp(3rem, 10vw, 8rem); font-variant-numeric: tabular-nums; }
.odo .col { display: flex; flex-direction: column; }
.odo .col span { display: block; height: 1em; line-height: 1em; }
.odo .sep { width: 0.3em; text-align: center; }
.odo-lab { width: 7.5em; text-align: left; }

/* photo shapes */
.ph { position: absolute; overflow: hidden; background: #000; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.strip { top: 0; bottom: 0; }
.circle { border-radius: 50%; }
.arch { border-radius: 999px 999px 6px 6px; }
.card { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }

.ring-gold {
  position: absolute;
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.marquee { position: absolute; white-space: nowrap; will-change: transform; }

/* verse */
.verse-blob {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(195, 155, 87, 0.28), transparent 65%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.window-box {
  display: inline-block;
  width: 0.9em;
  height: 1.1em;
  margin-left: 0.25em;
  vertical-align: -0.12em;
  border: 2px solid var(--gold);
  background: rgba(195, 155, 87, 0.0);
  box-shadow: 0 0 0 rgba(195, 155, 87, 0);
}
.u-line { display: block; height: 2px; background: var(--gold); transform-origin: left; margin-top: 0.15em; }

/* ganges embers */
.ember { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f0b45a; box-shadow: 0 0 8px #f08a3a; }

/* final heart */
.heart-svg { position: absolute; left: 50%; top: 50%; width: min(70vmin, 560px); height: min(70vmin, 560px); transform: translate(-50%, -50%); overflow: visible; }
.heart-svg path { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; }

/* ── chrome: start, progress, replay ─────────── */
.start {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem;
  background: var(--ink);
  transition: opacity 1s ease, visibility 1s ease;
}
.start.gone { opacity: 0; visibility: hidden; }
.start-title { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--cream); }
.start-title em { color: var(--gold); }
.start-btn {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid var(--gold); background: transparent; color: var(--cream);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.start-btn svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.start-ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); animation: ring 2.6s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.7); opacity: 0; } }
.start-note { font-family: var(--sans); font-weight: 300; font-size: 0.66rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(241, 232, 214, 0.4); }

.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 55; background: rgba(241, 232, 214, 0.06); }
.progress span { display: block; height: 100%; width: 0; background: var(--gold); opacity: 0.6; }

.end-actions {
  position: fixed; left: 50%; bottom: 7vh; z-index: 55; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.6rem;
  opacity: 0; pointer-events: none; transition: opacity 1.4s ease;
}
.end-actions.show { opacity: 1; pointer-events: all; }
.back-link {
  font-family: var(--sans); font-weight: 300; font-size: 0.68rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(241, 232, 214, 0.55); text-decoration: none;
  border-bottom: 1px solid rgba(195, 155, 87, 0.4); padding-bottom: 3px; white-space: nowrap;
}
.back-link:hover { color: var(--cream); }
.start-back { position: absolute; bottom: 7vh; }
.replay {
  padding: 0.6rem 1.4rem; font-family: var(--sans); font-weight: 300; font-size: 0.68rem;
  letter-spacing: 0.35em; text-transform: uppercase; color: rgba(241, 232, 214, 0.6);
  background: transparent; border: 1px solid rgba(195, 155, 87, 0.45); border-radius: 30px;
  cursor: pointer;
}