/* ==========================================================================
   BHALLERI · Camada de movimento
   Base: filosofia de Emil Kowalski (emilkowal.ski/skill)
   · Só anima o que tem propósito: feedback, continuidade espacial, estado, evitar saltos.
   · Só transform, opacity e clip-path (sem layout), com as exceções comentadas.
   · Transições (interrompíveis) em vez de keyframes para UI disparada várias vezes.
   · Entradas com ease-out, movimento na tela com ease-in-out, cor com ease. Nunca ease-in.
   · Saídas mais rápidas que entradas. UI abaixo de 300ms.
   · Nada anima em ações de teclado de alta frequência (acesso rápido ⌘K).
   Carregar depois de components.css e bhalleri.css.
   ========================================================================== */

:root { interpolate-size: allow-keywords; }

/* ---------- Modal e drawer · @starting-style + allow-discrete (entrada e saída reais) ---------- */
.b-modal:not(.b-modal--instant) {
  opacity: 0; transform: scale(.96); transform-origin: center; /* modal fica centralizado: não ancora no gatilho */
  transition: opacity var(--dur-exit) var(--ease-out), transform var(--dur-exit) var(--ease-out),
              overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete;
}
.b-modal:not(.b-modal--instant)[open] { opacity: 1; transform: none; transition-duration: var(--dur-modal); }
@starting-style { .b-modal:not(.b-modal--instant)[open] { opacity: 0; transform: scale(.96); } }

.b-drawer {
  transform: translateX(100%);
  transition: transform 280ms var(--ease-drawer), overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.b-drawer[open] { transform: none; transition-duration: var(--dur-drawer); }
@starting-style { .b-drawer[open] { transform: translateX(100%); } }

.b-modal:not(.b-modal--instant)::backdrop, .b-drawer::backdrop {
  opacity: 0;
  transition: opacity var(--dur-exit) var(--ease-out), overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete;
}
.b-modal:not(.b-modal--instant)[open]::backdrop { opacity: 1; transition-duration: var(--dur-modal); }
.b-drawer[open]::backdrop { opacity: 1; transition-duration: var(--dur-drawer); }
@starting-style { .b-modal:not(.b-modal--instant)[open]::backdrop, .b-drawer[open]::backdrop { opacity: 0; } }

/* Acesso rápido (⌘K): aberto centenas de vezes por dia → zero animação, como no Raycast */
.b-modal--instant, .b-modal--instant::backdrop { transition: none; animation: none; }

/* ---------- Toasts · pilha estilo Sonner (layout em bhalleri.js) ---------- */
.b-toasts { display: block; height: 0; transition: height var(--dur-toast) ease; }
.b-toasts .b-toast {
  position: absolute; right: 0; bottom: 0; width: 100%;
  transform-origin: 50% 0;
  touch-action: pan-y; user-select: none; cursor: grab;
  transition: transform var(--dur-toast) ease, opacity var(--dur-toast) ease, height var(--dur-toast) ease;
}
.b-toasts .b-toast > :not(.b-toast__bar) { transition: opacity var(--dur-toast) ease; }
.b-toasts .b-toast.is-behind > :not(.b-toast__bar) { opacity: 0; }
.b-toasts .b-toast.is-dragging { transition: none; cursor: grabbing; }
.b-toasts .b-toast.is-leaving { pointer-events: none; transition: transform var(--dur-exit) var(--ease-out), opacity var(--dur-exit) var(--ease-out); }
.b-toasts .b-toast button { cursor: pointer; }

/* ---------- Indicador deslizante (tabs, segmentado, navegação) · clip-path, sem width ---------- */
.has-ind { position: relative; }
.has-ind > :not(.b-ind) { position: relative; z-index: 1; }
.b-ind { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; z-index: 0; }
.b-ind__fill { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-3) var(--ease-in-out), opacity var(--dur-pop) ease; }
.b-ind.is-instant .b-ind__fill { transition: none; }
.b-ind--line .b-ind__fill { top: auto; bottom: -.5px; height: 1.5px; background: var(--action); }
.b-ind--pill { filter: drop-shadow(0 1px 1px rgba(74,14,20,.06)) drop-shadow(0 4px 10px rgba(74,14,20,.14)); }
.b-ind--pill .b-ind__fill { background: var(--surface-raised); }
.b-tabs.has-ind .b-tab::after { display: none; }
.b-segmented.has-ind .b-tab[aria-selected="true"], .cat-nav__links.has-ind a.is-active { background: transparent; box-shadow: none; }

/* ---------- Accordion e checklist · altura real + opacidade (entrada 250ms, saída 150ms) ---------- */
.b-accordion details::details-content, .bh-task::details-content {
  block-size: 0; opacity: 0; overflow-y: clip;
  transition: block-size var(--dur-exit) var(--ease-out), opacity var(--dur-exit) var(--ease-out), content-visibility var(--dur-exit) allow-discrete;
}
.b-accordion details[open]::details-content, .bh-task[open]::details-content {
  block-size: auto; opacity: 1; transition-duration: var(--dur-3);
}

/* ---------- Trocas de estado · surgem de 0.97 com opacidade e blur leve (mascara o crossfade) ---------- */
.bh-composer [data-when], .bh-composer__gen, .bh-journey__decided, .bh-identity__applied, .bh-confirm__done,
.bh-preview [data-view], .bh-preview__loading, .bh-file, .bh-agenda > *, .bh-tl__detail > *, #themeChips > .b-chip, .bh-jitem {
  transition-property: opacity, transform, filter;
  transition-duration: var(--dur-3);
  transition-timing-function: var(--ease-out);
}
@starting-style {
  .bh-composer [data-when], .bh-journey__decided, .bh-identity__applied, #themeChips > .b-chip { opacity: 0; transform: scale(.97); filter: blur(2px); }
  .bh-composer__gen, .bh-confirm__done, .bh-file { opacity: 0; transform: translateY(-6px); }
  .bh-preview [data-view], .bh-preview__loading { opacity: 0; transform: scale(.97); filter: blur(4px); }
  .bh-agenda > *, .bh-tl__detail > * { opacity: 0; transform: translateY(4px); }
  .bh-jitem { opacity: 0; transform: scale(.96); }
}
.bh-tl__detail > :nth-child(2) { transition-delay: 40ms; }
.bh-composer__gen .bh-shimmer { transition: opacity var(--dur-pop) ease, filter var(--dur-pop) ease; }
.bh-composer__gen .bh-shimmer.is-swapping { opacity: 0; filter: blur(2px); }
.bh-journey__item .bh-journey__bubble { transition: box-shadow var(--dur-3) ease; }
.bh-vendor__save .b-icon, .bh-journey__actions .b-icon, [data-toggle-press] .b-icon { transition: fill var(--dur-pop) ease, stroke var(--dur-pop) ease; }
.bh-drop.is-dragover { transform: scale(1.01); }
.bh-cal__day, .bh-section-row, .bh-quick__item, .icon-cell { transition: background-color var(--dur-1) ease, box-shadow var(--dur-1) ease, transform var(--dur-press) var(--ease-out); }
.bh-cal__day:active, .bh-section-row:active, .icon-cell:active, .bh-tool:active, .bh-swatch-opt:active i { transform: scale(.95); }
.bh-quick__item { transition: none; } /* navegação por teclado: instantânea */
.bh-ring .bh-ring__fill { transition: stroke-dashoffset 900ms var(--ease-in-out); }
.bh-tl__progress { transition: clip-path 1.2s var(--ease-in-out) 200ms; clip-path: inset(0 0 0 0); }

/* ---------- Segurar para confirmar (ações destrutivas) · 2s linear ao pressionar, 200ms ao soltar ---------- */
.b-btn--hold { position: relative; overflow: hidden; isolation: isolate; }
.b-btn__hold {
  position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bordo-900); color: #FFF6EE; border-radius: inherit; pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--ease-out);
}
.b-btn--hold.is-holding .b-btn__hold { clip-path: inset(0 0 0 0); transition: clip-path 2s linear; }
.b-btn--hold.is-holding { transform: scale(.97); }
.b-btn--hold.is-done .b-btn__hold { clip-path: inset(0 0 0 0); transition: none; }

/* ---------- Toque fino ---------- */
.b-accordion summary, .bh-task summary { transition: color var(--dur-pop) ease, background-color var(--dur-1) ease; }
.b-menu__item { transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.b-menu__item:active { transform: scale(.98); }

/* ==========================================================================
   Movimento reduzido · menos e mais suave, não zero:
   mantém opacidade e cor, remove deslocamentos, escalas e movimento contínuo decorativo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .b-modal:not(.b-modal--instant), .b-modal:not(.b-modal--instant)[open] { transform: none; }
  @starting-style { .b-modal:not(.b-modal--instant)[open] { transform: none; } }
  .b-drawer { transform: none; opacity: 0; transition: opacity var(--dur-exit) ease, overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete; }
  .b-drawer[open] { opacity: 1; transition-duration: var(--dur-modal); }
  @starting-style { .b-drawer[open] { opacity: 0; transform: none; } }
  @starting-style {
    .bh-composer [data-when], .bh-journey__decided, .bh-identity__applied, #themeChips > .b-chip,
    .bh-composer__gen, .bh-confirm__done, .bh-file, .bh-preview [data-view], .bh-preview__loading,
    .bh-agenda > *, .bh-tl__detail > *, .bh-jitem { transform: none; filter: none; }
  }
  .b-btn:active:not(:disabled), .b-chip:active, .b-page:active, .bh-style:active, .b-btn--hold.is-holding { transform: none; }
  .bh-style:hover, .bh-vendor:hover, .bh-jitem:hover, .bh-jewel:hover .bh-jewel__media img { transform: none !important; }
  .b-ind__fill { transition: opacity var(--dur-pop) ease; }
  .b-switch input::after { transition-duration: 1ms; }
  .b-skel::after, .bh-status--live i::after, .bh-composer[data-state="generating"]::after, .bh-shimmer { animation: none; }
  .bh-typing i { animation-duration: 2.4s; }
  .b-progress.is-indeterminate .b-progress__fill { animation-duration: 3s; }
  .bh-ring .bh-ring__fill, .bh-tl__progress { transition: none; }
}
.bh-jitem { transition-property: opacity, transform, filter, box-shadow; }
.b-menu__item { transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-press) var(--ease-out); }