/* ============================================
   ANIMATIONS CSS
   ============================================ */

/* ── FADE IN ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

/* ── SHIMMER ── */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── PULSE RING ── */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(201,168,76,0.3); }
  70% { box-shadow: 0 0 0 20px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}

/* ── ROTATION ── */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── PARTICLE RISE ── */
@keyframes particleRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(1.5);
  }
}

/* ── ENVELOPE FLAP ── */
@keyframes flapOpen {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-180deg); }
}

/* ── CARD REVEAL ── */
@keyframes cardReveal {
  0% { 
    opacity: 0;
    transform: translateX(-50%) translateY(80px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-60px);
  }
}

/* ── STAGGER HELPERS ── */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* ── NAV CARD FLOAT ── */
.nav-card:nth-child(1) { animation: floatYSlow 4s ease-in-out infinite; animation-delay: 0s; }
.nav-card:nth-child(2) { animation: floatYSlow 4s ease-in-out infinite; animation-delay: 0.5s; }
.nav-card:nth-child(3) { animation: floatYSlow 4s ease-in-out infinite; animation-delay: 1s; }
.nav-card:nth-child(4) { animation: floatYSlow 4s ease-in-out infinite; animation-delay: 1.5s; }

/* ── GOLD SHIMMER TEXT ── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-light) 40%,
    var(--gold) 60%,
    var(--gold-light) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── SCROLL REVEAL CLASSES ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── PAGE LOAD SEQUENCE ── */
.page-loaded .home-pre {
  animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.page-loaded .couple-names {
  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

.page-loaded .home-subtitle {
  animation: fadeIn 0.8s ease 0.8s forwards;
}

/* ── ENVELOPE HOVER FLOAT ── */
.envelope-svg-wrap {
  animation: floatY 3s ease-in-out infinite;
}

/* ── FORM FOCUS GLOW ── */
.form-group input:focus, .form-group select:focus {
  animation: pulseRing 1s ease;
}

/* ── LOADING DOTS ── */
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.loading-dot:nth-child(1) { animation: dotPulse 1.2s ease infinite 0s; }
.loading-dot:nth-child(2) { animation: dotPulse 1.2s ease infinite 0.2s; }
.loading-dot:nth-child(3) { animation: dotPulse 1.2s ease infinite 0.4s; }

/* ── GRADIENT BORDER ANIMATION ── */
@keyframes gradientBorder {
  0%, 100% { border-color: rgba(201,168,76,0.2); }
  50% { border-color: rgba(201,168,76,0.6); }
}

/* ── MASONRY ITEM HOVER SCALE ── */
.masonry-item {
  transition: box-shadow 0.4s ease;
}

.masonry-item:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
  z-index: 10;
}

/* ── ORNAMENTAL LINE GROW ── */
@keyframes lineGrow {
  from { width: 0; opacity: 0; }
  to { width: 100%; opacity: 1; }
}

/* ── CONFETTI BURST (RSVP) ── */
@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100px) rotate(360deg);
    opacity: 0;
  }
}

.confetti-piece {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: confettiFall 1.5s ease-out forwards;
}

/* ── CURSOR EXPAND ON HOVER ── */
body.hovering .cursor-ring {
  width: 60px;
  height: 60px;
  opacity: 0.5;
}