/* About → Swami ji, v2 experiment — "narrated chapters" treatment.
   Page-specific styles, own file (not appended to css/styles.css) so this
   experiment stays fully isolated from the live about-swamiji.html build —
   per explicit instruction, that page is not touched by this work.

   Hero/closing beats reuse the SHARED .swamiji-beat* classes from
   css/styles.css unmodified (same visual language, no duplication). Only
   the new chapter-video mechanic gets its own classes here. */

.sw2-chapter {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14130f;
}

.sw2-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Letterbox in portrait — the source clips are 1920x1080 (16:9,
   landscape). object-fit:cover works fine on a landscape/desktop panel
   (crops a comfortable amount off the sides), but forced into a portrait
   phone viewport it crops almost all the width away, leaving only a
   zoomed-in sliver with no horizontal context. Switching to
   object-fit:contain whenever the panel itself is portrait-oriented
   shows the full, uncropped frame letterboxed instead — the chapter's
   own near-black background (.sw2-chapter) reads as natural letterbox
   bars rather than empty space, so this looks intentional/cinematic
   rather than broken. Keyed off orientation, not a fixed width
   breakpoint, since it's the panel's own aspect ratio that matters here
   (a rotated tablet in landscape has plenty of width for cover to still
   work well). */
@media (orientation: portrait) {
  .sw2-video {
    object-fit: contain;
  }
}

/* Legibility gradient — same idea as .swamiji-beat-overlay, kept separate
   here since it needs to sit above a <video> instead of an <img>. */
.sw2-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.45) 0%, rgba(20, 14, 8, 0.05) 22%, rgba(20, 14, 8, 0.05) 70%, rgba(20, 14, 8, 0.65) 100%);
  pointer-events: none;
}

.sw2-caption {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 6rem;
  z-index: 2;
  color: #FFFBF3;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
@media (min-width: 768px) {
  .sw2-caption {
    left: 3rem;
    right: auto;
    max-width: 28rem;
  }
}
.sw2-caption-eyebrow {
  font-family: "Noto Sans Gujarati", "Inter", sans-serif;
  color: #FFCD85;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}
@media (min-width: 768px) {
  .sw2-caption-eyebrow {
    font-size: 1rem;
  }
}
.sw2-caption-title {
  font-family: "Literata", "Noto Serif Devanagari", serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .sw2-caption-title {
    font-size: 1.85rem;
  }
}
.sw2-caption-index {
  font-size: 0.75rem;
  opacity: 0.65;
  margin-top: 0.4rem;
}

/* Skip — always present once a chapter is active, so a visitor is never
   actually trapped (per explicit decision: locked playback with an escape
   hatch, not a hard lock). Bottom-LEFT, not bottom-right: the sitewide
   persistent settings control (#settingsControl, css/styles.css) is fixed
   at bottom-right on every page, and its own panel opens upward from
   there on hover/focus — any bottom-right position for Skip either
   overlapped the gear button directly or got covered by that panel
   opening on top of it. Bottom-left has nothing else in it. */
.sw2-skip-btn {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #FFFBF3;
  background: rgba(20, 14, 8, 0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  pointer-events: none;
}
.sw2-skip-btn:hover {
  background: rgba(20, 14, 8, 0.65);
}
.sw2-chapter.is-locked .sw2-skip-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 768px) {
  .sw2-skip-btn {
    left: 2rem;
    bottom: 2rem;
  }
}

/* Play gate — shown ONLY when the browser blocks programmatic autoplay
   with sound (no prior gesture on this document yet). A visitor who
   lands here fresh (not via the loading ritual's own click) needs one
   tap to start chapter 1 with sound; after that single confirmed
   gesture, later chapters autoplay normally — see js/about-swamiji-v2.js
   (audioUnlocked flag). Scroll is deliberately NOT locked while this
   gate is showing, so a blocked-autoplay visitor is never stuck. */
.sw2-playgate {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 14, 8, 0.4);
  cursor: pointer;
}
.sw2-chapter.needs-gesture .sw2-playgate {
  display: flex;
}
.sw2-playgate-btn {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: rgba(255, 251, 243, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}
.sw2-playgate:hover .sw2-playgate-btn {
  transform: scale(1.06);
}
.sw2-playgate-btn svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: #3F3F3F;
  margin-left: 0.2rem; /* optical centering for the play triangle */
}

/* Progress bar — thin, bottom edge, fills with video.currentTime /
   duration. Mostly an affordance that something is actively playing and
   roughly how much is left, not a scrubber (no seeking — this is a
   locked narrative beat, not a player). */
.sw2-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.sw2-progress-fill {
  height: 100%;
  width: 0%;
  background: #FB6900;
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .sw2-skip-btn,
  .sw2-progress-fill {
    transition: none;
  }
}