/* THEME: Royal Batik — deep maroon & antique gold, ceremonial Javanese wedding mood */
:root{
  --color-bg: #fbf3e4;
  --color-surface: #fffdf8;
  --color-text: #3a1418;
  --color-text-soft: #7a4a4a;
  --color-primary: #b3893c;
  --color-secondary: #e3c481;
  --color-accent: #6e0f1f;
  --color-line: rgba(110,15,31,.22);
  --font-heading: 'Marcellus', serif;
  --font-script: 'Tangerine', cursive;
  --font-body: 'Cormorant Garamond', serif;

  --batik-gold: #c9a24b;
  --batik-gold-soft: #e3c481;
  --batik-maroon: #6e0f1f;
  --batik-maroon-deep: #4a0a15;
}

body{ background: #2a0810; }

/* ---------- Repeating geometric "batik" motif, built entirely from gradients ---------- */
.frame{
  background:
    radial-gradient(circle at 8% 6%, rgba(201,162,75,.12), transparent 38%),
    radial-gradient(circle at 92% 15%, rgba(110,15,31,.10), transparent 36%),
    radial-gradient(circle at 6% 31%, rgba(110,15,31,.09), transparent 34%),
    radial-gradient(circle at 94% 47%, rgba(201,162,75,.11), transparent 36%),
    radial-gradient(circle at 8% 63%, rgba(201,162,75,.10), transparent 34%),
    radial-gradient(circle at 92% 79%, rgba(110,15,31,.10), transparent 36%),
    radial-gradient(circle at 10% 91%, rgba(110,15,31,.09), transparent 34%),
    radial-gradient(circle at 94% 98%, rgba(201,162,75,.12), transparent 38%),
    var(--color-bg);
}

/* full-page tiled watermark: a scaled-down echo of the diamond-lattice motif
   framing the cover, so the ceremonial pattern continues down the whole page */
.frame::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%236e0f1f' stroke-width='1'%3E%3Cpath d='M60 8 L112 60 L60 112 L8 60 Z'/%3E%3C/g%3E%3Cg fill='%23c9a24b'%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='60' cy='8' r='1.6'/%3E%3Ccircle cx='112' cy='60' r='1.6'/%3E%3Ccircle cx='60' cy='112' r='1.6'/%3E%3Ccircle cx='8' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-width='.7' opacity='.65'%3E%3Cpath d='M30 6 L48 30 L30 54 L12 30 Z'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='1.4' fill='%236e0f1f'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 120px 120px, 60px 60px;
  background-position: 0 0, 30px 15px;
}

.cover{
  background:
    repeating-linear-gradient(45deg, rgba(201,162,75,.07) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(110,15,31,.05) 0 2px, transparent 2px 26px),
    radial-gradient(circle at 50% 50%, rgba(201,162,75,.08), transparent 60%),
    var(--color-bg);
  border-top: clamp(5px, 1.2vh, 10px) solid var(--batik-maroon);
  border-bottom: clamp(5px, 1.2vh, 10px) solid var(--batik-maroon);
}

.cover__eyebrow{
  font-family: var(--font-heading);
  letter-spacing: .4em;
}

.cover__names{
  text-shadow: 0 2px 18px rgba(110,15,31,.25);
}

.cover__date{
  position:relative;
  padding-bottom: 14px;
}
.cover__date::after{
  content:'';
  position:absolute; left:50%; bottom:0; transform: translateX(-50%);
  width: 90px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--batik-gold) 0 6px, transparent 6px 10px);
}

.cover__guest-box{
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: clamp(9px, 2vh, 16px) 0;
}

/* corner ornaments framing the cover */
.cover__corner{
  position:absolute;
  pointer-events:none;
  opacity:.85;
  z-index: 1;
  width: clamp(42px, 14vw, 72px);
  height: auto;
}
.cover__corner--tl{ top: clamp(10px, 2.4vh, 16px); left: 10px; }
.cover__corner--tr{ top: clamp(10px, 2.4vh, 16px); right: 10px; transform: scaleX(1); }
.cover__corner--bl{ bottom: clamp(10px, 2.4vh, 16px); left: 10px; }
.cover__corner--br{ bottom: clamp(10px, 2.4vh, 16px); right: 10px; }

/* central medallion sitting between the guest box and the open button */
.cover__medallion{
  margin: clamp(2px, .6vh, 4px) 0 clamp(10px, 2.2vh, 18px);
  display:flex;
  justify-content:center;
  opacity:.9;
}
.cover__medallion svg{ width: clamp(38px, 10vh, 56px); height: auto; }

.cover__deco-top, .cover__deco-bottom{ z-index: 0; }

.btn-open{
  border-color: var(--batik-gold);
  border-width: 2px;
  background: var(--color-surface);
  color: var(--batik-maroon);
  box-shadow: 0 0 0 1px var(--color-line);
}
.btn-open:hover{ background: var(--batik-maroon); color: var(--batik-gold-soft); border-color: var(--batik-maroon); }

/* ---------- Section rhythm ---------- */
.section{
  border-bottom: none;
  position: relative;
}

/* miniature lattice-medallion corner ornaments, echoed near two opposite
   corners of every section; colors swap on alternating sections for variety */
.section::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-size: 70px 70px, 70px 70px;
  background-position: -14px 16px, calc(100% + 14px) calc(100% - 16px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='34' fill='%236e0f1f' opacity='.06'/%3E%3Cpath d='M35 10 L60 35 L35 60 L10 35 Z' fill='none' stroke='%236e0f1f' stroke-width='1.2' opacity='.4'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%23c9a24b' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='34' fill='%23c9a24b' opacity='.07'/%3E%3Cpath d='M35 10 L60 35 L35 60 L10 35 Z' fill='none' stroke='%23c9a24b' stroke-width='1.2' opacity='.4'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%236e0f1f' opacity='.5'/%3E%3C/svg%3E");
}
.section:nth-of-type(even)::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='34' fill='%23c9a24b' opacity='.07'/%3E%3Cpath d='M35 10 L60 35 L35 60 L10 35 Z' fill='none' stroke='%23c9a24b' stroke-width='1.2' opacity='.4'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%236e0f1f' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='34' fill='%236e0f1f' opacity='.06'/%3E%3Cpath d='M35 10 L60 35 L35 60 L10 35 Z' fill='none' stroke='%236e0f1f' stroke-width='1.2' opacity='.4'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%23c9a24b' opacity='.5'/%3E%3C/svg%3E");
}

.section__eyebrow{
  font-family: var(--font-heading);
  letter-spacing: .35em;
}

.section__title{
  position:relative;
  padding-bottom: 16px;
}
.section__title::after{
  content:'';
  display:block;
  position:absolute;
  left:50%; bottom:0; transform: translateX(-50%);
  width: 60px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--batik-gold) 0 5px, transparent 5px 9px);
}

/* ---------- Ornate but restrained card borders ---------- */
.event-card, .gift-card, .wish-card, .countdown__item{
  border: 1px solid var(--color-line);
  box-shadow: 0 14px 32px -20px rgba(110,15,31,.45);
  position: relative;
}
.event-card::before, .gift-card::before{
  content:'';
  position:absolute; inset: 5px;
  border: 1px solid var(--color-secondary);
  border-radius: calc(var(--radius) - 8px);
  pointer-events:none;
  opacity:.55;
}
.gift-card::before{ border-radius: 8px; }

.countdown__item{
  border-top: 2px solid var(--batik-gold);
}

.couple__photo{
  border-color: var(--batik-gold-soft);
  border-width: 5px;
  box-shadow: 0 0 0 1px var(--batik-maroon), 0 14px 34px -14px rgba(110,15,31,.5);
}
.couple__divider{ color: var(--batik-gold); }

.story::before{ background: repeating-linear-gradient(180deg, var(--color-line) 0 5px, transparent 5px 9px); }
.story__dot{ border-color: var(--batik-gold); background: var(--color-surface); }

.gallery__item{
  box-shadow: 0 8px 20px -12px rgba(110,15,31,.45);
  border: 2px solid var(--color-surface);
  outline: 1px solid var(--color-line);
}

.video-box{
  border: 3px solid var(--batik-gold);
}
.video-box__play{ color: var(--batik-maroon); }

.btn-outline, .btn-copy{ border-color: var(--batik-maroon); color: var(--batik-maroon); }
.btn-outline:hover, .btn-copy.copied{ background: var(--batik-maroon); color: var(--batik-gold-soft); }

.btn-solid{ background: var(--batik-maroon); }
.btn-solid:hover{ background: var(--batik-maroon-deep); opacity:1; }

.wish-card{ border-left: 3px solid var(--batik-gold); }

.footer{
  background:
    repeating-linear-gradient(45deg, rgba(201,162,75,.05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, transparent, rgba(110,15,31,.06));
  position: relative;
}
.footer::before{
  content:'';
  display:block;
  height: 6px;
  margin: 0 0 40px;
  background:
    repeating-linear-gradient(135deg,
      var(--batik-maroon) 0 8px,
      var(--batik-gold) 8px 10px,
      var(--batik-maroon) 10px 18px,
      var(--batik-gold-soft) 18px 20px);
  opacity:.85;
}
.footer::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-size: 70px 70px, 70px 70px;
  background-position: -14px 10px, calc(100% + 14px) calc(100% - 10px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='34' fill='%23c9a24b' opacity='.07'/%3E%3Cpath d='M35 10 L60 35 L35 60 L10 35 Z' fill='none' stroke='%23c9a24b' stroke-width='1.2' opacity='.4'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%236e0f1f' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='34' fill='%236e0f1f' opacity='.06'/%3E%3Cpath d='M35 10 L60 35 L35 60 L10 35 Z' fill='none' stroke='%236e0f1f' stroke-width='1.2' opacity='.4'/%3E%3Ccircle cx='35' cy='35' r='3' fill='%23c9a24b' opacity='.5'/%3E%3C/svg%3E");
}

.music-toggle{ border-color: var(--batik-gold); color: var(--batik-maroon); }
.navdots a.active{ background: var(--batik-maroon); }

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so the wash
   of color flows continuously maroon -> gold -> maroon down the whole page,
   a dignified ceremonial tint rather than the busier gold/maroon patterns
   already used for the lattice-medallion corners above.
   Note: .section itself sets no `background` elsewhere in this file, so
   these per-nth-of-type backgrounds paint underneath the existing
   ::before corner medallions (z-index:-1) without any property collision. */
/* Note: nth-of-type(7) is the video section — it's hidden (display:none) in
   dynamically-rendered invitations when no video is set, so it stays a flat
   continuation of C5 rather than introducing a new stop. That way the wash
   stays seamless whether or not the video section actually renders. */
.section:nth-of-type(1){ background: linear-gradient(180deg, transparent, rgba(110,15,31,.10)); }          /* hero -> C1 */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(110,15,31,.10), rgba(201,162,75,.12)); } /* C1 -> C2 */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(201,162,75,.12), rgba(110,15,31,.09)); } /* C2 -> C3 */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(110,15,31,.09), rgba(201,162,75,.13)); } /* C3 -> C4 */
.section:nth-of-type(5){ background: rgba(201,162,75,.13); }                                                  /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(201,162,75,.13), rgba(110,15,31,.08)); } /* C4 -> C5 */
.section:nth-of-type(7){ background: rgba(110,15,31,.08); }                                                 /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(110,15,31,.08), rgba(201,162,75,.11)); } /* C5 -> C6 */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(201,162,75,.11), transparent); }          /* C6 -> footer */

/* .footer already opens on transparent and settles into a low-alpha maroon
   tint (rgba(110,15,31,.06)) beneath its own texture layer, so the wash
   handed off by C8 above continues into it seamlessly with no edit needed. */

/* ==========================================================================
   THEMED MOTION — a formal, symmetrical "seal settling into place" reveal
   (fade + gentle scale-up + soften-to-focus) instead of a generic fade or
   a bouncy effect, plus slow ceremonial ambient motion: a gold shimmer
   sweep along the existing repeating-gradient strips/dividers, and a very
   slow rotation of the cover medallion, echoing a royal seal turning.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: scale(.9);
  filter: blur(3px);
  transition: opacity 1.5s cubic-bezier(.19,1,.22,1),
              transform 1.5s cubic-bezier(.19,1,.22,1),
              filter 1.5s cubic-bezier(.19,1,.22,1);
}
.reveal.in{ opacity: 1; transform: scale(1); filter: blur(0); }

.countdown__item.reveal{ transition-delay: calc(var(--i, 0) * 110ms); }

/* ==========================================================================
   VARIATIVE REVEAL DIRECTIONS — sections no longer all reveal the same way;
   these compose with the "seal settling" blur+scale above (the blur/opacity
   still comes from .reveal, these modifiers add a directional slide/rotate
   on top of it).
   ========================================================================== */
.reveal--left{ transform: scale(.94) translateX(-38px) rotate(-3deg); }
.reveal--left.in{ transform: scale(1) translateX(0) rotate(0); }
.reveal--right{ transform: scale(.94) translateX(38px) rotate(3deg); }
.reveal--right.in{ transform: scale(1) translateX(0) rotate(0); }
.reveal--zoom{ transform: scale(.6) rotate(-4deg); }
.reveal--zoom.in{ transform: scale(1) rotate(0); }
.reveal--flip{ transform: perspective(600px) rotateX(35deg) translateY(20px); }
.reveal--flip.in{ transform: perspective(600px) rotateX(0) translateY(0); }

.hero__names span.reveal{ display: inline-block; }

.event-card.reveal{ transition-delay: calc(var(--i,0) * 90ms); }
.event-card:nth-of-type(odd).reveal{ transform: scale(.95) translateX(-30px) rotate(-2deg); }
.event-card:nth-of-type(odd).reveal.in{ transform: scale(1) translateX(0) rotate(0); }
.event-card:nth-of-type(even).reveal{ transform: scale(.95) translateX(30px) rotate(2deg); }
.event-card:nth-of-type(even).reveal.in{ transform: scale(1) translateX(0) rotate(0); }

.story__item:nth-child(odd).reveal{ transform: scale(.94) translateX(-24px) rotate(-2deg); }
.story__item:nth-child(odd).reveal.in{ transform: scale(1) translateX(0) rotate(0); }
.story__item:nth-child(even).reveal{ transform: scale(.94) translateX(24px) rotate(2deg); }
.story__item:nth-child(even).reveal.in{ transform: scale(1) translateX(0) rotate(0); }

/* ==========================================================================
   SECTION TITLE — its own signature motion: text rises up through a mask
   like a curtain lifting, layered under the existing gold-underline sweep.
   ========================================================================== */
.section__title__mask{ display: block; overflow: hidden; }
.section__title__inner{
  display: block;
  transform: translateY(112%);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
.section__title.reveal{ transform: none; filter: none; transition: opacity .7s ease; }
.section__title.reveal.in{ transform: none; filter: none; }
.section__title.reveal.in .section__title__inner{ transform: translateY(0); }

/* ---------- Hero names shimmer — a slow gold sheen sweeping across the
   couple's names, echoing the royal-seal gold motifs used elsewhere.
   Targets the name spans directly (not the wrapper div), since
   background-clip:text needs the text on the same element. ---------- */
.hero__names span{
  background: linear-gradient(100deg, var(--batik-maroon) 30%, var(--batik-gold) 42%, var(--batik-gold-soft) 50%, var(--batik-gold) 58%, var(--batik-maroon) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 7.5s linear infinite;
}
@keyframes shimmerText{
  0%{ background-position: 200% 0; }
  100%{ background-position: -50% 0; }
}

/* ==========================================================================
   FALLING GOLD FLECKS — a continuous, slow shower of batik-fragment
   diamonds and gold dots drifting down the whole viewport.
   ========================================================================== */
.petals-overlay{
  position: fixed;
  inset: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  z-index: 350;
}
.petal{
  position: absolute;
  top: -8%;
  will-change: transform;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.petal svg{ width:100%; height:100%; display:block; }
@keyframes petalFall{
  0%{ transform: translate(0,0) rotate(0deg); }
  100%{ transform: translate(var(--drift, 20px), 118vh) rotate(var(--spin, 320deg)); }
}

.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary), var(--color-accent));
  z-index: 600;
  transition: width .1s linear;
}

@keyframes countTick{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.28) rotate(-3deg); color: var(--batik-maroon); }
  60%{ transform: scale(.94) rotate(2deg); }
  100%{ transform: scale(1) rotate(0); }
}
.countdown__num.is-ticking{ animation: countTick .5s ease-out; transform-origin: center; }

/* ==========================================================================
   PHOTO GRID — every photo is on screen at once; the mosaic layout itself
   lives in base.css. This only adds the template's own depth and hover so
   the tiles still belong to this design. Prev/next moved into the lightbox,
   which opens when a tile is tapped.
   ========================================================================== */
.gallery__item{ transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.gallery__item:hover{ transform: translateY(-3px); }

/* additional slow drift/twinkle keyframes for the newer deco-float shapes
   (anim-d: fragment ornament, anim-e: fan/crest, anim-f: sparkle) — kept
   in the same slow, dignified register as anim-a/b/c above */
@keyframes ornamentDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-4deg) scale(1); }
  50%{ transform: translate(-7px,-16px) rotate(9deg) scale(1.06); }
}
@keyframes ornamentSwayE{
  0%, 100%{ transform: translate(0,0) rotate(-8deg); }
  50%{ transform: translate(6px,-14px) rotate(8deg); }
}
@keyframes twinkleF{
  0%, 100%{ transform: scale(.7) rotate(0deg); opacity:.4; }
  50%{ transform: scale(1.2) rotate(90deg); opacity:1; }
}
.deco-float.anim-d{ animation: ornamentDriftD 13s ease-in-out infinite; }
.deco-float.anim-e{ animation: ornamentSwayE 10.5s ease-in-out infinite; }
.deco-float.anim-f{ animation: twinkleF 4s ease-in-out infinite; }

.gallery__item.reveal{ transition-delay: calc(var(--i, 0) * 70ms); }
.gallery__item:nth-child(1){ --i: 0; } .gallery__item:nth-child(2){ --i: 1; } .gallery__item:nth-child(3){ --i: 2; }
.gallery__item:nth-child(4){ --i: 3; } .gallery__item:nth-child(5){ --i: 4; } .gallery__item:nth-child(6){ --i: 5; }
.gallery__item:nth-child(7){ --i: 6; } .gallery__item:nth-child(8){ --i: 7; } .gallery__item:nth-child(9){ --i: 8; }

.story__item.reveal{ transition-delay: calc(var(--i, 0) * 120ms); }
.story__item:nth-child(1){ --i: 0; } .story__item:nth-child(2){ --i: 1; }
.story__item:nth-child(3){ --i: 2; } .story__item:nth-child(4){ --i: 3; }

/* Slow gold shimmer sweep — pans the existing repeating-gradient strips
   (footer divider, title underline, cover date rule)
   sideways very gradually; these elements already carry the gold/maroon
   pattern, so animating background-position adds motion without touching
   their static background-image/box declarations above. */
@keyframes goldShimmer{
  0%{ background-position: 0 0; }
  100%{ background-position: 42px 0; }
}
.footer::before,
.section__title::after,
.cover__date::after{
  animation: goldShimmer 14s linear infinite;
}

/* Very slow "royal seal" rotation on the cover medallion — a full turn
   over 15s reads as almost imperceptible, dignified motion rather than a
   spin. */
@keyframes sealTurn{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.cover__medallion svg{ animation: sealTurn 15s linear infinite; }

.couple__photo{ transition: transform .5s ease, box-shadow .5s ease; }
.couple__person:hover .couple__photo{
  transform: scale(1.04);
  box-shadow: 0 0 0 1px var(--batik-maroon), 0 0 24px 3px rgba(201,162,75,.4), 0 14px 34px -14px rgba(110,15,31,.5);
}

.gallery__item{ transition: transform .4s ease, box-shadow .4s ease, outline-color .4s ease; }
.gallery__item:hover{
  transform: scale(1.03);
  outline-color: var(--batik-gold);
  box-shadow: 0 0 0 1px var(--batik-gold), 0 14px 28px -14px rgba(110,15,31,.55);
}

/* ==========================================================================
   FLOATING GRAPHICS — small formal gold ornaments (diamond-lattice echo,
   dot-cluster medallion, geometric rosette) turning slowly in each section,
   in the theme's own maroon/gold palette. Purely decorative, non-interactive.
   Positioned at top-right / bottom-left corners of each section — the
   opposite pair of corners from the existing ::before lattice-medallion
   watermark (which sits top-left / bottom-right, bleeding off the edges),
   so the two layers read as complementary rather than overlapping.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(74,10,21,.28));
  will-change: transform;
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

/* A: a full, slow, unhurried turn — a gold ornament revolving in place. */
@keyframes ornamentSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
/* B & C: composed rotational sway with only a hint of drift, dignified
   rather than bouncy. */
@keyframes ornamentSwayB{
  0%, 100%{ transform: rotate(-7deg); }
  50%{ transform: rotate(7deg); }
}
@keyframes ornamentSwayC{
  0%, 100%{ transform: translateY(0) rotate(4deg); }
  50%{ transform: translateY(-5px) rotate(-6deg); }
}
.deco-float.anim-a{ animation: ornamentSpin 24s linear infinite; }
.deco-float.anim-b{ animation: ornamentSwayB 11s ease-in-out infinite; }
.deco-float.anim-c{ animation: ornamentSwayC 13s ease-in-out infinite; }

@media (max-width: 420px){
  .deco-float{ transform: scale(.75); }
}

@media (prefers-reduced-motion: reduce){
  .footer::before, .section__title::after,
  .cover__date::after, .cover__medallion svg, .deco-float,
  .petal, .hero__names span, .countdown__num.is-ticking{ animation: none !important; }
  .reveal, .reveal--left, .reveal--right, .reveal--zoom, .reveal--flip,
  .section__title__inner, .gallery__item{ transition-duration: .01ms !important; }
  .petals-overlay{ display: none; }
}

/* === THEMED MOTION (generated) === */
.cover{
  --open-wash: radial-gradient(circle at 50% 50%, rgba(227,196,129,.75), rgba(110,15,31,.45) 45%, transparent 72%);
  --cover-exit: translateY(-102%) scale(1.05);
}

/* Gold thread draws along under each section title. */
.section__title{ position: relative; }
.section__title::before{
  content: '';
  position: absolute;
  left: 50%; bottom: -12px;
  width: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--batik-gold) 0 6px, transparent 6px 10px);
  transform: translateX(-50%);
  transition: width 1.2s .3s cubic-bezier(.22,1,.36,1);
}
.section__title.reveal.in::before{ width: 60%; }

/* The batik pattern behind the content drifts slowly, like woven cloth. */
@keyframes clothDrift{
  0%, 100%{ background-position: 0 0, 0 0, 0 0; }
  50%{ background-position: 30px 30px, -30px 30px, 0 0; }
}
.cover{ animation: clothDrift 30s ease-in-out infinite; }

/* Cards arrive with a gold rim that settles. */
@keyframes rimSettle{
  0%{ box-shadow: 0 0 0 6px rgba(201,162,75,.35); }
  100%{ box-shadow: 0 0 0 1px var(--color-line); }
}
.event-card.reveal.in, .gift-card.reveal.in{ animation: rimSettle 1.4s .25s ease-out both; }
.event-card, .gift-card, .wish-card{ transition: transform .45s cubic-bezier(.22,1,.36,1); }
.event-card:hover, .gift-card:hover{ transform: translateY(-4px) scale(1.01); }

/* Countdown numerals pulse on the beat, like a gamelan strike. */
@keyframes beatPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}
.countdown__item{ animation: beatPulse 3.6s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: -.9s; }
.countdown__item:nth-child(3){ animation-delay: -1.8s; }
.countdown__item:nth-child(4){ animation-delay: -2.7s; }

@media (prefers-reduced-motion: reduce){
  .cover, .countdown__item{ animation: none !important; }
  .section__title::before{ transition-duration: .01ms !important; }
  .event-card.reveal.in, .gift-card.reveal.in{ animation: none !important; }
}
/* === /THEMED MOTION === */

/* ==========================================================================
   READABILITY — palette corrections so no line of copy blends into the art.

   The batik gold (#b3893c) is the pattern colour, and base.css also hands it
   to the eyebrows, dates and RSVP statuses — 3.0:1 against the rendered
   paper, so those lines disappeared into the parang motif behind them. The
   names' shimmer had the same fault, peaking at --batik-gold-soft
   (#e3c481, lighter than the page). The pattern keeps its gold.

   Everything below is tuned against the page as it actually *renders*, not
   against --color-bg. The frame's tint pools, the section wash and the
   repeating pattern stack up, so the real paper behind the copy measures
   about rgb(228,206,186) — appreciably darker than the nominal background
   this palette was originally picked against.

   The palette variables themselves keep their values everywhere they fill,
   border or back something — only the text roles move, onto the --ink-*
   companions declared below.
   ========================================================================== */
:root{
  --color-text-soft: #714545;   /* the body tone, deepened to 4.5:1 on the rendered paper */
  --ink-primary: #654d22;       /* text-only companion to --color-primary */
}

.section__eyebrow,
.hero__quote-src,
.hero__amp,
.couple__ig,
.couple__divider,
.story__date,
.rundown__time,
.gift-card__bank,
.wish-card__status,
.footer__hashtag{ color: var(--ink-primary); }

.hero__names span{
  background-image: linear-gradient(100deg,
    #490a14 30%,
    #5a0c19 42%,
    var(--batik-maroon) 50%,
    #5a0c19 58%,
    #490a14 70%);
  background-size: 250% 100%;
}

.frame::before{ opacity: .32; }

/* === PERFORMANCE (iOS Safari) ===
   Safari on iPhone blanks the page (black screen) or tears while scrolling
   once too many large composited layers are animating at the same time. The
   Musim/Keagamaan templates never hit that limit, so these rules bring this
   template onto the same budget: the big storybook scenes stay still, and
   nothing that spans the whole page is animated. */
.deco-float.is-scene{ animation: none; }
.frame::before{ animation: none !important; }
/* Blurred reveals repaint every block as it scrolls in. */
.reveal, .reveal.in{ filter: none; }
/* === /PERFORMANCE === */