/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

[data-anim] {
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.5s;
}

[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(12px);
}

[data-anim="fade-in"] {
  opacity: 0;
  /* brak transform — nie nadpisuje istniejących transform użytych do pozycjonowania */
}

[data-anim="stagger"] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="fade-up"].is-visible {
  opacity: 1;
  transform: none;
}

[data-anim="fade-in"].is-visible {
  opacity: 1;
  /* brak transform — zachowujemy istniejący transform elementu */
}

[data-anim="stagger"].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ============================================================
   BUTTON PRESS FEEDBACK — Emil: scale(0.97) on :active
   ============================================================ */

.btn-pill-primary,
.btn-pill-ghost,
.cta-btn,
.hero-cta,
.contact-cta-card {
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 160ms ease;
}

.btn-pill-primary:active,
.btn-pill-ghost:active,
.cta-btn:active,
.hero-cta:active {
  transform: scale(0.97);
}

/* ============================================================
   CARD HOVER — delikatne uniesienie
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .suites-card,
  .agent-card,
  .cert-card,
  .cs-arch-card-outer,
  .contact-cta-card,
  .mega-card {
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms ease;
  }

  .suites-card:hover,
  .agent-card:hover,
  .cert-card:hover,
  .cs-arch-card-outer:hover,
  .contact-cta-card:hover {
    transform: translateY(-3px);
  }

  .mega-card:hover {
    transform: translateY(-2px);
  }
}

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */

/* ============================================================
   MOBILE — bez gradientu na nagłówkach hero
   ============================================================ */

@media (max-width: 767px) {
  .hero-h1,
  .fin-hero-h1,
  .prod-hero-h1,
  .csd-hero-h1 {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn-pill-primary,
  .btn-pill-ghost,
  .cta-btn,
  .hero-cta,
  .suites-card,
  .agent-card,
  .cert-card,
  .cs-arch-card-outer,
  .contact-cta-card,
  .mega-card {
    transition: none !important;
    transform: none !important;
  }
}