/* ==========================================================================
   Scroll Animations
   ========================================================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: none;
}

/* Staggered delays — Timeline */
.timeline > .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.timeline > .animate-on-scroll:nth-child(2) { transition-delay: 150ms; }
.timeline > .animate-on-scroll:nth-child(3) { transition-delay: 300ms; }
.timeline > .animate-on-scroll:nth-child(4) { transition-delay: 450ms; }


/* ==========================================================================
   Parallax Effect
   ========================================================================== */

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@supports (-webkit-touch-callout: none) {
  .parallax {
    background-attachment: scroll;
  }
}


/* ==========================================================================
   Marigold Petal Shower
   ========================================================================== */

.marigold-shower {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.marigold-petal {
  position: absolute;
  top: -5%;
  opacity: 0;
  animation: petalFall var(--duration, 5s) cubic-bezier(0.2, 0.6, 0.4, 1) var(--delay, 0s) forwards;
}

.marigold-petal svg {
  width: 100%;
  height: 100%;
}

@keyframes petalFall {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  60% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) translateX(var(--drift, 0px)) rotate(var(--rotation, 180deg)) scale(0.4);
  }
}

/* ==========================================================================
   Fireflies
   ========================================================================== */

.firefly-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.firefly {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 80, 0.9), rgba(200, 168, 78, 0) 70%);
  box-shadow: 0 0 6px 2px rgba(255, 200, 60, 0.3);
  opacity: 0;
  animation: fireflyDrift var(--fly-duration, 12s) ease-in-out infinite;
  animation-delay: var(--fly-delay, 0s);
}

@keyframes fireflyDrift {
  0%, 100% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15% {
    opacity: 0.7;
  }
  30% {
    transform: translate(var(--fly-x1, 20px), var(--fly-y1, -30px));
    opacity: 0.9;
  }
  50% {
    opacity: 0.4;
  }
  70% {
    transform: translate(var(--fly-x2, -20px), var(--fly-y2, 20px));
    opacity: 0.8;
  }
  85% {
    opacity: 0.5;
  }
}

/* ==========================================================================
   Card Border Draw-In + Flowers Fade
   ========================================================================== */

.timeline-entry {
  border-color: transparent;
}

.timeline-entry::before {
  opacity: 0;
}

.timeline-entry::after {
  opacity: 0;
}

.border-draw-svg {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.border-draw-svg rect {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
}

.timeline-entry.visible::before {
  opacity: 1;
  transition: opacity 0.8s ease-out 0.3s;
}

.timeline-entry.visible::after {
  opacity: 1;
  transition: opacity 0.8s ease-out 0.5s;
}

/* ==========================================================================
   Countdown Confetti (wedding day)
   ========================================================================== */

.confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0;
  animation: confettiFall var(--confetti-duration, 3s) ease-out var(--confetti-delay, 0s) forwards;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) rotateX(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(var(--confetti-spin, 720deg)) rotateX(var(--confetti-flip, 360deg));
  }
}

/* ==========================================================================
   Parallax Floating Marigolds
   ========================================================================== */

.parallax-floater {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  will-change: transform;
}

.parallax-floater svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Shooting Star — RSVP Section
   ========================================================================== */

.shooting-star-svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.shooting-star-svg line {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 150 1200;
  stroke-dashoffset: 1350;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

.shooting-star-svg.active line {
  animation: starTrail 1s ease-in forwards;
}

@keyframes starTrail {
  0% {
    stroke-dashoffset: 1350;
    opacity: 0;
  }
  5% {
    opacity: 0.5;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    stroke-dashoffset: -150;
    opacity: 0;
  }
}

/* ==========================================================================
   1. 3D Tilt Card on Mouse Move
   ========================================================================== */

.timeline-entry {
  transform-style: preserve-3d;
  perspective: 800px;
}

.timeline-entry .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 215, 0, 0.15) 0%,
    transparent 60%
  );
  transition: opacity 0.3s ease;
}

.timeline-entry:hover .tilt-shine {
  opacity: 1;
}

/* ==========================================================================
   2. Embossed Gold Foil Texture
   ========================================================================== */

.timeline-entry .foil-layer {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(200, 168, 78, 0.03) 0px,
      rgba(255, 215, 0, 0.06) 2px,
      rgba(200, 168, 78, 0.02) 4px
    );
  mix-blend-mode: overlay;
  transition: opacity 0.4s ease;
}

.timeline-entry:hover .foil-layer {
  opacity: 1;
}

.timeline-content h3 {
  position: relative;
  display: inline-block;
}

.timeline-entry:hover .timeline-content h3 {
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    #ffe088 30%,
    var(--color-accent) 50%,
    #fff4c8 70%,
    var(--color-accent) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: foilShift 2s ease-in-out infinite;
}

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

/* ==========================================================================
   3. Layered Depth (parallax layers on hover)
   ========================================================================== */

.timeline-entry > img {
  transition: transform 0.3s ease-out;
}

.timeline-entry .timeline-content {
  transition: transform 0.3s ease-out;
}

.timeline-entry:hover > img {
  transform: translateZ(30px) scale(1.03);
}

.timeline-entry:hover .timeline-content {
  transform: translateZ(20px);
}