/* ==========================================================================
   Motion layer - link this stylesheet LAST so it wins.

   Every timing value lives in the tokens below. Component stylesheets only
   declare visual states. Show and hide always animate the same properties
   with the same curves, so nothing snaps in one direction and glides in the
   other.
   ========================================================================== */

:root {
  /* Easings: one curve for arriving, one for leaving, one for small UI. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations. Keep the JS exit timers in script.js in sync with these. */
  --motion-fast: 200ms;   /* hovers, menus */
  --motion-base: 300ms;   /* controls, modals */
  --motion-exit: 200ms;   /* anything sliding away */
  --motion-menu-switch: 175ms; /* swapping one menu list for another */
}

/* --- Controls show/hide: mirror each other exactly --- */
.controls {
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out),
    visibility 0s;
  will-change: opacity, transform;
}

.controls.controls-hidden {
  transition:
    opacity var(--motion-exit) var(--ease-in),
    transform var(--motion-exit) var(--ease-in),
    visibility 0s linear var(--motion-exit);
}

.video-player-container.controls-idle,
.video-player-container.controls-idle #videoPlayer {
  cursor: none;
}

/* --- Controls actions: transport + volume left, captions onwards right --- */
.controls-actions {
  justify-content: space-between;
  gap: 16px;
}
.actions-group { gap: 6px; }
.actions-right { margin-left: auto; }

/* --- Volume slider reveal --- */
.volume-group #volumeBar {
  transition:
    width var(--motion-base) var(--ease-out),
    opacity var(--motion-fast) var(--ease-standard);
}

/* --- Context menu (positioned via left/top, animated via transform) --- */
.menu-list {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
  will-change: opacity, transform;
}
.menu-list.menu-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* --- Menu list switch: outgoing slides left, incoming from the right.
       Width and height ride the same curve so both panels always share
       the same box and the seam between them stays perfectly aligned.
       A touch of blur at peak velocity fakes motion blur. --- */
.menu-track {
  transition:
    width var(--motion-menu-switch) var(--ease-standard),
    height var(--motion-menu-switch) var(--ease-standard);
}

.menu-panel.slide-in,
.menu-panel.slide-out {
  will-change: transform, filter;
}

.menu-panel.slide-in {
  animation: menu-slide-in var(--motion-menu-switch) var(--ease-standard) both;
}

.menu-panel.slide-out {
  animation: menu-slide-out var(--motion-menu-switch) var(--ease-standard) both;
}

@keyframes menu-slide-in {
  0% {
    transform: translateX(100%);
    filter: blur(0px);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    transform: translateX(0);
    filter: blur(0px);
  }
}

@keyframes menu-slide-out {
  0% {
    transform: translateX(0);
    filter: blur(0px);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    transform: translateX(-100%);
    filter: blur(0px);
  }
}

/* Reversed: stepping back to a menu that sits before the current one.
   The current list exits to the right and the new one arrives from
   the left - same curve, same blur, mirrored direction. */
.menu-panel.slide-in.reverse {
  animation-name: menu-slide-in-reverse;
}

.menu-panel.slide-out.reverse {
  animation-name: menu-slide-out-reverse;
}

@keyframes menu-slide-in-reverse {
  0% {
    transform: translateX(-100%);
    filter: blur(0px);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    transform: translateX(0);
    filter: blur(0px);
  }
}

@keyframes menu-slide-out-reverse {
  0% {
    transform: translateX(0);
    filter: blur(0px);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    transform: translateX(100%);
    filter: blur(0px);
  }
}

/* --- URL modal (states live in url-modal.css) --- */
.url-modal-overlay {
  transition: opacity var(--motion-base) var(--ease-standard);
}

.url-modal {
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .controls,
  .menu-list,
  .menu-track,
  .menu-panel,
  .url-modal,
  .url-modal-overlay,
  .volume-group #volumeBar {
    transition: none !important;
    animation: none !important;
  }
}