/* Designflux motion: the styles for motion.js (cursor ring, reveals) and a few extra smooth hovers.
   Colours come from the THEME COLOURS block in base.css. Nothing here runs for reduced motion. */

/* reveals: JS adds .mo-pre first, then .mo-in when the element scrolls into view, so without JavaScript nothing is hidden */
@media (prefers-reduced-motion: no-preference) {
  .mo-pre { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.9s var(--df-ease) var(--mo-d, 0ms), transform 1.1s var(--df-ease) var(--mo-d, 0ms); will-change: opacity, transform; }
  .mo-pre.mo-in { opacity: 1; transform: none; will-change: auto; }
  .bl-card.mo-pre { transition: opacity 0.9s var(--df-ease) var(--mo-d, 0ms), transform 1.1s var(--df-ease) var(--mo-d, 0ms), border-color 0.3s, box-shadow 0.5s var(--df-ease); }
  .bl-card.mo-pre.mo-in:hover { transform: translateY(-4px); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* the footer and policy links glide instead of snapping */
  .df-legal a, .df-flinks a, .lg-toc a, .bl-faq summary, .bl-topics a { transition-timing-function: var(--df-ease); }
  .df-site .lg-toc a { transition: background-color 0.35s var(--df-ease), background 0.35s var(--df-ease), color 0.35s var(--df-ease), transform 0.4s var(--df-ease), box-shadow 0.4s var(--df-ease); }
  .df-site .lg-toc a:hover { transform: translateX(4px); }

  /* images swell slowly under the pointer inside their frames */
  .df-site .bl-hero-img img, .df-site .bl-body figure img { transition: transform 1.2s var(--df-ease); }
  .bl-hero-img:hover img, .bl-body figure:hover img { transform: scale(1.025); }
  .bl-hero-img, .bl-body figure { overflow: hidden; border-radius: 22px; }

  /* FAQ rows ease open and the plus turns */
  .df-site .bl-faq details { transition: background 0.4s var(--df-ease); }
  .bl-faq details:hover { background: rgba(var(--df-ac-rgb), 0.04); }
  .df-site .bl-faq summary { transition: color 0.3s, padding-left 0.45s var(--df-ease); }
  .bl-faq summary:hover { color: var(--df-ac); padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-pre { opacity: 1; transform: none; }
}

/* ---- smooth completion ------------------------------------------------------------------------------------------
   Some parts of the site eased their colour but let their lift, shadow, border or background snap on hover. These lists
   keep each part's own timing and add whatever was missing, so every hover on the site eases.
   The selectors start with .df-site so they win over the component styles that load after this file. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .df-site .df-footer a, .df-site .df-footer .copy { transition: color 0.35s var(--df-ease), background-color 0.35s var(--df-ease), border-color 0.35s var(--df-ease), transform 0.55s var(--df-ease), translate 0.55s var(--df-ease), scale 0.6s var(--df-ease), box-shadow 0.55s var(--df-ease), opacity 0.35s var(--df-ease); }
  .df-site .df-fmail .copy, .df-site .fl-copy, .df-site .as-tuneb { transition: border-color 0.35s var(--df-ease), background-color 0.35s var(--df-ease), background 0.35s var(--df-ease), color 0.35s var(--df-ease), box-shadow 0.45s var(--df-ease), transform 0.5s var(--df-ease); }
  .df-site .df-pricing .dp-btn, .df-site .df-pricing button { transition: transform 0.4s var(--df-ease), border-color 0.35s var(--df-ease), background-color 0.35s var(--df-ease), background 0.35s var(--df-ease), color 0.35s var(--df-ease), box-shadow 0.45s var(--df-ease); }
  .df-site .dr-nav button, .df-site button.up, .df-site button.dn { transition: border-color 0.3s var(--df-ease), color 0.3s var(--df-ease), background-color 0.3s var(--df-ease), background 0.3s var(--df-ease), transform 0.4s var(--df-ease); }
  .df-site [role="tab"], .df-site .fl-plist button { transition: padding 0.5s var(--df-ease), color 0.35s var(--df-ease), background-color 0.35s var(--df-ease), border-color 0.35s var(--df-ease), opacity 0.35s var(--df-ease), transform 0.5s var(--df-ease), box-shadow 0.45s var(--df-ease); }

  /* cards: they fade up once, then lift smoothly on hover */
  .df-site .sx, .df-site .bx, .df-site .fl-cc { transition: transform 0.5s var(--df-ease), border-color 0.4s var(--df-ease), box-shadow 0.5s var(--df-ease), background-color 0.4s var(--df-ease); }
  html.fl .df-site .fl-r, html.fl .fl-r { transition: opacity 0.9s var(--df-ease) calc(var(--i, 0) * 80ms), translate 1.1s var(--df-ease) calc(var(--i, 0) * 80ms), transform 0.5s var(--df-ease), box-shadow 0.5s var(--df-ease), border-color 0.4s var(--df-ease), background-color 0.4s var(--df-ease), color 0.35s var(--df-ease); }

  /* the ghost link buttons ("See our work") ease their colour too */
  .df-site .elementor-widget a.elementor-button, .df-site a.elementor-button.elementor-button-link { transition: --sp 0.45s var(--df-ease), transform 0.6s var(--df-ease), border-color 0.4s var(--df-ease), box-shadow 0.5s var(--df-ease), color 0.35s var(--df-ease), background-color 0.35s var(--df-ease), outline-color 0.3s !important; }
}