/* =====================================================================
   BODENOVA — Premium Motion Layer
   Cursor follower, magnetic buttons, sticky-header progress, marquee hover
   All effects are desktop + non-touch + non-reduced-motion only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Cursor Follower — soft blur blob following pointer
   Only on desktop, non-touch devices. Never on mobile/tablet.
   --------------------------------------------------------------------- */
.cursor-blob {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  background: radial-gradient(
    circle at center,
    rgba(74, 58, 255, 0.14) 0%,
    rgba(74, 58, 255, 0.06) 40%,
    transparent 70%
  );
  filter: blur(40px);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  mix-blend-mode: normal;
}

.cursor-blob.is-visible { opacity: 1; }

/* Dark backgrounds: switch blob to warm gold, subtler */
[data-scheme="dark"] .cursor-blob,
.hero .cursor-blob,
.stats-wrapper .cursor-blob {
  background: radial-gradient(
    circle at center,
    rgba(200, 155, 60, 0.12) 0%,
    rgba(200, 155, 60, 0.05) 40%,
    transparent 70%
  );
}

/* Hide on touch/mobile */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .cursor-blob { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-blob { display: none !important; }
}

/* ---------------------------------------------------------------------
   2. Magnetic Buttons — CTAs attract the cursor slightly
   JS applies transform via CSS variables (--mx, --my)
   --------------------------------------------------------------------- */
.magnetic {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.magnetic:active {
  transition-duration: 0.12s;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .magnetic { transform: none !important; }
}

/* ---------------------------------------------------------------------
   3. Marquee — hover slowdown for the compliance ticker
   The .ticker__track already animates via existing CSS.
   We override animation-play-state via JS-set data-attr.
   --------------------------------------------------------------------- */
.ticker[data-hover-slow="1"] .ticker__track {
  animation-duration: 90s !important; /* was ~30s */
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ticker .ticker__track {
    animation-play-state: paused !important;
  }
}

/* ---------------------------------------------------------------------
   4. Section-title anchor line — thin underline "in-section" progress
   Optional accent applied when JS adds .has-progress-anchor
   --------------------------------------------------------------------- */
.section-header {
  position: relative;
}

.section-progress {
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 1px;
  width: var(--section-progress, 0%);
  background: linear-gradient(90deg, #4a3aff, #c89b3c);
  max-width: 240px;
  transition: width 0.2s linear;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .section-progress { display: none; }
}

/* ---------------------------------------------------------------------
   5. Image Ken-Burns — very subtle zoom-on-view for hero + case images
   --------------------------------------------------------------------- */
.kb-target {
  overflow: hidden;
}

.kb-target > img,
.kb-target > picture > img {
  transform: scale(1);
  transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.kb-target.is-in-view > img,
.kb-target.is-in-view > picture > img {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .kb-target > img,
  .kb-target > picture > img {
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   6. Text — soft appearance on view (fallback for elements not already animated)
   --------------------------------------------------------------------- */
[data-soft-in] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-soft-in].is-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-soft-in] { opacity: 1 !important; transform: none !important; }
}