/* THEME: Vintage — sepia aged-paper, damask filigree, heirloom keepsake mood */
:root{
  --color-bg: #e7d9b8;
  --color-surface: #f4ecd6;
  --color-text: #4a3826;
  --color-text-soft: #8a7355;
  --color-primary: #9c7a4a;
  --color-secondary: #c9a86a;
  --color-accent: #8c4b45;
  --color-line: rgba(140,75,69,.32);
  --font-heading: 'Cinzel', serif;
  --font-script: 'Tangerine', cursive;
  --font-body: 'Special Elite', 'Courier New', monospace;
}

/* ---------- Aged paper texture (layered gradients + fine grain, no images) ---------- */
body{
  background:
    radial-gradient(circle at 50% 0%, rgba(0,0,0,.35), transparent 60%),
    #180f0a;
}

.frame,
.cover{
  background-image:
    radial-gradient(circle at 10% 8%, rgba(140,75,69,.10), transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(156,122,74,.14), transparent 42%),
    radial-gradient(circle at 8% 26%, rgba(156,122,74,.12), transparent 36%),
    radial-gradient(circle at 94% 40%, rgba(140,75,69,.11), transparent 38%),
    radial-gradient(circle at 6% 55%, rgba(140,75,69,.10), transparent 36%),
    radial-gradient(circle at 92% 68%, rgba(156,122,74,.13), transparent 38%),
    radial-gradient(circle at 15% 92%, rgba(156,122,74,.12), transparent 40%),
    radial-gradient(circle at 88% 85%, rgba(140,75,69,.10), transparent 40%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(74,56,38,.16) 100%),
    repeating-linear-gradient(115deg, rgba(74,56,38,.035) 0px, rgba(74,56,38,.035) 1px, transparent 1px, transparent 3px),
    repeating-radial-gradient(circle at 22% 34%, rgba(74,56,38,.05) 0, transparent 2px, transparent 6px),
    repeating-radial-gradient(circle at 68% 71%, rgba(74,56,38,.045) 0, transparent 2px, transparent 7px);
  background-color: var(--color-bg);
}

/* Ornate double-line frame border, like a pressed keepsake card */
.frame{
  border: 1px solid var(--color-line);
  box-shadow:
    inset 0 0 0 6px var(--color-bg),
    inset 0 0 0 7px var(--color-line),
    inset 0 0 60px rgba(74,56,38,.28),
    var(--shadow-soft);
}

/* ---------- Tiled damask fleuron watermark, carried down the whole page ---------- */
.frame::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .68;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%239c7a4a' stroke-width='1' opacity='.8'%3E%3Cpath d='M10 20 C20 5 35 5 45 20 C35 35 20 35 10 20 Z'/%3E%3Cpath d='M105 115 C115 100 130 100 140 115 C130 130 115 130 105 115 Z'/%3E%3C/g%3E%3Cg fill='%238c4b45' opacity='.6'%3E%3Ccircle cx='27' cy='20' r='2'/%3E%3Ccircle cx='122' cy='115' r='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='.8' opacity='.5'%3E%3Cpath d='M75 60 q10 -10 20 0 q-10 10 -20 0'/%3E%3Cpath d='M75 60 q-10 10 -20 0 q10 -10 20 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%238c4b45' stroke-width='.6' opacity='.4'%3E%3Cpath d='M40 14 C54 14 58 30 48 40 C40 47 29 44 27 34 C25 27 32 21 40 14 Z'/%3E%3C/g%3E%3Ccircle cx='40' cy='14' r='1.4' fill='%239c7a4a' opacity='.45'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 150px 150px, 80px 80px;
  background-position: 0 0, 40px 42px;
}

.cover::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%239c7a4a' stroke-width='1' opacity='.8'%3E%3Cpath d='M10 20 C20 5 35 5 45 20 C35 35 20 35 10 20 Z'/%3E%3Cpath d='M105 115 C115 100 130 100 140 115 C130 130 115 130 105 115 Z'/%3E%3C/g%3E%3Cg fill='%238c4b45' opacity='.6'%3E%3Ccircle cx='27' cy='20' r='2'/%3E%3Ccircle cx='122' cy='115' r='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='.8' opacity='.5'%3E%3Cpath d='M75 60 q10 -10 20 0 q-10 10 -20 0'/%3E%3Cpath d='M75 60 q-10 10 -20 0 q10 -10 20 0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
}

/* ---------- Wax seal monogram on cover ---------- */
.wax-seal{
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 6px auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-conic-gradient(from 0deg, rgba(0,0,0,.12) 0deg 6deg, transparent 6deg 12deg),
    radial-gradient(circle at 34% 30%, #a86058, var(--color-accent) 55%, #5f2b27 100%);
  box-shadow:
    0 3px 0 rgba(0,0,0,.25),
    0 6px 14px rgba(0,0,0,.35),
    inset 0 2px 3px rgba(255,255,255,.25),
    inset 0 -3px 5px rgba(0,0,0,.35);
  transform: rotate(-6deg);
}
.wax-seal span{
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 26px;
  color: #f2e2c8;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  transform: rotate(6deg);
}

.cover__eyebrow{ font-family: var(--font-body); }
.cover__date{ letter-spacing: .18em; }
.cover__guest-box{ font-family: var(--font-body); font-size: clamp(11px, 2.8vw, 13px); }

.btn-open{
  border-width: 1px;
  border-style: double;
  border-color: var(--color-accent);
  font-family: var(--font-heading);
  letter-spacing: .14em;
}

/* ---------- Sections: worn dashed rule + damask motif under titles ---------- */
.section{ border-bottom: none; }

/* Small corner scrollwork flourish, alternating tone on even sections */
.section::before, .section::after{
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M4,4 C4,24 15,39 28,43 M4,4 C21,4 32,11 32,26 M4,4 L4,13 M4,4 L13,4' fill='none' stroke='%239c7a4a' stroke-width='1.3' opacity='.6'/%3E%3Ccircle cx='4' cy='4' r='2.2' fill='%238c4b45' opacity='.75'/%3E%3C/svg%3E");
}
.section::before{ top: 14px; left: 10px; }
.section::after{ bottom: 14px; right: 10px; transform: rotate(180deg); }
.section:nth-of-type(even)::before,
.section:nth-of-type(even)::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M4,4 C4,24 15,39 28,43 M4,4 C21,4 32,11 32,26 M4,4 L4,13 M4,4 L13,4' fill='none' stroke='%23c9a86a' stroke-width='1.3' opacity='.6'/%3E%3Ccircle cx='4' cy='4' r='2.2' fill='%238c4b45' opacity='.75'/%3E%3C/svg%3E");
}

.section__eyebrow{ font-family: var(--font-body); }

.section__title::after{
  content: '';
  display:block;
  width: 90px;
  height: 12px;
  margin: 12px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 12'%3E%3Cpath d='M2,6 C20,-2 30,14 45,6 C60,-2 70,14 88,6' fill='none' stroke='%239c7a4a' stroke-width='1.2' opacity='.75'/%3E%3Ccircle cx='45' cy='6' r='2.2' fill='%238c4b45' opacity='.85'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.hero__quote{ font-family: var(--font-body); font-style: normal; }

/* ---------- Countdown: aged ticket / stamp look ---------- */
.countdown__item{
  position: relative;
  border-style: double;
  border-width: 3px;
  border-color: var(--color-line);
  box-shadow: 0 10px 22px -14px rgba(74,56,38,.55);
}
.countdown__num{ font-family: var(--font-heading); }

/* ---------- Couple photos: oval locket frame ---------- */
.couple__photo{
  border-color: var(--color-surface);
  box-shadow:
    0 0 0 2px var(--color-line),
    0 14px 30px -14px rgba(74,56,38,.6);
}

/* ---------- Event / gift / wish cards: double-line ornate border ---------- */
.event-card, .gift-card, .wish-card{
  position: relative;
  box-shadow:
    0 0 0 1px var(--color-line),
    0 0 0 4px var(--color-bg),
    0 0 0 5px var(--color-line),
    0 14px 30px -18px rgba(74,56,38,.55);
}
.event-card::before, .event-card::after{
  content:'';
  position:absolute;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M2,2 C2,12 12,20 20,20 M2,2 C10,2 14,8 8,12' fill='none' stroke='%238c4b45' stroke-width='1.3' opacity='.65'/%3E%3Ccircle cx='2' cy='2' r='1.8' fill='%238c4b45' opacity='.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}
.event-card::before{ top: 8px; left: 8px; }
.event-card::after{ bottom: 8px; right: 8px; transform: rotate(180deg); }

.event-card__name, .gift-card__num{ font-family: var(--font-heading); }

/* ---------- Story timeline: aged ledger feel ---------- */
.story__dot{ background: var(--color-surface); border-color: var(--color-accent); }
.story__title{ font-family: var(--font-heading); }
.story__date{ font-family: var(--font-body); }

/* ---------- Gallery: sepia-toned frames ---------- */
.gallery__item{
  box-shadow:
    0 0 0 3px var(--color-surface),
    0 0 0 4px var(--color-line),
    0 10px 18px -12px rgba(74,56,38,.55);
}
.gallery__item img{ filter: sepia(.35) contrast(1.02) saturate(.9); }

/* ---------- Video ---------- */
.video-box{
  box-shadow:
    0 0 0 1px var(--color-line),
    0 0 0 5px var(--color-bg),
    0 0 0 6px var(--color-line);
}
.video-box img{ filter: sepia(.3) contrast(1.05); }
.video-box__play{ background: rgba(244,236,214,.92); }

/* ---------- RSVP form: letterpress inputs ---------- */
.rsvp-form input, .rsvp-form select, .rsvp-form textarea{
  font-family: var(--font-body);
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--color-line);
  background: var(--color-surface);
}
.btn-solid{
  border-radius: 4px;
  font-family: var(--font-heading);
  letter-spacing: .1em;
}

.wish-card__name{ font-family: var(--font-heading); }

/* ---------- Footer ---------- */
.footer{
  background: linear-gradient(180deg, transparent, rgba(140,75,69,.08));
  position: relative;
}
.footer::before, .footer::after{
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M4,4 C4,24 15,39 28,43 M4,4 C21,4 32,11 32,26 M4,4 L4,13 M4,4 L13,4' fill='none' stroke='%239c7a4a' stroke-width='1.3' opacity='.6'/%3E%3Ccircle cx='4' cy='4' r='2.2' fill='%238c4b45' opacity='.75'/%3E%3C/svg%3E");
}
.footer::before{ top: 6px; left: 8%; }
.footer::after{ top: 6px; right: 8%; transform: scaleX(-1); }
.footer__credit{ font-family: var(--font-body); }

/* ---------- Nav dots / music toggle tie into palette ---------- */
.music-toggle{ border-width: 1px; border-style: double; }

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so the wash
   of aged tone flows continuously sepia -> gold -> dusty rose down the page.
   ========================================================================== */
/* 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 C4 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(156,122,74,.10)); }          /* hero -> C1 sepia */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(156,122,74,.10), rgba(201,168,106,.12)); } /* C1 -> C2 gold */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(201,168,106,.12), rgba(140,75,69,.09)); }  /* C2 -> C3 rose */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(140,75,69,.09), rgba(156,122,74,.12)); }   /* C3 -> C4 sepia */
.section:nth-of-type(5){ background: rgba(156,122,74,.12); }                                                  /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(156,122,74,.12), rgba(201,168,106,.10)); } /* C4 -> C5 gold */
.section:nth-of-type(7){ background: rgba(201,168,106,.10); }                                                 /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(201,168,106,.10), rgba(140,75,69,.08)); }  /* C5 -> C6 rose */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(140,75,69,.08), transparent); }             /* C6 -> footer */

/* ==========================================================================
   THEMED MOTION — an "old photograph developing" reveal instead of the
   generic fade, plus slow film-grain flicker and candlelight glow.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: sepia(1) blur(3px) brightness(1.08);
  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: translateY(0); filter: sepia(0) blur(0) brightness(1); }

.gallery__item.reveal{ transition-delay: calc(var(--i, 0) * 80ms); }
.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) * 130ms); }
.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; }

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

/* Slow film-grain flicker on the corner scrollwork flourishes */
@keyframes filmFlicker{
  0%, 100%{ opacity: .3; }
  20%{ opacity: .55; }
  38%{ opacity: .36; }
  55%{ opacity: .6; }
  72%{ opacity: .4; }
  88%{ opacity: .5; }
}
.section::before, .section::after, .footer::before, .footer::after{
  animation: filmFlicker 8s ease-in-out infinite;
}
.section::after{ animation-delay: -4s; }
.footer::after{ animation-delay: -3s; }

/* Gentle candlelight glow breathing on the wax seal */
@keyframes candleGlow{
  0%, 100%{
    box-shadow:
      0 3px 0 rgba(0,0,0,.25),
      0 6px 14px rgba(0,0,0,.35),
      inset 0 2px 3px rgba(255,255,255,.25),
      inset 0 -3px 5px rgba(0,0,0,.35),
      0 0 10px rgba(201,168,106,.25);
  }
  50%{
    box-shadow:
      0 3px 0 rgba(0,0,0,.25),
      0 6px 18px rgba(0,0,0,.4),
      inset 0 2px 3px rgba(255,255,255,.3),
      inset 0 -3px 5px rgba(0,0,0,.35),
      0 0 22px rgba(201,168,106,.55);
  }
}
.wax-seal{ animation: candleGlow 6.5s ease-in-out infinite; }

/* Hover polish */
.couple__photo{ transition: transform .6s ease, box-shadow .6s ease; }
.couple__person:hover .couple__photo{
  transform: scale(1.035);
  box-shadow:
    0 0 0 2px var(--color-line),
    0 18px 36px -14px rgba(74,56,38,.7),
    0 0 20px rgba(201,168,106,.35);
}

.gallery__item{ transition: transform .45s ease, box-shadow .45s ease; }
.gallery__item img{ transition: filter .5s ease; }
.gallery__item:hover{
  transform: translateY(-4px);
  box-shadow:
    0 0 0 3px var(--color-surface),
    0 0 0 4px var(--color-line),
    0 16px 28px -14px rgba(74,56,38,.65);
}
.gallery__item:hover img{ filter: sepia(.05) contrast(1.05) saturate(1.15); }

/* ==========================================================================
   FLOATING GRAPHICS — small antique butterfly & filigree-scroll ornaments
   drifting gently in each section (not just background decoration). Purely
   visual, non-interactive, drawn in the theme's own sepia/brass/rose tones.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 7px rgba(74,56,38,.28));
  will-change: transform;
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

@keyframes floatSwayA{
  0%, 100%{ transform: translateY(0) rotate(-3deg); }
  50%{ transform: translateY(-10px) rotate(4deg); }
}
@keyframes floatSwayB{
  0%, 100%{ transform: translateY(0) rotate(3deg); }
  50%{ transform: translateY(-7px) rotate(-5deg); }
}
@keyframes floatSwayC{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  33%{ transform: translate(3px,-6px) rotate(3deg); }
  66%{ transform: translate(-3px,-3px) rotate(-3deg); }
}
.deco-float.anim-a{ animation: floatSwayA 7.5s ease-in-out infinite; }
.deco-float.anim-b{ animation: floatSwayB 8.5s ease-in-out infinite; }
.deco-float.anim-c{ animation: floatSwayC 9.5s ease-in-out infinite; }

/* New ornaments: a swinging pocket-watch / key drift, a slow locket sway,
   and a brief brass/wax glint — kept within the slow ambient range. */
@keyframes floatDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-3deg) scale(1); }
  50%{ transform: translate(-6px,-14px) rotate(6deg) scale(1.05); }
}
@keyframes floatSwingE{
  0%, 100%{ transform: rotate(-7deg) translateY(0); }
  50%{ transform: rotate(7deg) translateY(-6px); }
}
@keyframes glintF{
  0%, 100%{ transform: scale(.75) rotate(0deg); opacity:.4; }
  50%{ transform: scale(1.2) rotate(70deg); opacity:1; }
}
.deco-float.anim-d{ animation: floatDriftD 12s ease-in-out infinite; }
.deco-float.anim-e{ animation: floatSwingE 10s ease-in-out infinite; transform-origin: top center; }
.deco-float.anim-f{ animation: glintF 4.2s ease-in-out infinite; }

/* ==========================================================================
   FALLING MOTES — a slow, continuous drift of tiny sepia dust flecks, aged
   paper fragments and filigree curl slivers, generated in the inline
   script. Purely decorative, sits above the background but never blocks
   interaction.
   ========================================================================== */
.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 bar ---------- */
.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;
}

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

/* ---------- Hero names shimmer — duller, more sepia-toned than a bright
   shimmer, to keep the aged-photograph mood. Targets the name spans
   directly, not the wrapping div, since background-clip:text needs the
   text on the same element and -webkit-text-fill-color would otherwise
   inherit into the "&" divider and make it invisible too. ---------- */
.hero__names span{
  background: linear-gradient(100deg, var(--color-accent) 30%, var(--color-primary) 42%, var(--color-secondary) 50%, var(--color-primary) 58%, var(--color-accent) 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; }
}

/* ==========================================================================
   VARIATIVE REVEAL DIRECTIONS — sections no longer all reveal the same way.
   ========================================================================== */
.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; }

/* ==========================================================================
   SECTION TITLE — its own signature motion: text rises up through a mask
   like a curtain lifting, independent of the generic .reveal fade used
   everywhere else, so every section announces itself a little differently.
   ========================================================================== */
.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; transition: opacity .7s ease, filter 1.5s cubic-bezier(.19,1,.22,1); }
.section__title.reveal.in{ transform: none; }
.section__title.reveal.in .section__title__inner{ transform: translateY(0); }

/* ==========================================================================
   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); }

.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); }

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

@media (prefers-reduced-motion: reduce){
  .section::before, .section::after, .footer::before, .footer::after,
  .wax-seal, .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% 45%, rgba(244,236,214,.95), rgba(156,122,74,.4) 48%, transparent 72%);
  --cover-exit: translateY(-96%) rotate(-1.6deg) scale(1.04);
}

/* Reveals settle like ink blooming into paper rather than a flat fade. */
.reveal{ filter: blur(3px) sepia(.35); transition-property: opacity, transform, filter; }
.reveal.in{ filter: blur(0) sepia(0); }

/* The paper grain keeps drifting, so the page never feels frozen. */
@keyframes grainDrift{
  0%, 100%{ background-position: 0 0; }
  50%{ background-position: 26px 34px; }
}
.frame::before{ animation: grainDrift 24s ease-in-out infinite; }

/* Story dots ink in one after another as the timeline scrolls past. */
@keyframes inkDot{
  0%{ transform: scale(.4); opacity: 0; }
  70%{ transform: scale(1.25); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}
.story__item.reveal.in .story__dot{ animation: inkDot .8s .2s both ease-out; }

/* Cards lift off the page with a soft aged shadow on hover. */
.event-card, .gift-card, .wish-card{
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.event-card:hover, .gift-card:hover{
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: 0 18px 30px -18px rgba(74,56,38,.55);
}

@media (prefers-reduced-motion: reduce){
  .frame::before{ animation: none !important; }
  .reveal{ filter: none !important; }
  .story__item.reveal.in .story__dot{ animation: none !important; }
}
/* === /THEMED MOTION === */

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

   The darkest paper of the light themes, and the one where the gap between
   nominal and rendered background is widest: #e7d9b8 on paper, but a
   vignette, a hatch and eight tint pools bring the real thing down to a
   mid tan. Against that the soft body tone sat at 3.1:1, the gold at 3.0:1
   and the aged rose at 3.2:1, and the gold shimmer band on the couple's
   names was barely separable from the page.

   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(205,180,151) — 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: #524533;   /* the body tone, deepened to 4.5:1 on the rendered paper */
  --ink-primary: #514026;       /* text-only companion to --color-primary */
  --ink-accent:  #6e3b36;       /* text-only companion to --color-accent */
}

.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); }

/* --color-accent is the theme's ink for every title, name and figure, and on
   the paper as it actually renders it measured 3.2:1. It keeps its value
   everywhere it fills, borders or backs something; only the type moves. */
.section__title,
.hero__names,
.cover__names,
.couple__name,
.event-card__name,
.story__title,
.rundown__title,
.countdown__num,
.gift-card__num,
.wish-card__name,
.footer__names{ color: var(--ink-accent); }

.hero__names span{
  background-image: linear-gradient(100deg,
    #492724 30%,
    #5a302c 42%,
    var(--ink-accent) 50%,
    #5a302c 58%,
    #492724 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; }
/* Filtered (sepia + blur) reveals repaint every block as it scrolls in. */
.reveal, .reveal.in{ filter: none; }
/* Deeper pass — the flickering scrollwork on every section, the breathing
   wax-seal shadow, the name shimmer and half the falling particles. */
.section::before, .section::after, .footer::before, .footer::after{ animation: none; opacity: .45; }
.wax-seal{ animation: none; }
.hero__names span{ animation: none; }
.deco-float, .deco-float.is-far, .petal{ filter: none !important; }
.petal:nth-child(2n){ display: none; }
/* === /PERFORMANCE === */