/*
 * Scroll Reading View
 *
 * Continuous-scroll alternative to the one-stanza-at-a-time Classic view.
 * Activated by `body.scroll-view`. The Classic DOM (#stanza-wrapper-classic)
 * is hidden via [hidden]; this file styles the alternate #stanza-feed.
 *
 * Theming reuses the existing token system (var(--cw-*)) so dark + light
 * adapt automatically.
 */

/* When scroll mode is on, hide the Classic three-stanza wrapper and
   the prev/next/auto-advance footer (followers don't need it; leaders
   keep horizontal-swipe + tap-to-jump as their primary affordance). */
body.scroll-view #stanza-wrapper-classic {
  display: none;
}

/* The base app pins html/body/main to overflow:hidden because Classic
   mode uses internal scrolling. Scroll mode needs the page itself
   (specifically <main>) to scroll vertically, so unlock it here. */
body.scroll-view main {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Reserve a bit of breathing room above the footer */
  scroll-padding-block: 18vh;
}

/* The feed itself */
.stanza-feed {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 96px;
  overscroll-behavior-y: contain;
}
.stanza-feed[hidden] { display: none; }

/* Each stanza in the feed. Borrows the typography of .stanza-current
   (rendered by the same renderStanzaRichHtml helper) but lays out as a
   block in a flowing list rather than absolutely positioned. */
.feed-stanza {
  position: relative;
  padding: 28px 22px;
  margin: 0 0 8px;
  border-radius: 14px;
  scroll-margin: 25vh; /* keeps centered stanza away from top edge on scrollIntoView */
  transition:
    background 320ms ease,
    box-shadow 480ms ease,
    color 320ms ease;
  cursor: default;
}

/* Stanza body styles (verses, dandas, section title) inherit from the
   global `.stanza` rules in app.css; we only need to scope them here. */
.feed-stanza .stanza-line {
  text-align: center;
}

/* User can tap a stanza to jump (leader only — the JS gates this).
   Visual hint only on bodies where the tap is meaningful. */
body.scroll-view.leader-mode .feed-stanza {
  cursor: pointer;
}

/* ───────── Leader halo ─────────
   Warm-amber lit card with a soft glow border. Adapts to light/dark
   automatically via tokens. The 3s breath-pulse keeps it feeling alive
   without demanding attention. */
.feed-stanza.is-leader {
  background: radial-gradient(
    ellipse at center,
    var(--cw-gold-glow-strong) 0%,
    var(--cw-gold-glow) 40%,
    transparent 78%
  );
  box-shadow:
    inset 0 0 0 1px var(--cw-gold-border-strong),
    0 0 28px var(--cw-gold-glow);
  color: var(--cw-text);
  animation: feed-leader-breathe 3.2s ease-in-out infinite;
}

@keyframes feed-leader-breathe {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px var(--cw-gold-border-strong),
      0 0 24px var(--cw-gold-glow);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px var(--cw-gold-border-strong),
      0 0 36px var(--cw-gold-glow-strong);
  }
}

/* When the leader's halo arrives at a stanza (just-changed), give it a
   one-shot pulse so the user's eye catches the move. JS toggles this
   class on every leader broadcast. */
.feed-stanza.is-leader.just-arrived {
  animation:
    feed-leader-arrive 0.9s ease-out 1,
    feed-leader-breathe 3.2s ease-in-out infinite 0.9s;
}

@keyframes feed-leader-arrive {
  0% {
    box-shadow:
      inset 0 0 0 1px var(--cw-gold-border-strong),
      0 0 0 0 var(--cw-gold-glow-strong),
      0 0 8px var(--cw-gold-glow);
    transform: scale(0.985);
  }
  60% {
    box-shadow:
      inset 0 0 0 1px var(--cw-gold-border-strong),
      0 0 0 12px transparent,
      0 0 44px var(--cw-gold-glow-strong);
    transform: scale(1.012);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px var(--cw-gold-border-strong),
      0 0 28px var(--cw-gold-glow);
    transform: scale(1);
  }
}

/* Section title styling inside the feed: reuse existing global
   `.section-title` styling from app.css; ensure margin works in feed
   context. */
.feed-stanza .section-title {
  margin-top: -8px;
  margin-bottom: 14px;
}

/* Reduced motion — keep the halo color but stop the breathing. */
@media (prefers-reduced-motion: reduce) {
  .feed-stanza.is-leader,
  .feed-stanza.is-leader.just-arrived {
    animation: none !important;
  }
}

/* Reading-view toggle: highlight the active mode in the bottom sheet.
   Uses the same .bs-theme-btn classes as the Theme row. */
#bs-reading-view-row .bs-theme-btn.active {
  background: var(--cw-gold);
  color: var(--cw-bg-deep);
  border-color: var(--cw-gold);
}

/* ════════════════════════════════════════════════════════════════
   Divergence rail — Diya on a thread
   Appears in the right margin only when an active leader session
   exists AND the follower has wandered. Vertical position of the
   diya = vertical position of the leader's stanza. Tap = glide back.
   ════════════════════════════════════════════════════════════════ */

body.scroll-view main {
  /* Reserve a 28px lane on the right for the rail. */
  padding-right: 28px;
  position: relative;
}

/* The rail must NOT scroll with the feed — it's a viewport-anchored
   indicator. position: fixed pins it relative to the page; we offset
   below the topbar (~88px clear of the 64-72px header) and above the
   footer (~84px clear of the bottom-bar) so the diya never overlaps
   the chrome. JS keeps these offsets in sync via the same constants. */
.scroll-leader-rail {
  position: fixed;
  top: 88px; bottom: 84px;
  right: 6px;
  width: 24px;
  z-index: 50;
  pointer-events: none;
}
.scroll-leader-rail[hidden] { display: none; }

/* Faint always-on thread spanning the rail */
.scroll-leader-thread {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--cw-gold-glow) 12%,
    var(--cw-gold-glow) 88%,
    transparent 100%
  );
  opacity: 0.5;
}

/* Lit segment — drawn between the diya and the visible viewport edge
   when the leader is offscreen. JS sets `top` and `height` inline. */
.scroll-leader-thread-lit {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--cw-saffron) 50%,
    var(--cw-gold-light) 100%
  );
  filter: drop-shadow(0 0 4px var(--cw-gold-glow-strong));
  animation: thread-breath 3.2s ease-in-out infinite;
}
body.scroll-view .scroll-leader-thread-lit.is-flipped {
  background: linear-gradient(
    0deg,
    transparent 0%,
    var(--cw-saffron) 50%,
    var(--cw-gold-light) 100%
  );
}
@keyframes thread-breath {
  0%, 100% { opacity: 0.85; }
  50%     { opacity: 1; }
}

/* The diya — a real button, accessible, tappable.
   `top` is set inline by JS as the absolute-from-rail-top offset of the
   diya's TOP edge (no center-anchor translate, so the diya never bleeds
   above the rail's top boundary into the header). */
.scroll-leader-diya {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 0;
  width: 22px; height: 26px;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  outline-offset: 4px;
  transition: top 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-leader-diya:focus-visible {
  outline: 2px solid var(--cw-gold);
  border-radius: 6px;
}
.scroll-leader-diya .bowl {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #6b4a1c, #2d1c08);
  box-shadow: inset 0 1px 0 rgba(255,210,140,0.4);
}
body.light-theme .scroll-leader-diya .bowl {
  background: linear-gradient(180deg, #8a601f, #4a2f0c);
}
.scroll-leader-diya .flame {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 17px;
  background: radial-gradient(
    ellipse at 50% 70%,
    #fff5d6 0%,
    var(--cw-gold-light) 25%,
    var(--cw-saffron) 55%,
    var(--cw-gold-warm) 75%,
    transparent 92%
  );
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  filter: blur(0.4px);
  transform-origin: 50% 90%;
  animation: flame-flicker 1.4s ease-in-out infinite;
}
.scroll-leader-diya .flame::after {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, var(--cw-gold-glow-strong), transparent 65%);
  pointer-events: none;
}

@keyframes flame-flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1)    rotate(-1deg); }
  25%      { transform: translateX(-52%) scaleY(1.08) rotate( 2deg); }
  50%      { transform: translateX(-48%) scaleY(0.95) rotate(-2deg); }
  75%      { transform: translateX(-51%) scaleY(1.05) rotate( 1deg); }
}

/* Reduced motion: kill the flicker, keep a steady flame */
@media (prefers-reduced-motion: reduce) {
  .scroll-leader-diya .flame,
  .scroll-leader-thread-lit {
    animation: none !important;
  }
}