/* Simam Digital motion layer.
   Everything here is decoration: the site must look and work correctly with this
   file absent, with JS disabled, and for anyone who has asked for reduced motion.
   Reveal elements are hidden by simam-motion.js, never by this stylesheet, so a
   JS failure can never leave content invisible. */

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

  /* ---------- scroll reveal ---------- */
  .sm-reveal {
    opacity: 0;
    transform: translateY(18px);
  }
  .sm-reveal.sm-in {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  }

  /* ---------- hero entrance (CSS only, so it never waits on JS) ---------- */
  @keyframes sm-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  .hero .status, .hero h1, .hero .lede, .hero .btn-row, .hero .client-row,
  .article-hero .status, .article-hero h1, .article-hero .lede, .article-hero .btn-row,
  .learn-hero .status, .learn-hero h1, .learn-hero .lede, .learn-hero .btn-row,
  .gaussian-hero .status, .gaussian-hero h1, .gaussian-hero .lede, .gaussian-hero .btn-row,
  .contact-hero .status, .contact-hero h1, .contact-hero .lede,
  .case-index-hero .status, .case-index-hero h1, .case-index-hero .lede {
    animation: sm-rise .62s cubic-bezier(.22, .61, .36, 1) backwards;
  }
  .hero .status, .article-hero .status, .learn-hero .status,
  .gaussian-hero .status, .contact-hero .status, .case-index-hero .status { animation-delay: .04s }
  .hero h1, .article-hero h1, .learn-hero h1,
  .gaussian-hero h1, .contact-hero h1, .case-index-hero h1 { animation-delay: .12s }
  .hero .lede, .article-hero .lede, .learn-hero .lede,
  .gaussian-hero .lede, .contact-hero .lede, .case-index-hero .lede { animation-delay: .22s }
  .hero .btn-row, .article-hero .btn-row, .learn-hero .btn-row,
  .gaussian-hero .btn-row { animation-delay: .32s }
  .hero .client-row { animation-delay: .40s }
  .hero-panel { animation: sm-rise .7s .18s cubic-bezier(.22, .61, .36, 1) backwards }

  /* ---------- hover: cards ---------- */
  .card, .media-card, .package-card, .learn-feature-card, .gaussian-world-card,
  .case-library-card, .case-archive-card, .problem-card, .saas-card, .item-wrapper {
    transition: transform .22s cubic-bezier(.22, .61, .36, 1),
                box-shadow .22s ease,
                border-color .22s ease;
  }
  a.card:hover, a.card:focus-visible,
  .media-card:hover, .package-card:hover, .gaussian-world-card:hover,
  .case-library-card:hover, .case-archive-card:hover,
  .saas-card:hover, .features3 .item-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(16, 24, 40, .13);
  }
  .section-dark .media-card:hover, .section-dark a.card:hover {
    box-shadow: 0 26px 60px rgba(0, 0, 0, .4);
  }
  /* Non-link cards get a quieter response: they are not clickable, so they
     should not advertise themselves as such. */
  .card:not(a):hover, .problem-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(16, 24, 40, .09);
  }

  /* card imagery drifts in slightly on hover */
  .card-img img, .learn-card-media img, .media-card .video-frame img, .item-img img {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  }
  a.card:hover .card-img img,
  .learn-feature-card:hover .learn-card-media img,
  .media-card:hover .video-frame img,
  .saas-card:hover .item-img img { transform: scale(1.035) }

  /* ---------- hover: the arrow on card CTAs slides ---------- */
  .card-cta:after, .mini-link:after { transition: transform .22s ease }
  a.card:hover .card-cta:after,
  .learn-feature-card:hover .card-cta:after,
  .mini-link:hover:after { transform: translateX(4px) }

  /* ---------- hover: buttons ---------- */
  .btn, .nav-cta { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease }
  .btn:hover, .nav-cta:hover { transform: translateY(-2px) }
  .btn-primary:hover { box-shadow: 0 12px 26px rgba(29, 97, 241, .32) }
  .nav-cta:hover { box-shadow: 0 12px 26px rgba(239, 47, 10, .3) }
  .btn:active, .nav-cta:active { transform: translateY(0) }

  /* ---------- nav link underline sweep ---------- */
  .nav-links > a, .nav-product-trigger, .nav-resource-trigger { position: relative }
  .nav-links > a:after, .nav-product-trigger:after, .nav-resource-trigger:after {
    content: "";
    position: absolute;
    left: 1.05rem;
    right: 1.05rem;
    bottom: .5rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .24s cubic-bezier(.22, .61, .36, 1);
  }
  .nav-links > a:hover:after,
  .nav-product-menu:hover .nav-product-trigger:after,
  .nav-resource-menu:hover .nav-resource-trigger:after { transform: scaleX(1) }

  /* ---------- dropdown panels ease open ---------- */
  .nav-product-dropdown, .nav-resource-dropdown {
    transform: translateY(-6px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav-product-menu:hover .nav-product-dropdown,
  .nav-product-menu:focus-within .nav-product-dropdown,
  .nav-resource-menu:hover .nav-resource-dropdown,
  .nav-resource-menu:focus-within .nav-resource-dropdown {
    transform: none;
    opacity: 1;
  }

  /* ---------- inline + list links ---------- */
  .inline-link, .text-link, .footer a, .solution-aside ul li a {
    transition: color .18s ease, opacity .18s ease;
  }

  /* ---------- reading progress bar (article pages) ---------- */
  .sm-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 60;
    background: linear-gradient(90deg, #1d61f1, #5ce1c2);
    transition: width .1s linear;
    pointer-events: none;
  }

  /* ---------- counters ---------- */
  [data-sm-count] { font-variant-numeric: tabular-nums }
}

/* Reduced motion: no transforms, no transitions, no progress bar.
   The reveal classes are inert here because the JS never adds them. */
@media (prefers-reduced-motion: reduce) {
  .sm-progress { display: none }
}