/* Halo Lab product motion system — transitions.dev semantic scale. */
:root {
  --color-text-muted-aa: #6f6f69;
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --distance-micro: 4px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;

  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shimmer-dur: 2000ms;
  --shimmer-base: #7c7c7c;
  --shimmer-highlight: #0d0d0d;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.62);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #f1f1f1;
  --tabs-pill-bg: #ffffff;
}

/* Menu dropdown — exact transitions.dev recipe. */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }
.t-dropdown.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

/* Modal open / close — exact transitions.dev recipe. */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

/* Toast open / close — exact transitions.dev recipe. */
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}
.app-shell .t-toast,
.strategy-page .t-toast,
.dashboard-page .t-toast {
  transform: translate(-50%, var(--toast-distance)) scale(var(--toast-scale));
}
.app-shell .t-toast.is-open,
.strategy-page .t-toast.is-open,
.dashboard-page .t-toast.is-open {
  transform: translate(-50%, 0) scale(1);
}

/* Native dialogs already own the top-layer; the recipe owns their surface motion. */
.workspace-dialog.t-modal[open],
.workspace-dialog.t-modal.is-closing { animation: none; }
.dialog.t-modal { animation: none; transform-origin: center; }
.create-menu.t-dropdown { animation: none; }

/* Shimmer text — exact transitions.dev recipe. */
.t-shimmer { position: relative; display: inline-block; color: var(--shimmer-base); }
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--shimmer-highlight) 50%, transparent 60%, transparent 100%);
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

/* Text reveal — exact transitions.dev recipe, extended to short result lists. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger.is-shown .t-stagger-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 200ms ease, transform 0s linear, filter 0s linear;
  transition-delay: 0s;
}
.t-stagger > .t-stagger-line:nth-child(2) { transition-delay: calc(var(--stagger-stagger) * 1); }
.t-stagger > .t-stagger-line:nth-child(3) { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger > .t-stagger-line:nth-child(4) { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger > .t-stagger-line:nth-child(5) { transition-delay: calc(var(--stagger-stagger) * 4); }
.t-stagger > .t-stagger-line:nth-child(n+6) { transition-delay: calc(var(--stagger-stagger) * 5); }

/* Tabs sliding — exact transitions.dev recipe. */
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] { color: var(--tabs-text-active); }
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}
.strategy-page .aside-tabs.t-tabs { display: flex; width: 100%; border-radius: 14px; }
.strategy-page .aside-tabs.t-tabs .t-tab { flex: 1; min-height: 42px; height: 42px; background: transparent; box-shadow: none; }
.strategy-page .aside-tabs.t-tabs .t-tabs-pill { top: 6px; height: 42px; border-radius: 10px; box-shadow: 0 1px 2px rgba(23,23,25,.06); }

.generate [data-button-label],
.generate-button [data-generate-label] {
  --shimmer-base: rgba(255,255,255,.76);
  --shimmer-highlight: #fff;
}
.generate:disabled,
.generate-button:disabled { opacity: .82 !important; }

/* Product-level polish: consistent surface motion without animating layout. */
.studio-sidebar,
.studio-topbar,
.app-shell .sidebar,
.app-shell .topbar,
.app-shell .main-content {
  transition-duration: var(--duration-fast) !important;
  transition-timing-function: var(--ease-smooth-out) !important;
}
.folder-card,
.project-file {
  transition: transform var(--duration-fast) var(--ease-smooth-out) !important;
}
.project-card {
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    box-shadow var(--duration-fast) var(--ease-smooth-out) !important;
}
.workshop-card {
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    box-shadow var(--duration-fast) var(--ease-smooth-out),
    border-color var(--duration-quick) ease !important;
}
.modal:not([hidden]) {
  animation-duration: var(--duration-fast) !important;
  animation-timing-function: var(--ease-smooth-out) !important;
}
.workspace input,
.workspace textarea,
.file-field > div,
.document-canvas [contenteditable="true"] {
  transition:
    border-color var(--duration-quick) ease,
    background-color var(--duration-quick) ease,
    box-shadow var(--duration-fast) var(--ease-smooth-out);
}

button:not(:disabled), a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):active { transform: scale(.98); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="tab"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 3px solid rgba(56,39,199,.28);
  outline-offset: 3px;
}
[aria-busy="true"] { cursor: progress; }
.opportunity-page .topbar span,
.opportunity-page form footer > span,
.opportunity-page label small,
.opportunity-page .project-source small,
.opportunity-page .document-note,
.opportunity-page .card .source,
.opportunity-page .section-number {
  color: var(--color-text-muted-aa);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown,
  .t-modal,
  .t-toast,
  .t-stagger-line,
  .t-tabs-pill,
  .t-tab { transition: none !important; }
  .t-shimmer::before { animation: none !important; }
  button:not(:disabled):active { transform: none; }
}