/* occasion.html page geometry (shared flow layer lives in css/patterns.css).
   This page composes its OWN hero (occ-hero: dark editorial split + the
   run-of-show ticker on the shared .marquee machinery) instead of the
   canvas .sec-hero — page-scoped, flex/grid, nothing canvas-positioned. */

/* ---- hero -------------------------------------------------------- */
/* Window-height stage over a fixed curtain backdrop (2026-07-24 round,
   "curtain" pick): the kiss photo pins to the viewport under a deep even
   black veil, the content centers in the leftover space, and the ticker
   rides the bottom edge. BUILD: swap the backdrop photo per client along
   with the plate photo. */
.occ-hero { position: relative; background: var(--black); color: var(--cream-text); overflow: hidden;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.occ-hero::before { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.76) 34%, rgba(10,10,10,.78) 70%, rgba(10,10,10,.88) 100%),
    url('../images/wedding-hero.jpg') center 24% / cover no-repeat;
  background-attachment: scroll, fixed; }
.occ-hero-wrap { position: relative; z-index: 1; flex: 1; width: 100%;
  max-width: 1200px; margin: 0 auto; padding: 130px 60px 40px;
  display: grid; grid-template-columns: 7fr 5fr; gap: 70px; align-items: center; }
.occ-kicker { margin: 0 0 26px; font-family: var(--font-mont); font-weight: 400;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.occ-h1 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 74px; line-height: 1.06; }
.occ-h1 em { font-family: var(--font-italic); font-style: normal; }
.occ-lede { margin: 26px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 16.5px; line-height: 1.65; letter-spacing: .02em; max-width: 520px; }
.occ-cta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 38px; }
.occ-cta .btn { padding: 15px 26px; }
.occ-btn-solid { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.occ-note { margin: 26px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 14px; opacity: .9; }
.occ-note a { color: inherit; }
.occ-hero-photo { margin: 0; justify-self: end; width: 100%; max-width: 420px; }
.occ-hero-photo img,
.occ-hero-photo video { display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; border: 1px solid rgba(242,239,232,.35); padding: 12px; }
.occ-hero-photo figcaption { margin-top: 14px; font-family: var(--font-italic);
  font-size: 16px; opacity: .75; }

/* run-of-show ticker on the shared .marquee/.marq-track machinery.
   BUILD: keep the ticker stops in step with the timeline walker below. */
.occ-ticker { position: relative; z-index: 1; margin-top: auto; padding: 20px 0;
  background: rgba(7,7,7,.35);
  border-top: 1px solid rgba(242,239,232,.22);
  border-bottom: 1px solid rgba(242,239,232,.22); }
.occ-tk { font-family: var(--font-serif); font-size: 19px; white-space: nowrap; }
.occ-tk em { font-family: var(--font-italic); opacity: .65; margin-right: 10px; }

/* hero load choreography */
/* opacity is .001, NOT 0, and the single character is load-bearing. Chrome
   discards any paint made at opacity:0 and records each element's paint ONCE;
   these fade in on a compositor-driven animation and never repaint on the main
   thread, so at zero every LCP candidate in the first viewport is transparent
   at the one paint Chrome looks at. PageSpeed then returns NO_LCP and NO
   performance score at all. Measured on three live client sites built from this
   kit.   .001 is below one 8-bit alpha step, so it is pixel-identical. */
.occ-hero-copy > *, .occ-hero-photo, .occ-ticker { opacity: .001;
  animation: occ-rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.occ-kicker { animation-delay: .15s; }
.occ-h1 { animation-delay: .3s; }
.occ-lede { animation-delay: .45s; }
.occ-cta { animation-delay: .6s; }
.occ-note { animation-delay: .75s; }
.occ-hero-photo { animation-delay: .5s; }
.occ-ticker { animation-delay: .9s; }
@keyframes occ-rise { from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; } }

/* ---- timeline walker garnish (hour readout + slow drift) ---------- */
.occ-hour { position: absolute; top: 22px; right: 28px; z-index: 1;
  font-family: var(--font-italic); font-size: 64px; color: var(--cream-text);
  /* tighter and darker than the original 0 2px 26px / .55: a 26px blur spreads
     the shadow so thin over a bright photo that the hour readout washed out.
     12px / .95 keeps it legible on any frame the walker lands on. */
  text-shadow: 0 2px 12px rgba(0,0,0,.95); pointer-events: none; }
.gd-media img.is-on,
.gd-media video.is-on { animation: occ-kb 16s ease-out forwards; }
@keyframes occ-kb { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---- the case for the booth: rail + numbered hairline rows -------- */
.occ-case-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 26px 90px;
  align-items: start; }
.occ-case-rail .fl-lede { margin-top: 24px; }
.occ-case { display: grid; grid-template-columns: 90px 1fr; gap: 26px;
  padding: 28px 0; border-top: 1px solid var(--line); }
.occ-case:last-child { border-bottom: 1px solid var(--line); }
.occ-case h3 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 26px; line-height: 1.2; }
.occ-case p { margin: 10px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 15px; line-height: 1.6; }
.occ-case:nth-child(2) { transition-delay: .12s; }
.occ-case:nth-child(3) { transition-delay: .24s; }

/* ---- guest book deep dive: overlapping print stack ---------------- */
.occ-book-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px;
  margin-top: 54px; align-items: center; }
.occ-book-stack { position: relative; padding: 0 40px 56px 0; }
.occ-print { margin: 0; background: var(--cream); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.occ-print-main { padding: 14px 14px 46px; transform: rotate(-2deg); }
.occ-print-main img,
.occ-print-main video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.occ-print-small { position: absolute; right: 0; bottom: 0; width: 46%;
  padding: 10px 10px 32px; transform: rotate(3.5deg); }
.occ-print-small img,
.occ-print-small video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.occ-book-copy p { margin: 18px 0 0; font-family: var(--font-pop);
  font-weight: 300; font-size: 15.5px; line-height: 1.65; }
.occ-book-copy p:first-child { margin-top: 0; }
.occ-book-copy .ct-row { margin-top: 38px; }
.occ-book-copy .ct b { font-size: 48px; }

/* ---- booth cards: hover lift + reveal stagger (page-scoped) ------- */
#booths-that-fit .pcard { transition: opacity .8s ease, transform .8s ease,
  box-shadow .5s ease; }
#booths-that-fit .pcard.is-in:hover { transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(46,42,37,.14); }
#reviews .rev-card:nth-child(2) { transition-delay: .12s; }
#reviews .rev-card:nth-child(3) { transition-delay: .24s; }

/* ---- mobile ------------------------------------------------------- */
@media (max-width: 900px) {
  .occ-hero { min-height: 0; }
  .occ-hero::before { background-attachment: scroll, scroll; }
  .occ-hero-wrap { grid-template-columns: 1fr; gap: 44px; padding: 116px 22px 0; }
  .occ-h1 { font-size: clamp(40px, 11vw, 52px); }
  .occ-cta .btn { flex: 1 1 100%; max-width: 340px; height: 50px; }
  .occ-hero-photo { justify-self: start; max-width: 380px; }
  .occ-ticker { margin-top: 52px; }
  .occ-hour { font-size: 42px; top: 14px; right: 18px; }
  .occ-case-grid { grid-template-columns: 1fr; gap: 8px; }
  .occ-case { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .occ-book-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 36px; }
  .occ-book-stack { padding: 0 30px 44px 0; }
  .occ-book-copy .ct b { font-size: 38px; }
}

/* ---- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .occ-hero-copy > *, .occ-hero-photo, .occ-ticker { opacity: 1; animation: none; }
  .occ-ticker .marq-track { animation: none; }
  .gd-media img.is-on,
  .gd-media video.is-on { animation: none; }
  #booths-that-fit .pcard.is-in:hover { transform: none; }
}

/* her accents on the occasion page's own bands (see style.css for the rule) */
.occ-kicker { color: var(--accent-lift); }
.occ-hour { color: var(--accent-lift); }
.occ-tk em { color: var(--accent-lift); opacity: 1; }