/* ==========================================================================
   Animations — staggered reveals, floats, parallax, petals
   ========================================================================== */

/* ---- Reveal stagger delays ---- */
.reveal[data-delay="1"]       { transition-delay: 0.12s; }
.reveal[data-delay="2"]       { transition-delay: 0.24s; }
.reveal[data-delay="3"]       { transition-delay: 0.36s; }
.reveal[data-delay="4"]       { transition-delay: 0.48s; }
.reveal[data-delay="5"]       { transition-delay: 0.60s; }
.reveal-scale[data-delay="1"] { transition-delay: 0.12s; }
.reveal-scale[data-delay="2"] { transition-delay: 0.22s; }
.reveal-scale[data-delay="3"] { transition-delay: 0.32s; }

/* ---- Floating floral ornaments ---- */
.float {
  animation: floatY 8s ease-in-out infinite;
}
.float--slow  { animation-duration: 12s; }
.float--rev   { animation-direction: alternate-reverse; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}

/* Hero floral float — applied in JS via class */
.hero__floral--tl { animation: floatTL 10s ease-in-out infinite; }
.hero__floral--br { animation: floatBR 10s ease-in-out infinite; }
.hero__floral--tr { animation: floatTR 12s ease-in-out infinite 1s; }
.hero__floral--bl { animation: floatBL 12s ease-in-out infinite 2s; }

@keyframes floatTL {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(4px, -10px); }
  66%       { transform: translate(-4px, -6px); }
}
@keyframes floatBR {
  0%, 100% { transform: rotate(180deg) translate(0, 0); }
  33%       { transform: rotate(180deg) translate(4px, -10px); }
  66%       { transform: rotate(180deg) translate(-4px, -6px); }
}
@keyframes floatTR {
  0%, 100% { transform: scaleX(-1) translate(0, 0); }
  50%       { transform: scaleX(-1) translate(3px, -12px); }
}
@keyframes floatBL {
  0%, 100% { transform: scaleX(-1) rotate(180deg) translate(0, 0); }
  50%       { transform: scaleX(-1) rotate(180deg) translate(3px, -12px); }
}

/* ---- Text reveal (per-letter) ---- */
.text-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  animation: letterUp 0.7s var(--ease-luxury) forwards;
}

@keyframes letterUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Shimmer on countdown cards ---- */
.countdown__card::before {
  animation: shimmerCard 4s ease-in-out infinite;
}

@keyframes shimmerCard {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* ---- Countdown number flip animation ---- */
.countdown__num.is-flipping {
  animation: numFlip 0.35s var(--ease-luxury);
}

@keyframes numFlip {
  0%   { transform: rotateX(0deg) scale(1); }
  50%  { transform: rotateX(-90deg) scale(0.85); opacity: 0.4; }
  100% { transform: rotateX(0deg) scale(1); opacity: 1; }
}

/* ---- Button micro-move (magnetic handled via JS) ---- */
.btn {
  transition:
    transform 0.28s var(--ease-luxury),
    color var(--dur-fast) var(--ease-luxury),
    box-shadow var(--dur-fast) var(--ease-luxury),
    border-color var(--dur-fast) var(--ease-luxury);
}

/* ---- Gallery card hover lift ---- */
.gallery__item {
  transition:
    transform 0.5s var(--ease-luxury),
    box-shadow 0.5s var(--ease-luxury);
}
.gallery__item:hover,
.gallery__item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(123, 45, 62, 0.3);
}

/* ---- RSVP choice ripple ---- */
.rsvp__choice {
  transition:
    background 0.25s var(--ease-luxury),
    border-color 0.25s var(--ease-luxury),
    color 0.25s var(--ease-luxury),
    transform 0.2s var(--ease-luxury);
}
.rsvp__choice:active {
  transform: scale(0.97);
}

/* ---- Section seam gradient fades ---- */
.section--countdown::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--color-bg-alt));
  pointer-events: none;
  z-index: 2;
}

.section--alt::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--color-bg), transparent);
  pointer-events: none;
  z-index: 2;
}

/* ---- Page entrance (body fade-in after gate closes) ---- */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.page-entering {
  animation: pageFadeIn 0.8s var(--ease-luxury) forwards;
}

/* ==========================================================================
   Floating Flowers — full-viewport falling petal overlay
   ========================================================================== */

/* ── Container ── */
.floating-flowers {
  position: fixed;        /* stays on screen while the user scrolls */
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;   /* never blocks clicks on content below */
  z-index: 4;             /* above hero/sections, below modals/gates */
}

/* ── Individual petal wrapper ── */
.flower-petal {
  position: absolute;
  top: -8%;               /* start just above the viewport */
  opacity: 0;
  will-change: transform, opacity;
  animation-name: petalFall;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.flower-petal svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Fall keyframes — gentle diagonal drift across full viewport height ── */
@keyframes petalFall {
  0%   { transform: translate3d(0,     -10vh, 0) rotate(0deg);   opacity: 0; }
  8%   { opacity: var(--op, 0.7); }
  25%  { transform: translate3d(18px,   25vh, 0) rotate(90deg); }
  50%  { transform: translate3d(-16px,  50vh, 0) rotate(180deg); }
  75%  { transform: translate3d(16px,   75vh, 0) rotate(270deg); }
  92%  { opacity: calc(var(--op, 0.7) * 0.6); }
  100% { transform: translate3d(-12px, 112vh, 0) rotate(360deg); opacity: 0; }
}

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .floating-flowers { display: none; }
}