/**
 * Kinetics micro-interactions (curated subset)
 * Adapted for YouTube Focus from https://github.com/ckissi/kinetics
 * Spring easings + product-scoped press / hover / enter motion only.
 * Full gallery has 144 effects — we ship ~6 product-safe ones.
 */

:root {
  /* Prefer tokens from tokens.css; fall back if loaded alone */
  --k-spring: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  --k-spring-soft: var(--ease-spring-soft, cubic-bezier(0.22, 1.2, 0.36, 1));
  --k-glide: var(--ease-glide, cubic-bezier(0.16, 1, 0.3, 1));
  --k-toast-overshoot: cubic-bezier(0.18, 1.25, 0.4, 1);
  --k-duration-press: 280ms;
  --k-duration-enter: var(--duration-spring, 420ms);
  --k-duration-hover: var(--duration-slow, 360ms);
}

/* --------------------------------------------------------------------------
   1. Button press spring / scale rebound
   .btn, .card-cta, .card-tool (from Kinetics push / chip press patterns)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .card-cta,
  .card-tool:not(.card-tool-static) {
    transition:
      background var(--duration-fast) var(--k-glide),
      color var(--duration-fast) var(--k-glide),
      border-color var(--duration-fast) var(--k-glide),
      filter var(--duration-fast) var(--k-glide),
      box-shadow var(--duration-fast) var(--k-glide),
      transform var(--k-duration-press) var(--k-spring);
  }

  .btn:active:not(:disabled),
  .card-cta:active,
  .card-tool:not(.card-tool-static):active {
    transform: scale(0.96);
  }

  .btn-primary:active:not(:disabled),
  .card-cta:active {
    transform: scale(0.97);
  }
}

/* --------------------------------------------------------------------------
   2. Card hover spring (subtle — not dock-style gimmick)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition:
      background var(--duration) var(--k-glide),
      border-color var(--duration) var(--k-glide),
      transform var(--k-duration-hover) var(--k-spring-soft),
      box-shadow var(--k-duration-hover) var(--k-glide);
  }

  .card:hover {
    transform: translateY(-2px);
  }

  .card:active {
    transform: translateY(0) scale(0.995);
    transition-duration: 120ms;
  }

  .card .card-thumb {
    transition: transform var(--k-duration-hover) var(--k-spring-soft);
  }

  .card:hover .card-thumb {
    transform: scale(1.025);
  }
}

/* --------------------------------------------------------------------------
   3. Toast enter overshoot (Kinetics demo-toast)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .toast {
    opacity: 0;
    transform: translateY(-12px) scale(0.92);
    transition:
      opacity 0.28s ease,
      transform var(--k-duration-enter) var(--k-toast-overshoot);
  }

  .toast.toast-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   4. Modal panel enter spring
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .modal-overlay:not([hidden]) .modal-panel {
    animation: k-modal-in var(--k-duration-enter) var(--k-spring) both;
  }
}

@keyframes k-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   5. Playlist / status popover open spring
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .status-popover:not([hidden]),
  .playlist-picker-popover:not([hidden]) {
    animation: k-popover-in 320ms var(--k-spring) both;
    transform-origin: top center;
  }
}

@keyframes k-popover-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   6. Soft focus ring pulse (optional, once on :focus-visible)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn:focus-visible,
  .card-cta:focus-visible,
  .card-tool:focus-visible,
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    animation: k-focus-ring 0.55s var(--k-spring) 1;
  }
}

@keyframes k-focus-ring {
  0% {
    outline-offset: 0;
  }
  45% {
    outline-offset: 3px;
  }
  100% {
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: hard kill Kinetics extras
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card-cta,
  .card-tool,
  .card,
  .card .card-thumb,
  .toast {
    transition: none !important;
    animation: none !important;
  }

  .btn:active:not(:disabled),
  .card-cta:active,
  .card-tool:active,
  .card:hover,
  .card:active,
  .card:hover .card-thumb {
    transform: none !important;
  }

  .modal-overlay:not([hidden]) .modal-panel,
  .status-popover:not([hidden]),
  .playlist-picker-popover:not([hidden]),
  .btn:focus-visible,
  .card-cta:focus-visible,
  .card-tool:focus-visible,
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    animation: none !important;
  }

  .toast.toast-visible {
    opacity: 1;
    transform: none;
  }
}