/* ========================================================================
   Camera Path accordion + transport bar overlay
   ===================================================================== */

/* ------------------------------------------------------------------------
   Keyframe list – scrollable container with fade edges
   --------------------------------------------------------------------- */

.cinematic-keyframe-list {
  position: relative;
  /* Nine keyframe rows before it scrolls. */
  max-height: calc(var(--control-height) * 9);
  overflow-y: auto;
  /* The shared list box (`.list-box`) look, without its padding: the rows
     carry their own and scroll edge to edge. */
  margin-top: var(--control-block-gap);
  border: var(--border-light);
  background: var(--color-surface-secondary);
  border-radius: var(--radius-none);
}

/* Fade edges only when the list actually overflows */
.cinematic-keyframe-list.is-scrollable {
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--black) var(--space-1-5),
    var(--black) calc(100% - var(--space-4)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--black) var(--space-1-5),
    var(--black) calc(100% - var(--space-4)),
    transparent 100%
  );
}

/* ------------------------------------------------------------------------
   Keyframe item
   --------------------------------------------------------------------- */

.cinematic-keyframe-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--control-row-gap) var(--control-box-padding-x);
  font-size: var(--type-control);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.cinematic-keyframe-item:hover {
  background: var(--color-interactive-secondary-hover);
}

.cinematic-keyframe-index {
  flex: 0 0 var(--space-5);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-readout);
  color: var(--color-text-tertiary);
  text-align: center;
}

.cinematic-keyframe-label {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: var(--color-text-primary);
  font: inherit;
}

.cinematic-keyframe-label[hidden] {
  display: none;
}

.cinematic-keyframe-label:hover {
  text-decoration: underline;
}

.cinematic-keyframe-label-static,
.cinematic-keyframe-label-static:hover {
  cursor: default;
  text-decoration: none;
}

/* Inline rename input: the shared field box (`.obs-select`), sized to the row. */
.cinematic-keyframe-rename {
  flex: 1;
  min-width: 0;
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--type-control);
}

.cinematic-keyframe-actions {
  display: flex;
  gap: var(--space-0-5);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------------
   Timing rows (interleaved between keyframe items in the same list)
   --------------------------------------------------------------------- */

.cinematic-timing-row {
  display: flex;
  align-items: center;
  gap: var(--control-row-gap);
  padding: var(--space-0-5) var(--control-box-padding-x) var(--space-0-5) var(--space-6);
  border-bottom: var(--border-width-1) solid var(--color-border-faint);
  font-size: var(--type-readout);
  background: color-mix(in srgb, var(--color-surface-tertiary) 30%, transparent);
}

.cinematic-timing-label {
  flex: 1;
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Transition durations: the shared field box (`.obs-select`), narrowed to a
   number of seconds. */
.cinematic-duration-input {
  /* Sized in characters of its own font, so "auto" or "60.0" plus the
     stepper fits at the larger touch type as well. */
  width: calc(5ch + 2 * var(--space-1) + var(--space-4));
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--type-readout);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cinematic-timing-unit {
  color: var(--color-text-tertiary);
  font-size: var(--type-readout);
  flex-shrink: 0;
}

/* "Set all" actions row (below the list) */
.cinematic-timing-actions {
  display: flex;
  align-items: center;
  gap: var(--control-row-gap);
  margin-top: var(--control-row-gap);
  font-size: var(--type-readout);
}

.cinematic-timing-actions label {
  margin: 0;
}

/* "End with a return to the first keyframe": a shared checkbox row, set
   flush inside the list. */
.cinematic-loopback-row {
  width: auto;
  margin: 0;
  padding: var(--control-row-gap) var(--control-box-padding-x);
  border-top: var(--border-width-1) solid var(--color-border-faint);
  font-size: var(--type-control);
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------------------
   Transport bar – overlays 3D viewport (compact variant)
   --------------------------------------------------------------------- */

.cinematic-transport-bar {
  position: fixed;
  top: var(--space-2-5);
  left: calc(var(--sidebar-width) + var(--space-2-5) + var(--space-8));
  right: var(--space-8);
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-1-5)));
  transition:
    opacity var(--duration-normal) var(--easing-smooth),
    transform var(--duration-normal) var(--easing-smooth);
}

.cinematic-transport-bar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Only the visible bar takes the pointer. The positioning track spans the
   viewport so the bar can centre inside it, and a transparent full-width
   track would otherwise swallow clicks meant for the canvas. */
.cinematic-transport-bar.visible .cinematic-transport-inner {
  pointer-events: auto;
}

.cinematic-transport-bar.sidebar-hidden {
  left: var(--space-8);
}

/* The bar overlays the top edge of the plot, which is where every multiview
   cell centres its title chip. While the bar is shown the chips step down
   below it; otherwise it hides them and takes the clicks that focus a view. */
#view-title-layer {
  transition: transform var(--duration-normal) var(--easing-smooth);
}

body:has(.cinematic-transport-bar.visible) #view-title-layer {
  transform: translateY(var(--space-14));
}

.cinematic-transport-inner {
  display: flex;
  align-items: center;
  gap: var(--control-block-gap);
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  width: min(92%, 620px);
  margin: 0 auto;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
  border: var(--border-default);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--space-2));
  -webkit-backdrop-filter: blur(var(--space-2));
}

/* Transport buttons – compact squares */
.cinematic-transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  border: var(--border-control);
  border-radius: var(--radius-none);
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    var(--transition-colors),
    transform var(--duration-fast) var(--easing-standard);
  flex-shrink: 0;
}

.cinematic-transport-btn:hover {
  background: var(--color-interactive-secondary-hover);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-md);
}

.cinematic-transport-btn:active {
  transform: translate(0, 0);
  box-shadow: var(--shadow-xs);
}

.cinematic-transport-btn svg {
  pointer-events: none;
  width: var(--space-3-5);
  height: var(--space-3-5);
}

/* Timeline track */
.cinematic-timeline-container {
  flex: 1 1 auto;
  position: relative;
  height: var(--space-8);
  display: flex;
  align-items: center;
  min-width: 0;
}

.cinematic-timeline-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  overflow: visible;
}

.cinematic-timeline-progress {
  height: 100%;
  width: 0%;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
  /* Written every playback frame, so it follows the frame clock unsmoothed. */
  pointer-events: none;
}

/* Invisible range input that captures scrubbing */
.cinematic-timeline-scrubber {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--space-8);
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.cinematic-timeline-container:has(:focus-visible) {
  outline: var(--border-width-2) solid var(--color-border-focus);
  outline-offset: var(--space-px);
}

/* Keyframe markers on the timeline */
.cinematic-timeline-marker {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 15px;
  background: var(--color-text-secondary);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: var(--opacity-70);
}

/* Time readout */
.cinematic-time-readout {
  font-variant-numeric: tabular-nums;
  font-size: var(--type-readout);
  color: var(--color-text-secondary);
  white-space: nowrap;
  /* Wide enough for "00:00 / 00:00", so the timeline does not jump. */
  min-width: 13ch;
  text-align: right;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------------
   Accordion-level tweaks
   --------------------------------------------------------------------- */

/* Keyframes heading: title and its (i) on the left, Clear all on the right.
   Save position sits a block gap below it, so the two buttons' touch
   extensions never meet. */
.cinematic-keyframes-header > #cinematic-clear-btn {
  margin-left: auto;
}

#cinematic-save-btn {
  margin-top: var(--control-block-gap);
}