/* Custom animations matching Next.js app behavior */

@keyframes marqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rotateOnce {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes selectionPop {
  0% { transform: scale(1); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes expandIn {
  0% { height: 0; opacity: 0; }
  100% { height: var(--target-height, auto); opacity: 1; }
}

@keyframes scaleXIn {
  0% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes glowPulse {
  0% { text-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { text-shadow: 0 0 10px rgba(255,255,255,0.8); }
  100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes waggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

@keyframes wiggleX {
  0% { transform: translateX(0); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* Hero-specific subtle motion */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

@keyframes drift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(8px, -6px) scale(1.02) rotate(1deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes subtleRotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

/* Utility classes */
.marquee {
  display: flex;
  white-space: nowrap;
  animation: marqueeLeft 20s linear infinite;
}

.fade-in-up { animation: fadeInUp 600ms ease-out both; }
.scale-in { animation: scaleIn 300ms ease-out both; }
.pop { animation: selectionPop 180ms ease-out both; }
.fade-in-down { animation: fadeInDown 500ms ease-out both; }
.rotate-once { animation: rotateOnce 600ms ease-out both; }
.scale-x-in { animation: scaleXIn 1000ms ease-out both; transform-origin: center; }

/* Hover helpers tied to parent .group */
.group:hover .group-hover-rotateOnce { animation: rotateOnce 600ms ease-out both; }
.group:hover .group-hover-waggle { animation: waggle 600ms ease-out both; }

/* Looping effects */
.glow-pulse { animation: glowPulse 2s infinite; }
.pulse-ring { animation: pulseRing 2s infinite; }
.wiggle-x { animation: wiggleX 1.5s ease-in-out infinite; }
.float-y-slow { animation: floatY 7s ease-in-out infinite; }
.float-y-medium { animation: floatY 5.5s ease-in-out infinite; }
.drift-slow { animation: drift 12s ease-in-out infinite; }
.drift-medium { animation: drift 9s ease-in-out infinite; }
.tilt-slow { animation: subtleRotate 8s ease-in-out infinite; }

/* slide up/down helpers for containers with height:auto */
.collapsing {
  overflow: hidden;
  transition: max-height 300ms ease, opacity 240ms ease;
}

/* FAQ accordions */
.faq-content[aria-hidden="true"] { display: none; }
.faq-content[aria-hidden="false"] { display: block; animation: expandIn 240ms ease-out both; }