/* DeKAA fx — sitewide micro-interactions (2026-07-09). Pure progressive enhancement:
   works with fx.js (reveal/tilt/parallax) but every rule degrades gracefully without it,
   and everything animated is fenced behind prefers-reduced-motion: no-preference. */

html { scroll-behavior: smooth; }

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

  /* ---- reveal-on-scroll (fx.js adds .fx-reveal, then .fx-in when visible) ---- */
  .fx-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--fx-d, 0s);
  }
  .fx-reveal.fx-in { opacity: 1; transform: none; }

  /* ---- gradient text shimmer (hub/tool h1 .grad) ---- */
  .grad {
    background-size: 200% auto;
    animation: fxGradShift 7s ease-in-out infinite;
  }
  @keyframes fxGradShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* ---- primary CTA shine sweep ---- */
  .btn.primary, .btn-primary {
    position: relative;
    overflow: hidden;
  }
  .btn.primary::after, .btn-primary::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transition: left .55s ease;
    pointer-events: none;
  }
  .btn.primary:hover::after, .btn-primary:hover::after { left: 130%; }

  /* ---- card lift + deepen shadow (hub .tool handled by fx.js tilt on fine pointers) ---- */
  .tool, .card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
  }
  .card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.35); }
  .tool:hover { transform: translateY(-4px); }

  /* ---- glow blobs get a slow idle drift (fx.js adds pointer parallax on top) ---- */
  .glow { animation: fxDrift 16s ease-in-out infinite alternate; }
  .glow.g2 { animation-duration: 22s; }
  .glow.g3 { animation-duration: 28s; }
  @keyframes fxDrift {
    from { translate: 0 0; }
    to   { translate: 24px -18px; }
  }

  /* ---- FAQ <details> smooth open ---- */
  details > *:not(summary) { animation: fxFade .35s ease; }
  @keyframes fxFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ---- interactive particle background canvas (fx.js draws it; sits under ALL content) ---- */
#fx-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* ---- nav shadow once scrolled (fx.js toggles .fx-scrolled; safe without motion pref) ---- */
.site.fx-scrolled, .site-header.fx-scrolled {
  box-shadow: 0 10px 34px rgba(0,0,0,.38);
  transition: box-shadow .3s ease;
}