/* =========================================================================
   SECTION ONE  -  THE REEL
   A full-bleed looping mp4 that pins to the viewport while three minimal
   captions cross-fade over it.

   Layout mechanics: .reel__sticky is a normal-flow sticky child; .reel__steps
   is pulled back up over it by exactly one viewport. Section height therefore
   equals the step track (3 x 100dvh), and the video stays pinned for the two
   viewports of scroll in between. Add or remove a .reel__step and the pin
   length follows automatically — no magic numbers.
   ========================================================================= */

.reel {
  position: relative;
  /* The hero is a sheet of the same paper as the rest of the page. The film is
     laid onto it and feathered away at the edges, so there is never a seam
     between hero and document. */
  background: var(--paper);
}

.reel__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.reel__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Lifted (light) or dimmed (dark) until ink type sits on it comfortably. */
  filter: var(--video-filter);
}

/* The inward mask.
   The footage does not sit on ivory — its own corners run mid-grey (#808080 to
   #CCC), so dropped in raw it reads as a hard grey rectangle pasted onto the
   paper. Four layers dissolve it inward instead:
     1    a soft bloom behind the caption, so the centre column does not run
          through the wordmark
     2-3  left/right and top/bottom ramps that carry every edge fully to paper
     4    an elliptical vignette that also closes the four corners, which the
          two ramps alone leave standing
     5    a flat veil that lifts what is left toward the page tone and gives
          the ink type a surface to sit on
   Every stop is a theme token, so dark mode feathers to its own ground with no
   second set of rules. --paper-fade is --paper at zero alpha: fading to the
   bare `transparent` keyword risks a grey midpoint in older interpolation. */
.reel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Bloom first, so it sits on top: the mandap's centre column lands exactly
       behind the wordmark, and the type needs its own clean field. */
    radial-gradient(ellipse 50% 40% at 50% 49%,
      var(--paper-soft) 0%, var(--paper-fade) 82%),
    linear-gradient(90deg,
      var(--paper) 0%, var(--paper-fade) 26%,
      var(--paper-fade) 74%, var(--paper) 100%),
    linear-gradient(180deg,
      var(--paper) 0%, var(--paper-fade) 24%,
      var(--paper-fade) 66%, var(--paper) 100%),
    radial-gradient(ellipse 68% 62% at 50% 46%,
      var(--paper-fade) 42%, var(--paper) 100%),
    linear-gradient(var(--video-veil), var(--video-veil));
}

.reel__stack {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--on-video);
  /* Symmetric, so the lockup lands on the true centre of the viewport rather
     than being nudged down by an unbalanced header allowance. */
  padding: var(--header-h) var(--gutter);
}

/* Every caption occupies the same grid cell; only one is live at a time. */
.cap {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 44ch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition:
    opacity 0.85s var(--ease),
    transform 1.05s var(--ease),
    visibility 0s linear 0.85s;
}
.cap.is-live {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.cap .lockup { font-size: clamp(3.6rem, 9.5vw, 7rem); }
.cap .lockup__sprig { color: rgba(196, 209, 182, 0.95); }

.cap__line {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.cap__line em { font-style: italic; }

.cap__sub {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-video-soft);
  margin-top: 2.4rem;
}
.cap__note {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--on-video-soft);
  max-width: 34ch;
  margin-top: 1.35rem;
}
.cap__cta { margin-top: 2.4rem; }

/* Scroll cue. Retires once the reader has proved they can scroll. */
.reel__cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.75rem, 4.5vh, 2.75rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--on-video-soft);
  transition: opacity 0.6s var(--ease);
}
.reel__cue::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, currentColor, transparent);
}
.reel.is-past .reel__cue { opacity: 0; }

/* Honest failure state, matching the one the image frames use. Quiet enough
   to sit in a corner rather than break the composition. */
.reel__fallback {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(1.75rem, 4.5vh, 2.75rem);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
  display: none;
}
.reel__sticky.is-missing .reel__fallback,
.film__sticky.is-missing .film__fallback { display: block; }

.reel__steps {
  position: relative;
  z-index: 4;
  margin-top: -100dvh;
  pointer-events: none;
}
.reel__step { height: 100dvh; }

/* =========================================================================
   SECTION THREE  -  THE ENTRANCE
   The second scroll-scrubbed film, built to the same recipe as the reel:
   full-bleed, the whole frame visible, every edge dissolved into the paper,
   and the copy centred on top over its own bloom.

   The footage is a forward dolly through a floral arch into a candlelit
   courtyard — an entrance, so forward is the direction of arrival, which is
   what scrolling down gives you for free.

   Where it deliberately differs from the reel: NOTHING IS LAID OVER IT. The
   reel is a backdrop for a logotype, so it is veiled and feathered until it is
   nearly a watermark. This is a flagship decor piece and the point is to see
   it — so no veil, no bloom, and no edge gradient anywhere. It runs full-bleed
   and hard-edged, top and bottom, like a plate in a magazine. The copy stays
   readable on a text shadow, which darkens only behind the glyphs.
   See --film-* in 01-tokens.css.

   No .step children here — nothing needs sequencing, so the scrub length is
   just the section's own height and the sticky pins for the remainder.
   ========================================================================= */

.film {
  position: relative;
  height: 300dvh;
  background: var(--paper);
}

.film__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.film__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--film-filter);
}

/* The same inward mask the reel uses. This footage needs it for the same
   reason: its studio backdrop runs mid-grey (#848487), so left alone it reads
   as a grey rectangle pasted onto the ivory. Layers, topmost first:
     1    a bloom behind the copy, so the type has a clean field
     2-3  left/right and top/bottom ramps carrying every edge fully to paper
     4    an ellipse closing the four corners the ramps leave standing
     5    a flat veil lifting what is left toward the page tone
   Every stop is a theme token, so dark mode feathers to its own ground. */
.film__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Ivory in both themes: this film is dark whichever ground it sits on.
     Legibility comes from a shadow on the glyphs, not a scrim over the film —
     nothing is laid across the picture. */
  color: var(--film-on);
  padding: var(--header-h) var(--gutter);
  text-shadow:
    0 1px 2px rgba(8, 6, 3, 0.55),
    0 2px 18px rgba(8, 6, 3, 0.75),
    0 4px 46px rgba(8, 6, 3, 0.55);
}

.film__line { max-width: 20ch; }

/* The page eyebrow is a deep olive that would vanish on candlelight. Over this
   film it becomes the pale sage of the logo's leaves. */
.film .eyebrow { color: var(--film-accent); }