/**
 * Firefly child theme – scroll and transition animations
 * Matches firefly.world: header overlay expand, fade-in on scroll, transitions
 */

/* --- Keyframes (from live site) --- */

/* Header overlay expand (transparent→solid nav transition) */
@keyframes ff-header-expand {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
  }
  100% {
    width: 4000px;
    height: 4000px;
    top: -1000px;
    right: -1000px;
  }
}

/* Fade-in (for scroll-triggered; JS adds .ff-in-view) */
@keyframes ff-fade-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ff-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply when in view (JS adds .ff-in-view on intersection) */
.ff-animate-in.ff-in-view {
  animation: ff-fade-in 0.6s ease-out forwards;
}

.ff-animate-in.ff-in-view.ff-animate-up {
  animation: ff-fade-in-up 0.7s ease-out forwards;
}

/* Initial state before in view */
.ff-animate-in {
  opacity: 0;
}

/* Header overlay expand (use on overlay cover element; add .ff-expand when opening) */
.ff-header-overlay-expand.ff-expand {
  animation: ff-header-expand 0.4s forwards;
}

/* Transitions (match live site timings) */
.ff-transition-opacity {
  transition: opacity 0.3s ease-in-out;
}

.ff-transition-opacity-fast {
  transition: opacity 0.2s ease-in;
}

/* Parallax: use on sections; JS can set transform from scroll (optional) */
.ff-parallax {
  will-change: transform;
}

/* Marquee horizontal scroll (used by marquee.js; inner is 2× track width) */
@keyframes ff-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}