/* Motion is progressive enhancement; content remains visible without JavaScript. */
.dl-motion-card { position: relative; isolation: isolate; }
.dl-motion-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; z-index: 1;
  background: radial-gradient(420px circle at var(--dl-pointer-x, 50%) var(--dl-pointer-y, 30%), rgba(251,191,36,.13), rgba(255,94,98,.045) 38%, transparent 72%);
  transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .dl-motion-card:hover::after { opacity: 1; }
  .dl-tilt:hover {
    transform: perspective(1100px) translateY(-6px) rotateX(var(--dl-rx, 0deg)) rotateY(var(--dl-ry, 0deg));
    border-color: rgba(251,191,36,.55);
    box-shadow: 0 24px 60px -24px rgba(255,94,98,.42), 0 0 24px -16px rgba(16,185,129,.5);
  }
}
.dl-motion-cta { animation: dl-sunrise-flow 7s ease-in-out infinite; }
@keyframes dl-sunrise-flow {
  0%,100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.dl-scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100;
  pointer-events: none; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg,#ff5e62,#fbbf24,#10b981);
  box-shadow: 0 0 12px rgba(251,191,36,.5);
}
@media (prefers-reduced-motion: reduce) {
  .dl-motion-cta, .marquee-track, .orb-glow, .section-watermark::before { animation: none !important; }
  .dl-tilt:hover { transform: none; }
  .dl-motion-card::after { transition: none; }
  html { scroll-behavior: auto !important; }
}