/* WG Events — Animations & Enhanced Interactions */

/* ============ KEYFRAME ANIMATIONS (CSS-only) ============ */

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.85; }
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; overflow: hidden; }
  to   { opacity: 1; max-height: 1000px; overflow: visible; }
}

/* ============ FOUC PREVENTION — INITIAL HIDDEN STATES ============
   Only applied when JS is enabled AND prefers-reduced-motion is not set.
   GSAP animates these in via fromTo(); after the tween they are visible.
   If the .js-anim class is absent (no JS or reduced motion), elements
   render normally with opacity 1.
============================================================== */

.js-anim .hero .eyebrow,
.js-anim .hero h1,
.js-anim .hero-lead,
.js-anim .hero-checklist,
.js-anim .hero-cta-row,
.js-anim .hero-visual,
.js-anim .pillar-card,
.js-anim .package-card,
.js-anim .why-card,
.js-anim .gallery-item,
.js-anim .review-card,
.js-anim .section-header,
.js-anim .cta-strip > div {
  opacity: 0;
}

/* GSAP needs to control transform on these elements; will-change hints the GPU */
.js-anim .hero-visual,
.js-anim .pillar-card,
.js-anim .package-card,
.js-anim .why-card,
.js-anim .gallery-item,
.js-anim .section-header {
  will-change: transform, opacity;
}

/* ============ BUTTON BASE TRANSITIONS ============
   Hover transform/scale handled by Motion One; keep box-shadow + color
   transitions in CSS for snappy paint changes.
============================================================== */

.btn {
  transition: box-shadow 200ms ease, background 180ms ease, color 180ms ease, filter 180ms ease;
}

.btn:focus-visible { outline-offset: 4px; }

/* ============ FAQ ANIMATIONS ============ */

.faq-item[open] .faq-answer {
  animation: slideDown 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  max-height: 1000px;
}

.faq-item summary       { transition: color 200ms ease; }
.faq-item summary::after{ transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ============ FAB WHATSAPP — pulsing ring ============ */

.fab-whatsapp {
  animation: pulse 2.5s ease-in-out infinite;
  transition: box-shadow 250ms ease, background 250ms ease;
}

.fab-whatsapp:hover {
  animation: bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.3);
}

/* ============ FORM ELEMENTS ============ */

.field input:focus,
.field select:focus,
.field textarea:focus {
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 0 0 4px rgba(31, 43, 208, 0.15);
}

.checkbox-pill .pill {
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.checkbox-pill:hover .pill {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 43, 208, 0.1);
}

/* ============ NAV LINKS ============ */

.nav-links a       { position: relative; transition: color 200ms ease; }
.nav-links a:hover { color: var(--brand-blue); }

/* nav-cta hover lift handled by Motion One; keep box-shadow/filter in CSS */
.nav-cta {
  transition: box-shadow 200ms ease, filter 200ms ease, background 200ms ease;
}
.nav-cta:hover { filter: brightness(1.08); }

/* ============ FOOTER LINKS ============ */

.footer-social a {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
}
.footer-social a:hover { transform: translateY(-3px); }

.footer-col a { transition: color 200ms ease; }

/* ============ GALLERY (CSS hover — Motion not used here) ============ */

.gallery-item img {
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img {
  transform: scale(1.06);
}
.gallery-item {
  transition: box-shadow 250ms ease;
}
.gallery-item:hover {
  box-shadow: 0 16px 32px rgba(15, 17, 21, 0.16);
}

/* ============ REDUCED MOTION OVERRIDE ============ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Ensure FOUC rules never apply when reduced motion is on
     (the inline <head> script already skips adding .js-anim, but be defensive) */
  .js-anim .hero .eyebrow,
  .js-anim .hero h1,
  .js-anim .hero-lead,
  .js-anim .hero-checklist,
  .js-anim .hero-cta-row,
  .js-anim .hero-visual,
  .js-anim .pillar-card,
  .js-anim .package-card,
  .js-anim .why-card,
  .js-anim .gallery-item,
  .js-anim .review-card,
  .js-anim .section-header,
  .js-anim .cta-strip > div {
    opacity: 1 !important;
  }
}