/* THEME: Tropical Garden — lush palm & monstera greens, breezy resort-elegant */
:root{
  --color-bg: #f8f9f2;
  --color-surface: #ffffff;
  --color-text: #20342a;
  --color-text-soft: #62786a;
  --color-primary: #5b8a68;
  --color-secondary: #bcd8ae;
  --color-accent: #2c4a34;
  --color-line: rgba(44,74,52,.16);
  --font-heading: 'Cormorant Garamond', serif;
  --font-script: 'Alex Brush', cursive;
  --font-body: 'Jost', sans-serif;
  --radius: 20px;
}

body{ background: #132218; }

.frame{
  background:
    radial-gradient(circle at 6% 4%, rgba(91,138,104,.14), transparent 40%),
    radial-gradient(circle at 95% 14%, rgba(188,216,174,.16), transparent 38%),
    radial-gradient(circle at 4% 30%, rgba(188,216,174,.13), transparent 36%),
    radial-gradient(circle at 96% 46%, rgba(91,138,104,.15), transparent 38%),
    radial-gradient(circle at 5% 62%, rgba(91,138,104,.13), transparent 36%),
    radial-gradient(circle at 94% 76%, rgba(188,216,174,.17), transparent 38%),
    radial-gradient(circle at 8% 90%, rgba(188,216,174,.14), transparent 36%),
    radial-gradient(circle at 92% 98%, rgba(91,138,104,.15), transparent 38%),
    var(--color-bg);
}
.frame::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .65;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%235b8a68' stroke-width='1.1'%3E%3Cpath d='M25 125 Q35 90 25 55 Q15 90 25 125'/%3E%3Cpath d='M25 100 L34 94 M25 85 L34 79 M25 70 L34 64'/%3E%3C/g%3E%3Cg fill='none' stroke='%232c4a34' stroke-width='1'%3E%3Cpath d='M115 75 Q123 48 115 20 Q107 48 115 75'/%3E%3Cpath d='M115 55 L122 50 M115 42 L122 37'/%3E%3C/g%3E%3Cg fill='%23bcd8ae'%3E%3Ccircle cx='115' cy='95' r='2.6'/%3E%3Ccircle cx='60' cy='25' r='2'/%3E%3Ccircle cx='135' cy='130' r='2.2'/%3E%3Ccircle cx='10' cy='40' 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='none' stroke='%23bcd8ae' stroke-width='.7' opacity='.7'%3E%3Cpath d='M35 8 Q42 30 35 52 Q28 30 35 8'/%3E%3C/g%3E%3Ccircle cx='35' cy='6' r='1.4' fill='%235b8a68'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 150px 150px, 70px 70px;
  background-position: 0 0, 35px 18px;
}

.cover{
  background:
    radial-gradient(circle at 12% 10%, rgba(91,138,104,.14), transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(188,216,174,.22), transparent 48%),
    var(--color-bg);
}
.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='%235b8a68' stroke-width='1.1'%3E%3Cpath d='M25 125 Q35 90 25 55 Q15 90 25 125'/%3E%3Cpath d='M25 100 L34 94 M25 85 L34 79 M25 70 L34 64'/%3E%3C/g%3E%3Cg fill='none' stroke='%232c4a34' stroke-width='1'%3E%3Cpath d='M115 75 Q123 48 115 20 Q107 48 115 75'/%3E%3Cpath d='M115 55 L122 50 M115 42 L122 37'/%3E%3C/g%3E%3Cg fill='%23bcd8ae'%3E%3Ccircle cx='115' cy='95' r='2.6'/%3E%3Ccircle cx='60' cy='25' r='2'/%3E%3Ccircle cx='135' cy='130' r='2.2'/%3E%3Ccircle cx='10' cy='40' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
}

.cover__eyebrow{ font-family: var(--font-body); font-weight: 400; }

.btn-open{
  border-color: var(--color-accent);
  letter-spacing: .12em;
}
.btn-open span{ display:inline-block; transform: translateY(1px); }

/* ---------- Sections: airy leafy wash + corner flourish ---------- */
.section{
  padding: 84px 30px;
  overflow: hidden;
  border-bottom: none;
}
.section::before, .section::after{
  content:'';
  position:absolute;
  z-index: -1;
  pointer-events:none;
}
.section::before{
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(91,138,104,.14), transparent 70%);
}
.section::after{
  bottom: -18px; left: -22px;
  width: 86px; height: 86px;
  background: rgba(188,216,174,.18);
  border-radius: 0% 60% 0% 60%;
  transform: rotate(25deg);
}
.section:nth-of-type(even)::before{
  background: radial-gradient(circle, rgba(188,216,174,.16), transparent 70%);
}
.section:nth-of-type(even)::after{
  background: rgba(91,138,104,.15);
}

.section__eyebrow{ font-weight: 500; }
.section__title{ font-weight: 600; }
.section__title::after{
  content: '';
  display:block;
  width: 15px; height: 15px;
  margin: 14px auto 0;
  background: var(--color-primary);
  border-radius: 0% 60% 0% 60%;
  transform: rotate(45deg);
  opacity: .85;
}

/* ---------- Hero ---------- */
.hero__quote{ font-style: italic; font-weight: 300; }
.hero__names{ letter-spacing: .01em; }

.countdown__item{
  box-shadow: 0 14px 30px -20px rgba(44,74,52,.4);
  border-radius: 16px;
}

/* ---------- Couple ---------- */
.couple__photo{
  border-color: #fff;
  box-shadow: 0 0 0 1px var(--color-secondary), 0 16px 34px -16px rgba(44,74,52,.5);
}
.couple__divider{ color: var(--color-primary); }

/* ---------- Events / Gift cards ---------- */
.event-card, .gift-card, .wish-card, .countdown__item{
  box-shadow: 0 14px 32px -20px rgba(44,74,52,.35);
}
.event-card{ border-radius: var(--radius); }
.event-card__name{ font-weight: 600; }

/* ---------- Story: leaf-shaped dots + dashed vine line ---------- */
.story::before{
  background: repeating-linear-gradient(
    to bottom,
    var(--color-line) 0, var(--color-line) 6px,
    transparent 6px, transparent 12px
  );
  width: 2px;
}
.story__dot{
  border-radius: 0% 60% 0% 60%;
  transform: rotate(45deg);
  border-color: var(--color-primary);
  background: var(--color-bg);
}
.story__title{ font-weight: 600; }

/* ---------- Gallery ---------- */
.gallery__item{
  box-shadow: 0 10px 22px -14px rgba(44,74,52,.45);
  border-radius: 12px;
}
.gallery__item::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(44,74,52,.35));
  opacity:0;
  transition: opacity .35s ease;
}
.gallery__item:hover::after{ opacity:1; }

/* ---------- Video ---------- */
.video-box{ border: 1px solid var(--color-line); }
.video-box__play{ color: var(--color-accent); }

/* ---------- Gift ---------- */
.gift-card{ border-radius: 16px; }
.gift-card__num{ font-weight: 600; }

/* ---------- Footer ---------- */
.footer{
  background:
    radial-gradient(circle at 8% 15%, rgba(91,138,104,.13), transparent 42%),
    radial-gradient(circle at 92% 85%, rgba(188,216,174,.18), transparent 46%),
    linear-gradient(180deg, transparent, rgba(44,74,52,.09));
  position: relative;
}
.footer::before{
  content:'';
  position:absolute; top:24px; left:50%; transform:translateX(-50%) rotate(45deg);
  width: 18px; height: 18px;
  background: var(--color-primary);
  border-radius: 0% 60% 0% 60%;
  opacity:.8;
}
.footer::after{
  content:'';
  position:absolute;
  z-index: -1;
  pointer-events:none;
  bottom: 16px; right: 6%;
  width: 74px; height: 74px;
  background: rgba(91,138,104,.16);
  border-radius: 0% 60% 0% 60%;
  transform: rotate(-15deg);
}
.footer__names{ margin-top: 20px; }
.footer__hashtag{ letter-spacing: .1em; }

/* ---------- Nav dots / music toggle tint ---------- */
.navdots a.active{ background: var(--color-primary); }
.music-toggle{ box-shadow: 0 8px 20px rgba(19,34,24,.25); }

.cover__names{ font-size: clamp(35px, min(14vw, 10.8vh), 76px); }

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so a soft
   botanical wash flows continuously moss -> mint -> canopy down the page,
   cycling through the theme's three greens (primary, secondary, accent).
   ========================================================================== */
/* 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(91,138,104,.10)); }         /* hero -> C1 (primary) */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(91,138,104,.10), rgba(188,216,174,.12)); } /* C1 -> C2 (secondary) */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(188,216,174,.12), rgba(44,74,52,.08)); }   /* C2 -> C3 (accent) */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(44,74,52,.08), rgba(91,138,104,.11)); }    /* C3 -> C4 (primary) */
.section:nth-of-type(5){ background: rgba(91,138,104,.11); }                                                  /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(91,138,104,.11), rgba(188,216,174,.13)); } /* C4 -> C5 (secondary) */
.section:nth-of-type(7){ background: rgba(188,216,174,.13); }                                                 /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(188,216,174,.13), rgba(44,74,52,.09)); }   /* C5 -> C6 (accent) */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(44,74,52,.09), transparent); }              /* C6 -> footer */

/* ==========================================================================
   THEMED MOTION — a "leaf unfurling" reveal instead of the generic fade,
   plus gentle continuous sway/glow on the decorative leaf shapes, evoking
   a breeze moving through foliage and dappled light filtering through it.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: scale(.84) rotate(-9deg) skewX(5deg);
  transform-origin: bottom left;
  transition: opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1);
}
.reveal.in{ opacity: 1; transform: scale(1) rotate(0) skewX(0); }

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

/* ==========================================================================
   VARIATIVE REVEAL DIRECTIONS — layered on top of the leafy scale/rotate/
   skew .reveal above, adding a directional slide so sections don't all
   arrive from the same corner.
   ========================================================================== */
.reveal--left{ transform: scale(.9) translateX(-38px) rotate(-6deg); }
.reveal--left.in{ transform: scale(1) translateX(0) rotate(0); }
.reveal--right{ transform: scale(.9) translateX(38px) rotate(6deg); }
.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); }

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

.story__item:nth-child(odd).reveal{ transform: scale(.92) translateX(-24px) rotate(-3deg); }
.story__item:nth-child(odd).reveal.in{ transform: scale(1) translateX(0) rotate(0); }
.story__item:nth-child(even).reveal{ transform: scale(.92) translateX(24px) rotate(3deg); }
.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 leaf unfurling, independent of the generic .reveal used elsewhere.
   ========================================================================== */
.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); }

/* ---------- Hero names shimmer — a slow leafy-gold sheen across the
   couple's names. Targets the 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(--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; }
}
.hero__names span.reveal{ display: inline-block; }

/* ==========================================================================
   FALLING LEAF & PETAL FRAGMENTS — a continuous, slow shower drifting down
   the whole viewport: monstera-leaf flecks, hibiscus petals, palm wisps.
   ========================================================================== */
.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(--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; }

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

/* new drift/twinkle keyframes for the additional monstera/hibiscus/palm
   deco-float shapes, kept in the same slow, breezy register as anim-a/b/c */
@keyframes floatDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-4deg) scale(1); }
  50%{ transform: translate(-8px,-18px) rotate(10deg) scale(1.08); }
}
@keyframes flutterSwayE{
  0%, 100%{ transform: translate(0,0) rotate(-8deg); }
  25%{ transform: translate(9px,-8px) rotate(6deg); }
  50%{ transform: translate(3px,-19px) rotate(-10deg); }
  75%{ transform: translate(-9px,-9px) rotate(7deg); }
}
@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: floatDriftD 13s ease-in-out infinite; }
.deco-float.anim-e{ animation: flutterSwayE 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; }

@keyframes dappledGlow{
  0%, 100%{ opacity: .75; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.1); }
}
.section::before{ animation: dappledGlow 8s ease-in-out infinite; }

@keyframes leafSway{
  0%, 100%{ transform: rotate(25deg) translate(0,0); }
  50%{ transform: rotate(32deg) translate(5px,-6px); }
}
.section::after{ animation: leafSway 9s ease-in-out infinite; }

@keyframes leafSwayFooter{
  0%, 100%{ transform: rotate(-15deg) translate(0,0); }
  50%{ transform: rotate(-22deg) translate(-5px,6px); }
}
.footer::after{ animation: leafSwayFooter 9s ease-in-out infinite; animation-delay: -4s; }

@keyframes leafMarkerPulse{
  0%, 100%{ transform: translateX(-50%) rotate(45deg) scale(1); opacity: .8; }
  50%{ transform: translateX(-50%) rotate(45deg) scale(1.2); opacity: 1; }
}
.footer::before{ animation: leafMarkerPulse 5s ease-in-out infinite; }

@keyframes titleLeafSway{
  0%, 100%{ transform: rotate(45deg) scale(1); }
  50%{ transform: rotate(52deg) scale(1.15); }
}
.section__title::after{ animation: titleLeafSway 4.5s ease-in-out infinite; }

.couple__photo{ transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.couple__person:hover .couple__photo{
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 0 0 1px var(--color-secondary), 0 22px 40px -16px rgba(44,74,52,.55);
}

.gallery__item{ transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.gallery__item:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 34px -16px rgba(44,74,52,.5);
}

/* ==========================================================================
   FLOATING GRAPHICS — real monstera/palm leaf sprites gently swaying in
   each section, as if stirred by a light garden breeze. Purely visual,
   non-interactive.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(44,74,52,.25));
  will-change: transform;
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

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

@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% 55%, rgba(188,216,174,.85), rgba(91,138,104,.35) 46%, transparent 72%);
  --cover-exit: translateY(-100%) scale(1.08);
}

/* Wind gusts: the leaf sprites lean together every few seconds. */
@keyframes windGust{
  0%, 62%, 100%{ transform: rotate(0) translateX(0); }
  70%{ transform: rotate(-9deg) translateX(-6px); }
  80%{ transform: rotate(6deg) translateX(4px); }
  90%{ transform: rotate(-3deg) translateX(-2px); }
}
.deco-float.anim-c{ transform-origin: 50% 90%; animation-name: windGust; animation-duration: 11s; }

/* The botanical pattern behind the content drifts like foliage in a breeze. */
@keyframes foliageDrift{
  0%, 100%{ background-position: 0 0; }
  50%{ background-position: 40px 26px; }
}
.frame::before{ animation: foliageDrift 22s ease-in-out infinite; }

/* Photos and cards grow like a leaf unfurling. */
.event-card.reveal, .gift-card.reveal{ transform: scale(.94) rotate(-1.5deg); transform-origin: left center; }
.event-card.reveal.in, .gift-card.reveal.in{ transform: none; }
.event-card:hover, .gift-card:hover{ transform: translateY(-4px) scale(1.01); }
.event-card, .gift-card{ transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }

/* The countdown boxes bob like leaves on water. */
@keyframes leafBob{
  0%, 100%{ transform: translateY(0) rotate(-1deg); }
  50%{ transform: translateY(-5px) rotate(1deg); }
}
.countdown__item{ animation: leafBob 4.8s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: -1.1s; }
.countdown__item:nth-child(3){ animation-delay: -2.2s; }
.countdown__item:nth-child(4){ animation-delay: -3.3s; }

@media (prefers-reduced-motion: reduce){
  .deco-float.anim-c, .frame::before, .countdown__item{ animation: none !important; }
}
/* === /THEMED MOTION === */

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

   The mid green doubles as both the leaf/frond colour and the colour of the
   eyebrows, dates and statuses — exactly the "same colour as the asset"
   problem: at 3.3:1 against the rendered paper those lines read as part of
   the foliage rather than as text. The foliage keeps the green.

   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,220,202) — 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: #4f6156;   /* the body tone, deepened to 4.5:1 on the rendered paper */
  --ink-primary: #42644c;       /* 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,
    #1d3122 30%,
    #243d2b 42%,
    var(--color-accent) 50%,
    #243d2b 58%,
    #1d3122 70%);
  background-size: 250% 100%;
}

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

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