/* THEME: Classic — elegant ivory, refined gold & deep burgundy, formal crest */
:root{
  --color-bg: #faf6ee;
  --color-surface: #fffdf9;
  --color-text: #3a2620;
  --color-text-soft: #7d6a5c;
  --color-primary: #a9822f;
  --color-secondary: #e9dcc0;
  --color-accent: #8c1f2b;
  --color-line: rgba(169,130,47,.35);
  --font-heading: 'Cormorant Garamond', serif;
  --font-script: 'Tangerine', cursive;
  --font-body: 'EB Garamond', serif;
}

body{ background: #241a14; }

.frame{
  background:
    radial-gradient(circle at 10% 6%, rgba(169,130,47,.09), transparent 38%),
    radial-gradient(circle at 92% 14%, rgba(140,31,43,.07), transparent 36%),
    radial-gradient(circle at 6% 30%, rgba(169,130,47,.08), transparent 34%),
    radial-gradient(circle at 94% 46%, rgba(140,31,43,.07), transparent 36%),
    radial-gradient(circle at 8% 62%, rgba(169,130,47,.09), transparent 34%),
    radial-gradient(circle at 92% 76%, rgba(140,31,43,.07), transparent 36%),
    radial-gradient(circle at 12% 90%, rgba(169,130,47,.08), transparent 34%),
    radial-gradient(circle at 90% 98%, rgba(140,31,43,.06), transparent 40%),
    var(--color-bg);
}
.frame::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23a9822f' stroke-width='.8'%3E%3Cpath d='M80 18 L92 40 L80 62 L68 40 Z'/%3E%3Cpath d='M0 98 L12 120 L0 142 L-12 120 Z'/%3E%3Cpath d='M160 98 L172 120 L160 142 L148 120 Z'/%3E%3C/g%3E%3Cg fill='%23a9822f' opacity='.6'%3E%3Ccircle cx='80' cy='40' r='1.6'/%3E%3Ccircle cx='0' cy='120' r='1.6'/%3E%3Ccircle cx='160' cy='120' r='1.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%238c1f2b' stroke-width='.6' opacity='.7'%3E%3Ccircle cx='40' cy='80' r='2.5'/%3E%3Ccircle cx='120' cy='0' r='2.5'/%3E%3Ccircle cx='120' cy='160' r='2.5'/%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='%238c1f2b' stroke-width='.5' opacity='.5'%3E%3Cpath d='M35 8 L41 20 L35 32 L29 20 Z'/%3E%3C/g%3E%3Cg fill='%23a9822f' opacity='.5'%3E%3Ccircle cx='8' cy='55' r='1.2'/%3E%3Ccircle cx='62' cy='55' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 160px 160px, 70px 70px;
  background-position: 0 0, 35px 35px;
}

/* ---------- Formal frame border (persistent, decorative) ---------- */
.frame__border{
  position: fixed;
  inset: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  pointer-events: none;
  z-index: 350;
  border: 1px solid var(--color-primary);
  opacity: .5;
}
.frame__border::before{
  content:'';
  position:absolute; inset:6px;
  border: 1px solid var(--color-primary);
  opacity:.55;
}
.frame__corner{ position:absolute; color: var(--color-primary); opacity:.85; }
.frame__corner--tl{ top:3px; left:3px; }
.frame__corner--tr{ top:3px; right:3px; transform: scaleX(-1); }
.frame__corner--bl{ bottom:3px; left:3px; transform: scaleY(-1); }
.frame__corner--br{ bottom:3px; right:3px; transform: scale(-1,-1); }

/* ---------- Cover ---------- */
.cover{
  background:
    radial-gradient(circle at 50% 0%, rgba(169,130,47,.08), transparent 50%),
    var(--color-bg);
}
.cover::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23a9822f' stroke-width='.8'%3E%3Cpath d='M80 18 L92 40 L80 62 L68 40 Z'/%3E%3Cpath d='M0 98 L12 120 L0 142 L-12 120 Z'/%3E%3Cpath d='M160 98 L172 120 L160 142 L148 120 Z'/%3E%3C/g%3E%3Cg fill='%23a9822f' opacity='.6'%3E%3Ccircle cx='80' cy='40' r='1.6'/%3E%3Ccircle cx='0' cy='120' r='1.6'/%3E%3Ccircle cx='160' cy='120' r='1.6'/%3E%3C/g%3E%3Cg fill='none' stroke='%238c1f2b' stroke-width='.6' opacity='.7'%3E%3Ccircle cx='40' cy='80' r='2.5'/%3E%3Ccircle cx='120' cy='0' r='2.5'/%3E%3Ccircle cx='120' cy='160' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}
.cover__crest{
  margin: 0 auto clamp(2px, .8vh, 6px);
  display:block;
  width: clamp(130px, 40vw, 220px);
  height: auto;
  max-height: 14vh;
}
.cover__eyebrow{ font-family: var(--font-body); }
.cover__names{ font-weight: 700; }
.cover__date{ font-weight: 600; }
.btn-open{
  border-radius: 3px;
  position: relative;
  letter-spacing: .14em;
}
.btn-open::after{
  content:'';
  position:absolute; inset:4px;
  border: 1px solid var(--color-primary);
  border-radius: 1px;
  opacity:.55;
  pointer-events:none;
}

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

.section::before, .section::after{
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: -1;
  border-style: solid;
  border-color: var(--color-primary);
  border-width: 0;
  opacity: .5;
}
.section::before{
  top: 22px; left: 14px;
  border-top-width: 1px; border-left-width: 1px;
}
.section::after{
  bottom: 22px; right: 14px;
  border-bottom-width: 1px; border-right-width: 1px;
  border-color: var(--color-accent);
}
.section:nth-of-type(even)::before{
  top: 22px; left: auto; right: 14px;
  border-top-width: 1px; border-right-width: 1px; border-left-width: 0;
  border-color: var(--color-accent);
}
.section:nth-of-type(even)::after{
  bottom: 22px; right: auto; left: 14px;
  border-bottom-width: 1px; border-left-width: 1px; border-right-width: 0;
  border-color: var(--color-primary);
}

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

.section__title{
  position: relative;
  padding-bottom: 22px;
  font-weight: 600;
}
.section__title::before{
  content:'';
  position:absolute; left:50%; bottom:8px; transform: translateX(-50%);
  width: 104px; height: 1px;
  background: var(--color-primary);
  opacity:.8;
}
.section__title::after{
  content:'';
  position:absolute; left:50%; bottom:3px; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
}

.hero__ornament{ margin: 0 auto 16px; display:block; }

/* ---------- Cards: sharp-cornered, gold hairline + corner brackets ---------- */
.event-card, .gift-card, .wish-card{
  position: relative;
  border-radius: 2px;
  border: 1px solid var(--color-line);
  box-shadow: none;
  background: var(--color-surface);
}
.event-card::before, .gift-card::before, .wish-card::before,
.event-card::after, .gift-card::after, .wish-card::after{
  content:'';
  position:absolute;
  width: 13px; height: 13px;
  border-style: solid;
  border-color: var(--color-primary);
  border-width: 0;
  pointer-events: none;
}
.event-card::before, .gift-card::before, .wish-card::before{
  top: -1px; left: -1px;
  border-top-width: 1.5px; border-left-width: 1.5px;
}
.event-card::after, .gift-card::after, .wish-card::after{
  bottom: -1px; right: -1px;
  border-bottom-width: 1.5px; border-right-width: 1.5px;
}

.countdown__item{
  box-shadow: none;
  border-radius: 2px;
  border: 1px solid var(--color-line);
}

.event-card__map{ filter: sepia(.3) saturate(.55) contrast(1.05); }

/* ---------- Couple portraits: framed, not circular ---------- */
.couple__photo{
  border-radius: 6px;
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary), 0 16px 34px -20px rgba(140,31,43,.4);
}
.couple__divider{ color: var(--color-accent); }

/* ---------- Story: diamond markers ---------- */
.story__dot{
  width: 13px; height: 13px;
  left: 13px; top: 5px;
  border-radius: 0;
  border-width: 1.6px;
  transform: rotate(45deg);
}

/* ---------- Gallery: gold hairline frame, sharp corners ---------- */
.gallery__item{
  border-radius: 2px;
  border: 1px solid var(--color-line);
  box-shadow: none;
}

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

/* ---------- Buttons ---------- */
.btn-outline, .btn-solid, .btn-copy{
  border-radius: 3px;
  letter-spacing: .1em;
}

/* ---------- Form focus states ---------- */
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(169,130,47,.15);
}

/* ---------- Footer ---------- */
.footer{
  background: linear-gradient(180deg, transparent, rgba(140,31,43,.05));
  position: relative;
}
.footer::before, .footer::after{
  content: '';
  position: absolute;
  width: 42px;
  height: 42px;
  pointer-events: none;
  z-index: -1;
  border-style: solid;
  border-color: var(--color-primary);
  border-width: 0;
  opacity: .45;
}
.footer::before{
  top: 14px; left: 8%;
  border-top-width: 1px; border-left-width: 1px;
}
.footer::after{
  top: 14px; right: 8%;
  border-top-width: 1px; border-right-width: 1px;
  border-color: var(--color-accent);
}
.footer__names{ font-weight: 700; }

/* crest sizing is fully fluid (see .cover__crest above) */

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so the wash
   of color flows continuously ivory -> gold -> burgundy -> gold -> ivory
   down the whole page, in keeping with Classic's formal gold/burgundy mood.
   ========================================================================== */
/* 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(233,220,192,.16)); }        /* hero -> C1 (ivory) */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(233,220,192,.16), rgba(169,130,47,.09)); } /* C1 -> C2 (gold) */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(169,130,47,.09), rgba(140,31,43,.07)); }   /* C2 -> C3 (burgundy) */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(140,31,43,.07), rgba(169,130,47,.10)); }   /* C3 -> C4 (gold) */
.section:nth-of-type(5){ background: rgba(169,130,47,.10); }                                                  /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(169,130,47,.10), rgba(233,220,192,.14)); } /* C4 -> C5 (ivory) */
.section:nth-of-type(7){ background: rgba(233,220,192,.14); }                                                /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(233,220,192,.14), rgba(169,130,47,.11)); } /* C5 -> C6 (gold) */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(169,130,47,.11), transparent); }           /* C6 -> footer */

/* ==========================================================================
   THEMED MOTION — a composed, formal reveal (fade + small upward drift, no
   rotation) plus a slow golden shimmer on hairlines, ornaments and cards.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s cubic-bezier(.22,1,.36,1), transform 1.5s cubic-bezier(.22,1,.36,1);
}
.reveal.in{ opacity: 1; transform: 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; }

/* Slow gleam on the section corner brackets — no drift, a formal glow only. */
@keyframes cornerGleam{
  0%, 100%{ opacity: .5; box-shadow: none; }
  50%{ opacity: .95; box-shadow: 0 0 8px 0 rgba(169,130,47,.4); }
}
.section::before, .section::after{ animation: cornerGleam 7s ease-in-out infinite; }
.section::after{ animation-delay: -3.5s; }
.footer::before, .footer::after{ animation: cornerGleam 7s ease-in-out infinite; }
.footer::after{ animation-delay: -3.5s; }

/* Diamond title ornament breathes with a soft gold glow. */
@keyframes diamondGlow{
  0%, 100%{ transform: translateX(-50%) rotate(45deg) scale(1); box-shadow: 0 0 0 rgba(169,130,47,0); }
  50%{ transform: translateX(-50%) rotate(45deg) scale(1.25); box-shadow: 0 0 10px 1px rgba(169,130,47,.55); }
}
.section__title::after{ animation: diamondGlow 5s ease-in-out infinite; }

/* Hairline divider under each title catches a slow shimmer of light. */
@keyframes hairlineShimmer{
  0%, 100%{ opacity: .8; box-shadow: 0 0 0 rgba(169,130,47,0); }
  50%{ opacity: 1; box-shadow: 0 0 8px 1px rgba(169,130,47,.45); }
}
.section__title::before{ animation: hairlineShimmer 6s ease-in-out infinite; }

/* Countdown tiles carry a slow golden pulse instead of a bouncy pop. */
@keyframes goldPulse{
  0%, 100%{ box-shadow: 0 0 0 rgba(169,130,47,0); border-color: var(--color-line); }
  50%{ box-shadow: 0 0 14px -2px rgba(169,130,47,.55); border-color: var(--color-primary); }
}
.countdown__item{ animation: goldPulse 4.5s 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.04) translateY(-3px);
  box-shadow: 0 0 0 1px var(--color-primary), 0 20px 40px -18px rgba(140,31,43,.5);
}

.gallery__item{ transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; }
.gallery__item:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -16px rgba(140,31,43,.35);
  border-color: var(--color-primary);
}

/* ==========================================================================
   FLOATING GRAPHICS — small gold sprig & diamond-rosette ornaments gently
   swaying in each section (not just background decoration). A composed,
   formal drift befitting the theme — purely visual, non-interactive.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(140,31,43,.18));
  will-change: transform;
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

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

/* Extra ambient motions for the new crest/laurel/seal ornaments — a slower
   drift, a gentle multi-point flutter, and a soft gold twinkle. Kept slow
   and unhurried in line with the rest of the theme's pacing. */
@keyframes floatDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-3deg) scale(1); }
  50%{ transform: translate(-6px,-14px) rotate(5deg) scale(1.06); }
}
@keyframes flutterE{
  0%, 100%{ transform: translate(0,0) rotate(-4deg); }
  25%{ transform: translate(5px,-6px) rotate(3deg); }
  50%{ transform: translate(2px,-12px) rotate(-6deg); }
  75%{ transform: translate(-5px,-5px) rotate(4deg); }
}
@keyframes twinkleF{
  0%, 100%{ transform: scale(.85) rotate(0deg); opacity: .55; }
  50%{ transform: scale(1.12) rotate(20deg); opacity: 1; }
}
.deco-float.anim-d{ animation: floatDriftD 13s ease-in-out infinite; }
.deco-float.anim-e{ animation: flutterE 11s ease-in-out infinite; }
.deco-float.anim-f{ animation: twinkleF 4.5s ease-in-out infinite; }

/* ==========================================================================
   FALLING GOLD PARTICLES — a continuous, slow, varied-speed drift of small
   diamond facets and laurel-leaf fragments 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 (per-second clock tick, kept snappy) ---------- */
@keyframes countTick{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.22) rotate(-2deg); color: var(--color-accent); }
  60%{ transform: scale(.95) rotate(1.5deg); }
  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, combined with this theme's own formal accent of
   letter-spacing settling from wide tracking to normal, independent of the
   generic .reveal fade used everywhere else.
   ========================================================================== */
.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;
  letter-spacing: .3em;
  transition: opacity .7s ease, letter-spacing 1.3s cubic-bezier(.16,1,.3,1);
}
.section__title.reveal.in{ transform: none; letter-spacing: normal; }
.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); }

/* ---------- Events & Story: alternating slide directions ---------- */
.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, .section__title::before, .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.reveal, .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(233,220,192,.95), rgba(169,130,47,.35) 45%, transparent 70%);
  --cover-exit: translateY(-102%) scale(1.03);
}

/* The monogram crest settles in with a small press, like a stamped seal. */
@keyframes crestSettle{
  0%{ opacity: 0; transform: scale(.82) translateY(-14px); }
  62%{ opacity: 1; transform: scale(1.05) translateY(0); }
  100%{ opacity: 1; transform: scale(1); }
}
.js-motion .cover__crest{ animation: crestSettle 1.5s .25s both cubic-bezier(.22,1,.36,1); }

/* The title text itself catches the gold, rather than adding a second
   hairline — this theme already draws one under every title. */
.section__title.reveal.in .section__title__inner{
  background: linear-gradient(100deg, var(--color-accent) 32%, var(--color-primary) 48%, #e9dcc0 56%, var(--color-primary) 64%, var(--color-accent) 78%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 7s linear infinite;
}

/* Event and gift cards catch a slow gold sheen crossing them. Painted as a
   background layer, because this theme already uses both card pseudo-elements
   for its corner ornaments. */
.event-card, .gift-card{
  background-image: linear-gradient(100deg, transparent 42%, rgba(233,220,192,.6) 50%, transparent 58%);
  background-repeat: no-repeat;
  background-size: 240% 100%;
  background-position: 240% 0;
  animation: cardSheen 7s ease-in-out infinite;
}
.gift-card{ animation-delay: -3.5s; }
@keyframes cardSheen{
  0%, 62%{ background-position: 240% 0; }
  92%, 100%{ background-position: -140% 0; }
}

/* Countdown numerals turn gold as each second lands. */
.countdown__item{ transition: border-color .5s ease, box-shadow .5s ease; }
.countdown__item:hover{ border-color: var(--color-primary); box-shadow: 0 10px 24px -14px rgba(169,130,47,.6); }

@media (prefers-reduced-motion: reduce){
  .js-motion .cover__crest, .event-card, .gift-card,
  .section__title.reveal.in .section__title__inner{ animation: none !important; }
}
/* === /THEMED MOTION === */

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

   The section titles were the worst case: their shimmer peaked at #e9dcc0,
   a cream lighter than the page, so "Kedua Mempelai" was all but gone
   whenever the band crossed it. The couple's names had the same fault via
   --color-secondary. The maroon accent is strong enough to keep as it is;
   only the gold needed deepening for its text roles.

   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(232,217,200) — 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: #6b5b4f;   /* the body tone, deepened to 4.5:1 on the rendered paper */
  --ink-primary: #6d5520;       /* 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,
    #5c141c 30%,
    #731923 42%,
    var(--color-accent) 50%,
    #731923 58%,
    #5c141c 70%);
  background-size: 250% 100%;
}
.section__title.reveal.in .section__title__inner{
  background-image: linear-gradient(100deg,
    var(--color-accent) 32%,
    #953d2c 48%,
    #9c552d 56%,
    #953d2c 64%,
    var(--color-accent) 78%);
  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; }
/* === /PERFORMANCE === */