/* ==========================================================================
   PEN 11 DESIGN SYSTEM - 03-MOTION.CSS
   Material Design 3 Physics Curves, State Layers, Dynamic Radial Ink Ripples,
   Container Morphs, Staggered Reveals & Accessibility Fallbacks
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Universal Interactive State Layer & Radial Ink Ripple
   -------------------------------------------------------------------------- */
.m3-interactive {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

/* Semi-transparent M3 State Overlay */
.m3-interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
  z-index: 1;
}

.m3-interactive:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.m3-interactive:focus-visible::before {
  opacity: var(--md-sys-state-focus-opacity);
}

.m3-interactive:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

/* Radial Ink Ripple Element */
.m3-ripple-ink {
  position: absolute;
  border-radius: 50%;
  background-color: currentColor;
  opacity: var(--md-sys-state-pressed-opacity);
  transform: scale(0);
  pointer-events: none;
  z-index: 2;
  animation: m3-ripple-expand 450ms var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

@keyframes m3-ripple-expand {
  0% {
    transform: scale(0);
    opacity: var(--md-sys-state-pressed-opacity);
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   2. Container Transform & Morph Transitions
   -------------------------------------------------------------------------- */
.m3-container-transform {
  will-change: transform, border-radius, opacity;
  transition: transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate),
              border-radius var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate),
              opacity var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate);
}

/* Shared Axis Transitions (Z-Axis / Zoom) */
@keyframes m3-shared-axis-z-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes m3-shared-axis-z-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* Shared Axis Transitions (Y-Axis / Slide Up) */
@keyframes m3-shared-axis-y-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Through Transition */
@keyframes m3-fade-through {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  35% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   3. Card Reveal & Stagger Animation Utilities
   -------------------------------------------------------------------------- */
.m3-reveal-fade-up {
  animation: m3-shared-axis-y-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

.m3-reveal-zoom {
  animation: m3-shared-axis-z-in var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

/* Stagger Delays */
.m3-stagger-1 { animation-delay: 60ms; }
.m3-stagger-2 { animation-delay: 120ms; }
.m3-stagger-3 { animation-delay: 180ms; }
.m3-stagger-4 { animation-delay: 240ms; }
.m3-stagger-5 { animation-delay: 300ms; }
.m3-stagger-6 { animation-delay: 360ms; }

/* Scroll-Driven Animations where supported */
@supports (animation-timeline: view()) {
  .m3-scroll-reveal {
    animation: m3-shared-axis-y-in 1s cubic-bezier(0.05, 0.7, 0.1, 1) both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
}

/* Float Glow Animation for Hero / Benchmark Highlights */
@keyframes m3-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px -5px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 35px 0px color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent);
  }
}

.m3-glow-pulse {
  animation: m3-glow-pulse 3s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   4. Accessibility: Prefers-Reduced-Motion Fallbacks
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .m3-ripple-ink {
    display: none !important;
  }

  .bento-card:hover,
  .m3-card:hover,
  .m3-fab:hover {
    transform: none !important;
  }
}