/* ==========================================================================
   animations.css — CSS Keyframe Animations with M3 Motion Tokens
   Replaces anime.js with CSS-native animations
   All easing/duration via var(--md-sys-motion-*) tokens from tokens.css
   ========================================================================== */

/* ==========================================================================
   Card Entrance
   Glass card slides up and scales in on page load
   ========================================================================== */

@keyframes card-entrance {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.capture-card {
  animation: card-entrance var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

/* ==========================================================================
   Chip Stagger Entrance
   Chips appear sequentially using --chip-index CSS variable for delay
   Usage: style="--chip-index: 0" on each chip element
   ========================================================================== */

@keyframes chip-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chip-stagger {
  animation: chip-enter var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
  animation-delay: calc(var(--chip-index, 0) * 30ms + 150ms);
}

/* ==========================================================================
   Input Field Reveal
   Form fields fade in with subtle upward motion
   ========================================================================== */

@keyframes input-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-field {
  animation: input-reveal var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

.form-section {
  animation: input-reveal var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

/* ==========================================================================
   Schedule Fields Expand / Collapse
   Animated reveal of date/time fields with overflow hidden
   ========================================================================== */

@keyframes fields-expand {
  from {
    opacity: 0;
    grid-template-rows: 0fr;
  }
  to {
    opacity: 1;
    grid-template-rows: 1fr;
  }
}

.schedule-fields:not([hidden]) {
  display: grid;
  animation: fields-expand var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
  overflow: hidden;
}

.schedule-fields:not([hidden]) > * {
  min-height: 0;
}

/* ==========================================================================
   Validation Shake
   Horizontal oscillation on invalid fields
   Applied via .shake class, removed after 400ms
   ========================================================================== */

@keyframes field-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

.shake {
  animation: field-shake var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
}

/* ==========================================================================
   Chip Selection Pulse
   Brief scale pulse when a filter chip is selected
   ========================================================================== */

@keyframes chip-select-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

md-filter-chip[selected] {
  animation: chip-select-pulse 150ms var(--md-sys-motion-easing-standard);
}

/* ==========================================================================
   Submit Button Press Effect
   FAB-style scale-down on active press
   ========================================================================== */

.form-actions md-filled-button:active {
  transform: scale(0.95);
  transition: transform 80ms ease-out;
}

/* ==========================================================================
   Smooth Focus Transitions
   Subtle transition for form fields receiving focus
   ========================================================================== */

md-outlined-text-field,
md-outlined-select {
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

md-outlined-text-field:focus-within,
md-outlined-select:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
}

/* ==========================================================================
   Submit Button Shimmer
   Gradient sweep across the button surface — gold in dark mode
   Applied via .shimmer pseudo-element on the submit button wrapper
   ========================================================================== */

@keyframes shimmer {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(400%);
  }
}

.form-actions {
  position: relative;
  overflow: hidden;
}

.form-actions::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--md-sys-color-on-primary) 10%, transparent),
    transparent
  );
  animation: shimmer 2500ms var(--md-sys-motion-easing-standard) infinite;
  pointer-events: none;
  border-radius: inherit;
}

@media (prefers-color-scheme: dark) {
  .form-actions::after {
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent),
      transparent
    );
  }
}

/* ==========================================================================
   Toast Enter / Exit
   Toast notification slides up with fade
   ========================================================================== */

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

.toast.visible {
  animation: toast-enter var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

.toast:not(.visible) {
  animation: toast-exit var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards;
}

/* ==========================================================================
   CSS Success Checkmark Animation
   SVG circle + checkmark drawn with stroke-dasharray/stroke-dashoffset
   Uses M3 color tokens, ~600ms total duration
   ========================================================================== */

.success-checkmark-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 10;
}

.success-checkmark-overlay svg {
  width: 100%;
  height: 100%;
}

/* Circle: stroke-dasharray = circumference of r=18 circle = 2*pi*18 ~ 113.1 */
.success-checkmark-overlay .circle {
  fill: none;
  stroke: var(--md-sys-color-primary);
  stroke-width: 2;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 113.1;
  stroke-linecap: round;
  animation: draw-circle 300ms var(--md-sys-motion-easing-emphasized-decelerate) forwards;
}

/* Checkmark: stroke-dasharray = approximate path length ~ 30 */
.success-checkmark-overlay .checkmark {
  fill: none;
  stroke: var(--md-sys-color-primary);
  stroke-width: 2.5;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: draw-checkmark 300ms var(--md-sys-motion-easing-emphasized-decelerate) 250ms forwards;
}

@keyframes draw-circle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-checkmark {
  to {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   Accessibility: Reduced Motion
   Disables all animations for users who prefer reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}