/* ==========================================================================
   Radha Krishna wedding theme — Our Love Story & Wedding Events (section 3)
   --------------------------------------------------------------------------
   1. Tokens          <- the fluid scale, palette, timings
   2. Shell           <- the full-width section and its paper
   3. Story           <- Our Love Story: plumes, title, message, the frame
   4. Wave + rite     <- the organic green transition and the ceremony slider
   5. Flute           <- the full-width divider
   6. Moments         <- the infinite memory reel
   7. Venue           <- Vrindavan, the CTA, the ground band and the cows
   8. Entrance        <- the reveal, band by band, once
   9. Reduced motion

   HOW THIS SECTION IS SIZED
   -------------------------
   The reference is a composition, not a canvas. Nothing here is a scaled
   copy of it: every element carries its own clamp(), so each one grows at
   its own rate and stops where it should. The vw coefficient in each clamp
   is that element's proportion IN the reference — measured off the supplied
   artwork, in percent of its width — which is why the composition still
   reads as the reference at any size, while the ceilings stop a phone
   poster from being blown up across a 4K monitor.

       clamp( phone floor , reference proportion , desktop ceiling )

   The bands themselves — section, wave, green, flute, reel, ground — are
   always exactly 100% of the viewport. Only what is READ inside them keeps
   a measure. Those two things are never the same thing here.
   ========================================================================== */


/* 1. Tokens =============================================================== */

.rk-love {
  /* --- palette, sampled from the supplied reference ------------------- */
  --ls-script: #2d4e39;     /* Our Love Story / Moments / Venue           */
  --ls-deep: #303c19;       /* Vrindavan, labels, arrows, CTA             */
  --ls-body: #231f20;       /* message and address                        */
  --ls-band: #737f52;       /* olive INK: multiplied by the paper below   */
  --ls-band-ink: #fdfdf7;   /* ceremony type on the olive                 */
  --ls-pill: #3b4523;       /* the venue pill inside the band             */
  --ls-paper: #f4f2e4;      /* matches page-background                    */
  --ls-frame: #fbfcf4;      /* the ivory of every photo frame             */

  /* --- type: floor, reference proportion, ceiling --------------------- */
  --ls-fs-script: clamp(30px, 5.8vw, 62px);
  --ls-fs-body: clamp(13px, 1.85vw, 19px);
  --ls-fs-rite: clamp(29px, 6.1vw, 64px);
  --ls-fs-date: clamp(16px, 2.9vw, 30px);
  --ls-fs-pill: clamp(13px, 2.3vw, 23px);
  --ls-fs-label: clamp(15px, 3.4vw, 31px);
  --ls-fs-place: clamp(40px, 8.2vw, 94px);
  --ls-fs-hall: clamp(19px, 3.5vw, 38px);
  --ls-fs-addr: clamp(12px, 2.05vw, 20px);
  --ls-fs-cta: clamp(11px, 1.8vw, 17px);

  /* --- artwork and shapes --------------------------------------------- */
  --ls-plume: clamp(78px, 19vw, 260px);
  --ls-frame-w: clamp(215px, 52vw, 560px);
  --ls-medal: clamp(84px, 19.3vw, 205px);
  --ls-nav: clamp(34px, 7.1vw, 60px);
  --ls-card-w: clamp(118px, 32.9vw, 300px);
  --ls-card-gap: clamp(9px, 2.35vw, 26px);
  --ls-cow-w: clamp(190px, 52vw, 660px);
  --ls-ground-h: clamp(80px, 22vw, 265px);
  --ls-wave-h: clamp(34px, 8.97vw, 128px);
  --ls-rule-w: clamp(96px, 15.3vw, 210px);

  /* the message and the ceremony keep a measure; the bands never do */
  --ls-measure: clamp(280px, 52vw, 640px);
  /* how far out from the centre the ceremony arrows stand */
  --ls-reach: clamp(118px, 34vw, 420px);
  /* how deep the framed couple dips into the green. The ornament is
     wider than it is tall and carries its own transparent margin, so this
     is a share of its WIDTH that lands the same overlap as the reference. */
  --ls-dip: calc(var(--ls-frame-w) * 0.36);

  /* --- easings + reveal timing (single source of truth) ---------------- */
  --ls-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ls-glide: cubic-bezier(0.32, 0.02, 0.18, 1);
  --ls-rise-d: 1.05s;
  --ls-art-d: 1.4s;
}


/* 2. Shell ================================================================ */

/* Edge to edge. No measure, no centring wrapper, no maximum — the bands
   inside are all 100% of the viewport and only the words have a width.
   `clip` rather than `hidden`: it creates no scroll container, so the cows
   and the flute can bleed past the edges without ever producing a
   horizontal scrollbar, and no stacking context, so the layering holds. */
.rk-love {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  background-color: var(--ls-paper);
  font-family: "Poppins", system-ui, sans-serif;
  /* The green below is INK on this paper, not a panel laid over it: it is
     painted with multiply so the sheet's grain and its floral watermarks
     read straight through. `isolate` keeps that blend inside the section —
     without it the green would reach for whatever the page put behind. */
  isolation: isolate;
}

/* The section is not part of the page until the invitation is opened. The
   class is added by script, so with no script it is simply there.       */
.rk-love.is-closed {
  display: none;
}

/* The paper is a LAYER of the section, not a wrapper round the content,
   so it covers from left edge to right edge whatever the content does.
   The invitation above uses the same sheet, but on a box of a different
   height, so the two crops meet at the join with a small step in tone.
   Fading the texture in over the first inch leaves the section's own flat
   paper colour at the seam and turns that step into a gradient nobody can
   see.                                                                  */
.rk-love__paper {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("../../images/page-background.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(50px, 7vw, 130px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(50px, 7vw, 130px));
  pointer-events: none;
}

/* Every band is its own positioning context, so decoration is anchored to
   the block it belongs with and never drifts when the text rewraps. None
   of them takes a z-index: a band that stacked would seal the green inside
   itself, and the green has to be able to reach the paper to blend with
   it. Painting order is DOM order, which is the order they are read in;
   the three things that must break out of it — the framed couple, the
   flute and the CTA — say so themselves.                               */
.rk-love__band {
  position: relative;
  width: 100%;
  text-align: center;
}

/* The green ink. The ceremony band's ink is ONE layer that carries both
   the wave and the flat band under it: two multiplying layers that met
   along the wave would darken each other where they touch and draw a line
   across the green, so they are grouped and the group blends once.     */
.rk-love__ink {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(var(--ls-wave-h) * -1);
  bottom: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.rk-love__ink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* a pixel up into the wave, so no hairline can open along the join */
  top: calc(var(--ls-wave-h) - 1px);
  bottom: 0;
  background: var(--ls-band);
}

.rk-love__ground::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--ls-band);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.rk-love__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rk-love__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- the two typefaces this theme already owns -------------------------- */
.rk-love__title,
.rk-love__rite-name,
.rk-love__place {
  margin: 0;
  font-family: "Ananda", "Norican", "Segoe Script", cursive;
  font-weight: 400;
  line-height: 1.18;
}

.rk-love__title {
  font-size: var(--ls-fs-script);
  color: var(--ls-script);
}

/* the ornamental rule this theme already uses under a heading */
.rk-love__rule {
  display: block;
  width: var(--ls-rule-w);
  height: auto;
  margin: clamp(6px, 1.2vw, 18px) auto 0;
}


/* 3. Story ================================================================ */

.rk-love__story {
  padding-top: clamp(30px, 6vw, 86px);
}

/* The hanging plumes are peripheral decoration: they sit against the top
   corners at every width, scale with the screen and never reach the words
   — the message keeps a measure, so the gap between the two only ever
   grows. These are the directional assets, unmirrored and unrotated.    */
.rk-love__plume {
  position: absolute;
  z-index: 1;
  top: 0;
  width: var(--ls-plume);
  height: auto;
  pointer-events: none;
}

.rk-love__plume--l {
  left: clamp(2px, 1.6vw, 40px);
}

.rk-love__plume--r {
  right: clamp(2px, 1.6vw, 40px);
}

.rk-love__intro {
  max-width: min(86vw, var(--ls-measure));
  margin: clamp(12px, 2.6vw, 34px) auto 0;
  padding: 0;
  font-weight: 600;
  font-size: var(--ls-fs-body);
  line-height: 1.62;
  color: var(--ls-body);
  text-wrap: balance;
}

/* The framed couple. The frame is the supplied ornament, used whole and
   unretouched; the artwork sits BEHIND it, cut to the shape of the opening
   traced out of that same file and grown by about a third of the border's
   thickness, so the couple runs under the white edge and never shows a
   seam against it. The percentages below are that opening's box, measured
   in the artwork, so the two stay registered at every size. The shadow is
   on the figure, so it follows the ornament's real silhouette.          */
.rk-love__figure {
  position: relative;
  z-index: 4;
  width: var(--ls-frame-w);
  margin: clamp(16px, 4.5vw, 60px) auto calc(var(--ls-dip) * -1);
  filter: drop-shadow(0 clamp(3px, 0.7vw, 10px) clamp(6px, 1.4vw, 20px) rgba(48, 60, 25, 0.26));
}

.rk-love__frame-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

.rk-love__photo {
  position: absolute;
  z-index: 1;
  left: 7.536%;
  top: 5.215%;
  width: 84.782%;
  height: 89.658%;
  object-fit: cover;
  object-position: center 42%;
  clip-path: url(#rk-ls-frame);
}


/* 4. Wave and the ceremony band =========================================== */

/* Full width, always. The content inside is what has a measure. */
.rk-love__rite {
  padding-top: calc(var(--ls-dip) + clamp(12px, 4.2vw, 54px));
  padding-bottom: clamp(30px, 6.2vw, 90px);
  color: var(--ls-band-ink);
}

/* The wave is the TOP EDGE of the ink, drawn in the same green so the two
   are one shape. The path is traced from the reference: a crest a sixth of
   the way in, a long fall to a trough three quarters across, then a lift
   into the right edge. preserveAspectRatio is "none" on purpose — the wave
   must always span the whole viewport, and its depth is set here, in CSS,
   not by the artwork's ratio.                                          */
.rk-love__wave {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: var(--ls-wave-h);
}

.rk-love__wave path {
  fill: var(--ls-band);
  stroke: none;
}

/* the medallion row: the frame and the two arrows share one line */
.rk-love__medal-row {
  position: relative;
  width: 100%;
}

.rk-love__medal {
  --ls-rim: clamp(4px, 0.85vw, 11px);
  position: relative;
  width: var(--ls-medal);
  height: var(--ls-medal);
  margin: 0 auto;
  background: var(--ls-frame);
  clip-path: url(#rk-ls-medal);
}

/* A photograph is MATTED inside the cut, never flush with it: the inset
   leaves an even ivory rim all the way round, and cutting the photo to the
   same shape keeps that rim the same width at every scallop. Without it a
   photo reads as a hole in the paper rather than a framed picture — which
   is what the couple's frame above does with its own white border.     */
.rk-love__medal img {
  position: absolute;
  top: var(--ls-rim);
  left: var(--ls-rim);
  display: block;
  width: calc(100% - var(--ls-rim) * 2);
  height: calc(100% - var(--ls-rim) * 2);
  object-fit: cover;
  /* the disc is square and photographs rarely are: hold the crop high so
     it keeps faces rather than the middle of a portrait */
  object-position: center 24%;
  clip-path: url(#rk-ls-medal);
}

/* Small, quiet controls set either side of the ceremony — never a pair of
   generic carousel arrows. They stand off the centre by --ls-reach, so on
   a phone they sit near the edges and on a desktop they stay with the
   ceremony instead of drifting out into the far corners.               */
.rk-love__nav {
  position: absolute;
  top: 66%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--ls-nav);
  height: var(--ls-nav);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ls-deep);
  color: var(--ls-band-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.35s var(--ls-ease), transform 0.35s var(--ls-ease);
}

.rk-love__nav svg {
  width: 34%;
  height: 34%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rk-love__nav--prev {
  left: calc(50% - var(--ls-reach) - var(--ls-nav) / 2);
}

.rk-love__nav--next {
  right: calc(50% - var(--ls-reach) - var(--ls-nav) / 2);
}

.rk-love__nav:hover,
.rk-love__nav:focus-visible {
  background: #1f2a10;
  transform: translateY(-50%) scale(1.06);
}

.rk-love__nav:focus-visible {
  outline: 2px solid var(--ls-band-ink);
  outline-offset: 3px;
}

/* Every slide is stacked in the same grid cell, so the stage is as tall as
   the longest ceremony and nothing below it moves when they change.    */
.rk-love__stage {
  display: grid;
  max-width: var(--ls-measure);
  margin: clamp(8px, 2.6vw, 34px) auto 0;
  /* the gutter is capped: a bare 5vw would eat the whole measure once the
     measure itself has stopped growing, and the ceremony would wrap  */
  padding: 0 clamp(12px, 5vw, 40px);
  touch-action: pan-y;
}

.rk-love__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(var(--ls-slide-x, 0), 0, 0);
  transition: opacity 0.55s var(--ls-ease), transform 0.55s var(--ls-ease);
  pointer-events: none;
}

.rk-love__slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* entering from the right, leaving to the left — and the mirror of it */
.rk-love__slide.is-from-right {
  --ls-slide-x: 7%;
}

.rk-love__slide.is-from-left {
  --ls-slide-x: -7%;
}

.rk-love__rite-name {
  font-size: var(--ls-fs-rite);
  color: var(--ls-band-ink);
}

.rk-love__rite-date,
.rk-love__rite-time {
  margin: clamp(2px, 0.5vw, 8px) 0 0;
  font-weight: 600;
  font-size: var(--ls-fs-date);
  line-height: 1.3;
  color: var(--ls-band-ink);
}

.rk-love__rite-venue {
  display: inline-block;
  margin: clamp(10px, 2.2vw, 28px) 0 0;
  padding: clamp(6px, 1.15vw, 15px) clamp(14px, 3vw, 38px);
  border-radius: clamp(6px, 1vw, 12px);
  background: var(--ls-pill);
  font-weight: 600;
  font-size: var(--ls-fs-pill);
  line-height: 1.35;
  color: var(--ls-band-ink);
}


/* 5. Flute ================================================================
   The one element that is never inside anything with a measure. It is a
   full-viewport divider laid across the seam between the green and the
   paper: width 100% of the SECTION, height auto, so the artwork keeps its
   own 2206 x 713 ratio at every width and is never stretched. It is
   lifted by 48.74% of its own height, which is where the bore of the
   flute sits inside the PNG — that line, not the box, is what has to land
   on the edge of the green.                                            */
.rk-love__flute {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 100%;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  transform: translateY(-48.74%);
  pointer-events: none;
}


/* 6. Moments ============================================================== */

.rk-love__moments {
  padding-top: clamp(26px, 7.7vw, 100px);
}

/* The viewport is the full width of the screen and is the only thing that
   ever sees the track. The track is wider than the screen and is moved
   with a transform, so it can never reach the document's overflow.     */
.rk-love__reel {
  width: 100%;
  margin-top: clamp(20px, 7.5vw, 96px);
  overflow: hidden;
}

.rk-love__track {
  display: flex;
  gap: var(--ls-card-gap);
  width: max-content;
  will-change: transform;
}

.rk-love__track.is-running {
  animation: rk-ls-reel var(--ls-reel-time, 48s) linear infinite;
}

/* One sequence's width, set by script from what the cards actually
   measure, so the loop closes on itself exactly — no snap, no gap.     */
@keyframes rk-ls-reel {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(var(--ls-reel-span, 0px) * -1), 0, 0);
  }
}

.rk-love__reel:hover .rk-love__track.is-running,
.rk-love__reel:focus-within .rk-love__track.is-running,
.rk-love__reel.is-held .rk-love__track.is-running {
  animation-play-state: paused;
}

.rk-love__memory {
  flex: 0 0 auto;
  width: var(--ls-card-w);
  margin: 0;
}

.rk-love__memory-frame {
  --ls-rim: clamp(4px, 1vw, 13px);
  position: relative;
  width: 100%;
  aspect-ratio: 237 / 325;
  background: var(--ls-frame);
  clip-path: url(#rk-ls-card);
}

.rk-love__memory-frame img {
  position: absolute;
  top: var(--ls-rim);
  left: var(--ls-rim);
  display: block;
  width: calc(100% - var(--ls-rim) * 2);
  height: calc(100% - var(--ls-rim) * 2);
  object-fit: cover;
  object-position: center 38%;
  clip-path: url(#rk-ls-card);
}

.rk-love__memory figcaption {
  margin-top: clamp(6px, 1.4vw, 18px);
}

.rk-love__memory-name {
  display: block;
  font-weight: 600;
  font-size: var(--ls-fs-label);
  line-height: 1.16;
  color: var(--ls-deep);
}

.rk-love__memory .rk-love__rule {
  width: min(72%, var(--ls-rule-w));
  margin-top: clamp(4px, 0.8vw, 10px);
}


/* 7. Venue ================================================================ */

.rk-love__venue {
  padding-top: clamp(24px, 8vw, 100px);
}

.rk-love__place {
  margin-top: clamp(8px, 2.4vw, 30px);
  font-size: var(--ls-fs-place);
  color: var(--ls-deep);
}

.rk-love__hall {
  margin: 0;
  font-weight: 600;
  font-size: var(--ls-fs-hall);
  line-height: 1.25;
  color: var(--ls-deep);
}

.rk-love__addr {
  margin: clamp(3px, 0.6vw, 9px) 0 0;
  font-weight: 600;
  font-size: var(--ls-fs-addr);
  letter-spacing: 0.01em;
  color: var(--ls-body);
}

/* the CTA straddles the top edge of the ground band, as in the reference */
.rk-love__cta {
  position: relative;
  z-index: 3;
  display: inline-block;
  margin-top: clamp(10px, 2.2vw, 28px);
  padding: clamp(7px, 1.25vw, 16px) clamp(18px, 3.4vw, 42px);
  border: 0;
  border-radius: clamp(5px, 0.9vw, 11px);
  background: var(--ls-deep);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--ls-fs-cta);
  letter-spacing: 0.08em;
  color: var(--ls-band-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.35s var(--ls-ease), transform 0.35s var(--ls-ease);
}

.rk-love__cta:hover,
.rk-love__cta:focus-visible {
  background: #1f2a10;
  transform: translateY(-2px);
}

.rk-love__cta:focus-visible {
  outline: 2px solid var(--ls-deep);
  outline-offset: 3px;
}

/* The ground: a full-width green band with the two cows standing on it.
   It is lifted under the CTA so the button sits half on the green, as in
   the reference.                                                       */
.rk-love__ground {
  position: relative;
  width: 100%;
  height: var(--ls-ground-h);
  margin-top: calc(clamp(10px, 1.7vw, 22px) * -1);
}

/* The planting at the two ends of the band.

   It is NOT a border running the width of the screen — the reference puts
   one sheet of foliage at each end, growing in from the edge under a cow,
   and leaves the middle as bare grass. So: the sheet twice, at its own
   proportions, no repeat and no cropping. Sizing it by width alone is what
   made the first attempt wrong; the leaves belong at a size the cows can
   stand in, so the width is taken FROM the cow — seven tenths of one — and
   the two keep that relation at every size.

   The left copy is the sheet as drawn: the tall stem at the screen's edge,
   the small clusters trailing off toward the middle, which is where the
   planting has to end quietly. The right copy is that mirrored, so the
   pair reads as one garden.

   Both come before the cows in the markup, so the pair stands in front of
   the planting rather than behind it.                                   */
.rk-love__flora {
  position: absolute;
  bottom: 0;
  width: calc(var(--ls-cow-w) * 0.7);
  height: auto;
  pointer-events: none;
}

.rk-love__flora--l {
  left: 0;
}

.rk-love__flora--r {
  right: 0;
  transform: scaleX(-1);
}

/* Directional artwork: cow-left keeps the left, cow-right keeps the right,
   neither mirrored nor rotated. Each is pulled outward by 28% of its own
   width, exactly as in the reference, so the pair reaches in from beyond
   the edges instead of standing about in the middle of the band.       */
.rk-love__cow {
  position: absolute;
  bottom: 0;
  width: var(--ls-cow-w);
  height: auto;
  pointer-events: none;
}

.rk-love__cow--l {
  left: calc(var(--ls-cow-w) * -0.28);
}

.rk-love__cow--r {
  right: calc(var(--ls-cow-w) * -0.28);
}


/* 8. Entrance =============================================================
   One observer per band, each firing once. Everything below is the resting
   composition offset by a small rise; the class simply puts it back.    */

.rk-love__rise {
  opacity: 0;
  transform: translate3d(0, clamp(12px, 1.8vw, 26px), 0);
  transition:
    opacity var(--ls-rise-d) var(--ls-ease) var(--ls-d, 0s),
    transform var(--ls-rise-d) var(--ls-ease) var(--ls-d, 0s);
}

.rk-love__band.is-revealed .rk-love__rise {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* the plumes hang into place rather than rising */
.rk-love__plume {
  opacity: 0;
  transform: translate3d(0, calc(var(--ls-plume) * -0.24), 0);
  transition:
    opacity var(--ls-art-d) var(--ls-glide) var(--ls-d, 0s),
    transform var(--ls-art-d) var(--ls-glide) var(--ls-d, 0s);
}

.rk-love__story.is-revealed .rk-love__plume {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* the flute settles onto the seam, once, and then never moves again */
.rk-love__flute {
  opacity: 0;
  transform: translateY(calc(-48.74% - clamp(10px, 1.4vw, 22px)));
  transition:
    opacity var(--ls-art-d) var(--ls-glide) var(--ls-d, 0s),
    transform var(--ls-art-d) var(--ls-glide) var(--ls-d, 0s);
}

.rk-love__rite.is-revealed .rk-love__flute {
  opacity: 1;
  transform: translateY(-48.74%);
}

/* the cows walk in from beyond their own edges */
.rk-love__cow {
  opacity: 0;
  transition:
    opacity var(--ls-art-d) var(--ls-glide) var(--ls-d, 0s),
    transform var(--ls-art-d) var(--ls-glide) var(--ls-d, 0s);
}

.rk-love__cow--l {
  transform: translate3d(calc(var(--ls-cow-w) * -0.16), 0, 0);
}

.rk-love__cow--r {
  transform: translate3d(calc(var(--ls-cow-w) * 0.16), 0, 0);
}

.rk-love__ground.is-revealed .rk-love__cow {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.rk-love__flora {
  opacity: 0;
  transition: opacity var(--ls-art-d) var(--ls-glide) var(--ls-d, 0s);
}

.rk-love__ground.is-revealed .rk-love__flora {
  opacity: 1;
}

/* the order of the story, written once, read top to bottom */
.rk-love__plume--l { --ls-d: 0.05s; }
.rk-love__plume--r { --ls-d: 0.18s; }
.rk-love__story .rk-love__title { --ls-d: 0.30s; }
.rk-love__story .rk-love__rule { --ls-d: 0.48s; }
.rk-love__intro { --ls-d: 0.60s; }
.rk-love__figure { --ls-d: 0.78s; }

.rk-love__medal-row { --ls-d: 0.10s; }
.rk-love__stage { --ls-d: 0.30s; }
.rk-love__flute { --ls-d: 0.50s; }

.rk-love__moments .rk-love__title { --ls-d: 0.05s; }
.rk-love__moments .rk-love__rule { --ls-d: 0.18s; }
.rk-love__reel { --ls-d: 0.34s; }

.rk-love__venue .rk-love__title { --ls-d: 0.05s; }
.rk-love__venue .rk-love__rule { --ls-d: 0.18s; }
.rk-love__place { --ls-d: 0.30s; }
.rk-love__hall { --ls-d: 0.42s; }
.rk-love__addr { --ls-d: 0.52s; }
.rk-love__cta { --ls-d: 0.62s; }

.rk-love__flora { --ls-d: 0s; }
.rk-love__cow--l { --ls-d: 0.10s; }
.rk-love__cow--r { --ls-d: 0.24s; }


/* 9. Reduced motion =======================================================
   Nothing travels and nothing loops. The section is simply there, whole,
   and both sliders stay usable: the ceremony arrows still work, and every
   memory is reachable because the reel becomes a scrollable row.        */

@media (prefers-reduced-motion: reduce) {

  .rk-love__rise,
  .rk-love__plume,
  .rk-love__cow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* the flora keeps its transform: the mirroring is composition, not
     animation, and putting it back would un-mirror the left half */
  .rk-love__flora {
    opacity: 1 !important;
    transition: none !important;
  }

  .rk-love__flute {
    opacity: 1 !important;
    transform: translateY(-48.74%) !important;
    transition: none !important;
  }

  .rk-love__slide {
    transition: opacity 0.2s linear !important;
  }

  .rk-love__track,
  .rk-love__track.is-running {
    animation: none !important;
  }

  .rk-love__reel {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rk-love__reel::-webkit-scrollbar {
    display: none;
  }
}