/**
 * css/motion.css
 * Phase 8: GPU-accelerated motion & touch polish.
 * - Strictly animates ONLY `transform` and `opacity` (zero layout thrash).
 * - Progressive enhancement: `.reveal-up` starts hidden ONLY when `<html class="js-motion">`
 *   is present AND `prefers-reduced-motion: no-preference` is active.
 * - Pauses ambient drift when `<html data-motion="paused">` is set.
 */

/* ==========================================================================
   Base Structural Rules (Active in all motion modes for 3D card & progress)
   ========================================================================== */

.card-flip-wrapper {
  perspective: 1000px;
}

.card-flip-smooth {
  position: relative;
  transform-style: preserve-3d;
}

.card-flip-smooth > .card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-flip-smooth > .card-face--back {
  transform: rotateY(180deg);
}

.card-flip-smooth.is-flipped {
  transform: rotateY(180deg);
}

.progress-smooth {
  transform-origin: left center;
}

[dir="rtl"] .progress-smooth,
html[dir="rtl"] .progress-smooth {
  transform-origin: right center;
}

.badge-glow {
  position: relative;
}

.badge-glow::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 18px 2px var(--accent-primary);
  opacity: 0;
}

.bg-drift {
  position: relative;
  overflow-x: clip;
}

.bg-drift::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 35%,
    var(--accent-primary) 0%,
    transparent 65%
  );
  opacity: 0.06;
  transform: translate3d(0, 0, 0) scale(1);
}

html[data-theme="light"] .bg-drift::before {
  opacity: 0.04;
}

/* ==========================================================================
   Full Motion (Only when user has NOT requested reduced motion)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* a) Scroll & Stagger Reveal (.reveal-up)
        Hidden ONLY when html.js-motion is present so no-JS never gets stuck at opacity: 0 */
  html.js-motion .reveal-up {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition-property: opacity, transform;
    transition-duration: 260ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: min(calc(var(--i, 0) * 35ms), 210ms);
  }

  html.js-motion .reveal-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* b) Smooth 3D Card Flip */
  .card-flip-smooth {
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* c) Spring Press Feedback */
  .press-spring,
  .btn.press-spring {
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 150ms ease-out;
  }

  .press-spring:active,
  .btn.press-spring:active,
  .press-spring.is-pressing {
    transform: scale(0.97);
    transition-duration: 95ms;
    transition-timing-function: ease-out;
  }

  /* d) Smooth Progress Bar Fill */
  .progress-smooth {
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* e) One-Time Soft Badge Glow (animates pseudo-element opacity only) */
  .badge-glow::after {
    animation: zy-badge-glow-pulse 1.2s ease-out 1 forwards;
  }

  /* f) Ambient Background Drift (30s loop, paused when document is hidden) */
  .bg-drift::before {
    /* static: a looping full-screen animation behind blurred (backdrop-filter) cards is heavy on phones */
  }

  html[data-motion="paused"] .bg-drift::before {
    animation-play-state: paused;
  }

  /* g) Route Change Fade + Subtle Slide (220ms) */
  /* page-fade intentionally has no animation: cards already reveal individually, and fading the whole
     viewport would re-blur every backdrop-filter card on each frame. */
  .page-fade { }

  @keyframes zy-badge-glow-pulse {
    0% {
      opacity: 0;
      transform: scale(0.96);
    }
    35% {
      opacity: 0.78;
      transform: scale(1.03);
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }

  @keyframes zy-bg-drift-loop {
    0% {
      transform: translate3d(-2%, -1%, 0) scale(1);
    }
    50% {
      transform: translate3d(2%, 2%, 0) scale(1.05);
    }
    100% {
      transform: translate3d(-1%, 3%, 0) scale(1.02);
    }
  }

  @keyframes zy-page-fade-in {
    from {
      opacity: 0;
      transform: translate3d(0, 6px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

/* ==========================================================================
   Reduced Motion Fallbacks
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.js-motion .reveal-up,
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .card-flip-smooth,
  .press-spring,
  .progress-smooth,
  .page-fade {
    transition: none !important;
    animation: none !important;
  }

  .badge-glow::after,
  .bg-drift::before {
    animation: none !important;
  }
}

/* ==========================================================================
   Integration: new motion system replaces the legacy entrance animations
   (only on route containers / lists that received .reveal-up or .page-fade)
   ========================================================================== */
html.js-motion .stagger-list > *:not(.reveal-up) { animation: none; opacity: 1; }
html.js-motion .page-fade > .page-enter { animation: none; opacity: 1; }
html.js-motion .page-fade > .stagger-list > .reveal-up { animation: none; }