/* THEME: Boho Chic — terracotta & olive on cream, arch/moon motifs,
   pampas-grass line art, sun-ray & mudcloth geometric accents. */
:root{
  --color-bg: #f6efe1;
  --color-surface: #fffaf2;
  --color-text: #4a3626;
  --color-text-soft: #8a7358;
  --color-primary: #c1673c;
  --color-secondary: #8f9b6e;
  --color-accent: #9c4a26;
  --color-line: rgba(156,74,38,.22);
  --font-heading: 'Fraunces', serif;
  --font-script: 'Caveat', cursive;
  --font-body: 'Jost', sans-serif;
}

body{ background: #2b2118; }

.frame{
  background:
    radial-gradient(circle at 8% 6%, rgba(193,103,60,.12), transparent 38%),
    radial-gradient(circle at 94% 14%, rgba(143,155,110,.14), transparent 36%),
    radial-gradient(circle at 6% 30%, rgba(143,155,110,.11), transparent 34%),
    radial-gradient(circle at 95% 46%, rgba(193,103,60,.13), transparent 36%),
    radial-gradient(circle at 8% 62%, rgba(193,103,60,.11), transparent 34%),
    radial-gradient(circle at 93% 76%, rgba(143,155,110,.14), transparent 36%),
    radial-gradient(circle at 10% 90%, rgba(143,155,110,.12), transparent 34%),
    radial-gradient(circle at 92% 97%, rgba(193,103,60,.13), transparent 36%),
    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='160' height='160'%3E%3Cg fill='none' stroke='%23c1673c' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M22 138 q-3 -16 0 -28'/%3E%3Cpath d='M22 138 q3 -18 10 -30'/%3E%3Cpath d='M22 138 q8 -15 16 -24'/%3E%3C/g%3E%3Cg fill='none' stroke='%238f9b6e' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M138 22 q3 16 0 28'/%3E%3Cpath d='M138 22 q-3 18 -10 30'/%3E%3Cpath d='M138 22 q-8 15 -16 24'/%3E%3C/g%3E%3Cpath d='M84 46 a7 7 0 1 0 0 14 a5 5 0 1 1 0 -14' fill='%23c1673c'/%3E%3Cg fill='%238f9b6e'%3E%3Ccircle cx='60' cy='100' r='1.6'/%3E%3Ccircle cx='104' cy='118' r='1.6'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3Ccircle cx='16' cy='70' r='1.6'/%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='%238f9b6e' stroke-width='.8' opacity='.6'%3E%3Cpath d='M35 8 L60 35 L35 62 L10 35 Z'/%3E%3Cpath d='M35 18 L50 35 L35 52 L20 35 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 160px 160px, 70px 70px;
  background-position: 0 0, 35px 12px;
}

/* ---------- Cover: arch / moon frame + pampas sprigs ---------- */
.cover{
  background-color: var(--color-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23c1673c' stroke-width='1' stroke-linecap='round' stroke-opacity='.4'%3E%3Cpath d='M22 138 q-3 -16 0 -28'/%3E%3Cpath d='M22 138 q3 -18 10 -30'/%3E%3Cpath d='M22 138 q8 -15 16 -24'/%3E%3C/g%3E%3Cg fill='none' stroke='%238f9b6e' stroke-width='1' stroke-linecap='round' stroke-opacity='.4'%3E%3Cpath d='M138 22 q3 16 0 28'/%3E%3Cpath d='M138 22 q-3 18 -10 30'/%3E%3Cpath d='M138 22 q-8 15 -16 24'/%3E%3C/g%3E%3Cpath d='M84 46 a7 7 0 1 0 0 14 a5 5 0 1 1 0 -14' fill='%23c1673c' fill-opacity='.35'/%3E%3Cg fill='%238f9b6e' fill-opacity='.35'%3E%3Ccircle cx='60' cy='100' r='1.6'/%3E%3Ccircle cx='104' cy='118' r='1.6'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3Ccircle cx='16' cy='70' r='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 20% 12%, rgba(193,103,60,.14), transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(143,155,110,.16), transparent 48%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 160px 160px, auto, auto;
  background-position: 0 0, 0 0, 0 0;
}
.cover::before,
.cover::after{
  content:'';
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  border-bottom:none;
  z-index:-1;
  pointer-events:none;
}
.cover::before{
  top: 12%;
  width: 250px; height: 250px;
  border: 2px solid var(--color-primary);
  border-radius: 220px 220px 0 0;
  opacity:.55;
}
.cover::after{
  top: calc(12% + 16px);
  width: 214px; height: 214px;
  border: 1.5px solid var(--color-secondary);
  border-radius: 190px 190px 0 0;
  opacity:.5;
}
.cover__eyebrow{ font-family: var(--font-body); }
.cover__names{
  transform: rotate(-2deg);
  text-shadow: 0 2px 0 rgba(156,74,38,.08);
}
.cover__guest-box{ font-family: var(--font-body); }
.btn-open{
  border-width: 1.5px;
  box-shadow: 0 0 0 1px var(--color-line) inset;
}
.btn-open span{ display:inline-block; }

/* ---------- Section rhythm ---------- */
.section{
  border-bottom: none;
  position:relative;
}
.section__title::after{
  content: '◠';
  display:block;
  font-size: 17px;
  letter-spacing: .35em;
  color: var(--color-secondary);
  margin-top: 12px;
}

/* ---------- Section corners: soft blob + thin arch-ring echo ---------- */
.section::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 10%, rgba(193,103,60,.16), transparent 26%),
    radial-gradient(circle at 8% 10%, transparent 20%, rgba(193,103,60,.10) 21%, transparent 24%),
    radial-gradient(circle at 92% 90%, rgba(143,155,110,.18), transparent 26%),
    radial-gradient(circle at 92% 90%, transparent 20%, rgba(143,155,110,.12) 21%, transparent 24%);
}
.section:nth-of-type(even)::before{
  background:
    radial-gradient(circle at 8% 10%, rgba(143,155,110,.16), transparent 26%),
    radial-gradient(circle at 8% 10%, transparent 20%, rgba(143,155,110,.10) 21%, transparent 24%),
    radial-gradient(circle at 92% 90%, rgba(193,103,60,.18), transparent 26%),
    radial-gradient(circle at 92% 90%, transparent 20%, rgba(193,103,60,.12) 21%, transparent 24%);
}

/* ---------- Hero: sun-ray halo ---------- */
.hero{
  position:relative;
  isolation:isolate;
}
.hero::before{
  content:'';
  position:absolute;
  top: -10px; left:50%;
  transform: translateX(-50%);
  width: 360px; height: 360px;
  border-radius:50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--color-primary) 0deg 1deg,
    transparent 1deg 17deg
  );
  opacity:.10;
  z-index:-1;
  pointer-events:none;
}
.hero__names{ transform: rotate(-1.5deg); }

/* ---------- Countdown: arch-topped tiles ---------- */
.countdown__item{
  border-radius: 30px 30px 12px 12px;
  box-shadow: 0 12px 26px -18px rgba(156,74,38,.4);
}

/* ---------- Couple: ringed moon photo ---------- */
.couple__photo{
  border-color: var(--color-bg);
  box-shadow:
    0 0 0 6px var(--color-bg),
    0 0 0 8px var(--color-primary),
    0 16px 32px -14px rgba(156,74,38,.5);
}
.couple__divider{ transform: rotate(-4deg); display:inline-block; }

/* ---------- Events / Gift / Wishes: arch-topped cards ---------- */
.event-card, .gift-card, .wish-card{
  border-radius: 46px 46px 14px 14px;
  box-shadow: 0 14px 32px -20px rgba(156,74,38,.4);
}
.event-card__map{ filter: sepia(.25) saturate(.6) hue-rotate(-10deg) contrast(1.02); }

/* ---------- Gallery: alternating hand-cut arches ---------- */
.gallery__item{
  border-radius: 14px;
  box-shadow: 0 8px 18px -12px rgba(156,74,38,.4);
}
.gallery__item:nth-child(3n+1){ border-radius: 56px 14px 14px 14px; }
.gallery__item:nth-child(3n+2){ border-radius: 14px 56px 14px 14px; }
.gallery__item:nth-child(3n){ border-radius: 14px 14px 56px 14px; }

/* ---------- Video: arch frame ---------- */
.video-box{
  border-radius: 56px 56px 16px 16px;
  box-shadow: 0 16px 34px -18px rgba(156,74,38,.45);
}

/* ---------- Footer ---------- */
.footer{
  background: linear-gradient(180deg, transparent, rgba(143,155,110,.10));
  position: relative;
}
.footer::before, .footer::after{
  content:'';
  position:absolute;
  width: 100px; height: 100px;
  pointer-events:none;
  z-index:-1;
  border-radius: 50%;
}
.footer::before{
  top: -14px; left: 6%;
  background: radial-gradient(circle, rgba(143,155,110,.22), transparent 70%);
}
.footer::after{
  top: 8%; right: 6%;
  background: radial-gradient(circle, rgba(193,103,60,.2), transparent 70%);
}
.footer__names{ transform: rotate(-2deg); display:inline-block; }

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so the wash
   of color flows like a desert sunset — terracotta -> olive -> deep
   terracotta -> olive -> terracotta — continuously 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(193,103,60,.10)); }          /* hero -> C1 terracotta */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(193,103,60,.10), rgba(143,155,110,.12)); } /* C1 -> C2 olive */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(143,155,110,.12), rgba(156,74,38,.10)); }  /* C2 -> C3 deep terracotta */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(156,74,38,.10), rgba(143,155,110,.13)); }  /* C3 -> C4 olive */
.section:nth-of-type(5){ background: rgba(143,155,110,.13); }                                                 /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(143,155,110,.13), rgba(193,103,60,.09)); } /* C4 -> C5 terracotta */
.section:nth-of-type(7){ background: rgba(193,103,60,.09); }                                                  /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(193,103,60,.09), rgba(143,155,110,.12)); } /* C5 -> C6 olive */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(143,155,110,.12), transparent); }          /* C6 -> footer */

/* ==========================================================================
   THEMED MOTION — a relaxed, breezy "fabric in the wind" reveal instead of
   the generic fade, plus slow ambient sway echoing pampas grass and a
   turning sun-ray halo behind the hero.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(28px) translateX(-8px) rotate(-2.2deg);
  transition: opacity 1.5s cubic-bezier(.25,.85,.4,1.08), transform 1.5s cubic-bezier(.25,.85,.4,1.08);
}
.reveal.in{ opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }

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

@keyframes windSway{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(-7px, -9px) rotate(-4deg); }
}
.section::before{ animation: windSway 8s ease-in-out infinite; }
.section:nth-of-type(even)::before{ animation-delay: -4s; }
.footer::before, .footer::after{ animation: windSway 8s ease-in-out infinite; }
.footer::after{ animation-delay: -4s; }
.cover::before, .cover::after{ animation: windSway 7s ease-in-out infinite; }
.cover::after{ animation-delay: -3.5s; }

@keyframes sunRayRotate{
  0%{ transform: translateX(-50%) rotate(0deg); }
  100%{ transform: translateX(-50%) rotate(360deg); }
}
.hero::before{ animation: sunRayRotate 50s linear infinite; }

@keyframes archBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(4px); }
}
.section__title::after{ display:inline-block; animation: archBob 5s ease-in-out infinite; }

@keyframes glowPulse{
  0%, 100%{ transform: scale(1); box-shadow: 0 12px 26px -18px rgba(156,74,38,.4); }
  50%{ transform: scale(1.035); box-shadow: 0 15px 30px -14px rgba(156,74,38,.55); }
}
.countdown__item{ animation: glowPulse 4s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: .2s; }
.countdown__item:nth-child(3){ animation-delay: .4s; }
.countdown__item:nth-child(4){ animation-delay: .6s; }

.couple__photo{ transition: transform .5s ease, box-shadow .5s ease; }
.couple__person:hover .couple__photo{
  transform: scale(1.06) rotate(1.5deg);
  box-shadow:
    0 0 0 6px var(--color-bg),
    0 0 0 10px var(--color-primary),
    0 20px 40px -14px rgba(156,74,38,.55);
}

.gallery__item{ transition: transform .4s ease, box-shadow .4s ease, border-radius .4s ease; }
.gallery__item:hover{ transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 34px -14px rgba(156,74,38,.55); }
.gallery__item:nth-child(3n+1):hover{ border-radius: 70px 14px 14px 14px; }
.gallery__item:nth-child(3n+2):hover{ border-radius: 14px 70px 14px 14px; }
.gallery__item:nth-child(3n):hover{ border-radius: 14px 14px 70px 14px; }

/* ==========================================================================
   FLOATING GRAPHICS — real feather/pampas/sun-moon sprites drifting gently
   in each section, like ornaments stirred by a warm desert breeze (not just
   background decoration). Purely visual, non-interactive.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(156,74,38,.2));
  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(9deg); }
}
@keyframes floatSwayB{
  0%, 100%{ transform: translateY(0) translateX(0) rotate(6deg); }
  50%{ transform: translateY(-9px) translateX(-6px) 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 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 sprites: mudcloth fleck drift, feather flutter, moon+star
   twinkle — reused across hero/couple/gift/rsvp/footer. Kept slow, in
   keeping with the rest of the ambient motion. ---------- */
@keyframes mudDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-4deg) scale(1); }
  50%{ transform: translate(-7px,-16px) rotate(9deg) scale(1.08); }
}
@keyframes featherFlutterE{
  0%, 100%{ transform: translate(0,0) rotate(-8deg); }
  25%{ transform: translate(8px,-7px) rotate(5deg); }
  50%{ transform: translate(3px,-16px) rotate(-11deg); }
  75%{ transform: translate(-8px,-8px) rotate(6deg); }
}
@keyframes moonTwinkleF{
  0%, 100%{ transform: scale(.85) rotate(0deg); opacity: .75; }
  50%{ transform: scale(1.12) rotate(6deg); opacity: 1; }
}
.deco-float.anim-d{ animation: mudDriftD 13s ease-in-out infinite; }
.deco-float.anim-e{ animation: featherFlutterE 10.5s ease-in-out infinite; }
.deco-float.anim-f{ animation: moonTwinkleF 4.5s ease-in-out infinite; }

/* ==========================================================================
   FALLING WISPS — a continuous, varied-speed shower of tiny pampas/feather/
   mudcloth flecks drifting down 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; }
}
.hero__names span.reveal{ display: inline-block; }

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

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

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

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

@media (prefers-reduced-motion: reduce){
  .section::before, .footer::before, .footer::after, .cover::before, .cover::after,
  .hero::before, .section__title::after, .countdown__item, .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% 58%, rgba(255,250,242,.95), rgba(193,103,60,.4) 46%, transparent 72%);
  --cover-exit: translateY(-100%) rotate(-2deg) scale(1.05);
}

/* A dashed sun ring turns slowly around each portrait. */
.couple__photo-wrap::after{
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(193,103,60,.35);
  animation: sunTurn 34s linear infinite;
  pointer-events: none;
}
@keyframes sunTurn{ from{ transform: rotate(0) scale(1); } 50%{ transform: rotate(180deg) scale(1.05); } to{ transform: rotate(360deg) scale(1); } }

/* Cards rise into their arch shape instead of sliding flat. */
.event-card.reveal{ transform: scale(.9) translateY(30px); border-radius: 140px 140px var(--radius) var(--radius); }
.event-card.reveal.in{ transform: none; }
.event-card{ transition: transform .8s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-radius .8s ease; }

/* Fringe-like sway on the small sprites. */
@keyframes fringeSway{
  0%, 100%{ transform: rotate(-7deg) translateY(0); }
  50%{ transform: rotate(7deg) translateY(-6px); }
}
.deco-float.anim-a{ transform-origin: 50% 0; animation-name: fringeSway; animation-duration: 8s; }

/* Gift cards warm up on hover. */
.gift-card, .wish-card{ transition: transform .45s cubic-bezier(.22,1,.36,1), background .45s ease; }
.gift-card:hover{ transform: translateY(-4px) rotate(-.5deg); background: #fff6ec; }

@media (prefers-reduced-motion: reduce){
  .couple__photo-wrap::after, .deco-float.anim-a{ animation: none !important; }
  .event-card{ transition-duration: .01ms !important; }
}
/* === /THEMED MOTION === */

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

   The terracotta used for eyebrows, dates and statuses sat at 3.1:1 on the
   sand paper, the sage under the section titles at 2.6:1, and the accent
   that sets every title and name at 3.7:1. The arches, woven borders and
   sunburst rings all keep the original terracotta and sage.

   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(218,205,180) — 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: #62523f;   /* the body tone, deepened to 4.5:1 on the rendered paper */
  --ink-primary: #804528;       /* text-only companion to --color-primary */
  --ink-accent:  #8d4322;       /* 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.7: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); }

/* The '◠' arch under each section title, previously sage at 2.6:1. */
.section__title::after{ color: var(--ink-primary); }

.hero__names span{
  background-image: linear-gradient(100deg,
    #5d2c16 30%,
    #74371c 42%,
    var(--ink-accent) 50%,
    #74371c 58%,
    #5d2c16 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 === */