/* THEME: Pastel Dreamy — soft blush pink, lilac & baby blue bokeh, modern romantic */
:root{
  --color-bg: #fdfbff;
  --color-surface: #ffffff;
  --color-text: #5b4a6b;
  --color-text-soft: #a495b9;
  --color-primary: #ef9fc4;
  --color-secondary: #a7c9f0;
  --color-accent: #b090e6;
  --color-line: rgba(176, 144, 230, .22);
  --font-heading: 'Quicksand', sans-serif;
  --font-script: 'Dancing Script', cursive;
  --font-body: 'Nunito', sans-serif;
  --radius: 26px;
  --grad-dream: linear-gradient(135deg, #f7b8d6 0%, #c9aef0 50%, #a7c9f0 100%);
}

body{
  background: linear-gradient(165deg, #fdf1f7 0%, #f4eefc 45%, #eef4fc 100%);
}

/* ---------- Dreamy bokeh wash across the whole scroll length ---------- */
.frame{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 6%,  rgba(239,159,196,.30) 0%, rgba(239,159,196,.30) 8%, transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(167,201,240,.28) 0%, rgba(167,201,240,.28) 10%, transparent 30%),
    radial-gradient(circle at 8% 30%,  rgba(176,144,230,.22) 0%, rgba(176,144,230,.22) 7%, transparent 24%),
    radial-gradient(circle at 92% 42%, rgba(239,159,196,.22) 0%, rgba(239,159,196,.22) 9%, transparent 28%),
    radial-gradient(circle at 14% 56%, rgba(167,201,240,.26) 0%, rgba(167,201,240,.26) 8%, transparent 26%),
    radial-gradient(circle at 90% 68%, rgba(176,144,230,.24) 0%, rgba(176,144,230,.24) 9%, transparent 27%),
    radial-gradient(circle at 10% 82%, rgba(239,159,196,.24) 0%, rgba(239,159,196,.24) 8%, transparent 25%),
    radial-gradient(circle at 88% 92%, rgba(167,201,240,.24) 0%, rgba(167,201,240,.24) 9%, transparent 27%),
    var(--color-bg);
}
.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='140' height='140'%3E%3Cg fill='none' stroke='%23ef9fc4' stroke-width='1.3' opacity='.8'%3E%3Cpath d='M20 26 C15 21 12 17.5 12 14.5 C12 11.8 14.2 10 16.5 10 C18.2 10 19.4 11 20 12.6 C20.6 11 21.8 10 23.5 10 C25.8 10 28 11.8 28 14.5 C28 17.5 25 21 20 26 Z'/%3E%3C/g%3E%3Cg fill='%23a7c9f0' opacity='.7'%3E%3Ccircle cx='95' cy='28' r='2.2'/%3E%3Ccircle cx='104' cy='30' r='2.2'/%3E%3Ccircle cx='99' cy='37' r='2.2'/%3E%3C/g%3E%3Cg stroke='%23b090e6' stroke-width='1.3' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M38 92 L38 102 M33 97 L43 97 M31 85 L37 91 M45 85 L39 91'/%3E%3C/g%3E%3Cg fill='%23ef9fc4' opacity='.5'%3E%3Ccircle cx='112' cy='108' r='1.8'/%3E%3Ccircle cx='120' cy='114' r='1.8'/%3E%3Ccircle cx='105' cy='116' r='1.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='%23c9b6ea' opacity='.45'%3E%3Ccircle cx='12' cy='14' r='2'/%3E%3Ccircle cx='52' cy='8' r='1.4'/%3E%3Ccircle cx='34' cy='52' r='1.7'/%3E%3Ccircle cx='58' cy='44' r='1.2'/%3E%3C/g%3E%3Cg fill='%23a7c9f0' opacity='.4'%3E%3Ccircle cx='24' cy='36' r='1.3'/%3E%3Ccircle cx='6' cy='58' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 140px 140px, 70px 70px;
  background-position: 0 0, 35px 18px;
}

/* ---------- Cover ---------- */
.cover{
  background:
    radial-gradient(circle at 18% 12%, rgba(239,159,196,.28), transparent 42%),
    radial-gradient(circle at 82% 20%, rgba(167,201,240,.28), transparent 44%),
    radial-gradient(circle at 20% 85%, rgba(176,144,230,.24), transparent 42%),
    radial-gradient(circle at 84% 88%, rgba(239,159,196,.22), transparent 42%),
    var(--color-bg);
  overflow: hidden;
}
.cover::before,
.cover::after{
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .55;
  pointer-events: none;
  animation: floatBlob 9s ease-in-out infinite;
}
.cover::before{
  top: -60px; left: -70px;
  background: radial-gradient(circle, #f7b8d6, transparent 70%);
}
.cover::after{
  bottom: -70px; right: -60px;
  background: radial-gradient(circle, #a7c9f0, transparent 70%);
  animation-delay: -4.5s;
}
@keyframes floatBlob{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  50%{ transform: translate(14px, -18px) scale(1.08); }
}

.cover__eyebrow{ position: relative; z-index: 2; }
.cover__names{
  position: relative; z-index: 2;
  background: var(--grad-dream);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(176,144,230,.25));
}
.cover__date, .cover__guest-box, .btn-open, .cover__deco-top, .cover__deco-bottom{ position: relative; z-index: 2; }

.btn-open{
  border: none;
  background: var(--grad-dream);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(176,144,230,.55);
}
.btn-open:hover{ background: var(--grad-dream); opacity: .92; }
@keyframes pulse-btn{
  0%,100%{ box-shadow: 0 0 0 0 rgba(176,144,230,.35); }
  50%{ box-shadow: 0 0 0 14px rgba(176,144,230,0); }
}

/* ---------- Section wash + heart accent ---------- */
.section{ border-bottom: none; }
/* Per-section wash is defined in the SECTION-TO-SECTION COLOR GRADATION block below. */

.section__title{
  position: relative;
}
.section__title::after{
  content: '';
  display: block;
  width: 20px; height: 18px;
  margin: 12px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M16 26 C6 19 1 13 1 8 C1 3.5 4.5 1 8.2 1 C11 1 13.7 2.7 16 6.2 C18.3 2.7 21 1 23.8 1 C27.5 1 31 3.5 31 8 C31 13 26 19 16 26 Z' fill='none' stroke='%23b090e6' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .8;
}

/* ---------- Section corner bokeh accents (keeps the whole scroll dreamy, not just the cover) ---------- */
.section::before, .section::after{
  content: '';
  position: absolute;
  width: 96px;
  height: 96px;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(6px);
}
.section::before{
  top: 18px; left: -22px;
  background: radial-gradient(circle, rgba(239,159,196,.22), transparent 70%);
}
.section::after{
  bottom: 18px; right: -22px;
  background: radial-gradient(circle, rgba(167,201,240,.22), transparent 70%);
}
.section:nth-of-type(even)::before{
  background: radial-gradient(circle, rgba(176,144,230,.2), transparent 70%);
}
.section:nth-of-type(even)::after{
  background: radial-gradient(circle, rgba(239,159,196,.18), transparent 70%);
}

/* ---------- Gradient-border cards for a plush, dreamy feel ---------- */
.event-card, .gift-card, .wish-card, .countdown__item{
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              var(--grad-dream) border-box;
  box-shadow: 0 16px 32px -22px rgba(176,144,230,.5);
}
.gift-card, .wish-card{ border-radius: 20px; }
.countdown__item{ border-radius: 18px; }

.event-card__map{ border-radius: 16px; filter: saturate(.35) contrast(1.02) hue-rotate(-8deg); }

/* ---------- Couple photos: soft layered pastel ring ---------- */
.couple__photo{
  border-color: #fff;
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 9px rgba(239,159,196,.45),
    0 0 0 13px rgba(167,201,240,.3),
    0 18px 36px -16px rgba(176,144,230,.5);
}
.couple__divider{ color: var(--color-accent); }

/* ---------- Gallery ---------- */
.gallery__item{
  border-radius: 18px;
  box-shadow: 0 10px 22px -14px rgba(176,144,230,.5);
}

/* ---------- Video ---------- */
.video-box{
  border-radius: 28px;
  box-shadow: 0 18px 40px -20px rgba(176,144,230,.55);
}
.video-box__play{
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 6px rgba(239,159,196,.25);
}

/* ---------- Buttons ---------- */
.btn-outline{
  border-radius: 999px;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
}
.btn-outline:hover{ background: var(--grad-dream); color: #fff; border-color: transparent; }

.btn-solid{
  background: var(--grad-dream);
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(176,144,230,.55);
}
.btn-solid:hover{ opacity: .92; }

.btn-copy{
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 999px;
}
.btn-copy.copied{ background: var(--grad-dream); color: #fff; border-color: transparent; }

/* ---------- Form fields: soft rounded plush inputs ---------- */
.rsvp-form input, .rsvp-form select, .rsvp-form textarea{
  border-radius: 16px;
  border: 1.5px solid var(--color-line);
  background: rgba(255,255,255,.85);
}
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus{
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(176,144,230,.18);
}

/* ---------- Story timeline dots ---------- */
.story__dot{
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 4px rgba(167,201,240,.2);
}

/* ---------- Nav dots ---------- */
.navdots a{ background: rgba(176,144,230,.25); }
.navdots a.active{ background: var(--grad-dream); transform: scale(1.4); }

/* ---------- Music toggle ---------- */
.music-toggle{
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  box-shadow: 0 8px 20px -8px rgba(176,144,230,.4);
}

/* ---------- Footer ---------- */
.footer{
  background: linear-gradient(180deg, transparent, rgba(167,201,240,.09));
  position: relative;
}
.footer::before, .footer::after{
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(8px);
}
.footer::before{
  top: -20px; left: 4%;
  background: radial-gradient(circle, rgba(176,144,230,.22), transparent 70%);
}
.footer::after{
  top: 6%; right: 4%;
  background: radial-gradient(circle, rgba(239,159,196,.2), transparent 70%);
}
.footer__names{
  background: var(--grad-dream);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Small delicate dot accents scattered through content ---------- */
.hero{ position: relative; }
.hero::before{
  content: '';
  position: absolute;
  top: 18px; left: 50%;
  width: 120px; height: 120px;
  margin-left: -60px;
  background: radial-gradient(circle, rgba(247,184,214,.35), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.hero__quote, .hero__quote-src, .hero__names, .countdown{ position: relative; z-index: 1; }

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so the wash
   drifts blush pink -> lilac -> baby blue -> blush -> lilac -> baby blue,
   a soft pastel rainbow flowing down the whole 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 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(239,159,196,.12)); }          /* hero -> C1 pink */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(239,159,196,.12), rgba(176,144,230,.13)); } /* C1 -> C2 lilac */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(176,144,230,.13), rgba(167,201,240,.12)); } /* C2 -> C3 blue */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(167,201,240,.12), rgba(239,159,196,.11)); } /* C3 -> C4 pink */
.section:nth-of-type(5){ background: rgba(239,159,196,.11); }                                                 /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(239,159,196,.11), rgba(176,144,230,.13)); } /* C4 -> C5 lilac */
.section:nth-of-type(7){ background: rgba(176,144,230,.13); }                                                 /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(176,144,230,.13), rgba(167,201,240,.12)); } /* C5 -> C6 blue */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(167,201,240,.12), transparent); }           /* C6 -> footer */

/* ==========================================================================
   THEMED MOTION — a soft "floating bubble" reveal instead of the generic
   fade, plus gentle continuous drift/twinkle on the dreamy bokeh & heart
   decorations already used across this theme.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: scale(.85) translateY(24px);
  transition: opacity 1.5s cubic-bezier(.22,1,.36,1), transform 1.5s cubic-bezier(.22,1,.36,1);
}
.reveal.in{ opacity: 1; transform: scale(1) translateY(0); }

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

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

@keyframes dreamyFloat{
  0%, 100%{ transform: translateY(0) scale(1); opacity: 1; }
  50%{ transform: translateY(-12px) scale(1.06); opacity: .8; }
}
.section::before, .section::after{ animation: dreamyFloat 7s ease-in-out infinite; }
.section::after{ animation-delay: -3.5s; }
.footer::before, .footer::after{ animation: dreamyFloat 7s ease-in-out infinite; }
.footer::after{ animation-delay: -3.5s; }

@keyframes heartTwinkle{
  0%, 100%{ transform: scale(1); opacity: .8; }
  50%{ transform: scale(1.18); opacity: 1; }
}
.section__title::after{ animation: heartTwinkle 5.5s ease-in-out infinite; }

.couple__photo{ transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.couple__person:hover .couple__photo{ transform: scale(1.06) translateY(-4px); }

.gallery__item{ transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease; }
.gallery__item:hover{ transform: scale(1.05) translateY(-6px); box-shadow: 0 18px 34px -14px rgba(176,144,230,.55); }

/* ==========================================================================
   FLOATING GRAPHICS — real sparkle/heart/balloon/bubble sprites gently
   bobbing in each section (not just background bokeh). Purely visual,
   non-interactive.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(176,144,230,.28));
  will-change: transform;
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

@keyframes floatSwayA{
  0%, 100%{ transform: translateY(0) scale(1) rotate(-4deg); }
  50%{ transform: translateY(-18px) scale(1.08) rotate(5deg); }
}
@keyframes floatSwayB{
  0%, 100%{ transform: translateY(0) rotate(4deg); }
  50%{ transform: translateY(-13px) rotate(-6deg); }
}
@keyframes floatSwayC{
  0%, 100%{ transform: translate(0,0) rotate(0deg) scale(1); }
  33%{ transform: translate(6px,-10px) rotate(6deg) scale(1.05); }
  66%{ transform: translate(-6px,-5px) rotate(-6deg) scale(.97); }
}
.deco-float.anim-a{ animation: floatSwayA 9.5s ease-in-out infinite; }
.deco-float.anim-b{ animation: floatSwayB 11s ease-in-out infinite; }
.deco-float.anim-c{ animation: floatSwayC 12.5s ease-in-out infinite; }

/* ---------- New pastel motifs: cloud puff (slow drift), bokeh cluster
   (gentle pulse), tiny heart confetti (twinkle) ---------- */
@keyframes floatDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-3deg) scale(1); }
  50%{ transform: translate(-10px,-16px) rotate(6deg) scale(1.06); }
}
@keyframes bokehPulse{
  0%, 100%{ transform: scale(1) translateY(0); opacity: .75; }
  50%{ transform: scale(1.12) translateY(-8px); opacity: 1; }
}
@keyframes confettiTwinkle{
  0%, 100%{ transform: scale(.75) rotate(-6deg); opacity: .55; }
  50%{ transform: scale(1.2) rotate(6deg); opacity: 1; }
}
.deco-float.anim-d{ animation: floatDriftD 13s ease-in-out infinite; }
.deco-float.anim-e{ animation: bokehPulse 10s ease-in-out infinite; }
.deco-float.anim-f{ animation: confettiTwinkle 4.5s ease-in-out infinite; }

/* ==========================================================================
   FALLING BOKEH & HEART CONFETTI — a continuous, slow-drifting shower over
   the whole viewport. 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 (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; }
.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,
  .section__title::after, .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(247,184,214,.8), rgba(167,201,240,.5) 40%, rgba(176,144,230,.25) 60%, transparent 76%);
  --cover-exit: translateY(-70%) scale(1.12);
}
.cover.is-closing{ filter: blur(12px); }

/* The dreamy gradient behind everything keeps drifting through its hues. */
@keyframes hueDrift{
  0%, 100%{ filter: hue-rotate(0deg); }
  50%{ filter: hue-rotate(14deg); }
}
.frame::before{ animation: hueDrift 26s ease-in-out infinite; }

/* Cards float rather than slide, with a soft coloured glow on arrival. */
@keyframes floatIn{
  from{ opacity: 0; transform: translateY(38px) scale(.94); filter: blur(6px); }
  to{ opacity: 1; transform: none; filter: blur(0); }
}
.event-card.reveal.in, .gift-card.reveal.in{ animation: floatIn 1.1s both cubic-bezier(.22,1,.36,1); }
.event-card, .gift-card, .wish-card{ transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.event-card:hover, .gift-card:hover{
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 22px 34px -20px rgba(176,144,230,.55);
}

/* The countdown boxes bob gently, like bubbles. */
@keyframes bubbleBob{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.03); }
}
.countdown__item{ animation: bubbleBob 5s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: -1.25s; }
.countdown__item:nth-child(3){ animation-delay: -2.5s; }
.countdown__item:nth-child(4){ animation-delay: -3.75s; }

/* Section titles pick up the dream gradient as they arrive. */
.section__title.reveal.in .section__title__inner{
  background: var(--grad-dream);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 8s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .frame::before, .countdown__item, .section__title.reveal.in .section__title__inner{ animation: none !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.

   This was the least readable theme of the ten, and for two reasons at once.

   First the ink: every pastel in the palette was also doing duty as a text
   colour. Against the nominal paper the lilac accent that fills the section
   titles and the couple's names measured 2.6:1, the rose 2.0:1, the soft
   body tone 2.7:1, and --grad-dream (the pink/lilac/blue sweep behind the
   cover and footer names) topped out at 1.7:1 — the names were barely a
   tint on the page. White button labels on that same sweep measured 1.6:1.

   Second the paper: the page never actually renders at #fdfbff. The bokeh
   pools on .frame, the per-section wash and the heart pattern stack up to
   roughly rgb(234,212,233) behind the copy — a saturated lavender, far from
   the near-white the palette was picked against. Tuning the ink to *that*
   would have meant a slate-violet accent and a mauve rose, which is not
   this theme any more.

   So both move: the wash is halved so the paper stays the airy near-white
   the design intends, and the ink deepens only as far as it needs to on the
   lighter paper. The pastels themselves are untouched wherever they
   decorate — card borders, nav dots, the bokeh, --grad-dream itself.
   ========================================================================== */

/* Paper: measured layer by layer, the whole tint comes from the eight bokeh
   pools on .frame — flattening them alone takes the paper from
   rgb(230,210,232) back to rgb(253,251,255), while the heart pattern and the
   per-section wash together move it by about one value. So the pools are
   what gets eased: same eight orbs in the same places, at roughly half
   strength, which keeps the dreamy bokeh without staining the page. */
.frame{
  background:
    radial-gradient(circle at 12% 6%,  rgba(239,159,196,.15) 0%, rgba(239,159,196,.15) 8%, transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(167,201,240,.14) 0%, rgba(167,201,240,.14) 10%, transparent 30%),
    radial-gradient(circle at 8% 30%,  rgba(176,144,230,.11) 0%, rgba(176,144,230,.11) 7%, transparent 24%),
    radial-gradient(circle at 92% 42%, rgba(239,159,196,.11) 0%, rgba(239,159,196,.11) 9%, transparent 28%),
    radial-gradient(circle at 14% 56%, rgba(167,201,240,.13) 0%, rgba(167,201,240,.13) 8%, transparent 26%),
    radial-gradient(circle at 90% 68%, rgba(176,144,230,.12) 0%, rgba(176,144,230,.12) 9%, transparent 27%),
    radial-gradient(circle at 10% 82%, rgba(239,159,196,.12) 0%, rgba(239,159,196,.12) 8%, transparent 25%),
    radial-gradient(circle at 88% 92%, rgba(167,201,240,.12) 0%, rgba(167,201,240,.12) 9%, transparent 27%),
    var(--color-bg);
}
.frame::before{ opacity: .32; }

/* The per-section wash is the smaller half of the same story; halved too,
   the paper settles at about rgb(241,233,245) and the gradation from blush
   to lilac to baby blue still reads as it drifts down the page. */
.section:nth-of-type(1){ background: linear-gradient(180deg, transparent, rgba(239,159,196,.06)); }
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(239,159,196,.06), rgba(176,144,230,.065)); }
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(176,144,230,.065), rgba(167,201,240,.06)); }
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(167,201,240,.06), rgba(239,159,196,.055)); }
.section:nth-of-type(5){ background: rgba(239,159,196,.055); }                                                /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(239,159,196,.055), rgba(176,144,230,.065)); }
.section:nth-of-type(7){ background: rgba(176,144,230,.065); }
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(176,144,230,.065), rgba(167,201,240,.06)); }
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(167,201,240,.06), transparent); }

/* Ink: deepened versions of the same three hues, so the theme still reads
   pink-lilac-blue rather than turning grey. */
:root{
  --color-text-soft: #665c78;   /* was #a495b9 */
  --ink-primary: #9c4c70;       /* was #ef9fc4 as copy */
  --ink-accent:  #7d51bb;       /* was #b090e6 as copy */

  /* The dream sweep, deepened for the type and the buttons it fills. The
     decorative --grad-dream above keeps its original pastel stops. */
  --grad-dream-ink: linear-gradient(135deg, #b85c86 0%, #7d51bb 50%, #3a6aa5 100%);
  --grad-dream-btn: linear-gradient(135deg, #9c4c70 0%, #7d51bb 50%, #3a6aa5 100%);
}

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

.section__title,
.hero__names,
.couple__name,
.event-card__name,
.story__title,
.rundown__title,
.countdown__num,
.gift-card__num,
.wish-card__name,
.cover__date{ color: var(--ink-accent); }

.cover__names,
.footer__names,
.section__title.reveal.in .section__title__inner{
  background: var(--grad-dream-ink);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The names' shimmer sweeps between the readable accent and two deeper
   shades of it, so the band that crosses each letter can only ever get
   darker than 4.5:1, never lighter. */
.hero__names span{
  background-image: linear-gradient(100deg,
    #46395b 30%, #574771 42%, var(--ink-accent) 50%, #574771 58%, #46395b 70%);
  background-size: 250% 100%;
}

/* White labels on the pastel sweep measured 1.6–2.0:1 — "Buka Undangan" and
   "Kirim Ucapan" were close to invisible on their own buttons. */
.btn-open,
.btn-open:hover,
.btn-solid,
.btn-outline:hover,
.btn-copy.copied{ background: var(--grad-dream-btn); }

.btn-outline,
.btn-copy{ border-color: var(--ink-accent); color: var(--ink-accent); }

/* === 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; }
/* Page-sized hue-rotate filter and heavy blurred blobs are the costliest layers here. */
.frame::before{ filter: none !important; }
.cover::before, .cover::after{ animation: none; }
.cover.is-closing{ filter: none; }
@keyframes floatInLite{
  from{ opacity: 0; transform: translateY(38px) scale(.94); }
  to{ opacity: 1; transform: none; }
}
.event-card.reveal.in, .gift-card.reveal.in{ animation-name: floatInLite; }
/* === /PERFORMANCE === */