/**
 * Sitewide micro-interactions (§7 motion hook points, §13 reduced motion).
 * Loaded after tokens + theme. Components opt in via .motion-card / .motion-press
 * or auto-enhancement from src/lib/motion.ts.
 */

@media (prefers-reduced-motion: no-preference) {
  /* ── Card hover lift ── */
  .motion-card {
    box-shadow: var(--shadow-card);
    transition:
      transform var(--motion-duration-fast) var(--motion-easing-default),
      box-shadow var(--motion-duration-fast) var(--motion-easing-default);
  }

  @media (hover: hover) and (pointer: fine) {
    .motion-card:hover {
      transform: translateY(calc(var(--motion-ambient-distance) * -0.3));
      box-shadow: var(--shadow-elevated);
    }
  }

  /* ── Scroll reveal (initial state — .motion-reveal--visible applied by JS) ── */
  .motion-reveal {
    opacity: var(--motion-fade-from-opacity);
    transform: translate3d(0, var(--motion-ambient-distance), 0);
    transition:
      opacity var(--motion-fade-duration) var(--motion-fade-easing),
      transform var(--motion-fade-duration) var(--motion-fade-easing);
    transition-delay: var(--motion-reveal-delay, 0ms);
  }

  [data-motion-preset='scale-in'] .motion-reveal {
    transform: translate3d(0, var(--motion-ambient-distance), 0)
      scale(var(--motion-scale-in-from));
    transition:
      opacity var(--motion-scale-in-duration) var(--motion-scale-in-easing),
      transform var(--motion-scale-in-duration) var(--motion-scale-in-easing);
  }

  [data-motion-preset='ambient'] .motion-reveal {
    transform: translate3d(0, var(--motion-ambient-distance), 0) rotate(0.25deg);
  }

  .motion-reveal.motion-reveal--visible {
    opacity: var(--motion-fade-to-opacity);
    transform: translate3d(0, 0, 0) scale(var(--motion-scale-in-to));
  }

  [data-motion-preset='fade'] .motion-reveal.motion-reveal--visible,
  [data-motion-preset='ambient'] .motion-reveal.motion-reveal--visible {
    transform: translate3d(0, 0, 0);
  }

  /* ── Button / CTA press feedback ── */
  .motion-press {
    transition: transform var(--motion-duration-fast) var(--motion-easing-default);
  }

  .motion-press:active {
    transform: scale(0.97);
  }

  /* ── Ambient preset — ocean-floor atmosphere (transform/opacity only) ── */
  [data-motion-preset='ambient'] .site-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  [data-motion-preset='ambient'] .site-ambient__veil {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        ellipse 130% 90% at 50% 108%,
        color-mix(in srgb, var(--color-primary) 22%, transparent),
        transparent 62%
      ),
      radial-gradient(
        ellipse 55% 45% at 8% 18%,
        color-mix(in srgb, var(--color-secondary) 8%, transparent),
        transparent 68%
      ),
      radial-gradient(
        ellipse 48% 40% at 92% 32%,
        color-mix(in srgb, var(--color-accent) 6%, transparent),
        transparent 70%
      );
    opacity: 0.95;
  }

  [data-motion-preset='ambient'] .site-ambient__field {
    position: absolute;
    inset: 0;
    left: -8%;
    width: 116%;
    background-repeat: repeat-y;
    background-size: 100% 38vh;
  }

  [data-motion-preset='ambient'] .site-ambient__field--deep {
    opacity: 0.9;
    background-image:
      radial-gradient(circle at 7% 8%, var(--ambient-bubble-deep) 0 2px, transparent 2.6px),
      radial-gradient(circle at 19% 22%, var(--ambient-bubble-coral) 0 1.5px, transparent 2px),
      radial-gradient(circle at 34% 11%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px),
      radial-gradient(circle at 52% 19%, var(--ambient-bubble-deep) 0 2.5px, transparent 3px),
      radial-gradient(circle at 68% 7%, var(--ambient-bubble-gold) 0 1.5px, transparent 2px),
      radial-gradient(circle at 83% 24%, var(--ambient-bubble-deep) 0 2px, transparent 2.6px),
      radial-gradient(circle at 93% 12%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px),
      radial-gradient(circle at 12% 36%, var(--ambient-bubble-deep) 0 2px, transparent 2.6px),
      radial-gradient(circle at 28% 44%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px),
      radial-gradient(circle at 46% 38%, var(--ambient-bubble-coral) 0 2px, transparent 2.6px),
      radial-gradient(circle at 61% 42%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px),
      radial-gradient(circle at 76% 35%, var(--ambient-bubble-deep) 0 2.5px, transparent 3px),
      radial-gradient(circle at 88% 46%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px),
      radial-gradient(circle at 5% 58%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px),
      radial-gradient(circle at 22% 66%, var(--ambient-bubble-gold) 0 2px, transparent 2.6px),
      radial-gradient(circle at 41% 54%, var(--ambient-bubble-deep) 0 2px, transparent 2.6px),
      radial-gradient(circle at 57% 62%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px),
      radial-gradient(circle at 72% 56%, var(--ambient-bubble-coral) 0 1.5px, transparent 2px),
      radial-gradient(circle at 86% 68%, var(--ambient-bubble-deep) 0 2px, transparent 2.6px),
      radial-gradient(circle at 96% 52%, var(--ambient-bubble-deep) 0 1.5px, transparent 2px);
    animation: motion-bg-bubbles-rise calc(var(--motion-ambient-duration) * 5.5) linear infinite;
  }

  [data-motion-preset='ambient'] .site-ambient__field--mid {
    opacity: 0.75;
    background-image:
      radial-gradient(circle at 11% 14%, var(--ambient-bubble-mid) 0 3px, transparent 3.8px),
      radial-gradient(circle at 26% 9%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 44% 16%, var(--ambient-bubble-coral) 0 2.5px, transparent 3.2px),
      radial-gradient(circle at 59% 6%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 74% 18%, var(--ambient-bubble-gold) 0 2px, transparent 2.6px),
      radial-gradient(circle at 90% 10%, var(--ambient-bubble-mid) 0 3.5px, transparent 4.2px),
      radial-gradient(circle at 16% 32%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 33% 28%, var(--ambient-bubble-mid) 0 3px, transparent 3.8px),
      radial-gradient(circle at 50% 34%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 66% 26%, var(--ambient-bubble-coral) 0 2.5px, transparent 3.2px),
      radial-gradient(circle at 81% 38%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 8% 48%, var(--ambient-bubble-mid) 0 3px, transparent 3.8px),
      radial-gradient(circle at 24% 56%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 39% 46%, var(--ambient-bubble-gold) 0 2.5px, transparent 3.2px),
      radial-gradient(circle at 55% 52%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 71% 44%, var(--ambient-bubble-mid) 0 3.5px, transparent 4.2px),
      radial-gradient(circle at 87% 58%, var(--ambient-bubble-mid) 0 2px, transparent 2.6px),
      radial-gradient(circle at 95% 40%, var(--ambient-bubble-coral) 0 2px, transparent 2.6px);
    animation: motion-bg-bubbles-rise calc(var(--motion-ambient-duration) * 3.6) linear infinite;
    animation-delay: -12s;
  }

  [data-motion-preset='ambient'] .site-ambient__field--near {
    opacity: 0.55;
    background-image:
      radial-gradient(circle at 9% 12%, var(--ambient-bubble-near) 0 4px, transparent 5px),
      radial-gradient(circle at 31% 8%, var(--ambient-bubble-near) 0 3px, transparent 3.8px),
      radial-gradient(circle at 48% 15%, var(--ambient-bubble-gold) 0 3.5px, transparent 4.2px),
      radial-gradient(circle at 63% 5%, var(--ambient-bubble-near) 0 3px, transparent 3.8px),
      radial-gradient(circle at 79% 20%, var(--ambient-bubble-coral) 0 3px, transparent 3.8px),
      radial-gradient(circle at 92% 11%, var(--ambient-bubble-near) 0 4.5px, transparent 5.4px),
      radial-gradient(circle at 18% 30%, var(--ambient-bubble-near) 0 3px, transparent 3.8px),
      radial-gradient(circle at 37% 36%, var(--ambient-bubble-near) 0 4px, transparent 5px),
      radial-gradient(circle at 54% 28%, var(--ambient-bubble-near) 0 3px, transparent 3.8px),
      radial-gradient(circle at 70% 34%, var(--ambient-bubble-gold) 0 3.5px, transparent 4.2px),
      radial-gradient(circle at 85% 26%, var(--ambient-bubble-near) 0 3px, transparent 3.8px),
      radial-gradient(circle at 14% 50%, var(--ambient-bubble-near) 0 4px, transparent 5px),
      radial-gradient(circle at 29% 44%, var(--ambient-bubble-coral) 0 3px, transparent 3.8px),
      radial-gradient(circle at 46% 54%, var(--ambient-bubble-near) 0 3.5px, transparent 4.2px),
      radial-gradient(circle at 62% 48%, var(--ambient-bubble-near) 0 3px, transparent 3.8px),
      radial-gradient(circle at 77% 56%, var(--ambient-bubble-near) 0 4.5px, transparent 5.4px),
      radial-gradient(circle at 94% 42%, var(--ambient-bubble-near) 0 3px, transparent 3.8px);
    animation: motion-bg-bubbles-rise calc(var(--motion-ambient-duration) * 2.4) linear infinite;
    animation-delay: -5s;
  }

  @media (max-width: 47.999rem) {
    [data-motion-preset='ambient'] .site-ambient__field--near {
      opacity: 0.35;
    }

    [data-motion-preset='ambient'] .site-ambient__field--deep {
      opacity: 0.65;
    }
  }

  @media (min-width: 48rem) {
    [data-motion-preset='ambient'] [data-hero].hero-layout::before {
      content: "";
      position: absolute;
      inset: -8% -4%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.55;
      background:
        radial-gradient(
          ellipse 55% 40% at 18% 72%,
          color-mix(in srgb, var(--color-secondary) 16%, transparent),
          transparent 68%
        ),
        radial-gradient(
          ellipse 45% 35% at 82% 28%,
          color-mix(in srgb, var(--color-accent) 12%, transparent),
          transparent 70%
        );
      animation: motion-ambient-caustics calc(var(--motion-ambient-duration) * 1.4)
        var(--motion-ambient-easing) infinite;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__content > * {
      animation: motion-hero-rise var(--motion-duration-slow) var(--motion-fade-easing) both;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__content > :nth-child(1) {
      animation-delay: 0ms;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__content > :nth-child(2) {
      animation-delay: 70ms;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__content > :nth-child(3) {
      animation-delay: 140ms;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__content > :nth-child(4) {
      animation-delay: 210ms;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__content > :nth-child(5) {
      animation-delay: 280ms;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__glow {
      animation: motion-ambient-glow var(--motion-ambient-duration) var(--motion-ambient-easing)
        infinite;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__card {
      animation: motion-ambient-float var(--motion-ambient-duration) var(--motion-ambient-easing)
        infinite;
    }

    [data-motion-preset='ambient'] [data-hero] .hero-layout__media::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.8;
      background-image:
        radial-gradient(circle at 12% 92%, rgb(255 255 255 / 0.16) 0, transparent 8px),
        radial-gradient(circle at 28% 78%, rgb(255 255 255 / 0.11) 0, transparent 6px),
        radial-gradient(circle at 22% 88%, rgb(255 255 255 / 0.14) 0, transparent 7px),
        radial-gradient(circle at 68% 72%, rgb(255 255 255 / 0.1) 0, transparent 5px),
        radial-gradient(circle at 44% 48%, rgb(255 255 255 / 0.09) 0, transparent 4px),
        radial-gradient(circle at 82% 36%, rgb(255 255 255 / 0.12) 0, transparent 6px),
        radial-gradient(circle at 56% 24%, rgb(255 215 0 / 0.1) 0, transparent 5px),
        radial-gradient(circle at 36% 58%, rgb(255 138 138 / 0.08) 0, transparent 4px);
      animation: motion-ambient-bubbles calc(var(--motion-ambient-duration) * 0.85) linear infinite;
    }
  }

  [data-motion-preset='ambient'] [data-hero].hero-layout {
    position: relative;
    isolation: isolate;
  }

  [data-motion-preset='ambient'] [data-hero] .hero-layout__inner {
    position: relative;
    z-index: 1;
  }

  [data-motion-preset='ambient'] .stat-cards__value {
    background-size: 200% auto;
    animation: motion-treasure-shimmer calc(var(--motion-ambient-duration) * 0.65) ease-in-out
      infinite;
  }

  [data-motion-preset='ambient'] .ig-stat-tile__value,
  [data-motion-preset='ambient'] .quick-stats__strip > dd {
    animation: motion-stat-glow calc(var(--motion-ambient-duration) * 0.8) ease-in-out infinite;
  }

  [data-motion-preset='ambient'] [data-hero] [class*="__badge"] {
    animation: motion-badge-pulse calc(var(--motion-ambient-duration) * 0.9) ease-in-out infinite;
  }

  [data-motion-preset='ambient'] [data-hero] a.ig-cta-primary,
  [data-motion-preset='ambient'] .cta-banner a.ig-cta-primary,
  [data-motion-preset='ambient'] .site-header__cta,
  [data-motion-preset='ambient'] .demo-player__launch,
  [data-motion-preset='ambient'] .sticky-action-bar a.ig-cta-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  [data-motion-preset='ambient'] [data-hero] a.ig-cta-primary::after,
  [data-motion-preset='ambient'] .cta-banner a.ig-cta-primary::after,
  [data-motion-preset='ambient'] .site-header__cta::after,
  [data-motion-preset='ambient'] .demo-player__launch::after,
  [data-motion-preset='ambient'] .sticky-action-bar a.ig-cta-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 38%,
      color-mix(in srgb, var(--color-accent) 32%, transparent) 50%,
      transparent 62%
    );
    transform: translate3d(-120%, 0, 0);
    animation: motion-cta-shimmer calc(var(--motion-ambient-duration) * 0.75) ease-in-out
      infinite;
  }

  [data-motion-preset='ambient'] .demo-player__frame {
    animation: motion-frame-brightness calc(var(--motion-ambient-duration) * 1.1) var(--motion-ambient-easing)
      infinite;
  }

  [data-motion-preset='ambient'] .cta-banner__inner {
    animation: motion-ambient-float calc(var(--motion-ambient-duration) * 1.25) var(--motion-ambient-easing)
      infinite;
  }

  [data-motion-preset='ambient'] .site-shell section:not([data-page-hero]) h2[class*="__heading"]::after,
  [data-motion-preset='ambient'] .site-shell aside.verdict-box h2[class*="__heading"]::after {
    transform-origin: left center;
    animation: motion-accent-pulse calc(var(--motion-ambient-duration) * 0.55) ease-in-out infinite;
  }

  @media (hover: hover) and (pointer: fine) {
    [data-motion-preset='ambient'] .feature-grid__item:hover .feature-grid__icon {
      animation: motion-icon-bob 600ms var(--motion-fade-easing);
    }
  }
}

@keyframes motion-bg-bubbles-rise {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-2%, -38vh, 0);
  }
}

@keyframes motion-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-ambient-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, calc(var(--motion-ambient-distance) * -0.45), 0);
  }
}

@keyframes motion-ambient-glow {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes motion-ambient-caustics {
  0%,
  100% {
    opacity: 0.45;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 0.7;
    transform: translate3d(1.5%, -1%, 0) scale(1.04);
  }
}

@keyframes motion-ambient-bubbles {
  0% {
    transform: translate3d(0, 6%, 0);
    opacity: 0.35;
  }

  50% {
    opacity: 0.75;
  }

  100% {
    transform: translate3d(0, -8%, 0);
    opacity: 0.2;
  }
}

@keyframes motion-treasure-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes motion-stat-glow {
  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
}

@keyframes motion-cta-shimmer {
  0%,
  100% {
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  55% {
    transform: translate3d(120%, 0, 0);
    opacity: 1;
  }

  56%,
  100% {
    transform: translate3d(120%, 0, 0);
    opacity: 0;
  }
}

@keyframes motion-accent-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scaleX(1);
  }

  50% {
    opacity: 1;
    transform: scaleX(1.12);
  }
}

@keyframes motion-badge-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes motion-frame-brightness {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.05);
  }
}

@keyframes motion-icon-bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  40% {
    transform: translate3d(0, -4px, 0) rotate(-4deg);
  }

  70% {
    transform: translate3d(0, 1px, 0) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-preset='ambient'] .site-ambient {
    display: none;
  }

  .motion-reveal,
  .motion-reveal.motion-reveal--visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .motion-card,
  .motion-press {
    transition: none;
  }

  [data-motion-preset='ambient'] .site-ambient,
  [data-motion-preset='ambient'] .site-ambient__field,
  [data-motion-preset='ambient'] [data-hero] .hero-layout__content > *,
  [data-motion-preset='ambient'] [data-hero] .hero-layout__glow,
  [data-motion-preset='ambient'] [data-hero] .hero-layout__card,
  [data-motion-preset='ambient'] [data-hero] .hero-layout__media::before,
  [data-motion-preset='ambient'] [data-hero].hero-layout::before,
  [data-motion-preset='ambient'] .stat-cards__value,
  [data-motion-preset='ambient'] .ig-stat-tile__value,
  [data-motion-preset='ambient'] .quick-stats__strip > dd,
  [data-motion-preset='ambient'] [data-hero] [class*="__badge"],
  [data-motion-preset='ambient'] [data-hero] a.ig-cta-primary::after,
  [data-motion-preset='ambient'] .cta-banner a.ig-cta-primary::after,
  [data-motion-preset='ambient'] .site-header__cta::after,
  [data-motion-preset='ambient'] .demo-player__launch::after,
  [data-motion-preset='ambient'] .sticky-action-bar a.ig-cta-primary::after,
  [data-motion-preset='ambient'] .demo-player__frame,
  [data-motion-preset='ambient'] .cta-banner__inner,
  [data-motion-preset='ambient'] .site-shell section:not([data-page-hero]) h2[class*="__heading"]::after,
  [data-motion-preset='ambient'] .site-shell aside.verdict-box h2[class*="__heading"]::after {
    animation: none;
  }
}