/* Local-only motion lab. Never affects the production UI without data-motion-preview. */
html[data-motion-preview="true"] {
  --motion-fast: 160ms;
  --motion-ui: 280ms;
  --motion-reveal: 480ms;
  --motion-ease: cubic-bezier(.22, .72, .22, 1);
  --motion-spring: cubic-bezier(.18, .88, .28, 1.08);
}

@keyframes motion-preview-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-preview-soft-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.992); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-preview-ring-pulse {
  0% { filter: drop-shadow(0 0 0 transparent); }
  55% { filter: drop-shadow(0 0 13px color-mix(in srgb, var(--obs-invest, var(--invest)) 30%, transparent)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}
@keyframes motion-preview-row-in {
  from { opacity: 0; transform: translate3d(7px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-preview-bar-in {
  from { transform: scaleX(0); opacity: .35; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes motion-preview-panel-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

/* Reveal only after the local preview script is ready, so no-JS stays usable. */
html[data-motion-preview="true"].motion-ready [data-motion-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}
html[data-motion-preview="true"].motion-ready [data-motion-reveal].motion-visible {
  animation: motion-preview-rise var(--motion-reveal) var(--motion-ease) both;
  animation-delay: var(--motion-delay, 0ms);
}

/* Observatoire: one calm entrance, then a small emphasis on the financial signal. */
html[data-motion-preview="true"] #observatoire {
  animation: motion-preview-soft-in 520ms var(--motion-ease) both;
}
html[data-motion-preview="true"] #observatoire .obs-ring-invest,
html[data-motion-preview="true"] #observatoire .obs-ring-cash {
  transform-origin: 72px 72px;
}
html[data-motion-preview="true"] #observatoire.motion-ring-pulse .obs-orbit {
  animation: motion-preview-ring-pulse 720ms var(--motion-ease) both;
}
html[data-motion-preview="true"] #observatoire .obs-balance,
html[data-motion-preview="true"] #observatoire .obs-flow {
  transition: background-color var(--motion-ui) ease, border-color var(--motion-ui) ease, color var(--motion-ui) ease;
}
html[data-motion-preview="true"] #observatoire .obs-balance:hover {
  border-color: color-mix(in srgb, var(--balance-color) 58%, var(--obs-line));
  background: linear-gradient(115deg, color-mix(in srgb, var(--balance-color) 12%, transparent), transparent), var(--obs-well);
}

/* Navigation: the active rail glides instead of snapping. */
html[data-motion-preview="true"] .bottom-nav .nav-btn::before {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-ui) var(--motion-ease), background-color var(--motion-ui) ease;
}
html[data-motion-preview="true"] .bottom-nav .nav-btn.active::before { transform: scaleX(1); }

/* Cards and actions: tactile feedback stays on the compositor. */
html[data-motion-preview="true"] :is(.btn, .allocation-refresh-btn, .allocation-sync-btn, .holding-action-btn, .obs button) {
  transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
@media (hover: hover) {
  html[data-motion-preview="true"] :is(.btn-primary, .allocation-refresh-btn, .allocation-sync-btn, .obs button):hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--action, var(--accent)) 17%, transparent);
  }
  html[data-motion-preview="true"] .holding-row:hover {
    transform: translateX(3px);
    transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
  }
}

/* Currency drawer: only animates when the existing app opens it. */
html[data-motion-preview="true"] #currency-usd-form.motion-open {
  animation: motion-preview-panel-in 300ms var(--motion-ease) both;
}

/* Portfolio allocation and ledger: a single entrance, never a looping effect. */
html[data-motion-preview="true"] .allocation-bar.motion-bar-ready .allocation-segment {
  transform: scaleX(0);
  transform-origin: left center;
  animation: motion-preview-bar-in 560ms var(--motion-ease) both;
  animation-delay: var(--motion-delay, 0ms);
}
html[data-motion-preview="true"] .holding-row.motion-row-visible {
  animation: motion-preview-row-in 360ms var(--motion-ease) both;
  animation-delay: var(--motion-delay, 0ms);
}

/* Motion stays quiet in the light theme and disappears for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  html[data-motion-preview="true"] *,
  html[data-motion-preview="true"] *::before,
  html[data-motion-preview="true"] *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}