/* ============================================================
   PINNACLE SIGNWORKS — ANIMATIONS
   GSAP-driven reveals. Initial states set here.
   ============================================================ */

/* Initial state for any element marked for scroll reveal.
   GSAP will animate these to their final state. */
.reveal,
.reveal-up,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

.reveal-fade {
  opacity: 0;
  will-change: opacity;
}

/* Once GSAP unsets these, the element is fully visible. */
/* If JS is disabled, reveal everything as a fallback */
.no-js .reveal,
.no-js .reveal-up,
.no-js .reveal-fade,
.no-js .reveal-stagger > * {
  opacity: 1;
  transform: none;
}

/* prefers-reduced-motion: don't animate, just show */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-fade,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Subtle floating motion on hero mark (for the logo / 3d asset) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

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

@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
}

/* Note: maple leaf pulse animation lives in components.css alongside the
   .hero__eyebrow-leaf styles, since the animation is tightly bound to that element. */