/*
 * Motion layer, loaded last. Calm and short: transform and opacity only, 160-420 ms, one easing curve.
 * Motion explains change (where something came from, what is selected, that work is happening); it never decorates.
 * prefers-reduced-motion switches all of it off (rule in app.css).
 */

/* ------------------------------------------------------- page choreography */
/* Sections of a page settle in from top to bottom; components with their own entrance keep it (zero specificity). */
.page { animation: none; }
:where(.page) > * { animation: settle .42s var(--ease) backwards; }
:where(.page) > :nth-child(2) { animation-delay: 40ms; }
:where(.page) > :nth-child(3) { animation-delay: 80ms; }
:where(.page) > :nth-child(4) { animation-delay: 120ms; }
:where(.page) > :nth-child(5) { animation-delay: 160ms; }
:where(.page) > :nth-child(n+6) { animation-delay: 200ms; }
/* Tiles inside grids follow a beat behind their section. */
:where(.bento, .kpis, .grid) > * { animation: settle .46s var(--ease) backwards; }
:where(.bento, .kpis, .grid) > :nth-child(1) { animation-delay: 60ms; }
:where(.bento, .kpis, .grid) > :nth-child(2) { animation-delay: 95ms; }
:where(.bento, .kpis, .grid) > :nth-child(3) { animation-delay: 130ms; }
:where(.bento, .kpis, .grid) > :nth-child(4) { animation-delay: 165ms; }
:where(.bento, .kpis, .grid) > :nth-child(5) { animation-delay: 200ms; }
:where(.bento, .kpis, .grid) > :nth-child(6) { animation-delay: 235ms; }
:where(.bento, .kpis, .grid) > :nth-child(n+7) { animation-delay: 270ms; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }

/* Sign-in card: the card arrives, then its contents. */
.auth-card > * { animation: settle .45s var(--ease) backwards; }
.auth-card > :nth-child(1) { animation-delay: 80ms; }
.auth-card > :nth-child(2) { animation-delay: 120ms; }
.auth-card > :nth-child(3) { animation-delay: 160ms; }
.auth-card > :nth-child(4) { animation-delay: 200ms; }
.auth-card > :nth-child(n+5) { animation-delay: 240ms; }

/* Table rows cascade on the first load only (the table adds .enter once). */
.t.enter tbody tr { animation: rowIn .34s var(--ease) backwards; }
.t.enter tbody tr:nth-child(2) { animation-delay: 20ms; } .t.enter tbody tr:nth-child(3) { animation-delay: 40ms; }
.t.enter tbody tr:nth-child(4) { animation-delay: 60ms; } .t.enter tbody tr:nth-child(5) { animation-delay: 80ms; }
.t.enter tbody tr:nth-child(6) { animation-delay: 100ms; } .t.enter tbody tr:nth-child(7) { animation-delay: 120ms; }
.t.enter tbody tr:nth-child(8) { animation-delay: 140ms; } .t.enter tbody tr:nth-child(9) { animation-delay: 160ms; }
.t.enter tbody tr:nth-child(n+10) { animation-delay: 180ms; }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } }

/* Lists in cards ease in as a group. */
:where(.card) > .list > .li { animation: settle .38s var(--ease) backwards; }
:where(.card) > .list > .li:nth-child(2) { animation-delay: 30ms; } :where(.card) > .list > .li:nth-child(3) { animation-delay: 60ms; }
:where(.card) > .list > .li:nth-child(4) { animation-delay: 90ms; } :where(.card) > .list > .li:nth-child(n+5) { animation-delay: 120ms; }

/* ---------------------------------------------------------- interactivity */
:where(a.card, .card.hover, a.kpi, .vcard) { transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .18s; }
@media (hover: hover) {
  :where(a.card, .card.hover, a.kpi, .vcard):hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-2); }
}
:where(a.card, .card.hover, a.kpi, .vcard):active { transform: translateY(0) scale(.996); transition-duration: .08s; }

/* Book covers open a little towards you on hover, hinged at the spine. */
.cover { transform-origin: 0 50%; transition: transform .38s var(--ease), box-shadow .38s var(--ease); }
@media (hover: hover) {
  a:hover > .cover, a:hover .cover.big, button:hover > .cover, .cover.lift:hover {
    transform: perspective(700px) rotateY(-14deg); box-shadow: 10px 12px 26px -14px rgba(0, 0, 0, .45);
  }
}

/* --------------------------------------------------------------- tab ink */
.tabs { position: relative; }
.tabs.has-ink [aria-selected="true"]::after, .tabs.has-ink [aria-current="page"]::after { display: none; }
.tab-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--ink); pointer-events: none; opacity: 0;
  transition: transform .34s var(--ease), width .34s var(--ease), opacity .2s; }

/* ------------------------------------------------------------- nav glide */
.nav { position: relative; }
.nav a { z-index: 1; }
.nav-ink { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 8px; background: var(--surface-2); pointer-events: none; opacity: 0;
  transition: transform .36s var(--ease), height .36s var(--ease), width .24s var(--ease), opacity .2s; }
.nav-ink::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav.has-ink a[aria-current="page"] { background: transparent; }
.nav.has-ink a[aria-current="page"]::before { display: none; }
.shell.collapsed .nav-ink::before { left: -8px; }

/* ----------------------------------------------------------- route progress */
.route-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 400; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(0); opacity: 0; background: var(--brand); }
.route-progress.run { opacity: 1; animation: rpRun 7s cubic-bezier(.08, .6, .2, 1) forwards; }
.route-progress.done { opacity: 0; transform: scaleX(1); transition: transform .2s var(--ease), opacity .3s .16s; }
@keyframes rpRun { from { transform: scaleX(0); } 30% { transform: scaleX(.55); } to { transform: scaleX(.9); } }

/* ------------------------------------------------------- overlays leaving */
.modal-scrim.leaving { animation: fadeOut .18s var(--ease-in) forwards; pointer-events: none; }
.modal-scrim.leaving > .modal, .modal-scrim.leaving > .cmdk { animation: modalOut .18s var(--ease-in) forwards; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@media (max-width: 680px) {
  .modal-scrim.leaving > .modal { animation: sheetOut .24s var(--ease-in) forwards; }
  @keyframes sheetOut { to { transform: translateY(100%); } }
}
.leaving > .drawer-scrim { animation: fadeOut .22s var(--ease-in) forwards; }
.leaving > .drawer { animation: drawerOut .24s var(--ease-in) forwards; }
@keyframes drawerOut { to { transform: translateX(100%); } }
.menu.leaving { animation: menuOut .12s var(--ease-in) forwards; pointer-events: none; }
@keyframes menuOut { to { opacity: 0; transform: scale(.98) translateY(-2px); } }

/* ------------------------------------------------------------------ toast */
.toast { position: relative; overflow: hidden; }
.toast::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .22;
  transform-origin: 0 50%; animation: toastLife var(--life, 3.2s) linear forwards; }
.toast.paused::after { animation-play-state: paused; }
@keyframes toastLife { to { transform: scaleX(0); } }

/* ------------------------------------------------------- notification dot */
.iconbtn .dot.pop { animation: dotIn .35s var(--ease); }
.iconbtn .dot.pop::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--brand); animation: halo .9s var(--ease) forwards; }
@keyframes dotIn { from { transform: scale(.3); } }
@keyframes halo { from { transform: scale(.7); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }

/* --------------------------------------------------------- theme cross-fade */
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation-duration: .34s; animation-timing-function: var(--ease); }

/* ------------------------------------------------- selection and focus feel */
:where(.chip, .pick, .opt, .seg button, .seg a) { transition: background .16s var(--ease), border-color .16s var(--ease), color .16s, box-shadow .16s, transform .12s var(--ease); }
:where(.seg button, .seg a):active, :where(.pick):active { transform: scale(.97); }
:focus-visible { transition: outline-offset .12s var(--ease); }