/* ============ OPENING REEL ============
   Plays once per visit right after the date gate: each photo is dealt in,
   holds for 3s, then sinks into an ordered stack where the older photos
   only show their rim. Ends with an iris that opens onto the hero. */

@property --reel-hole {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
}

html.reel-lock,
html.reel-lock body { overflow: hidden; }

/* Hero waits behind the reel, then plays its own reveal as the iris opens */
body.reel-playing .hero .reveal {
  opacity: 0;
  transform: translateY(44px);
  filter: blur(8px);
}

.reel {
  --reel-step: 13px;         /* how much of each older photo's rim peeks out */
  --reel-depth: 8;           /* max stacked layers under the top photo */
  --reel-w: min(86vw, 520px, calc((100svh - 330px - var(--reel-step) * var(--reel-depth)) * 4 / 3));
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--maroon-paper);
  background:
    radial-gradient(120% 70% at 50% -10%, #7C2B3F 0%, #3E1422 46%, #1B0910 100%);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out-strong);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.reel[hidden] { display: none; }
.reel.is-on { opacity: 1; }
.intro.is-reeling .intro-inner {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.5s var(--ease-out-strong), transform 0.5s var(--ease-out-strong);
}

/* Ambient: a blurred copy of the current photo bleeds its colours into the room */
.reel-ambient {
  position: absolute;
  inset: -12%;
  pointer-events: none;
}
.reel-amb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(46px) saturate(1.35);
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.4s ease, transform 3.6s var(--ease-out-strong);
  will-change: opacity;
}
.reel-amb.is-shown { opacity: 0.5; transform: scale(1); }
.reel-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 45%, transparent 0%, rgba(27, 9, 16, 0.55) 70%, rgba(27, 9, 16, 0.9) 100%),
    linear-gradient(180deg, rgba(27, 9, 16, 0.55) 0%, transparent 22%, transparent 62%, rgba(27, 9, 16, 0.85) 100%);
}
.reel .grain { position: absolute; z-index: 1; opacity: 0.06; }

/* ---- Top bar: brand, skip, story-style progress ---- */
.reel-top {
  position: relative;
  z-index: 4;
  padding: max(env(safe-area-inset-top), 0.9rem) 1.1rem 0;
}
.reel-progress {
  display: flex;
  gap: 5px;
}
.reel-seg {
  flex: 1;
  height: 2.5px;
  border-radius: 99px;
  background: rgba(255, 249, 244, 0.18);
  overflow: hidden;
}
.reel-seg i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rose-soft), var(--maroon-paper));
  transform: scaleX(0);
  transform-origin: left center;
}
.reel-seg.is-done i { transform: scaleX(1); }
.reel-seg.is-active i { animation: reel-fill var(--reel-dur, 3000ms) linear forwards; }
.reel.is-paused .reel-seg.is-active i { animation-play-state: paused; }
@keyframes reel-fill { to { transform: scaleX(1); } }

.reel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.85rem;
}
.reel-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--maroon-paper);
}
.reel-brand svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: var(--rose-soft);
  animation: intro-pulse 1.6s var(--ease-fluid) infinite;
}
.reel-count {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 249, 244, 0.55);
  font-variant-numeric: tabular-nums;
}
.reel-skip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.42rem 0.7rem 0.42rem 0.95rem;
  border-radius: 99px;
  border: 1px solid rgba(255, 249, 244, 0.16);
  background: rgba(255, 249, 244, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--maroon-paper);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.16s var(--ease-out-strong);
}
.reel-skip svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reel-skip:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .reel-skip:hover { background: rgba(255, 249, 244, 0.16); }
}

/* ---- Stage + stack ---- */
.reel-stage {
  position: relative;
  z-index: 3;
  flex: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.reel-ghost {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  font-size: clamp(8rem, 46vw, 19rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(232, 160, 176, 0.3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}
.reel-lift {
  position: relative;
  transition: transform 1.1s var(--ease-in-out-strong), opacity 0.6s var(--ease-out-strong);
}
.reel-deck {
  position: relative;
  width: var(--reel-w);
  aspect-ratio: 4 / 3;
  margin-top: calc(var(--reel-step) * var(--reel-depth));
  transition: transform 0.9s var(--ease-out-strong);
}

.reel-card {
  --d: 0;
  position: absolute;
  inset: 0;
  padding: clamp(5px, 1.4vw, 8px);
  border-radius: clamp(1.1rem, 4.5vw, 1.6rem);
  background: var(--maroon-paper);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 50px 90px -40px rgba(0, 0, 0, 0.75),
    0 22px 50px -24px rgba(217, 108, 138, 0.55);
  transform-origin: 50% 0%;
  opacity: 0;
  transition:
    transform 1s var(--ease-out-strong),
    opacity 0.45s var(--ease-out-strong),
    background-color 0.55s ease,
    border-color 0.55s ease,
    box-shadow 0.55s ease;
  will-change: transform;
  backface-visibility: hidden;
}
/* Older layers turn into solid, ordered rims — rose fading deeper into the dark */
.reel-card.is-under {
  background-color: color-mix(in oklab, #E07896 calc(84% - var(--d) * 8.5%), #22091A);
  border-color: color-mix(in oklab, #FFF3F6 calc(75% - var(--d) * 7.5%), transparent);
  box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, 0.7);
}
/* glassy top edge on each rim */
.reel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.reel-card.is-under::before { opacity: 1; }
.reel-photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(0.8rem, 3.4vw, 1.15rem);
  overflow: hidden;
  background: #2a0e18;
  transition: opacity 0.4s ease 0.25s;
}
.reel-card.is-under .reel-photo { opacity: 0; }
.reel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.16);
  transition: transform 3.6s var(--ease-out-strong);
}
.reel-card.is-landed .reel-photo img { transform: scale(1); }
/* A single glossy sweep as the photo lands */
.reel-photo::after {
  content: '';
  position: absolute;
  inset: -10% -60%;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.34) 50%, transparent 65%);
  transform: translateX(-70%);
  pointer-events: none;
}
.reel-card.is-landed .reel-photo::after {
  transform: translateX(70%);
  transition: transform 1.25s var(--ease-out-strong) 0.15s;
}

/* ---- Caption ---- */
.reel-foot {
  position: relative;
  z-index: 4;
  min-height: 8.6rem;
  padding: 0 1.4rem calc(max(env(safe-area-inset-bottom), 0.9rem) + 0.4rem);
  text-align: center;
}
.reel-caption { transition: opacity 0.4s var(--ease-out-strong); }
.reel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose-soft);
}
.reel-kicker::before,
.reel-kicker::after {
  content: '';
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.reel-line {
  margin-top: 0.45rem;
  font-size: clamp(1.45rem, 6.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.reel-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.reel-w > span { display: inline-block; }
.reel-hint {
  margin-top: 0.9rem;
  font-size: 0.74rem;
  color: rgba(255, 249, 244, 0.45);
  letter-spacing: 0.06em;
  transition: opacity 0.6s ease;
}
.reel.is-tapped .reel-hint { opacity: 0; }

/* ---- Finale ---- */
.reel-finale {
  position: absolute;
  inset: auto 1.4rem calc(max(env(safe-area-inset-bottom), 0.9rem) + 0.2rem);
  text-align: center;
  pointer-events: none;
}
.reel-finale .reel-line { font-size: clamp(1.7rem, 7.6vw, 2.6rem); font-weight: 900; }
.reel-finale .reel-line em { font-style: normal; }
/* clip on the inner word spans: background-clip:text does not reach into inline-blocks */
.reel-finale .reel-line em .reel-w > span {
  background: linear-gradient(120deg, var(--rose-soft), var(--peach));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reel-inf {
  width: 2.6rem;
  height: 2.6rem;
  margin-top: 0.3rem;
  fill: none;
  stroke: var(--rose-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.reel.is-finale .reel-inf {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-in-out-strong) 0.5s;
}
.reel.is-finale .reel-caption { opacity: 0; }
.reel.is-finale .reel-lift { transform: translateY(-7vh) scale(0.88); }

/* ---- Exit: an iris opens from the stack onto the hero ---- */
.intro.is-irising {
  pointer-events: none;
  --reel-hole: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--hole-x, 50%) var(--hole-y, 50%), transparent var(--reel-hole), #000 calc(var(--reel-hole) + 90px));
  mask-image: radial-gradient(circle at var(--hole-x, 50%) var(--hole-y, 50%), transparent var(--reel-hole), #000 calc(var(--reel-hole) + 90px));
  transition: --reel-hole 1.35s var(--ease-in-out-strong);
}
.intro.is-irising.is-open { --reel-hole: 150vmax; }
.reel.is-leaving .reel-lift { opacity: 0; transform: translateY(-7vh) scale(0.76); transition-duration: 0.7s; }
.reel.is-leaving .reel-top,
.reel.is-leaving .reel-foot { opacity: 0; transition: opacity 0.4s ease; }

/* Reduced motion: keep the crossfades and the stack, drop the travel */
@media (prefers-reduced-motion: reduce) {
  .reel-card { transition: opacity 0.5s ease, background-color 0.5s ease, border-color 0.5s ease; }
  .reel-photo img,
  .reel-card.is-landed .reel-photo img { transform: none; transition: none; }
  .reel-photo::after { display: none; }
  .reel-amb { transition: opacity 0.8s ease; transform: none; }
  .reel-deck, .reel-lift { transition: opacity 0.5s ease; }
  .reel.is-finale .reel-lift,
  .reel.is-leaving .reel-lift { transform: none; }
  .reel-brand svg { animation: none; }
}

@media (min-width: 900px) {
  .reel { --reel-step: 15px; }
  .reel-foot { min-height: 9.5rem; }
}