/* ==========================================================================
   animations.css — keyframes & scroll-reveal helpers
   All motion respects prefers-reduced-motion (see style.css media query
   and .reveal fallback in main.js).
   ========================================================================== */

/* ---------- Entrance choreography ---------- */
@keyframes fold-breathe {
  0%, 100% { opacity: 0.38; transform: scaleX(1); }
  50%      { opacity: 0.62; transform: scaleX(1.06); }
}

@keyframes bow-sway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(4px); }
}

@keyframes tag-swing {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Bow unties: lifts away with a little spin */
.entrance[data-state="opening"] .entrance__bow {
  animation: bow-release 0.55s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}

@keyframes bow-release {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  40%  { transform: translateY(-14px) scale(1.06) rotate(-4deg); opacity: 1; }
  100% { transform: translateY(-140px) scale(0.7) rotate(14deg); opacity: 0; }
}

/* Tag: one bigger swing, then floats up after the bow */
.entrance[data-state="opening"] .entrance__tag {
  animation: tag-release 0.7s 0.18s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}

@keyframes tag-release {
  0%   { transform: rotate(0deg) translateY(0); opacity: 1; }
  25%  { transform: rotate(7deg) translateY(6px); opacity: 1; }
  55%  { transform: rotate(-5deg) translateY(-10px); opacity: 1; }
  100% { transform: rotate(0deg) translateY(-220px) scale(0.85); opacity: 0; }
}

.entrance[data-state="opening"] .entrance__tap-hint {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Soft flash of light as the curtains part */
.entrance__flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 45%,
    rgba(255, 249, 234, 0.95), rgba(255, 241, 208, 0.35) 55%, transparent 75%);
  opacity: 0;
}

.entrance[data-state="opening"] .entrance__flash {
  animation: flash-in 1.1s 0.4s ease-out forwards;
}

@keyframes flash-in {
  0%   { opacity: 0; }
  35%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---------- Petals ---------- */
@keyframes petal-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translate3d(30px, 45vh, 0) rotate(160deg); }
  90%  { opacity: 0.6; }
  100% { transform: translate3d(-24px, 105vh, 0) rotate(340deg); opacity: 0; }
}

/* ---------- Hero ---------- */
@keyframes scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.65, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* No-JS fallback: never hide content */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

/* Staggered children (timeline items, countdown cells) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* ---------- Heartbeat (gifts) ---------- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.14); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.1); }
  50%      { transform: scale(1); }
}

/* ---------- Countdown tick ---------- */
@keyframes tick-pop {
  0%   { transform: translateY(-6px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

.countdown__num.is-ticking {
  animation: tick-pop 0.45s ease;
}

/* ---------- Timeline node pulse ---------- */
.timeline__item.is-visible .timeline__node {
  animation: node-pop 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

@keyframes node-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Parallax helper (hero image) ---------- */
.hero__image.is-parallax {
  transition: transform 0.2s linear;
  will-change: transform;
}