/* ============================================================
   Sharayu & Dipak Wedding — Animations
   All keyframe animations and animation utilities
   ============================================================ */

/* ===== OPENING OVERLAY — DOOR SEQUENCE ===== */
@keyframes innerLightBloom {
  0% {
    opacity: 0;
    transform: scale(0.18);
  }
  20% {
    opacity: 1;
    transform: scale(0.75);
  }
  55% {
    opacity: 0.95;
    transform: scale(1.45);
  }
  100% {
    opacity: 0;
    transform: scale(2.15);
  }
}

@keyframes innerRaysBloom {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(0deg);
  }
  25% {
    opacity: 0.9;
    transform: scale(0.95) rotate(6deg);
  }
  60% {
    opacity: 0.7;
    transform: scale(1.35) rotate(14deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.75) rotate(22deg);
  }
}

@keyframes doorSeamPulse {
  0%, 100% {
    opacity: 0.88;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.22);
  }
}

@keyframes doorSeamFlare {
  0% {
    opacity: 1;
    width: 7px;
    filter: brightness(1.1);
  }
  30% {
    opacity: 1;
    width: 34px;
    filter: brightness(1.8);
  }
  100% {
    opacity: 0;
    width: 90px;
    filter: brightness(2);
  }
}

@keyframes doorSparkleTwinkle {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.65) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.18) rotate(8deg);
  }
}

@keyframes tapPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

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

/* ===== HERO ===== */
@keyframes heroNamesIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scrollIndicator {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 1; }
  50%       { transform: translateY(8px) scaleY(0.8); opacity: 0.5; }
}

@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes nameGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(212,175,55,0.3), 0 0 60px rgba(212,175,55,0.1); }
  50%       { text-shadow: 0 0 40px rgba(212,175,55,0.6), 0 0 100px rgba(212,175,55,0.3), 0 0 150px rgba(212,175,55,0.1); }
}

@keyframes ampersandFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-8px) rotate(3deg); }
}

@keyframes heroNameFloat {
  0%, 100% { transform: translateY(0) rotate(-0.8deg); }
  50%       { transform: translateY(-7px) rotate(0.8deg); }
}

/* ===== PETALS ===== */
@keyframes petalFall {
  0%   { transform: translateY(-60px) translateX(0) rotate(0deg);   opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 0.8; }
  100% { transform: translateY(110vh) translateX(80px) rotate(720deg); opacity: 0; }
}

@keyframes petalSway {
  0%, 100% { margin-left: 0; }
  25%       { margin-left: -20px; }
  75%       { margin-left: 20px; }
}

/* ===== COUNTDOWN ===== */
@keyframes countdownFlip {
  0%   { transform: rotateX(0deg); }
  25%  { transform: rotateX(-90deg); }
  75%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes flipNumber {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(0.92); opacity: 0.65; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== BUTTON SHIMMER ===== */
@keyframes shimmerBtn {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ===== MUSIC ===== */
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.3), 0 0 60px rgba(212,175,55,0.1); }
  50%       { box-shadow: 0 0 35px rgba(212,175,55,0.6), 0 0 80px rgba(212,175,55,0.25); }
}

@keyframes musicWave {
  0%, 100% { transform: scaleY(0.5); }
  50%       { transform: scaleY(1); }
}

/* ===== FLOATING DIYAS ===== */
@keyframes dyiaFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  25%  { opacity: 0.8; transform: scale(0.95) skewX(2deg); }
  50%  { opacity: 0.9; transform: scale(1.05) skewX(-2deg); }
  75%  { opacity: 0.85; transform: scale(0.98) skewX(1deg); }
}

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

/* ===== GALLERY HOVER ===== */
@keyframes galleryGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%       { box-shadow: 0 0 30px 5px rgba(212,175,55,0.3); }
}

/* ===== WISHES WALL ===== */
@keyframes wishCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== TIMELINE ===== */
@keyframes timelineDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(212,175,55,0); }
}

/* ===== EVENT CARD HOVER ===== */
@keyframes cardHaloFloat {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.4; }
  50%       { transform: scale(1.08) translateY(-5px); opacity: 0.65; }
}

/* ===== GENERAL FLOAT ===== */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ===== LIGHTBOX ===== */
@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lightboxImgIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== SECTION TRANSITIONS ===== */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== PARTICLE SPARKLE ===== */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%       { opacity: 1; transform: scale(1); }
}

/* ===== SCROLL REVEAL STAGGER ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== PETAL CSS ANIMATION CLASSES ===== */
.petal-css {
  position: absolute;
  width: 10px;
  height: 15px;
  border-radius: 50% 0;
  pointer-events: none;
  animation: petalFall var(--duration, 6s) linear var(--delay, 0s) infinite;
}

/* ===== SPARKLING OVERLAY ===== */
.sparkle-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
  animation: sparkle var(--dur, 2s) ease-in-out var(--del, 0s) infinite;
}

/* ===== TYPED CURSOR ===== */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.typed-cursor {
  display: inline-block;
  width: 2px;
  background: var(--gold-primary);
  animation: blink 1s step-end infinite;
}

/* ===== LOADING ===== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40%            { transform: scale(1);   opacity: 1; }
}

/* ===== FORM FIELD FOCUS ===== */
@keyframes borderGlow {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  100% { box-shadow: 0 0 12px 2px rgba(212,175,55,0.3); }
}

/* ===== FIRE / FLAME ===== */
@keyframes flameWobble {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  25%  { transform: skewX(-5deg) scaleY(1.05); }
  50%  { transform: skewX(3deg) scaleY(0.95); }
  75%  { transform: skewX(-2deg) scaleY(1.02); }
}

/* ===== NOTIFICATION TOAST ===== */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) translateX(-50%); }
  to   { opacity: 1; transform: translateY(0) translateX(-50%); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) translateX(-50%); }
  to   { opacity: 0; transform: translateY(-15px) translateX(-50%); }
}