/* Project tuning: transitions.dev recipes + Emil Kowalski's restraint rules. */
:root {
  --dropdown-open-dur: 180ms;
  --dropdown-close-dur: 120ms;
  --modal-open-dur: 220ms;
  --modal-close-dur: 150ms;
  --icon-swap-dur: 150ms;
  --icon-swap-blur: 1px;
  --icon-swap-start-scale: .9;
  --toast-open: 220ms;
  --toast-close: 150ms;
  --toast-distance: 8px;
  --toast-blur: 1px;
  --toast-scale: .98;
  --press-duration: 100ms;
}

/* Remove the old mount keyframe: presence handles entry AND exit now. */
.composer.annotation-popover,.modal.annotation-popover { animation: none; }
.annotation-popover.is-stacked > .annotation-panel { transform-origin: top left; }
.annotation-panel.t-dropdown { --dropdown-pre-scale: .95; }
.annotation-scope-menu,.instruction-filter-menu { isolation: isolate; }
.annotation-scope-trigger .annotation-chevron,.instruction-filter-trigger > .icon {
  transition: transform var(--duration-quick) var(--ease-smooth-out);
}
.annotation-scope-trigger[aria-expanded="true"] .annotation-chevron,
.instruction-filter-trigger[aria-expanded="true"] > .icon { transform: scaleY(-1); }
.annotation-scope-menu button,.instruction-filter-menu button {
  transition: background-color var(--press-duration) ease, color var(--press-duration) ease;
}
.motion-backdrop { opacity: 0; transition: opacity var(--modal-open-dur) var(--ease-smooth-out); }
.motion-backdrop.is-open { opacity: 1; }
.motion-backdrop.is-closing { opacity: 0; transition-duration: var(--modal-close-dur); }
.motion-ghost,.motion-ghost * { pointer-events: none !important; }
.modal.t-modal { max-height: calc(100dvh - 48px); }
.media-crossfade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.preview .pins { z-index: 3; }
.loading-overlay { z-index: 10; opacity: 1; transition: opacity var(--dropdown-open-dur) var(--ease-smooth-out); }
@starting-style { .loading-overlay { opacity: 0; } }
.loading-overlay { padding: 20px; background: #08080866; backdrop-filter: blur(8px); }
.generation-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(320px, 100%); padding: 24px; border: 1px solid #ffffff1a; border-radius: 24px; background: #101010d9; box-shadow: 0 12px 40px #0003; }
.generation-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border: 1px solid #f52aee33; border-radius: 14px; color: #f52aee; background: radial-gradient(ellipse at top, #f52aee24, #f52aee08); }
.generation-icon .icon { width: 24px; height: 24px; }
.loading-title { font-size: 18px; line-height: 24px; font-weight: 500; text-align: center; }
.loading-caption { color: var(--muted); font-size: 12px; line-height: 18px; text-align: center; max-width: 240px; }
.generation-steps { display: flex; gap: 5px; width: 120px; margin-top: 8px; }
.generation-steps > span { flex: 1; height: 3px; border-radius: 99px; background: #ffffff20; }
.loading-overlay[data-stage="0"] .generation-steps > span:nth-child(1),
.loading-overlay[data-stage="1"] .generation-steps > span:nth-child(2),
.loading-overlay[data-stage="2"] .generation-steps > span:nth-child(3) { background: #f52aee; animation: generation-breathe 1s ease-in-out infinite alternate; }
.loading-overlay[data-stage="1"] .generation-steps > span:nth-child(1),
.loading-overlay[data-stage="2"] .generation-steps > span:nth-child(-n+2) { background: #f52aee; }
@keyframes generation-breathe { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .generation-steps > span { animation: none !important; } }
html[data-input-mode="keyboard"] .generation-steps > span { animation: none !important; }
.generation-progress { display: block; position: relative; width: min(220px, 52%); height: 3px; margin-top: 2px; overflow: hidden; border-radius: 99px; background: #ffffff26; }
.generation-progress > span { position: absolute; inset: 0 auto 0 -42%; width: 42%; border-radius: inherit; background: var(--pink); animation: generation-sweep 1.8s var(--ease-linear) infinite; }
@keyframes generation-sweep { to { transform: translateX(340%); } }
.take-fusion-layer { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; }
.take-fusion-card { position: fixed; z-index: 1; background-size: cover; background-position: center; border: 1px solid #ffffff30; border-radius: 16px; box-shadow: 0 16px 50px #0008; transform-origin: center; will-change: transform, opacity; }
.take-fusion-result { position: fixed; z-index: 2; object-fit: cover; border: 1px solid #ffffff1a; box-shadow: 0 24px 80px #0008; pointer-events: none; will-change: transform, opacity; }

/* Frequent interactions stay short; the 7% / 90ms Takes proximity is retained. */
.pill-button,.primary-button,.secondary-button,.back-button,.play-button,
.icon-button,.annotation-action,.annotation-scope-trigger,.instruction-filter-trigger,
.picker-card {
  transition:
    transform var(--press-duration) var(--ease-smooth-out),
    background-color var(--duration-quick) ease,
    border-color var(--duration-quick) ease,
    color var(--duration-quick) ease,
    opacity var(--duration-quick) ease;
}
.pill-button:active:not(:disabled),.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),.back-button:active:not(:disabled),
.play-button:active:not(:disabled),.icon-button:active:not(:disabled),
.annotation-action:active:not(:disabled),.annotation-scope-trigger:active:not(:disabled),
.instruction-filter-trigger:active:not(:disabled),.picker-card:active:not(:disabled) { transform: scale(.98); }
.add-take:active:not(:disabled) > .icon { scale: .94; }
.add-take > .icon { transition: scale var(--press-duration) var(--ease-smooth-out); }
.instruction-card { transition: background-color 80ms ease-out, border-color 80ms ease-out; }
.instruction-card.saved { animation: none; border-color: #cb30e080; }
.primary-button { transition: transform var(--press-duration) var(--ease-smooth-out), filter var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out, background-color var(--duration-quick) ease, border-color var(--duration-quick) ease, color var(--duration-quick) ease, opacity var(--duration-quick) ease; }
.source-remove { transition: opacity var(--duration-quick) ease, background-color var(--duration-quick) ease, transform var(--press-duration) var(--ease-smooth-out); }
.sources { justify-content: safe center; }
.t-icon-swap { align-items: center; justify-items: center; width: 24px; height: 24px; }
.t-icon-swap .t-icon { display: grid; place-items: center; }
.play-button > .t-icon-swap { width: 24px; height: 24px; }
.annotation-delete.is-confirming > span:last-child { opacity: 1; transition: opacity var(--duration-quick) ease; }
@starting-style { .annotation-delete.is-confirming > span:last-child { opacity: 0; } }

/* Hints filter accidental pointer passes, then dismiss without a delay. */
.pin-preview.annotation-panel {
  transform: scale(.98); transform-origin: top left;
  transition: opacity var(--press-duration) ease-out, transform var(--press-duration) ease-out, visibility var(--press-duration);
  transition-delay: 0ms;
}
.video-pin:hover + .pin-preview,.video-pin:focus-visible + .pin-preview {
  transform: scale(1); transition-delay: var(--duration-micro);
}
.video-pin,.annotation-anchor { display: grid; place-items: center; }
.pin-number,.pin-edit { grid-area: 1 / 1; transition: opacity var(--press-duration) ease, transform var(--press-duration) var(--ease-smooth-out); }
.video-pin .pin-edit,.annotation-anchor .pin-edit { display: block; opacity: 0; transform: scale(.9); }
.video-pin:hover .pin-number,.video-pin:focus-visible .pin-number,
.annotation-anchor:hover .pin-number,.annotation-anchor:focus-visible .pin-number { display: block; opacity: 0; transform: scale(.9); }
.video-pin:hover .pin-edit,.video-pin:focus-visible .pin-edit,
.annotation-anchor:hover .pin-edit,.annotation-anchor:focus-visible .pin-edit { opacity: 1; transform: scale(1); }
.scrub-handle,.scrub-tooltip,.scrub-guide,.marker { transition-timing-function: var(--ease-smooth-out); }
.marker:hover,.marker:focus-visible { transform: translateX(-50%) scale(1.08); }
.placement-hint { transition: opacity var(--press-duration) ease; }
@media (hover: none) {
  .preview:hover .placement-hint { opacity: 0; }
  .video-pin:hover + .pin-preview { opacity: 0; visibility: hidden; }
}

/* Keep toast positioning separate from the recipe's animated surface. */
#toast { opacity: 1; transform: translateX(-50%); background: transparent; border: 0; box-shadow: none; padding: 0; transition: none; }
#toast .t-toast { padding: 12px 18px; border: 1px solid #ffffff20; border-radius: 12px; background: #242424; box-shadow: 0 8px 32px #0008; }
.summary-text.is-updating { opacity: .55; }

/* Keyboard navigation is immediate. Reduced motion also skips JS transitions. */
html[data-input-mode="keyboard"] :is(.t-dropdown,.t-modal,.t-icon,.t-toast,.motion-backdrop,.pin-preview,.annotation-chevron,.instruction-filter-trigger > .icon) { transition: none !important; }
html[data-input-mode="keyboard"] button { transition: none !important; }
html[data-input-mode="keyboard"] :is(.pill-button,.primary-button,.secondary-button,.back-button,.play-button,.icon-button,.annotation-action,.annotation-scope-trigger,.instruction-filter-trigger,.picker-card):active { transform: none; }
@media (max-width: 600px) { .play-button > .t-icon-swap { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .pin-preview,.pin-number,.pin-edit,.media-crossfade,.loading-overlay { transition: none !important; transform: none !important; }
  .generation-progress > span { animation: none; left: 0; width: 100%; opacity: .6; }
  .take-fusion-card,.take-fusion-result { animation: none !important; }
  .pill-button:active,.primary-button:active,.secondary-button:active,.back-button:active,
  .play-button:active,.icon-button:active,.annotation-action:active,.annotation-scope-trigger:active,
  .instruction-filter-trigger:active,.picker-card:active { transform: none !important; }
  .add-take:active > .icon { scale: 1; }
  .spinner { animation: none; border-color: #cb30e066; border-top-color: #cb30e0; }
}

/* State-boundary polish: crisp menus, quieter comments, and inert list exits. */
.annotation-panel.t-dropdown { --dropdown-pre-scale: .98; }
.t-dropdown,.t-modal,.t-toast { will-change: auto; }
.motion-loading { opacity: 0; transition: opacity var(--modal-open-dur) var(--ease-smooth-out); }
.motion-loading.is-open { opacity: 1; }
.motion-loading.is-closing { opacity: 0; transition-duration: var(--duration-quick); }
.motion-row-exit { position: fixed; z-index: 4; overflow: hidden; pointer-events: none; }
.motion-row-exit * { pointer-events: none !important; }
/* These are functional hover affordances; only press and disabled-state opacity animate. */
.mix-detail-card,.annotation-scope-menu button,.instruction-filter-menu button { transition: none; }
.primary-button { transition: transform var(--press-duration) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-smooth-out); }
.primary-button:hover:not(:disabled) { transition-duration: var(--press-duration), var(--duration-quick); }
@media (hover: none), (pointer: coarse) {
  .marker:hover { transform: translateX(-50%); box-shadow: none; }
  .scrubber:hover:not(.is-scrubbing) .track { transform: none; }
  .source-remove:hover { transform: none; }
  .video-pin:hover .pin-number,.annotation-anchor:hover .pin-number { display: block; opacity: 1; transform: none; }
  .video-pin:hover .pin-edit,.annotation-anchor:hover .pin-edit { opacity: 0; transform: none; }
}
html[data-input-mode="keyboard"] :is(.motion-loading,.summary-text,.ambient) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-loading { transition: none !important; }
  .pin-preview { transform: none !important; }
}
/* Scope changes keep the metadata row and text field in the same place. */
.composer .annotation-meta.is-whole { height: 24px; padding: 2px 0; }
.composer .annotation-scope-menu { top: calc(100% + 8px); min-width: 144px; }