/* THEME: Luxury — dark art-deco glamour, black marble & gold foil */
:root{
  --color-bg: #0a0908;
  --color-surface: #16130f;
  --color-text: #f2e8d5;
  --color-text-soft: #b9a97e;
  --color-primary: #d4af37;
  --color-secondary: #f3d576;
  --color-accent: #c9a343;
  --color-line: rgba(212,175,55,.28);
  --font-heading: 'Cinzel', serif;
  --font-script: 'Tangerine', cursive;
  --font-body: 'Jost', sans-serif;
}

body{ background: #050403; }

/* ---------- Marble texture (layered gradients, no images) ---------- */
.frame{
  background:
    /* gold spotlight pools, spread the full length of the scroll */
    radial-gradient(circle at 10% 6%, rgba(212,175,55,.12), transparent 34%),
    radial-gradient(circle at 92% 16%, rgba(243,213,118,.10), transparent 32%),
    radial-gradient(circle at 6% 30%, rgba(212,175,55,.09), transparent 30%),
    radial-gradient(circle at 94% 44%, rgba(243,213,118,.11), transparent 32%),
    radial-gradient(circle at 8% 58%, rgba(212,175,55,.10), transparent 32%),
    radial-gradient(circle at 92% 72%, rgba(243,213,118,.09), transparent 30%),
    radial-gradient(circle at 10% 86%, rgba(212,175,55,.11), transparent 32%),
    radial-gradient(circle at 90% 97%, rgba(243,213,118,.10), transparent 30%),
    radial-gradient(ellipse 60% 40% at 12% 8%, rgba(255,255,255,.035), transparent 55%),
    radial-gradient(ellipse 50% 35% at 88% 18%, rgba(212,175,55,.05), transparent 55%),
    radial-gradient(ellipse 70% 45% at 25% 92%, rgba(255,255,255,.03), transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 80%, rgba(212,175,55,.045), transparent 50%),
    linear-gradient(125deg, transparent 42%, rgba(255,255,255,.018) 43%, transparent 44%),
    linear-gradient(65deg, transparent 60%, rgba(255,255,255,.015) 61%, transparent 62%),
    var(--color-bg);
}
.frame::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.8'%3E%3Cpath d='M20 8 L32 20 L20 32 L8 20 Z'/%3E%3Cpath d='M112 90 L124 102 L112 114 L100 102 Z'/%3E%3Cpath d='M58 78 L70 60 L82 78'/%3E%3Cpath d='M62 84 L70 66 L78 84'/%3E%3C/g%3E%3Cg fill='%23d4af37'%3E%3Ccircle cx='20' cy='20' r='1.6'/%3E%3Ccircle cx='112' cy='102' r='1.6'/%3E%3Ccircle cx='70' cy='60' r='1.2'/%3E%3Ccircle cx='40' cy='95' r='1'/%3E%3Ccircle cx='95' cy='35' r='1'/%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='%23f3d576' stroke-width='0.4' opacity='.6'%3E%3Cpath d='M35 4 L66 35 L35 66 L4 35 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 140px 140px, 70px 70px;
  background-position: 0 0, 35px 12px;
}

.cover{
  background:
    radial-gradient(ellipse 65% 45% at 50% 0%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(ellipse 60% 40% at 10% 100%, rgba(255,255,255,.03), transparent 55%),
    radial-gradient(ellipse 60% 40% at 95% 90%, rgba(212,175,55,.06), transparent 55%),
    var(--color-bg);
}
.cover::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.8'%3E%3Cpath d='M20 8 L32 20 L20 32 L8 20 Z'/%3E%3Cpath d='M112 90 L124 102 L112 114 L100 102 Z'/%3E%3Cpath d='M58 78 L70 60 L82 78'/%3E%3Cpath d='M62 84 L70 66 L78 84'/%3E%3C/g%3E%3Cg fill='%23d4af37'%3E%3Ccircle cx='20' cy='20' r='1.6'/%3E%3Ccircle cx='112' cy='102' r='1.6'/%3E%3Ccircle cx='70' cy='60' r='1.2'/%3E%3Ccircle cx='40' cy='95' r='1'/%3E%3Ccircle cx='95' cy='35' r='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 140px;
}

.section{
  border-bottom: none;
  background: radial-gradient(ellipse 80% 30% at 50% 0%, rgba(212,175,55,.035), transparent 60%);
}

.section::before, .section::after{
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.16), transparent 70%);
}
.section::before{ top: 6px; left: -14px; }
.section::after{ bottom: 6px; right: -14px; background: radial-gradient(circle, rgba(243,213,118,.14), transparent 70%); }
.section:nth-of-type(even)::before{ background: radial-gradient(circle, rgba(243,213,118,.16), transparent 70%); }
.section:nth-of-type(even)::after{ background: radial-gradient(circle, rgba(212,175,55,.14), transparent 70%); }

/* ---------- Gold-foil text treatment ---------- */
.cover__names,
.hero__names,
.footer__names,
.section__title,
.couple__name,
.event-card__name,
.countdown__num,
.gift-card__num{
  background: linear-gradient(180deg, #f7e7a8 0%, #d4af37 45%, #a9791f 70%, #e8c766 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(212,175,55,.25));
}

.section__title{
  letter-spacing: .04em;
  text-transform: uppercase;
}
.section__title::after{
  content: '';
  display:block;
  width: 60px;
  height: 10px;
  margin: 14px auto 0;
  background:
    linear-gradient(90deg, transparent, var(--color-primary) 20%, var(--color-primary) 80%, transparent),
    linear-gradient(90deg, transparent, var(--color-primary) 20%, var(--color-primary) 80%, transparent);
  background-size: 100% 1px, 6px 6px;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  clip-path: polygon(50% 0, 60% 50%, 50% 100%, 40% 50%);
  opacity: .85;
}

.cover__eyebrow, .section__eyebrow{ color: var(--color-primary); }

/* ---------- Buttons: glossy gold-foil finish + glow ---------- */
.btn-open{
  border: 1px solid var(--color-primary);
  color: var(--color-secondary);
  box-shadow: 0 0 0 0 rgba(212,175,55,.35), inset 0 0 14px rgba(212,175,55,.08);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
}
.btn-open:hover{
  background: linear-gradient(180deg, #f3d576, #a9791f);
  color: #14100a;
  box-shadow: 0 0 24px rgba(212,175,55,.45);
}

.btn-outline{ border-color: var(--color-primary); color: var(--color-secondary); }
.btn-outline:hover{
  background: linear-gradient(180deg, #f3d576, #a9791f);
  color: #14100a;
  box-shadow: 0 0 18px rgba(212,175,55,.4);
}

.btn-solid{
  background: linear-gradient(180deg, #f3d576 0%, #d4af37 45%, #a9791f 100%);
  color: #14100a;
  box-shadow: 0 10px 26px -10px rgba(212,175,55,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.btn-solid:hover{ opacity: 1; box-shadow: 0 12px 30px -8px rgba(212,175,55,.7); }

.btn-copy{ border-color: var(--color-primary); color: var(--color-secondary); }
.btn-copy.copied{ background: linear-gradient(180deg, #f3d576, #a9791f); color:#14100a; }

/* ---------- Cards: hairline gold borders + soft glow ---------- */
.event-card, .gift-card, .wish-card, .countdown__item{
  background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.15)), var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7), 0 0 22px -14px rgba(212,175,55,.35);
}

.event-card__map{ filter: grayscale(1) invert(.92) contrast(1.1) brightness(.9); opacity: .85; }

.couple__photo{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(212,175,55,.12), 0 16px 40px -16px rgba(0,0,0,.8), 0 0 28px -8px rgba(212,175,55,.4);
}
.couple__divider{ color: var(--color-primary); }

.gallery__item{
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.75);
  border: 1px solid var(--color-line);
}
.gallery__item img{ filter: saturate(.92) contrast(1.05); }

.story::before{ background: linear-gradient(180deg, transparent, var(--color-primary), transparent); }
.story__dot{
  background: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(212,175,55,.5);
}

.video-box{
  border: 1px solid var(--color-line);
  box-shadow: 0 0 30px -12px rgba(212,175,55,.35);
}
.video-box__play{
  background: linear-gradient(180deg, #f3d576, #a9791f);
  color: #14100a;
  box-shadow: 0 0 20px rgba(212,175,55,.5);
}

/* ---------- Forms: keep legible on dark surface ---------- */
.rsvp-form input, .rsvp-form select, .rsvp-form textarea{
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-line);
}
.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder{ color: var(--color-text-soft); opacity: .8; }
.rsvp-form select{ color-scheme: dark; }

.wish-card__status{ color: var(--color-primary); }

.music-toggle{
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-secondary);
  box-shadow: 0 0 16px -4px rgba(212,175,55,.5);
}

.navdots a{ background: var(--color-line); }
.navdots a.active{ background: var(--color-primary); box-shadow: 0 0 8px rgba(212,175,55,.7); }

.footer{
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(212,175,55,.06), transparent 60%),
    linear-gradient(180deg, transparent, rgba(212,175,55,.06) 40%, transparent);
  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: -10px; left: 6%; background: radial-gradient(circle, rgba(243,213,118,.16), transparent 70%); }
.footer::after{ top: 8%; right: 6%; background: radial-gradient(circle, rgba(212,175,55,.14), transparent 70%); }
.footer__thanks{ color: var(--color-text-soft); }
.footer__hashtag{ color: var(--color-primary); letter-spacing: .12em; }
.footer__credit{ color: var(--color-text-soft); }

/* ---------- Art-deco geometric accents on cover ---------- */
.cover__deco-top, .cover__deco-bottom{ opacity: .9; }

.cover__names{ font-size: clamp(36px, min(14.5vw, 11vh), 78px); }

/* ==========================================================================
   SECTION-TO-SECTION COLOR GRADATION
   Each section's gradient starts where the previous one ended, so a wash of
   gold-foil light flows continuously down the page, like spotlights moving
   slowly through a dark ballroom.
   ========================================================================== */
/* 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(212,175,55,.12)); }            /* hero -> C1 */
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(243,213,118,.14)); }  /* C1 -> C2 */
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(243,213,118,.14), rgba(212,175,55,.11)); }  /* C2 -> C3 */
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(212,175,55,.11), rgba(243,213,118,.15)); }  /* C3 -> C4 */
.section:nth-of-type(5){ background: rgba(243,213,118,.15); }                                                 /* C4 flat (rundown, may be hidden) */
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(243,213,118,.15), rgba(212,175,55,.10)); }  /* C4 -> C5 */
.section:nth-of-type(7){ background: rgba(212,175,55,.10); }                                                   /* C5 flat (video, may be hidden) */
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(243,213,118,.13)); }  /* C5 -> C6 */
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(243,213,118,.13), transparent); }            /* C6 -> footer */

/* ==========================================================================
   THEMED MOTION — a composed "curtain rising, catching the gold light"
   reveal instead of the generic fade, plus slow ambient shimmer/glow that
   reads as glamorous rather than playful. No bounce, no rotation.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(32px);
  filter: brightness(.7) saturate(.85);
  transition:
    opacity 1.5s cubic-bezier(.22,1,.36,1),
    transform 1.5s cubic-bezier(.22,1,.36,1),
    filter 1.5s cubic-bezier(.22,1,.36,1);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
  filter: brightness(1) saturate(1);
  animation: goldCatch 1.4s cubic-bezier(.19,1,.22,1);
}

@keyframes goldCatch{
  0%{ box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  45%{ box-shadow: 0 0 28px 2px rgba(212,175,55,.4); }
  100%{ box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

.gallery__item.reveal{ transition-delay: calc(var(--i, 0) * 80ms); }
.gallery__item:nth-child(1){ --i: 0; } .gallery__item:nth-child(2){ --i: 1; } .gallery__item:nth-child(3){ --i: 2; }
.gallery__item:nth-child(4){ --i: 3; } .gallery__item:nth-child(5){ --i: 4; } .gallery__item:nth-child(6){ --i: 5; }
.gallery__item:nth-child(7){ --i: 6; } .gallery__item:nth-child(8){ --i: 7; } .gallery__item:nth-child(9){ --i: 8; }

.story__item.reveal{ transition-delay: calc(var(--i, 0) * 130ms); }
.story__item:nth-child(1){ --i: 0; } .story__item:nth-child(2){ --i: 1; }
.story__item:nth-child(3){ --i: 2; } .story__item:nth-child(4){ --i: 3; }

/* Slow gold-foil glow breathing on the countdown tiles, like light shifting
   across polished metal. */
@keyframes goldGlowPulse{
  0%, 100%{ box-shadow: 0 18px 40px -22px rgba(0,0,0,.7), 0 0 22px -14px rgba(212,175,55,.35); }
  50%{ box-shadow: 0 18px 40px -22px rgba(0,0,0,.7), 0 0 32px -6px rgba(212,175,55,.6); }
}
.countdown__item{ animation: goldGlowPulse 6s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: 1.5s; }
.countdown__item:nth-child(3){ animation-delay: 3s; }
.countdown__item:nth-child(4){ animation-delay: 4.5s; }

/* Slow shimmer on the section-title gold divider glyph. */
@keyframes dividerShimmer{
  0%, 100%{ opacity: .7; filter: brightness(1); }
  50%{ opacity: 1; filter: brightness(1.5); }
}
.section__title::after{ animation: dividerShimmer 5s ease-in-out infinite; }

/* Very slow glow breathing on the cover's art-deco ornaments. */
@keyframes decoGlow{
  0%, 100%{ opacity: .75; filter: drop-shadow(0 0 0 rgba(212,175,55,0)); }
  50%{ opacity: 1; filter: drop-shadow(0 0 10px rgba(212,175,55,.5)); }
}
.cover__deco-top, .cover__deco-bottom{ animation: decoGlow 7s ease-in-out infinite; }

.couple__photo{ transition: transform .5s ease, box-shadow .5s ease, filter .5s ease; }
.couple__person:hover .couple__photo{
  transform: scale(1.04);
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px rgba(212,175,55,.22), 0 20px 46px -14px rgba(0,0,0,.85), 0 0 40px -4px rgba(212,175,55,.65);
}

.gallery__item{ transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.gallery__item:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: var(--color-primary);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.85), 0 0 24px -6px rgba(212,175,55,.5);
}

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

/* ==========================================================================
   VARIATIVE REVEAL DIRECTIONS — layered on top of the "curtain rising,
   catching the gold light" .reveal above (which still drives opacity/
   filter/glow); these add a directional slide/rotate so sections don't all
   arrive from the same direction.
   ========================================================================== */
.reveal--left{ transform: translateY(32px) translateX(-38px) rotate(-3deg); }
.reveal--left.in{ transform: translateY(0) translateX(0) rotate(0); }
.reveal--right{ transform: translateY(32px) translateX(38px) rotate(3deg); }
.reveal--right.in{ transform: translateY(0) 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: translateY(32px) translateX(-30px) rotate(-2deg); }
.event-card:nth-of-type(odd).reveal.in{ transform: translateY(0) translateX(0) rotate(0); }
.event-card:nth-of-type(even).reveal{ transform: translateY(32px) translateX(30px) rotate(2deg); }
.event-card:nth-of-type(even).reveal.in{ transform: translateY(0) translateX(0) rotate(0); }

.story__item:nth-child(odd).reveal{ transform: translateY(32px) translateX(-24px) rotate(-2deg); }
.story__item:nth-child(odd).reveal.in{ transform: translateY(0) translateX(0) rotate(0); }
.story__item:nth-child(even).reveal{ transform: translateY(32px) translateX(24px) rotate(2deg); }
.story__item:nth-child(even).reveal.in{ transform: translateY(0) translateX(0) rotate(0); }

/* ---------- Section title mask reveal — the h2 itself now wraps a nested
   .section__title__mask/__inner pair for the curtain-lift text motion.
   Since the shared gold-foil text-clip rule above targets `.section__title`
   directly, and that element no longer has any direct text of its own
   (it's all inside the nested spans now), `color:transparent` /
   `-webkit-text-fill-color:transparent` would otherwise inherit down with
   no gradient background of their own to paint through — so the gold
   gradient clip is repointed at `.section__title__inner` here instead,
   keeping the title visible and gold. ---------- */
.section__title__mask{ display: block; overflow: hidden; }
.section__title__inner{
  display: block;
  background: linear-gradient(180deg, #f7e7a8 0%, #d4af37 45%, #a9791f 70%, #e8c766 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(212,175,55,.25));
  transform: translateY(112%);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
.section__title.reveal{ transform: none; transition: opacity .7s ease, filter 1.5s cubic-bezier(.22,1,.36,1); }
.section__title.reveal.in{ transform: none; }
.section__title.reveal.in .section__title__inner{ transform: translateY(0); }

/* ---------- Hero names shimmer — same reasoning as the title above: the
   shared gold-clip rule targets `.hero__names` (the wrapper), which no
   longer carries direct text now that the names are in child spans, so the
   inherited transparent fill would otherwise make them invisible. Redirect
   the (now animated) gold sheen onto the spans directly. ---------- */
.hero__names span{
  background: linear-gradient(100deg, #a9791f 30%, #d4af37 42%, #f7e7a8 50%, #d4af37 58%, #a9791f 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(212,175,55,.25));
  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 GOLD-FOIL SPARKLES — a continuous, slow shower of glinting gold
   flecks and tiny diamond facets drifting down the whole viewport.
   ========================================================================== */
.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;
  filter: drop-shadow(0 0 3px rgba(212,175,55,.6));
}
.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-accent), var(--color-primary), var(--color-secondary));
  z-index: 600;
  transition: width .1s linear;
}

@keyframes countTick{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.28) rotate(-3deg); }
  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); }

@media (prefers-reduced-motion: reduce){
  .countdown__item, .section__title::after, .cover__deco-top, .cover__deco-bottom, .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; animation: none !important; }
  .petals-overlay{ display: none; }
}

/* ==========================================================================
   FLOATING GRAPHICS — small gold-foil sparkles, diamonds & art-deco fans
   drifting gently in each section, glowing against the dark marble like
   glamorous glints of light (not just subtle background blob pulses).
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(212,175,55,.65));
  will-change: transform;
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

@keyframes floatSwayA{
  0%, 100%{ transform: translateY(0) rotate(-6deg); }
  50%{ transform: translateY(-16px) rotate(8deg); }
}
@keyframes floatSwayB{
  0%, 100%{ transform: translateY(0) rotate(5deg); }
  50%{ transform: translateY(-11px) rotate(-8deg); }
}
@keyframes floatSwayC{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  33%{ transform: translate(5px,-9px) rotate(5deg); }
  66%{ transform: translate(-5px,-4px) rotate(-5deg); }
}
.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 motifs — art-deco chevron flourish, laurel-and-gem crest, sunburst
   sparkle-burst. Slow ambient drift/twinkle, in keeping with a glamorous
   rather than playful feel. */
@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(-6deg); }
  25%{ transform: translate(8px,-10px) rotate(4deg); }
  50%{ transform: translate(3px,-20px) rotate(-8deg); }
  75%{ transform: translate(-8px,-9px) rotate(6deg); }
}
@keyframes twinkleSparkleF{
  0%, 100%{ transform: scale(.7) rotate(0deg); opacity:.4; }
  50%{ transform: scale(1.25) 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: twinkleSparkleF 4.5s ease-in-out infinite; }

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

/* === THEMED MOTION (generated) === */
.cover{
  --open-wash: radial-gradient(circle at 50% 50%, rgba(243,213,118,.5), rgba(212,175,55,.22) 42%, transparent 68%);
  --cover-exit: translateY(-60%) scale(1.14);
}
.cover.is-closing{ transition: transform 1.15s cubic-bezier(.6,0,.2,1), opacity 1s ease, filter 1s ease; }

/* A slow spotlight crosses the cover while it waits to be opened. */
.cover::after{
  content: '';
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(74deg, transparent 42%, rgba(243,213,118,.13) 50%, transparent 58%);
  pointer-events: none;
  animation: spotlightSweep 9s ease-in-out infinite;
  z-index: 0;
}
@keyframes spotlightSweep{
  0%, 100%{ transform: translateX(-28%); opacity: .5; }
  50%{ transform: translateX(28%); opacity: 1; }
}

/* Gold edge glow as each card arrives, then a lift on hover. */
@keyframes goldEdge{
  0%{ box-shadow: 0 0 0 0 rgba(212,175,55,.5); }
  100%{ box-shadow: 0 0 0 14px rgba(212,175,55,0); }
}
.event-card.reveal.in, .gift-card.reveal.in{ animation: goldEdge 1.6s .3s ease-out; }
.event-card, .gift-card, .wish-card{ transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease; }
.event-card:hover, .gift-card:hover{ transform: translateY(-5px); border-color: var(--color-secondary); }

/* Countdown numerals shimmer like foil. */
.countdown__num{
  background: linear-gradient(100deg, var(--color-primary) 30%, var(--color-secondary) 50%, var(--color-primary) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 6s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .cover::after, .countdown__num{ 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.

   Gold on near-black is the one palette in the set with contrast to spare —
   every flat text tone here clears 8:1 against #0a0908. What broke this
   theme was the art, not the ink: the scene illustrations, the diamond
   lattice and the stack of gold spotlight pools on .frame lift the paper
   behind the hero to roughly rgb(56,49,22), a mid olive. Measured against
   *that*, the darkest stop of the gold-foil gradients (#a9791f) falls to
   3.4:1 and the bottom of every letter it fills goes muddy.

   The scene layer is stepped back in legibility.css and the lattice here.
   The spotlight pools are left alone — they are the theme — so the ink
   moves up to meet the lit paper instead: the foil gradients give up their
   darkest stop and start at #bf8f2c (4.4:1 there), and the champagne body
   tone lifts a shade. This is the one theme where the corrections go
   lighter rather than darker, because the paper is the dark side.
   ========================================================================== */
.frame::before{ opacity: .34; }

:root{
  --color-text-soft: #c6b895;   /* was #b9a97e — 3.9:1 on the lit background */
}

/* Gold foil, vertical fill: section titles and account numbers. The
   countdown numerals are left out — they run their own horizontal shimmer
   further up, between --color-primary and --color-secondary, and both of
   those already clear 6:1 against the lit background. */
.gift-card__num,
.section__title__inner{
  background-image: linear-gradient(180deg, #f7e7a8 0%, #d4af37 45%, #bf8f2c 70%, #e8c766 100%);
}

/* Gold foil, sweeping fill: the couple's names. */
.hero__names span{
  background-image: linear-gradient(100deg, #bf8f2c 30%, #d4af37 42%, #f7e7a8 50%, #d4af37 58%, #bf8f2c 70%);
}

/* === 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; }
/* Animated drop-shadow glow repaints the ornaments every frame; fade instead. */
@keyframes decoGlowLite{ 0%, 100%{ opacity: .75; } 50%{ opacity: 1; } }
.cover__deco-top, .cover__deco-bottom{ animation-name: decoGlowLite; filter: none; }
/* Deeper pass — everything that repainted every frame. The gold stays, it just
   stops glowing/sweeping: glow filters on sprites, falling glints and gold
   type; box-shadow pulses; the cover spotlight; the foil shimmer. */
.deco-float, .deco-float.is-far, .petal{ filter: none !important; }
.countdown__num, .gift-card__num, .section__title__inner, .hero__names span{ filter: none; animation: none; }
.countdown__item, .section__title::after, .cover__deco-top, .cover__deco-bottom{ animation: none; }
.cover::after{ animation: none; opacity: .6; transform: none; }
.event-card.reveal.in, .gift-card.reveal.in{ animation: none; }
.petal:nth-child(2n){ display: none; }
/* === /PERFORMANCE === */