/* ============================================================
   OUR STORY

   Two zones on one continuous sheet:

     .story__parchment   the warm invitation page — botanicals, the
                         title, the story copy and the timeline
     .story__devotional  the deep blue field beneath it, carrying the
                         Shiva-Parvati drawing, the kolams and Nandi

   Both run the full width of the viewport so there is never a card,
   a margin or a bar at the sides. What is *controlled* is the content:
   a centred column with a real maximum, and type sized with clamp()
   so nothing balloons on a 1920 monitor. Every piece of artwork keeps
   its own proportions — no stretching, no distortion, no cropping.
   ============================================================ */

.story {
  --story-paper: #f8f0dd;
  --story-blue: #154b7d;
  --story-maroon: #6e3323;
  --story-navy: #17406e;
  --story-body: #6b3a2a;

  /* The section itself is always full-bleed; these cap only the CONTENT.
     The reading measure stays narrow because prose needs it to; the
     timeline is allowed much more room so the three arches spread across
     a wide screen instead of huddling in the middle. */
  --story-measure: min(92vw, 68rem);
  --story-slider: min(94vw, 84rem);

  --story-ease: cubic-bezier(0.33, 0, 0.1, 1);
  --story-glide: cubic-bezier(0.45, 0, 0.15, 1);

  /* The same design unit the hero runs on, defined identically, so the two
     sections share one type scale instead of two competing ones. */
  container-type: inline-size;
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--story-paper);
}

/* cqw measures .story, so --u has to live on its children. */
.story__parchment,
.story__devotional {
  --u: min(0.27933cqw, 3px);
}

/* ---- Zone 1 — the parchment page --------------------------------------- */

.story__parchment {
  position: relative;
  background-color: var(--story-paper);
  background-image: url("../images/bg.png");
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
  background-blend-mode: multiply;
  padding: clamp(2.6rem, 7vw, 5.5rem) 0 clamp(2.4rem, 6vw, 5rem);
}

/* Botanicals entering from the upper corners, printed rather than placed:
   they sit behind the type and never reach it. */
.story__leaf {
  position: absolute;
  top: 0;
  z-index: 1;
  width: clamp(88px, 13vw, 200px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* The reference has the branch on the left reading as the mirror image and
   the one on the right in the artwork's own orientation. `scale` is an
   independent property, so it composes with the entrance transform and the
   mirror survives the animation untouched. */
.story__leaf--left {
  left: clamp(-28px, -2vw, -8px);
  scale: -1 1;
}

.story__leaf--right {
  right: clamp(-28px, -2vw, -8px);
}

/* ---- Intro -------------------------------------------------------------- */

.story__intro {
  position: relative;
  z-index: 2;
  width: var(--story-measure);
  margin-inline: auto;
  text-align: center;
}

/* The small gold ornament that opens the section, above the eyebrow. */
.story__crest {
  display: block;
  width: calc(46 * var(--u));
  height: auto;
  margin: 0 auto clamp(0.5rem, 1.3vw, 0.95rem);
}

.story__eyebrow {
  /* Rises just enough on wide screens to stay legible under a 55px
     heading, while holding the hierarchy at roughly 4:1. */
  margin: 0;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 0.9vw, 14px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--story-body);
}

.story__title {
  /* Reaches its full 55px at laptop width (~1280px) and holds there on
     larger desktops, then eases down through tablet to 30px on a phone.
     Line height is unitless so it tracks the size at every step.

     Padding paid back by negative margins, so the layout is unchanged: it
     gives the brush-stroke reveal room, because a mask clips at the border
     box and this script face swings its loops outside its line box. */
  margin: calc(clamp(0.1rem, 0.4vw, 0.3rem) - 0.2em) -0.35em -0.2em;
  padding: 0.2em 0.35em;
  font-family: 'Roaster Brush', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: clamp(30px, 4.3vw, 55px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--story-navy);
}

/* base.css makes every img a block, so this needs the auto margins to
   sit under the title rather than against the left edge. */
.story__rule {
  display: block;
  width: calc(90 * var(--u));
  height: auto;
  margin: clamp(0.2rem, 0.7vw, 0.55rem) auto 0;
}

.story__copy {
  max-width: calc(290 * var(--u));
  margin: clamp(1.1rem, 2.8vw, 2rem) auto 0;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(7 * var(--u));
  line-height: calc(13 * var(--u));
  letter-spacing: 0.01em;
  color: var(--story-body);
  text-wrap: pretty;
}

.story__copy--second {
  margin-top: clamp(0.8rem, 1.8vw, 1.35rem);
}

/* ---- Timeline — three chapters, in order -------------------------------- */

.story__timeline {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: clamp(2rem, 5vw, 3.6rem);
}

/* Where the three arches fit — every desktop and tablet — the track is a
   centred row and nothing scrolls. Where they do not, on narrow phones, the
   same element becomes a native swipe strip. Auto inline margins centre the
   track when it fits and resolve to zero when it overflows, so the first
   chapter is never pushed out of reach on the left. */
.story__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.story__viewport::-webkit-scrollbar {
  display: none;
}

.story__track {
  position: relative;          /* the gold thread is placed against it */
  display: flex;
  width: max-content;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.story__slide {
  flex: 0 0 clamp(240px, 24vw, 380px);
  min-width: 0;
  padding-inline: clamp(0.4rem, 1vw, 0.85rem);
  text-align: center;
}

/* On a phone the strip snaps chapter by chapter, and side padding lets the
   first and last chapters centre too, with their neighbours peeking in. */
@media (max-width: 767px) {
  .story__viewport {
    scroll-snap-type: x mandatory;
  }

  .story__track {
    padding-inline: calc(50vw - 120px);
  }

  .story__slide {
    scroll-snap-align: center;
  }
}

.story__year {
  margin: 0 0 clamp(0.45rem, 1.2vw, 0.85rem);
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(6.8 * var(--u));
  line-height: calc(9 * var(--u));
  letter-spacing: 0.04em;
  color: var(--story-maroon);
}

/* The temple arch keeps the artwork's own 377 : 470 proportions, and stays
   a prominent, elegant size with balanced spacing. */
.story__frame-box {
  position: relative;
  width: 100%;
  max-width: clamp(220px, 22vw, 360px);
  margin-inline: auto;
}

.story__photo-wrap {
  position: absolute;
  top: 14%;
  left: 17%;
  right: 17%;
  bottom: 12%;
  z-index: 1;
  overflow: hidden;
  border-radius: 40% 40% 2px 2px;
  background-color: #f4e8d2;
}

.story__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.story__frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: transform 0.3s var(--story-ease);
}

.story__caption {
  margin: clamp(0.5rem, 1.3vw, 0.95rem) 0 0;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(7.5 * var(--u));
  line-height: calc(11 * var(--u));
  letter-spacing: 0.02em;
  color: var(--story-body);
  text-wrap: balance;
}

/* ---- Zone 2 — the devotional field -------------------------------------- */

.story__devotional {
  position: relative;
  background-color: var(--story-blue);
  padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem);
}

/* The artwork canvas is full width — no measure, no max-width. The pieces
   are pushed out to the paper's edges and sized against the viewport, so a
   wide screen gets a wide composition rather than a small one floating in
   the middle. Each image keeps its own aspect ratio throughout. */
.story__shrine {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "kolam-l deities kolam-r"
    "nandi-l deities nandi-r";
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 2.5rem) clamp(1rem, 3vw, 3rem);
  width: 100%;
  padding-inline: clamp(0.75rem, 4vw, 5rem);
}

.story__deities {
  grid-area: deities;
  width: clamp(190px, 27vw, 580px);
  height: auto;
}

.story__kolam {
  width: clamp(52px, 8vw, 155px);
  height: auto;
}

/* Pinned to the outer edges of the canvas rather than centred in a column,
   which is what spreads the composition across a large display. */
.story__kolam--left {
  grid-area: kolam-l;
  justify-self: start;
}

.story__kolam--right {
  grid-area: kolam-r;
  justify-self: end;
}

.story__nandi {
  width: clamp(120px, 20vw, 400px);
  height: auto;
  align-self: end;
}

/* The pair face inward, towards the deities, as Nandi faces Shiva. The artwork is
   drawn facing left, so it is the LEFT one that is mirrored (it used to be the right,
   which turned both of them away from the shrine). */
.story__nandi--left {
  grid-area: nandi-l;
  justify-self: start;
  scale: -1 1;
}

.story__nandi--right {
  grid-area: nandi-r;
  justify-self: end;
}

/* Each Nandi arrives from beyond its own edge of the screen (blessing-animations.js
   drives --nandi-x). `translate` is applied before the mirror, in screen space, so the
   left one really does come from the left. */
.story__nandi {
  translate: var(--nandi-x, 0px) 0;
}

/* On a phone the wide arrangement would collide, so the composition stacks:
   the two motifs, the deities beneath them, then Nandi as a pair. */
@media (max-width: 767px) {
  .story__shrine {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "kolam-l kolam-r"
      "deities deities"
      "nandi-l nandi-r";
    justify-items: center;
  }

  .story__kolam--left,
  .story__kolam--right,
  .story__nandi--left,
  .story__nandi--right {
    justify-self: center;
  }
}

/* ============================================================
   THE REVEAL

   Two clocks.

   The botanical corners key off the section arriving (story--live).

   Everything else reveals AS IT IS READ: story.js adds .is-in to each
   element as it comes into view and hands it a --rv-delay, so elements
   arriving together still land in document order, a beat apart:

     the crest, "Our Divine Journey"
     "Our Story", written in one brush stroke, then its rule
     the story copy, word by word (motion layer)
     the timeline — its chapters then develop one by one (motion layer)
     the kolams, drawn outward from their centre dot
     Shiva-Parvati, revealed by the aarti light (motion layer)
     the two Nandi, as the deity's light falls across them
   ============================================================ */

.story--idle .rv,
.story--idle .story__leaf {
  opacity: 0;
}

/* Hidden until read. This also closes an old flash: the devotional artwork
   was hidden only by story--idle, so it became fully visible the moment the
   section went live — far above it — and then snapped back to invisible when
   its own entrance began. */
.story--live .rv:not(.is-in) {
  opacity: 0;
}

.story--live .story__leaf--left {
  animation: storyLeafLeft 1.5s var(--story-ease) 0.2s both;
}

.story--live .story__leaf--right {
  animation: storyLeafRight 1.5s var(--story-ease) 0.28s both;
}

.story--live .story__crest.is-in {
  animation: storyCrest 0.9s var(--story-ease) var(--rv-delay, 0s) both;
}

.story--live .story__eyebrow.is-in,
.story--live .story__rule.is-in {
  animation: storyRise 0.9s var(--story-ease) var(--rv-delay, 0s) both;
}

/* "Our Story" is painted in the same single brush stroke as Shiv-Parvati in
   the invitation — the script headings share one gesture across the page.
   brushWrite is defined in invitation.css. */
.story--live .story__title.is-in {
  -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 54%);
  mask-image: linear-gradient(90deg, #000 46%, transparent 54%);
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: brushWrite 1.6s cubic-bezier(0.45, 0.05, 0.25, 1) var(--rv-delay, 0s) both;
}

.story--live .story__copy.is-in {
  animation: storyRise 1s var(--story-ease) var(--rv-delay, 0s) both;
}

.story--live .story__timeline.is-in {
  animation: storyRise 1.05s var(--story-ease) var(--rv-delay, 0s) both;
}

/* A kolam is drawn from its centre dot outward, so it is revealed that way:
   a soft circular mask grows from the middle while a faint gold glow passes
   over the lines. Nothing turns or slides. */
.story--live .story__kolam.is-in {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 72%, transparent 100%);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: kolamDraw 1.7s cubic-bezier(0.25, 0.6, 0.2, 1) var(--rv-delay, 0s) both;
}

.story--live .story__deities.is-in {
  animation: storyRise 1.3s var(--story-ease) var(--rv-delay, 0s) both;
}

/* Nandi never moves. Light falls across him from the side nearer the deity,
   with a soft gold glow as it passes. The mask lives in the element's own
   coordinates, and the right-hand Nandi is mirrored, so one rule sweeps
   each of them from their inner edge outward. No transform is ever
   animated here, so the mirror can never be disturbed. */
.story--live .story__nandi.is-in {
  -webkit-mask-image: linear-gradient(to left, #000 46%, transparent 54%);
  mask-image: linear-gradient(to left, #000 46%, transparent 54%);
  -webkit-mask-size: 220% 100%;
  mask-size: 220% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: nandiLight 2s cubic-bezier(0.45, 0.05, 0.25, 1) var(--rv-delay, 0s) both;
}

/* ---- Keyframes ---------------------------------------------------------- */

@keyframes storyRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kolamDraw {
  0% {
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
    filter: drop-shadow(0 0 0 rgba(255, 214, 140, 0));
  }
  55% {
    filter: drop-shadow(0 0 10px rgba(255, 214, 140, 0.55));
  }
  100% {
    -webkit-mask-size: 260% 260%;
    mask-size: 260% 260%;
    filter: drop-shadow(0 0 0 rgba(255, 214, 140, 0));
  }
}

@keyframes nandiLight {
  0% {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    filter: drop-shadow(0 0 0 rgba(255, 214, 140, 0));
  }
  60% {
    filter: drop-shadow(0 0 12px rgba(255, 214, 140, 0.5));
  }
  100% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    filter: drop-shadow(0 0 0 rgba(255, 214, 140, 0));
  }
}

@keyframes storyCrest {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The botanicals ease in from their own corner, as though the branch were
   drawn onto the page rather than dropped onto it. */
@keyframes storyLeafLeft {
  0% {
    opacity: 0;
    transform: translate(-10px, -8px) scale(0.98);
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
    transform: none;
  }
}

@keyframes storyLeafRight {
  0% {
    opacity: 0;
    transform: translate(10px, -8px) scale(0.98);
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
    transform: none;
  }
}

/* ---- Reduced motion — the finished section, straight away --------------- */

@media (prefers-reduced-motion: reduce) {
  .story--idle .rv,
  .story--idle .story__leaf {
    opacity: 1;
  }

  .story--idle .story__leaf {
    opacity: 0.9;
  }

  .story--live .story__leaf,
  .story--live .rv,
  .story--live .rv.is-in {
    animation: none;
  }

  /* If the setting flips mid-visit, nothing still waiting may stay hidden. */
  .story--live .rv:not(.is-in) {
    opacity: 1;
  }

  /* The reveal masks rest at their start without their animation. */
  .story__kolam,
  .story__nandi {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}