/* Hemant & Ila - Chapters 02-03: courtyard -> Ganesh Puja -> Haldi & Suwal Pathai.
 * The Chapter 01 scene stays position:fixed and acts as the pinned frame.
 * Once the house is open, the page gains ordinary document scroll, and
 * chapter02.js maps that scroll to the walk. Values below are driven by
 * custom properties set on #app:
 *   --journey-in  0..1  the walk layer over the arrival frame
 *   --arrival-ui  1..0  the Chapter 01 arrival text and buttons
 *   --ceremony    0..1  each ceremony title (set on its own .ceremony block)
 *   --interior    0..1  each stop's soft ambient fill around the frame on wide screens
 */

/* Document scroll exists only while the house is open. */
html.has-journey { height: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: none; scrollbar-width: none; }
html.has-journey::-webkit-scrollbar { display: none; }
html.has-journey body { height: auto; overflow: visible; }
.journey-track { display: none; width: 1px; pointer-events: none; }
html.has-journey .journey-track { display: block; height: calc(100vh + var(--journey-length, 2.6) * 100vh); }

/* Walk layer: above the opening film's last frame, below all controls. */
.journey-layer { position: absolute; inset: 0; z-index: 4; opacity: var(--journey-in, 0); pointer-events: none; }
.chapter { position: absolute; inset: 0; overflow: hidden; }
.walk-canvas, .walk-video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The walk video decodes underneath; chapter02.js paints its frames into the canvas above it. */
.walk-video { z-index: 0; object-fit: cover; object-position: 55% 50%; }
.walk-canvas { z-index: 1; }

/* Soft interior fill around the 2:3 frame on wide screens, matching the hills fill. */
.ambient-interior { background: center / cover no-repeat; opacity: 0; filter: blur(25px) saturate(.72) brightness(.7); }
[data-state='revealed'] .ambient-interior { opacity: var(--interior, 0); }

/* Arrival text and buttons give way as the guest starts walking. */
.has-journey [data-state='revealed'] .arrival-top,
.has-journey [data-state='revealed'] .arrival-bottom { opacity: var(--arrival-ui, 1); }
.journey-moving .arrival-interface, .journey-moving .step-inside { visibility: hidden; }
/* Room under the invitation button for the scroll cue. */
.arrival-bottom { padding-bottom: calc(max(26px, env(safe-area-inset-bottom, 0px)) + 40px); }

/* Scroll cue. */
.step-inside { position: absolute; z-index: 9; left: 50%; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 44px; padding: 6px 16px 4px; border: 0; background: transparent; color: #fff4df; opacity: var(--arrival-ui, 1); font: 9px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; text-shadow: 0 1px 10px #171c16cc; white-space: nowrap; }
.step-inside span, .step-inside i { opacity: 0; }
[data-state='revealed'] .step-inside span, [data-state='revealed'] .step-inside i { animation: cue-in .9s .3s ease forwards; }
@keyframes cue-in { to { opacity: 1; } }
.step-inside i { position: relative; display: block; width: 1px; height: 18px; overflow: hidden; background: #fff4df40; }
.step-inside i::after { content: ''; position: absolute; left: 0; top: -8px; width: 1px; height: 8px; background: #fff4df; animation: cue-drop 2.2s 2s ease-in-out infinite; }
@keyframes cue-drop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 75%, 100% { transform: translateY(26px); opacity: 0; } }
.step-inside:focus-visible { outline-color: #fff4dc; outline-offset: 2px; }

/* Ceremony title: live text, never baked into the footage. */
.ceremony { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 96px 20px max(38px, calc(env(safe-area-inset-bottom, 0px) + 14px)); text-align: center; color: #fff4df; background: linear-gradient(transparent, #1d191066 34%, #1a160ebd 100%); text-shadow: 0 1px 16px #171c16aa; opacity: var(--ceremony, 0); transform: translateY(calc((1 - var(--ceremony, 0)) * 10px)); }
.ceremony-date { margin: 0; font: 400 11px/1.6 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #f2dcae; }
.ceremony-rule { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 12px auto 13px; color: #e5c592; font-size: 8px; }
.ceremony-rule::before, .ceremony-rule::after { content: ''; width: 46px; height: 1px; background: #e5c59299; }
.ceremony-name { margin: 0; font: 400 clamp(30px, 9vw, 44px)/1.1 var(--serif); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.ceremony-name i { font-style: italic; text-transform: none; letter-spacing: 0; }
.ceremony-name-long { font-size: clamp(27px, 8vw, 38px); line-height: 1.16; }
.ceremony-time { margin: 14px 0 0; font: 400 12px/1.6 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: #f2dcae; }

@media (max-height: 620px) {
  .arrival-bottom { padding-bottom: 46px; }
  .step-inside { bottom: 4px; }
  .ceremony { padding-top: 64px; padding-bottom: 22px; }
  .ceremony-name { font-size: 28px; }
  .ceremony-name-long { font-size: 25px; }
  .ceremony-time { margin-top: 10px; }
}
/* Phone-screen frame on wider screens (see styles.css): keep phone text size. */
@media (min-width: 600px) {
  .ceremony-name { font-size: 35px; }
  .ceremony-name-long { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-inside i::after { display: none; }
  .step-inside i { background: #fff4dfaa; }
}