/* Motion layer. Everything here is gated behind prefers-reduced-motion:
   no-preference, so reduced-motion users get the complete static site from
   main.css and never see any of this. GSAP-driven scene motion is applied by
   JS (also behind the reduced-motion gate); this file holds the CSS-only
   decorative motion and the fine-pointer custom cursor. */

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

  /* Scroll cue: a gentle travelling line under the hero. */
  .scroll-cue__line {
    transform-origin: top;
    animation: cue-travel 2.2s ease-in-out infinite;
  }
  @keyframes cue-travel {
    0%   { transform: scaleY(0.2); opacity: 0.3; }
    50%  { transform: scaleY(1);   opacity: 1; }
    100% { transform: scaleY(0.2); opacity: 0.3; transform-origin: bottom; }
  }
  /* Pause control active: rest the cue in a static, legible state. */
  [data-motion="paused"] .scroll-cue__line { animation: none; transform: scaleY(0.65); opacity: 0.7; }

  /* Button lift on hover (transform only; springy curve set on .btn in main.css). */
  .btn:hover { transform: translateY(-2px); }

  /* Tier lift on hover (its own eased curve, distinct from the button). */
  .tier { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
  .tier:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(22,33,27,0.45); }
  /* Numbered list rows warm their accent on hover. */
  .why__item { transition: color 0.25s ease; }
  .why__item:hover .why__num { color: var(--accent-2); }

  /* Custom cursor: fine-pointer, hover-capable devices only. Touch never sees it. */
  @media (hover: hover) and (pointer: fine) {
    .cursor {
      display: block;
      position: fixed;
      top: 0; left: 0;
      width: 26px; height: 26px;
      margin: -13px 0 0 -13px;
      border: 2px solid var(--accent-2);
      border-radius: 50%;
      pointer-events: none;
      z-index: 300;
      mix-blend-mode: difference;
      will-change: transform;
    }
    .cursor.is-hot { transform-origin: center; }
    /* JS toggles .cursor-active on body once the rAF loop is running. */
    body.cursor-active { cursor: none; }
    body.cursor-active a,
    body.cursor-active button,
    body.cursor-active input,
    body.cursor-active textarea,
    body.cursor-active .ba__range { cursor: none; }
  }
}