/* =========================================================
   FilmEclipse — animations.css
   ========================================================= */

/* ---- Fade-up on scroll ---- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a grid */
.pain-grid .fade-up:nth-child(2),
.services-grid .fade-up:nth-child(2),
.apps-grid .fade-up:nth-child(2),
.steps-grid .fade-up:nth-child(2),
.testimonials-grid .fade-up:nth-child(2) { transition-delay: 0.08s; }

.pain-grid .fade-up:nth-child(3),
.services-grid .fade-up:nth-child(3),
.apps-grid .fade-up:nth-child(3),
.steps-grid .fade-up:nth-child(4),
.testimonials-grid .fade-up:nth-child(3) { transition-delay: 0.16s; }

.pain-grid .fade-up:nth-child(4),
.services-grid .fade-up:nth-child(4),
.apps-grid .fade-up:nth-child(4) { transition-delay: 0.24s; }

.pain-grid .fade-up:nth-child(5),
.services-grid .fade-up:nth-child(5) { transition-delay: 0.32s; }

.pain-grid .fade-up:nth-child(6),
.services-grid .fade-up:nth-child(6) { transition-delay: 0.40s; }

/* ---- Badge pulse ---- */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff751f;
  position: relative;
  flex-shrink: 0;
}

.badge-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ff751f;
  animation: pulse-ring 2s ease-out infinite;
}

/* ---- Hero glass float ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.hero-visual-inner {
  animation: float 6s ease-in-out infinite;
}

/* ---- Shimmer on CTA hover ---- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.btn-primary:hover {
  background-image: linear-gradient(
    90deg,
    #ff751f 0%,
    #ff9552 40%,
    #ff751f 60%,
    #e05f00 100%
  );
  background-size: 200% auto;
  animation: shimmer 1.4s linear infinite;
}

/* ---- Hero glow pulse ---- */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.05); }
}

.hero-glow {
  animation: glow-pulse 8s ease-in-out infinite;
}

/* ---- Stat number pop-in ---- */
@keyframes pop-in {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

.stat-item.visible .stat-number {
  animation: pop-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- Mobile menu slide ---- */
@keyframes menu-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

.mobile-menu.open .mobile-menu-inner {
  animation: menu-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- Hamburger to X ---- */
.hamburger span {
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}