/* ==========================================================================
   motion.css — Scroll-reveal & entrance animations
   Emil Kowalski / Jakub Krehel approach:
     · opacity + translateY + blur (the "materialise" trio)
     · custom easing cubic-bezier(0.22, 1, 0.36, 1) — snappy ease-out
     · under 450ms for all UI transitions
     · prefers-reduced-motion mandatory
   ========================================================================== */

/* ── 1. Hero — on-load entrance (always above the fold) ──────────────────── */

@media (prefers-reduced-motion: no-preference) {

  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(24px);
      filter: blur(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  .hero-heading {
    animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero-subheading {
    animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }

  .hero-text-col .btn-pill {
    animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
  }

  .hero-banner-overlay {
    animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
  }

  /* Hero mockup image — slides in from right */
  @keyframes hero-image-enter {
    from {
      opacity: 0;
      transform: translateX(40px) scale(0.97);
      filter: blur(8px);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: blur(0);
    }
  }

  .hero-bg-frame,
  .hero-mockup-img {
    animation: hero-image-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  }

  /* ── Team page hero ───────────────────────────────────────────────────── */

  .team-hero__title {
    animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .team-hero__subtitle {
    animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }

  .team-filter {
    animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  /* ── Blog listing page ────────────────────────────────────────────────── */

  .blog-header .page-title {
    animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ── Single post — featured image + title + meta sequence ────────────── */

  .single-post-main .post-featured-image {
    animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .single-post-main .entry-title {
    animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }

  .single-post-main .post-meta {
    animation: hero-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
  }

}

/* ── 2. Scroll-reveal — base hidden state ────────────────────────────────── */
/*
   JS (motion.js) adds .motion-hidden to observed elements before they enter
   viewport. This keeps elements visible when JS is disabled or fails.
   The html.js-motion class guards so no flash occurs before JS runs.
*/

html.js-motion .motion-hidden {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition:
    opacity    0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter     0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Revealed state — !important beats same-specificity overrides that come later */
html.js-motion .motion-hidden.motion-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

/* ── 3. Section headings — slightly more vertical travel ─────────────────── */

html.js-motion .section-title.motion-hidden,
html.js-motion .section-title-centered.motion-hidden {
  transform: translateY(28px);
}

/* ── 4. Cards — lighter blur, faster ─────────────────────────────────────── */

html.js-motion .step-card.motion-hidden,
html.js-motion .security-item.motion-hidden,
html.js-motion .advantage-card.motion-hidden {
  transition-duration: 0.38s;
}

/* ── 5. Client logos — minimal movement, no blur (logos are small elements) ─ */

html.js-motion .client-logo-item.motion-hidden {
  transform: translateY(8px);
  filter: none;
  transition-duration: 0.3s;
}

/* ── 7. CTA section ──────────────────────────────────────────────────────── */

html.js-motion .section-touch.motion-hidden {
  transform: translateY(24px);
}

/* ── 8. Middle banner text ───────────────────────────────────────────────── */

html.js-motion .middle-banner-text.motion-hidden {
  transform: translateY(20px);
}

/* ── 8b. Blog post cards — standard card timing ─────────────────────────── */

html.js-motion .blog-post-card.motion-hidden {
  transition-duration: 0.4s;
}

/* ── 8c. Sidebar widgets — lighter reveal ────────────────────────────────── */

html.js-motion .blog-sidebar-widget.motion-hidden {
  transform: translateY(14px);
  transition-duration: 0.38s;
}

/* ── 9. Card hover — advantage cards have background so shadow lift works ─── */
/* step-card has no background — no hover added (shadow on empty box looks bad) */

.advantage-card:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.06);
}

/* ── 10. Reduced-motion — kill everything ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-heading,
  .hero-subheading,
  .hero-text-col .btn-pill,
  .hero-banner-overlay,
  .hero-bg-frame,
  .hero-mockup-img,
  .team-hero__title,
  .team-hero__subtitle,
  .team-filter,
  .blog-header .page-title,
  .single-post-main .post-featured-image,
  .single-post-main .entry-title,
  .single-post-main .post-meta {
    animation: none !important;
  }

  html.js-motion .motion-hidden {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}