/* ════════════════════════════════════════════════════════════
   Wareneingang — Modern 2026 Animations
   Techniques used:
     · @starting-style         – entry effects on first render
     · animation-timeline: view() – scroll-driven reveal
     · @property               – animatable CSS custom properties
     · interpolate-size        – animate to height: auto
     · linear()                – spring / physics-based easing
     · view-transition-name    – cross-state view transitions
     · prefers-reduced-motion  – full reduced-motion support
   ════════════════════════════════════════════════════════════ */

/* ─── 1. Opt-in: animate to intrinsic sizes (interpolate-size) */
:root {
  interpolate-size: allow-keywords;
}

/* ─── 2. @property — animatable custom properties ─────────── */

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --glow-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --shimmer-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -30%;
}

/* ─── 3. Keyframes ─────────────────────────────────────────── */

@keyframes fade-up {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-spring {
  from {
    opacity: 0;
    scale: 0.7;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    translate: 0 -1rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

@keyframes shimmer-sweep {
  from { --shimmer-pos: -30%; }
  to   { --shimmer-pos: 130%; }
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50%       { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

@keyframes spin {
  to { rotate: 360deg; }
}

/* ─── 4. Spring easing (linear()) ──────────────────────────── */
/* Approximated spring: mass 1, stiffness 280, damping 18       */
:root {
  --ease-spring-3:
    linear(
      0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25%,
      0.849 31.1%, 0.938 38.1%, 0.968 41.8%,
      1.01 48%, 1.017 52.1%, 1.01 56.4%,
      0.997 71.7%, 0.999 80.1%, 1
    );
  --ease-spring-2:
    linear(
      0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%,
      0.902 22.4%, 0.953 26.9%, 0.988 32.4%,
      1.004 38.4%, 1.013 44.7%, 1.007 61.2%,
      0.999 72.5%, 1
    );
}

/* ─── 5. Page-load entry — main card ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .card-glass {
    /* Animate in on first render using @starting-style */
    transition:
      opacity   var(--duration-slow) var(--ease-standard),
      translate var(--duration-slow) var(--ease-spring-2);
    @starting-style {
      opacity:   0;
      translate: 0 2rem;
    }
  }
}

/* ─── 6. App header icon badge — rotating gradient ring ────── */
@media (prefers-reduced-motion: no-preference) {
  .header-icon-badge {
    background: conic-gradient(
      from var(--gradient-angle),
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.28) 20%,
      rgba(255,255,255,0.06) 40%
    );
    animation: rotate-gradient 6s linear infinite;
    transition: scale var(--duration-base) var(--ease-spring-3);

    &:hover {
      scale: 1.08;
    }
  }
}

/* ─── 7. Stat cards — scroll-driven view() reveal ──────────── */
@media (prefers-reduced-motion: no-preference) {
  .stat-card {
    animation: fade-up both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  /* Staggered delay via :nth-child — works inside a grid     */
  .stat-card:nth-child(1) { animation-delay: 0ms; }
  .stat-card:nth-child(2) { animation-delay: 60ms; }
  .stat-card:nth-child(3) { animation-delay: 120ms; }
  .stat-card:nth-child(4) { animation-delay: 180ms; }
  .stat-card:nth-child(5) { animation-delay: 240ms; }
  .stat-card:nth-child(6) { animation-delay: 300ms; }
}

/* ─── 8. Stat card — spring hover lift ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .stat-card {
    transition:
      translate  var(--duration-base) var(--ease-spring-3),
      box-shadow var(--duration-base) var(--ease-standard),
      scale      var(--duration-fast) var(--ease-spring-3);
  }

  .stat-card:hover {
    translate:  0 -4px;
    box-shadow: var(--shadow-md);
    scale: 1.01;
  }

  .stat-card:active {
    scale: 0.97;
    translate: 0 0;
  }
}

/* ─── 9. Notification banners — @starting-style slide-down ─── */
@media (prefers-reduced-motion: no-preference) {
  .notification-bar:not(.hidden) {
    transition:
      opacity   var(--duration-slow)  var(--ease-standard),
      translate var(--duration-slow)  var(--ease-spring-2),
      display   var(--duration-slow)  var(--ease-standard) allow-discrete;

    @starting-style {
      opacity:   0;
      translate: 0 -0.75rem;
    }
  }
}

/* ─── 10. Primary button — shimmer sweep on hover ──────────── */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary {
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent calc(var(--shimmer-pos) - 20%),
        rgba(255, 255, 255, 0.18) var(--shimmer-pos),
        transparent calc(var(--shimmer-pos) + 20%)
      );
      pointer-events: none;
      border-radius: inherit;
    }

    &:hover:not(:disabled)::after {
      animation: shimmer-sweep 0.55s var(--ease-standard) forwards;
    }
  }
}

/* ─── 11. Drop zone — pulse glow on drag-over ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .drop-zone {
    transition:
      border-color var(--duration-base) var(--ease-standard),
      background   var(--duration-base) var(--ease-standard),
      box-shadow   var(--duration-base) var(--ease-standard);
  }

  .drop-zone.drag-over {
    box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.12);
    animation: badge-pulse 1.4s var(--ease-standard) infinite;
  }
}

/* ─── 12. Filter cards — spring lift on hover / check ───────── */
/* scale() is intentionally avoided here: it causes visual overlap
   with adjacent sibling cards because CSS transforms do not affect
   layout flow. translate() lifts the card *away* from its neighbours
   instead, and z-index ensures the active card renders on top.     */
@media (prefers-reduced-motion: no-preference) {
  .filter-card {
    transition: z-index 0s; /* instant z-index switch */
  }

  .filter-card-content {
    transition:
      border-color var(--duration-base)  var(--ease-standard),
      background   var(--duration-base)  var(--ease-standard),
      box-shadow   var(--duration-base)  var(--ease-standard),
      translate    var(--duration-fast)  var(--ease-spring-3);
  }

  .filter-card:hover {
    z-index: 1;
  }

  .filter-card:hover .filter-card-content {
    translate: 0 -3px;
  }

  .filter-checkbox:checked + .filter-card-content {
    translate: 0 -5px;
  }

  /* Raise checked card above siblings so its elevated shadow shows */
  .filter-card:has(.filter-checkbox:checked) {
    z-index: 1;
  }

  .filter-card:active .filter-card-content {
    translate: 0 1px;
  }
}

/* ─── 13. Filter checkmark — spring pop ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .filter-checkmark {
    transition:
      background-color var(--duration-base) var(--ease-standard),
      border-color     var(--duration-base) var(--ease-standard),
      scale            var(--duration-base) var(--ease-spring-3);
  }

  .filter-checkbox:checked + .filter-card-content .filter-checkmark {
    scale: 1.18;
  }

  .filter-checkmark svg {
    transition:
      opacity var(--duration-base) var(--ease-standard),
      scale   var(--duration-base) var(--ease-spring-3);
  }

  .filter-checkbox:checked + .filter-card-content .filter-checkmark svg {
    opacity: 1;
    scale: 1.15;
  }
}

/* ─── 14. Table rows — view() stagger reveal ────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .table-row {
    animation: fade-up both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
    animation-duration: 1ms; /* Firefox requires explicit duration */
  }
}

/* ─── 15. Summary / stats-panel — scroll-driven fade-up ────── */
@media (prefers-reduced-motion: no-preference) {
  .stats-panel {
    animation: fade-up both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* ─── 16. Results chip — scale-spring entrance ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .results-chip {
    transition:
      opacity var(--duration-slow)  var(--ease-standard),
      scale   var(--duration-slow)  var(--ease-spring-3);

    @starting-style {
      opacity: 0;
      scale:   0.85;
    }
  }
}

/* ─── 17. Loading spinner — reduced-motion safe spin ─────────── */
@media (prefers-reduced-motion: no-preference) {
  .loading-indicator-icon {
    animation: spin 0.8s linear infinite;
  }
}

/* ─── 18. View transitions — cross-state name assignments ────── */
.card-glass           { view-transition-name: main-card; }
#notificationBanner   { view-transition-name: notification; }
#validationSummary    { view-transition-name: summary-area; }
#validationWrapper    { view-transition-name: validation-wrapper; }
#tableWrapper         { view-transition-name: table-wrapper; }

/* ─── 19. View transition animation overrides ────────────────── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(notification) {
    animation: 200ms var(--ease-standard) both fade-in reverse;
  }
  ::view-transition-new(notification) {
    animation: 300ms var(--ease-spring-2) both slide-down;
  }

  ::view-transition-old(summary-area) {
    animation: 180ms var(--ease-standard) both fade-in reverse;
  }
  ::view-transition-new(summary-area) {
    animation: 350ms var(--ease-spring-2) both fade-up;
  }

  ::view-transition-old(table-wrapper) {
    animation: 180ms var(--ease-standard) both fade-in reverse;
  }
  ::view-transition-new(table-wrapper) {
    animation: 350ms var(--ease-spring-2) both fade-up;
  }
}

/* ─── 20. 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;
  }

  /* Keep purely decorative transitions natural-feeling at 0ms */
  .loading-indicator-icon {
    animation: none;
  }
}