/* Shared motion layer for all public pages (loaded via catalog/base.html).
 *
 * Progressive enhancement only:
 * - The finished/visible state is always the default, so no-JS and
 *   reduced-motion users see full content with nothing hidden.
 * - Hooks are data-* attributes so they never collide with the existing
 *   .reveal / .home-reveal / .tech-number systems.
 * - Every effect is gated by prefers-reduced-motion; pointer effects also
 *   require a fine pointer. Nothing here animates the LCP hero.
 * Accent: #F56E0F on dark. */

/* ---- Spotlight glow (data-glow): soft orange radial follows the cursor ---- */
[data-glow] { position: relative; }
[data-glow]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .35s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(245, 110, 15, 0.22),
    transparent 60%
  );
}
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  [data-glow]:hover::after { opacity: 1; }
}

/* ---- Tilt (data-tilt): subtle 3D lean toward the cursor ---- */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  [data-tilt] {
    transform: perspective(800px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
    transition: transform .18s ease-out;
    will-change: transform;
  }
}

/* ---- Magnetic (data-magnetic): CTA eases toward the cursor (JS sets transform) ---- */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  [data-magnetic] {
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
  }
}

/* ---- Scroll reveal (data-reveal): namespaced, does NOT touch .reveal ----
 * Hidden only once the inline head snippet confirms motion is allowed
 * (html.motion), so there is no flash and no-JS/reduced-motion keep content. */
html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .6s cubic-bezier(.2, .7, .2, 1),
    transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.motion [data-reveal].in { opacity: 1; transform: none; }

/* ---- Marquee (CSS only): infinite supported-hardware / logo strip ---- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: motion-marquee 32s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes motion-marquee { to { transform: translateX(-50%); } }