/* ============================================================
   BEEFY MARKETING — SHARED ANIMATION & HOVER STATE STYLESHEET
   Loaded on all pages alongside mobile.css.
   ============================================================ */

/* ── HOMEPAGE HERO ENTRANCE (load animation, above-the-fold)
   Overrides the inline 0.8s timings in index.html's <style> block.
   animations.css loads last so it wins the cascade. ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow {
    animation: bfy-fade-up 0.32s cubic-bezier(0.22,1,0.36,1) 0.08s both;
  }
  .hero-headline {
    animation: bfy-fade-up 0.38s cubic-bezier(0.22,1,0.36,1) 0.18s both;
  }
  .hero-sub {
    animation: bfy-fade-up 0.34s cubic-bezier(0.22,1,0.36,1) 0.28s both;
  }
  .hero-actions {
    animation: bfy-fade-up 0.32s cubic-bezier(0.22,1,0.36,1) 0.36s both;
  }

  /* ── SERVICE / INDUSTRY PAGE HERO ENTRANCE ── */
  .page-hero .page-eyebrow,
  .about-hero .page-eyebrow {
    animation: bfy-fade-up 0.28s cubic-bezier(0.22,1,0.36,1) 0.10s both;
  }
  .page-hero .page-title,
  .about-hero .about-headline {
    animation: bfy-fade-up 0.36s cubic-bezier(0.22,1,0.36,1) 0.20s both;
  }
  .page-hero .page-intro,
  .about-hero .about-intro {
    animation: bfy-fade-up 0.32s cubic-bezier(0.22,1,0.36,1) 0.30s both;
  }
  .page-hero .btn-primary,
  .page-hero .btn-ghost,
  .page-hero .tag-list {
    animation: bfy-fade-up 0.28s cubic-bezier(0.22,1,0.36,1) 0.38s both;
  }
}

@keyframes bfy-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── RICHER CARD HOVER STATES ──────────────────────────────── */

/* Capability cards */
.cap-card {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease !important;
}
.cap-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(242,125,12,0.12) !important;
}

/* Service cards (homepage) */
.service-card {
  transition: background 0.22s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease !important;
}
.service-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45) !important;
}

/* Team cards */
.team-card {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease !important;
}
.team-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

/* Culture / values cards */
.culture-card {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease !important;
}
.culture-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
}

/* Beefy beats cards */
.beefy-beat {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease !important;
}
.beefy-beat:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
}

/* Process steps */
.process-step {
  transition: background 0.22s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease !important;
}
.process-step:hover {
  background: #1a1a1a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}

/* Related service cards */
.related-card {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.related-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}

/* Client logo boxes */
.client-logo-box {
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1) !important;
}
.client-logo-box:hover {
  transform: translateY(-2px) !important;
}

/* Gallery / portfolio items */
.gallery-item {
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1) !important;
}
.gallery-item:hover {
  transform: translateY(-3px) !important;
}


/* ── RICHER BUTTON HOVER STATES ────────────────────────────── */

.btn-primary {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease !important;
}
.btn-primary:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(192,24,122,0.35) !important;
}

.btn-ghost {
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1) !important;
}
.btn-ghost:hover {
  transform: translateY(-2px) !important;
}

.nav-cta {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1) !important;
}
.nav-cta:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}


/* ── FAQ ITEM HOVER ────────────────────────────────────────── */
.faq-item {
  transition: background 0.2s ease, padding-left 0.2s ease !important;
}
.faq-item:hover {
  padding-left: 8px !important;
}


/* ── REDUCED MOTION OVERRIDES ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-headline,
  .hero-sub,
  .hero-actions,
  .cap-card,
  .service-card,
  .team-card,
  .culture-card,
  .beefy-beat,
  .process-step,
  .related-card,
  .client-logo-box,
  .gallery-item,
  .btn-primary,
  .btn-ghost,
  .nav-cta,
  .faq-item {
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
    transform: none !important;
    animation: none !important;
  }

  .page-hero .page-eyebrow,
  .page-hero .page-title,
  .page-hero .page-intro,
  .page-hero .btn-primary,
  .page-hero .btn-ghost,
  .page-hero .tag-list,
  .about-hero .page-eyebrow,
  .about-hero .about-headline,
  .about-hero .about-intro {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}