/* =====================================================================
   CHAMELI MOTION — ambient sky & jasmine layers, plus livelier details.
   Everything that moves sits behind prefers-reduced-motion: no-preference.
   ===================================================================== */
.x-sky, .x-petals {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  container-type: size;
}
.x-sky__star {
  position: absolute;
  width: var(--sz);
  height: var(--sz);
  background: var(--gold-l);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l1.8 8.2L20 10l-8.2 1.8L10 20l-1.8-8.2L0 10l8.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l1.8 8.2L20 10l-8.2 1.8L10 20l-1.8-8.2L0 10l8.2-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .5;
}
.x-sky__lantern {
  position: absolute;
  top: 0;
  width: var(--sz);
  color: var(--champagne);
  opacity: 0;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--champagne) 70%, transparent));
}
.x-sky__lantern svg { display: block; width: 100%; height: auto; }
.x-petals__fall {
  position: absolute;
  top: -40px;
  width: var(--sz);
  opacity: 0;
}
.x-petals__sway { display: block; }
.x-petals__sway svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(106, 44, 70, .15)); }

@media (prefers-reduced-motion: reduce) {
  .x-sky__lantern, .x-petals { display: none; }
}

@keyframes x-twinkle {
  0%, 100% { opacity: .12; transform: scale(.55) rotate(0deg); }
  50% { opacity: .95; transform: scale(1) rotate(45deg); }
}
@keyframes x-lantern {
  0%   { opacity: 0;   transform: translateY(calc(100cqh + 20px)) rotate(-4deg); }
  10%  { opacity: .85; }
  30%  { transform: translateY(70cqh) translateX(12px) rotate(4deg); }
  55%  { transform: translateY(42cqh) translateX(-10px) rotate(-3deg); }
  80%  { opacity: .75; transform: translateY(16cqh) translateX(8px) rotate(3deg); }
  100% { opacity: 0;   transform: translateY(-70px) rotate(-2deg); }
}
@keyframes x-fall {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: var(--o); }
  88%  { opacity: var(--o); }
  100% { opacity: 0; transform: translateY(calc(100cqh + 80px)); }
}
@keyframes x-sway {
  from { transform: translateX(-26px) rotate(-40deg); }
  to   { transform: translateX(26px) rotate(160deg); }
}
@keyframes x-pat-drift {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: var(--pat-s); mask-position: var(--pat-s); }
}
@keyframes x-shimmer {
  0%, 15% { background-position: 100% 0; }
  60%, 100% { background-position: 0 0; }
}
@keyframes x-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 18px color-mix(in srgb, var(--champagne) 55%, transparent); }
}
@keyframes x-tile {
  0%, 100% { box-shadow: var(--shadow-d), 0 0 0 0 transparent; border-color: var(--line); }
  50% { box-shadow: var(--shadow-d), 0 0 26px color-mix(in srgb, var(--champagne) 38%, transparent); border-color: var(--champagne); }
}
@keyframes x-ribbon { to { background-position: 48px 0; } }
@keyframes x-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.09) translate(-1.5%, -1%); }
}
@keyframes x-day {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lavender) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes x-heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  28% { transform: scale(1.06); }
}
@keyframes x-shine {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(120%); }
}
@keyframes x-music-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--champagne) 60%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- ambient layers ---- */
  .x-sky__star { animation: x-twinkle var(--t) ease-in-out var(--d) infinite; }
  .x-sky__lantern { animation: x-lantern var(--t) linear var(--d) infinite; }
  .x-petals__fall { animation: x-fall var(--t) linear var(--d) infinite; }
  .x-petals__sway { animation: x-sway 5.5s ease-in-out var(--d) infinite alternate; }

  /* ---- Islamic patterns drift by exactly one tile, so the loop is seamless ---- */
  .x-sec::before { animation: x-pat-drift 70s linear infinite; }

  /* ---- section numbers slide in with their headings ---- */
  .x-head.rv::before {
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .9s ease .15s, transform 1s cubic-bezier(.2, .75, .25, 1) .15s;
  }
  .x-head.rv.is-in::before { opacity: 1; transform: none; }

  /* ---- names shimmer like gold leaf ---- */
  .closing-names {
    background: linear-gradient(100deg, var(--gold-l) 38%, #fff7df 50%, var(--gold-l) 62%) 0 0 / 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: x-shimmer 5.5s ease-in-out infinite;
  }
  .x-sec--welcome .x-letter .signature {
    background: linear-gradient(100deg, var(--plum) 38%, var(--lavender) 50%, var(--plum) 62%) 0 0 / 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: x-shimmer 6s ease-in-out infinite;
  }

  /* ---- letter: the jasmine glyph turns slowly, family cards lift ---- */
  .x-sec--welcome .x-letter__lead::before { animation: x-spin 26s linear infinite; }
  .x-sec--welcome .x-letter .x-host { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
  .x-sec--welcome .x-letter .x-host:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--lavender) 16%, transparent);
  }

  /* ---- verse: the Arabic glows softly ---- */
  .x-verse__ar { animation: x-glow 4.5s ease-in-out infinite; }

  /* ---- countdown tiles breathe one after another ---- */
  .x-count > div { animation: x-tile 4s ease-in-out infinite; }
  .x-count > div:nth-child(2) { animation-delay: .5s; }
  .x-count > div:nth-child(3) { animation-delay: 1s; }
  .x-count > div:nth-child(4) { animation-delay: 1.5s; }

  /* ---- events: cards flip up into place, ribbon runs, badges bob ---- */
  .x-event.rv { transform: perspective(900px) translateY(34px) rotateX(16deg); transform-origin: 50% 0; }
  .x-event.rv.is-in { transform: none; }
  .x-event.rv.is-in:hover { transform: translateY(-6px); box-shadow: 0 22px 40px color-mix(in srgb, var(--lavender) 18%, transparent); }
  .x-event::before { background-size: 48px 100%; animation: x-ribbon 2.8s linear infinite; }
  .x-event__badge { animation: x-float 4s ease-in-out infinite; }
  .x-event:nth-child(2) .x-event__badge { animation-delay: -1.3s; }
  .x-event:nth-child(3) .x-event__badge { animation-delay: -2.6s; }

  /* ---- venue: slow Ken Burns once the photo is in view ---- */
  .x-venue.is-in .x-venue-photo img { animation: x-kenburns 18s ease-in-out 2s infinite alternate; }

  /* ---- calendar: the wedding day pulses ---- */
  .x-cal .is-day { animation: x-day 2.4s ease-out infinite; }

  /* ---- blessings: icons float ---- */
  .x-gift__ic { animation: x-float 4.5s ease-in-out infinite; }
  .x-gift:nth-child(2) .x-gift__ic { animation-delay: -2.2s; }

  /* ---- RSVP: heartbeat badge, shine across the send button ---- */
  .x-rsvpf__badge svg { animation: x-heartbeat 1.8s ease-in-out infinite; }
  .x-sec--rsvp .x-rsvpf__submit { position: relative; overflow: hidden; }
  .x-sec--rsvp .x-rsvpf__submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: x-shine 3.8s ease-in-out 1s infinite;
  }
  .x-sec--rsvp .x-rsvpf__tick { animation: x-pop .7s cubic-bezier(.2, .9, .3, 1.4); }

  /* ---- contacts: warmer lift on hover ---- */
  .x-contact:hover { box-shadow: 0 18px 34px color-mix(in srgb, var(--lavender) 14%, transparent); }

  /* ---- music button rings while playing ---- */
  .music-toggle.is-playing { animation: x-music-ring 2.2s ease-out infinite; }
}