/**
 * chapters.css - Chapter Scenes, Interactive States & Final Letter Styling
 * Every chapter is a distinct visual scene with interactive SVG states
 */

/* =========================================================================
   CHAPTER SECTION CONTAINER (Full-Scene Storybook Pacing)
   ========================================================================= */
.chapter-section {
  min-height: 100vh;
  width: 100%;
  padding: var(--space-3xl) var(--space-md) var(--space-4xl);
  scroll-margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-top: 1px solid rgba(220, 228, 242, 0.06);
}

.chapter-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(65%, 520px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 189, 117, 0.35), transparent);
}

.chapter-section__inner {
  width: 100%;
  max-width: var(--container-scene);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* =========================================================================
   ILLUSTRATED SCENE STAGE & SVG CANVAS
   ========================================================================= */
.chapter-scene-stage {
  width: 100%;
  max-width: 820px;
  border-radius: var(--radius-xl);
  background: rgba(16, 20, 43, 0.75);
  border: 1px solid var(--color-moon-border);
  box-shadow: 0 20px 55px rgba(8, 10, 24, 0.72), inset 0 0 0 1px rgba(245, 238, 223, 0.04);
  overflow: hidden;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.chapter-section.is-scene-activated .chapter-scene-stage {
  border-color: var(--color-gold-border);
  box-shadow: 0 22px 60px rgba(8, 10, 24, 0.8), 0 0 38px rgba(232, 189, 117, 0.14);
}

.chapter-scene-canvas {
  width: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.chapter-scene-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================================
   SCENE INTERACTION CONTROLS BAR
   ========================================================================= */
.scene-interaction-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(25, 29, 58, 0.88);
  border-top: 1px solid rgba(220, 228, 242, 0.1);
  direction: rtl;
}

.scene-interaction-bar--pillars {
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}

.pillar-buttons-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
}

.scene-action-btn,
.pillar-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-full);
  background: rgba(16, 20, 43, 0.9);
  border: 1px solid var(--color-gold-border);
  color: var(--color-soft-ivory);
  font-family: var(--font-arabic);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.scene-action-btn:hover,
.pillar-select-btn:hover {
  background: rgba(232, 189, 117, 0.16);
  border-color: var(--color-warm-gold);
  transform: translateY(-1px);
}

.scene-action-btn.is-active,
.pillar-select-btn.is-active {
  background: rgba(232, 189, 117, 0.22);
  border-color: var(--color-warm-gold);
  color: var(--color-warm-gold);
  box-shadow: 0 0 16px rgba(232, 189, 117, 0.22);
}

.scene-action-btn__spark,
.pillar-select-btn__dot {
  color: var(--color-warm-gold);
  font-size: 0.75rem;
}

.scene-interaction-status {
  font-family: var(--font-arabic);
  font-size: var(--font-size-xs);
  color: var(--color-muted-lavender);
  margin: 0;
  transition: color var(--transition-normal);
}

.chapter-section.is-scene-activated .scene-interaction-status {
  color: var(--color-warm-gold);
}

/* =========================================================================
   EDITORIAL NARRATIVE CARD
   ========================================================================= */
.chapter-narrative-card {
  width: 100%;
  max-width: var(--container-narrative);
  padding: var(--space-2xl) var(--space-2xl);
  scroll-margin-top: 72px;
  background: linear-gradient(180deg, rgba(25, 29, 58, 0.78) 0%, rgba(16, 20, 43, 0.88) 100%);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 42px rgba(8, 10, 24, 0.55);
  position: relative;
}

.chapter-header {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(232, 189, 117, 0.16);
}

.chapter-body {
  width: 100%;
}

/* =========================================================================
   CHAPTER-TO-CHAPTER TRANSITION CUE
   ========================================================================= */
.chapter-transition-cue {
  margin-top: var(--space-sm);
  display: flex;
  justify-content: center;
}

.chapter-next-cue-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: var(--space-xs) var(--space-md);
  color: var(--color-muted-lavender);
  font-family: var(--font-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: all var(--transition-fast);
  direction: ltr;
}

.chapter-next-cue-btn:hover {
  color: var(--color-warm-gold);
  opacity: 1;
  transform: translateY(3px);
}

/* =========================================================================
   CHAPTER 13: FINAL PERSONAL LETTER EXPERIENCE
   ========================================================================= */
.chapter-section--climax {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

.chapter-narrative-card--letter {
  max-width: 760px;
  padding: var(--space-3xl) var(--space-2xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 189, 117, 0.14), transparent 65%),
    linear-gradient(180deg, rgba(25, 29, 58, 0.92) 0%, rgba(16, 20, 43, 0.96) 100%);
  border: 1.5px solid rgba(232, 189, 117, 0.42);
  box-shadow:
    0 24px 70px rgba(6, 8, 20, 0.85),
    0 0 45px rgba(232, 189, 117, 0.12),
    inset 0 0 0 6px rgba(16, 20, 43, 0.75),
    inset 0 0 0 7px rgba(232, 189, 117, 0.18);
}

.final-closing-moment {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.return-top-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gold-border);
  background: rgba(25, 29, 58, 0.75);
  color: var(--color-warm-gold);
  font-family: var(--font-latin);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  direction: ltr;
  transition: all var(--transition-fast);
}

.return-top-btn:hover {
  background: rgba(232, 189, 117, 0.18);
  border-color: var(--color-warm-gold);
  transform: translateY(-2px);
}

/* =========================================================================
   CHAPTER-SPECIFIC SVG INTERACTIVE STATES (Chapters 1 - 13)
   ========================================================================= */

/* Opening Book States */
.opening-light-bloom {
  opacity: 0.45;
  transform-origin: 350px 230px;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.opening-hero.is-book-opening .opening-light-bloom,
.opening-hero.is-book-opened .opening-light-bloom {
  opacity: 1;
  transform: scale(1.18);
}

.storybook-page--left,
.storybook-page--right {
  transform-origin: 0px 0px;
  transition: transform 0.7s ease;
}

.opening-hero.is-book-opening .storybook-page--left {
  transform: rotate(-6deg) scaleX(1.04);
}

.opening-hero.is-book-opening .storybook-page--right {
  transform: rotate(6deg) scaleX(1.04);
}

/* Chapter 1: Awaken Storybook Stars */
.ch1-constellation-arcs {
  opacity: 0.55;
  transition: opacity 0.8s ease, filter 0.8s ease;
}

#chapter-1.is-scene-activated .ch1-constellation-arcs {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(232, 189, 117, 0.65));
}

/* Chapter 2: Star & Orbit Activation */
.ch2-star-node,
.ch2-constellation-line,
.ch2-planet {
  transition: all 0.7s ease;
}

#chapter-2.is-scene-activated .ch2-constellation-line {
  opacity: 0.9;
  stroke: #E8BD75;
}

#chapter-2.is-scene-activated .ch2-star-node {
  fill: #E8BD75;
  filter: drop-shadow(0 0 6px #E8BD75);
}

#chapter-2.is-scene-activated .ch2-planet--1 {
  transform: translate(540px, 115px) scale(1.08);
}

#chapter-2.is-scene-activated .ch2-planet--2 {
  transform: translate(390px, 135px) scale(1.1);
}

/* Chapter 3: The Sun Appears in the Night */
.ch3-golden-rays,
.ch3-sun {
  transition: all 1s var(--ease-celestial);
}

#chapter-3:not(.is-scene-activated) .ch3-golden-rays {
  opacity: 0.35;
}

#chapter-3.is-scene-activated .ch3-golden-rays {
  opacity: 1;
  filter: drop-shadow(0 0 22px rgba(232, 189, 117, 0.5));
}

#chapter-3.is-scene-activated .ch3-sun {
  filter: drop-shadow(0 0 25px rgba(232, 189, 117, 0.65));
}

/* Chapter 4: Three Interactive Pillars */
.ch4-pillar {
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.ch4-pillar.is-highlighted,
.ch4-pillar:hover {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(232, 189, 117, 0.45));
}

.ch4-pillar.is-highlighted .pillar-ring {
  stroke-width: 2.6;
  stroke: #E8BD75;
}

/* Chapter 5: Crossing the Celestial Bridge */
.ch5-moon-traveler,
.ch5-butterfly-guide,
.ch5-bridge-glow-path,
.bridge-stone {
  transition: all 0.9s var(--ease-celestial);
}

#chapter-5:not(.is-scene-activated) .ch5-bridge-glow-path {
  opacity: 0.2;
}

#chapter-5.is-scene-activated .ch5-bridge-glow-path {
  opacity: 0.95;
  filter: drop-shadow(0 0 8px #E8BD75);
}

#chapter-5.is-scene-activated .ch5-moon-traveler {
  transform: translate(115px, -26px);
}

#chapter-5.is-scene-activated .ch5-butterfly-guide {
  transform: translate(95px, -12px);
}

#chapter-5.is-scene-activated .bridge-stone {
  fill: #E8BD75;
  filter: drop-shadow(0 0 6px #E8BD75);
}

/* Chapter 6: The First Ray of Light */
.ch6-outgoing-ray,
.ch6-returning-ray,
.ch6-ray-spark {
  transition: all 0.85s ease;
}

#chapter-6:not(.is-scene-activated) .ch6-outgoing-ray {
  opacity: 0.18;
  stroke-dasharray: 6 10;
}

#chapter-6:not(.is-scene-activated) .ch6-returning-ray,
#chapter-6:not(.is-scene-activated) .ch6-ray-spark {
  opacity: 0;
}

#chapter-6.is-scene-activated .ch6-outgoing-ray {
  opacity: 1;
  filter: drop-shadow(0 0 10px #F5EEDF);
}

#chapter-6.is-scene-activated .ch6-returning-ray {
  opacity: 0.95;
  filter: drop-shadow(0 0 10px #E8BD75);
}

#chapter-6.is-scene-activated .ch6-ray-spark {
  opacity: 1;
}

/* Chapter 7: Constellation Weaving */
.ch7-line,
.ch7-star-node {
  transition: all 0.7s ease;
}

#chapter-7:not(.is-scene-activated) .ch7-line {
  opacity: 0.25;
}

#chapter-7.is-scene-activated .ch7-line {
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(232, 189, 117, 0.55));
}

#chapter-7.is-scene-activated .ch7-star-node {
  fill: #E8BD75;
  filter: drop-shadow(0 0 8px #E8BD75);
}

/* Chapter 8: Heartfelt Confession & Waiting */
.ch8-confession-light,
.ch8-waiting-ripples {
  transition: all 0.9s ease;
}

#chapter-8.is-scene-activated .ch8-confession-light {
  transform: translateX(48px);
  filter: drop-shadow(0 0 14px rgba(232, 189, 117, 0.7));
}

#chapter-8.is-scene-activated .ch8-waiting-ripples {
  opacity: 1;
  transform: translate(438px, 220px) scale(1.12);
}

/* Chapter 9: Joyful Illumination */
.ch9-joy-waves,
.ch9-star-canopy {
  transition: all 0.85s ease;
}

#chapter-9:not(.is-scene-activated) .ch9-star-canopy {
  opacity: 0.45;
}

#chapter-9.is-scene-activated .ch9-star-canopy {
  opacity: 1;
  filter: drop-shadow(0 0 10px #E8BD75);
}

#chapter-9.is-scene-activated .ch9-joy-waves {
  filter: drop-shadow(0 0 20px rgba(232, 189, 117, 0.55));
}

/* Chapter 10: Parting the Silent Clouds */
.ch10-cloud,
.ch10-connection-thread {
  transition: all 0.95s var(--ease-celestial);
}

#chapter-10.is-scene-activated .ch10-cloud--left {
  transform: translateX(-115px);
  opacity: 0.22;
}

#chapter-10.is-scene-activated .ch10-cloud--right {
  transform: translateX(115px);
  opacity: 0.22;
}

#chapter-10.is-scene-activated .ch10-connection-thread {
  stroke-dasharray: none;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 10px #E8BD75);
}

/* Chapter 11: Mutual Reunion on the Bridge */
.ch11-moon-mover,
.ch11-sun-mover,
.ch11-reunion-glow {
  transition: all 1s var(--ease-celestial);
}

#chapter-11.is-scene-activated .ch11-moon-mover {
  transform: translateX(68px);
}

#chapter-11.is-scene-activated .ch11-sun-mover {
  transform: translateX(-68px);
}

#chapter-11.is-scene-activated .ch11-reunion-glow {
  filter: drop-shadow(0 0 26px rgba(232, 189, 117, 0.6));
}

/* Chapter 12: Shared Horizon Reflections */
.ch12-reflections {
  transition: all 0.8s ease;
}

#chapter-12.is-scene-activated .ch12-reflections {
  opacity: 1;
  filter: drop-shadow(0 0 10px #E8BD75);
}

/* Chapter 13: Sacred Promise Halo */
.ch13-sacred-halo {
  transition: all 0.9s ease;
}

#chapter-13.is-scene-activated .ch13-sacred-halo {
  filter: drop-shadow(0 0 24px rgba(232, 189, 117, 0.65));
}