/* ═══════════════════════════════════════════════════════════ */
/* NARRATIVE.CSS — The panel-switch container for S1–S4       */
/* 500vh total scroll. Sticky 100vh viewport. Panels swap.    */
/* ═══════════════════════════════════════════════════════════ */

.narrative-container {
  height: 600vh;          /* 600vh = ~150vh per panel — consistent cinematic heartbeat */
  position: relative;
}

.narrative-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;         /* iOS Safari: dvh excludes browser chrome — prevents clipping behind URL bar */
  overflow: clip;         /* not 'hidden' — clip clips without creating a scroll container, preventing iOS Safari scroll-layer trapping */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each panel sits absolutely in the same space */
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;

  /* Start invisible — narrative.js controls opacity */
  opacity: 0;
  pointer-events: none;

  /* Hardware acceleration for smooth blur transitions */
  will-change: opacity, transform, filter;
}

/* Panel 1 starts visible — it's the opening frame */
#panel-1 {
  opacity: 1;
  pointer-events: auto;
}

/* When a panel becomes active, re-enable interaction */
.panel.is-active {
  pointer-events: auto;
}

/* ── Override section dimensions inside panels ── */
/* Sections 1–4 used to be min-height:100vh standalone. */
/* Inside the sticky they just fill their panel naturally. */
.panel .s1,
.panel .s2,
.panel .s3,
.panel .s4,
.panel .s8,
.panel .s9,
.panel .s1-inner,
.panel .s2-inner,
.panel .s3-inner,
.panel .s4-inner,
.panel .s8-inner,
.panel .s9-inner {
  min-height: unset;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ── "Every visit." needs extra scale room inside panel ── */
#panel-3 .s3-inner {
  max-width: 100%;
}

/* ── Scroll position indicator dots ── */
/* Subtle bottom indicator showing which panel is active */
.narrative-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.narrative-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.25);
  transition: background 0.3s, transform 0.3s;
}

.narrative-dot.active {
  background: rgba(245, 240, 232, 0.8);
  transform: scale(1.5);
}