/* ==========================================================================
   animations.css — all keyframes for the invitation template
   ========================================================================== */

/* ---- Gate: veil settle, sheen, light bloom ---- */
@keyframes veilSettle {
  from { transform: translateY(var(--settle-from, -6%)); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes veilSheen {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

@keyframes lightBloom {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(90); opacity: 0; }
}

/* ---- Gate card & contents ---- */
@keyframes cardRise {
  from { opacity: 0; transform: translateY(38px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes crestGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.07); }
}

/* ---- Wax seal ---- */
@keyframes sealPop {
  from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes sealBreathe {
  0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 rgba(232,163,23,0); }
  50%      { box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 38px rgba(255,196,107,0.65); }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.16); opacity: 0; }
}

/* ---- Drifting motes / petals ---- */
@keyframes moteDrift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(var(--drift, 30px), -102vh) scale(1.15); }
}

@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  10%  { opacity: 0.55; }
  50%  { transform: translate3d(var(--sway, 40px), 50vh, 0) rotate(180deg); }
  90%  { opacity: 0.35; }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--sway, 40px) * -0.6), 108vh, 0) rotate(400deg);
  }
}

/* ---- Hero ---- */
@keyframes heroDrift {
  from { transform: scale(1.14) translate(0, 0); }
  to   { transform: scale(1.22) translate(-2.2%, -1.6%); }
}

@keyframes nameReveal {
  0%   { opacity: 0; transform: translateY(46px) scale(0.94); filter: blur(14px); letter-spacing: 0.14em; }
  60%  { filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); letter-spacing: normal; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.92); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---- Envelope ---- */
@keyframes heartFloat {
  0%   { opacity: 0; transform: translateY(6px) scale(0.7); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-52px) scale(1.25) rotate(16deg); }
}

/* ---- Countdown ---- */
@keyframes digitFlip {
  0%   { transform: rotateX(-92deg) translateY(-9px); opacity: 0.25; }
  100% { transform: rotateX(0deg) translateY(0); opacity: 1; }
}

/* ---- Timeline ---- */
@keyframes sparkFlicker {
  0%, 100% { transform: scale(1); opacity: 1; }
  45%      { transform: scale(1.4); opacity: 0.75; }
  70%      { transform: scale(0.85); opacity: 0.95; }
}

/* ---- Gallery Ken Burns ---- */
@keyframes kenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.13) translate(-1.6%, -1.2%); }
}

/* ---- Music equaliser ---- */
@keyframes musicBar {
  0%, 100% { height: 8px; }
  50%      { height: 22px; }
}

/* ---- Toran garland sway ---- */
@keyframes toranSway {
  0%, 100% { transform: rotate(-0.5deg) translateY(0); }
  50%      { transform: rotate(0.5deg) translateY(2px); }
}

/* ---- Mandala ring rotation around the Ganesh medallion ---- */
@keyframes mandalaSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Diya flame flicker ---- */
@keyframes diyaFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  30%      { transform: scaleY(1.16) scaleX(0.92); opacity: 0.88; }
  60%      { transform: scaleY(0.94) scaleX(1.06); opacity: 1; }
}

/* ---- Closing heart ---- */
@keyframes heartBeat {
  0%, 100%  { transform: scale(1); }
  14%       { transform: scale(1.22); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.16); }
  56%       { transform: scale(1); }
}

/* ---- Shimmer used for loading chips ---- */
@keyframes shimmer {
  0%   { background-position: -220px 0; }
  100% { background-position: 220px 0; }
}

/* ==========================================================================
   Reduced-motion: honour user preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .petals, .gate__motes { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}