/* ScenePilot motion. One rhythm for the whole studio and editor.
   Rules (ui-ux-pro-max §7): shared tokens; transform + opacity only (accordions are the one height animation);
   decelerate arriving, accelerate leaving, exits ~65% of enters; springs for small things; lists stagger 35 ms;
   forward navigation slides left, back slides right; shared elements morph between screens; everything is
   interruptible and never blocks input; prefers-reduced-motion switches it all off. */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root {
  --m-micro: 140ms; --m-small: 220ms; --m-med: 360ms; --m-large: 560ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* arriving */
  --ease-in: cubic-bezier(.5, 0, .75, 0);       /* leaving */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);    /* small overshoot for small things */
  --ease: var(--ease-out);
}

/* ---------- keyframes ---------- */
@keyframes inup { from { opacity: 0; transform: translateY(12px); } }
@keyframes indown { from { opacity: 0; transform: translateY(-12px); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes pop { 40% { transform: scale(1.18); } }
@keyframes popin { from { opacity: 0; transform: scale(.9); } }
@keyframes arrive { 0% { opacity: 0; transform: translateY(-8px) scale(.98); } 60% { opacity: 1; } }
@keyframes sheen { to { background-position: 300% 0; } }
@keyframes spin { to { --ang: 360deg; } }
@keyframes nudge { 50% { transform: translateX(4px); } }
@keyframes ring { 15% { transform: rotate(14deg); } 30% { transform: rotate(-11deg); } 45% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes shine { from { background-position: -80% 0; } to { background-position: 180% 0; } }
@keyframes stripes { to { background-position: 16px 0; } }
@keyframes ambient { 50% { transform: translate3d(2.5%, -1.5%, 0) scale(1.05); } 100% { transform: translate3d(-2%, 2%, 0) scale(1.02); } }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-4px) scale(.97); } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes glowpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fc, var(--green)) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes shimmer { from { background-position: -150% 0; } to { background-position: 250% 0; } }
@keyframes growx { from { transform: scaleX(0); } }
@keyframes cellin { from { opacity: 0; transform: scale(.4); } }
@keyframes sheet-out-r { to { transform: translateX(48px); opacity: 0; } }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
@keyframes vt-out-l { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-in-r { from { opacity: 0; transform: translateX(36px); } }
@keyframes vt-out-r { to { opacity: 0; transform: translateX(28px); } }
@keyframes vt-in-l { from { opacity: 0; transform: translateX(-36px); } }
@keyframes vt-in-deep { from { opacity: 0; transform: scale(.965); } }
@keyframes vt-out-deep { to { opacity: 0; transform: scale(1.02); } }

/* ---------- everything that changes state eases instead of snapping (0 specificity: any rule can override) ---------- */
:where(a, button, label, .knob, .start, .voice, .bpick, .kind, .swatch i, .fcard, .frow, .lrow, .bcard, .stat, .input, .round, .check, .alert, .mi, .vid, .tpl, .alt, .it) {
  transition: color var(--m-micro) var(--ease-out), background-color var(--m-micro) var(--ease-out), border-color var(--m-micro) var(--ease-out),
    box-shadow var(--m-small) var(--ease-out), opacity var(--m-small) var(--ease-out), transform var(--m-small) var(--spring);
}
/* press: a small squeeze on anything you tap, back on release */
:where(.btn, .round, .knob, .start, .mode, .seg button, .seg label, .tabs button, .seg-mini button, .voice, .bpick, .kind, .alt, .tpl, .vid, .isl-btn, .qgo, .play, .place, .mi, .fav, .star, .stat, .bcard, .lrow, .frow, .fcard):active { transform: scale(.97); }
.toggle:active::after { width: 22px; }
.toggle[aria-checked="true"]:active::after { transform: translateX(14px); }
/* links underline from the left */
.link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--m-small) var(--ease-out), color var(--m-micro); }
.link:hover { text-decoration: none; background-size: 100% 1px; }

/* ---------- the black carries soft colour: drifting glows, tinted per page, plus grain ---------- */
body { --tint: var(--blue); }
body[data-place="make"], body[data-place="new"], body[data-place="brands"] { --tint: var(--violet); }
body[data-place="tools"] { --tint: var(--amber); }
body[data-place="account"] { --tint: var(--green); }
body::before { content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 38% at 10% 6%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%),
    radial-gradient(38% 36% at 92% 12%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 70%),
    radial-gradient(50% 42% at 55% 108%, color-mix(in srgb, var(--amber) 9%, transparent), transparent 70%),
    radial-gradient(30% 30% at 0% 92%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 70%);
  animation: ambient 38s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scard, .settings, .detail, .card, .lrow, .stat, .empty, .menu, dialog { background-image: linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent), transparent 42%); }

/* ---------- opening the studio ---------- */
.top { animation: indown var(--m-large) var(--ease-out) backwards; }   /* backwards only: a kept transform would trap the fixed dock */
@media (max-width: 760px) { .top { animation-name: fadein; } }

/* ---------- moving between pages: forward slides left, back slides right, the editor zooms in ---------- */
.top { view-transition-name: topbar; }
.dock { view-transition-name: dock; }
.island { view-transition-name: island; }
/* only while a page change or list morph runs: a permanent name makes <main> a stacking context and traps the fixed sheets under the scrim */
html[data-nav] main.page, html[data-morph] main.page { view-transition-name: page; }
.qbar, .scard { view-transition-name: composer; }   /* the paste bar grows into the setup card */
::view-transition-group(*) { animation-duration: var(--m-med); animation-timing-function: var(--ease-out); }
::view-transition-group(composer) { animation-duration: var(--m-large); }
::view-transition-old(root) { animation: var(--m-small) var(--ease-in) both fadeout; }
::view-transition-new(root) { animation: var(--m-med) var(--ease-out) both fadein; }
/* fade-through: the old page is gone (120 ms) before the new one arrives, so text never overlaps */
html[data-nav="fwd"]::view-transition-old(page) { animation: 120ms var(--ease-in) both vt-out-l; }
html[data-nav="fwd"]::view-transition-new(page) { animation: var(--m-med) var(--ease-out) 90ms both vt-in-r; }
html[data-nav="back"]::view-transition-old(page) { animation: 120ms var(--ease-in) both vt-out-r; }
html[data-nav="back"]::view-transition-new(page) { animation: var(--m-med) var(--ease-out) 90ms both vt-in-l; }
html[data-nav="deep"]::view-transition-old(page) { animation: 120ms var(--ease-in) both vt-out-deep; }
html[data-nav="deep"]::view-transition-new(page) { animation: var(--m-med) var(--ease-out) 90ms both vt-in-deep; }
/* the rest of each page rises in behind the slide, 35 ms apart */
.view.entering .home > *, .view.entering .head, .view.entering .setup-head, .view.entering .seg.big, .view.entering #lib-tabs,
.view.entering .index > [data-film], .view.entering .index > .empty, .view.entering .shelf > *, .view.entering .stats > *, .view.entering .acct > *,
.view.entering .ref > *, .view.entering .two > *, .view.entering .settings > *, .view.entering .people-card {
  animation: inup var(--m-med) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms + 40ms); }
.stag > * { animation: inup var(--m-med) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }

/* ---------- sliding indicators: places, tabs, options, the selected film row, editor tools ---------- */
:where([data-glide]) { position: relative; }
.glided > :not(.glide) { position: relative; z-index: 1; }
.glide { position: absolute; z-index: 0; border-radius: 999px; background: var(--btn); pointer-events: none;
  transition: left var(--m-med) var(--spring), width var(--m-med) var(--spring), top var(--m-med) var(--spring), height var(--m-med) var(--spring), opacity var(--m-small); }
.glided > .on, .glided > label:has(input:checked) { background: transparent !important; box-shadow: none !important; }
.dock .glide, .erail .glide { border-radius: 11px; background: var(--hover); box-shadow: inset 0 0 0 1px var(--line-2); }
.erail .glide { border-radius: 12px; }
.seg-mini .glide { background: var(--panel); box-shadow: 0 0 0 1px var(--line-2); }
.index > .glide { border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.index.glided > .frow.on { border-color: transparent; }

/* ---------- menus, dialogs, toasts, sheets: in with a spring, out faster ---------- */
.menu { transform-origin: top right; animation: menu-in var(--m-small) var(--spring); }
.menu.leaving { animation: menu-out var(--m-micro) var(--ease-in) forwards; pointer-events: none; }
.menu > *:not(hr) { animation: inup var(--m-small) var(--ease-out) both; }
.menu > :nth-child(2) { animation-delay: 20ms; } .menu > :nth-child(3) { animation-delay: 40ms; } .menu > :nth-child(4) { animation-delay: 60ms; } .menu > :nth-child(5) { animation-delay: 80ms; } .menu > :nth-child(n+6) { animation-delay: 100ms; }
#alert-list > * { animation: inup var(--m-small) var(--ease-out) both; }
#alert-list > :nth-child(2) { animation-delay: 30ms; } #alert-list > :nth-child(3) { animation-delay: 60ms; } #alert-list > :nth-child(n+4) { animation-delay: 90ms; }
.alert.gone { opacity: 0; transform: translateX(24px); }
dialog[open] { animation: dlg-in var(--m-med) var(--spring); }
dialog[open]::backdrop { animation: fadein var(--m-small); }
dialog.closing { animation: dlg-out var(--m-small) var(--ease-in) forwards; }
dialog.closing::backdrop { animation: fadeout var(--m-small) forwards; }
.pal-list.stag > * { animation-duration: var(--m-small); animation-delay: calc(var(--i, 0) * 18ms); }
.toast { animation: toast-in var(--m-med) var(--spring); }
.toast.out { animation: toast-out var(--m-small) var(--ease-in) forwards; }
.scrim.leaving { animation: fadeout var(--m-small) var(--ease-in) forwards; }
.sheet-panel { animation: slidein var(--m-med) var(--ease-out); }
.sheet-panel.leaving { animation: sheet-out-r var(--m-small) var(--ease-in) forwards; }
@media (max-width: 1080px) {
  .detail { transition: transform var(--m-small) var(--ease-in), visibility 0s var(--m-small); }
  .detail.open { transition: transform var(--m-med) var(--ease-out); }
  .detail.dragging { transition: none; }
  .detail::before { content: ""; position: absolute; left: 50%; top: 8px; z-index: 3; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
}

/* ---------- the home ---------- */
.hello em { font-style: normal; background: linear-gradient(90deg, var(--blue), var(--violet), var(--amber), var(--blue)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 10s linear infinite; }
.qbar::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .75;
  background: conic-gradient(from var(--ang), transparent 0 52%, var(--blue) 66%, var(--violet) 77%, var(--amber) 87%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: spin 6s linear infinite; transition: opacity var(--m-med); }
.qbar { transition: transform var(--m-med) var(--ease-out), border-color var(--m-small), box-shadow var(--m-small); }
.qbar:focus-within { transform: translateY(-2px); }
.qbar:focus-within::before { opacity: 1; animation-duration: 3s; }
.qph { position: absolute; left: 54px; right: 60px; top: 50%; margin-top: -12px; z-index: 1; color: var(--ink-3); font: 400 16.5px/1.45 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.qbar.typed .qph { opacity: 0; transform: translateY(-4px); }
.qgo:hover .ic, .bigplay:hover .ic { animation: nudge .9s var(--ease-io) infinite; }
.qgo.go .ic { transform: translateX(22px); opacity: 0; transition: transform var(--m-small) var(--ease-in), opacity var(--m-small); }
.lrow:hover, .stat:hover { transform: translateY(-2px); }
.fcard .poster { transition: transform var(--m-med) var(--ease-out), box-shadow var(--m-med) var(--ease-out); }
.fcard:hover .poster { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -18px rgba(0, 0, 0, .8); }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mtrack { display: flex; gap: 12px; width: max-content; animation: marquee 80s linear infinite; }
.marquee:hover .mtrack { animation-play-state: paused; }
.mcell { margin: 0; width: 220px; display: grid; gap: 7px; cursor: pointer; }
.mcell video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--m-med) var(--ease-out); }
.mcell:hover video { transform: translateY(-3px) scale(1.02); }
.mcell figcaption { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 760px) { .mcell { width: 168px; } }

/* ---------- small movements that say something ---------- */
.kic, .place .ic, .btn .ic, .bcard .mono, .erail .ic { transition: transform var(--m-med) var(--spring); }
.knob:hover .kic, .start:hover .kic { transform: scale(1.1) rotate(-8deg); }
.knob[aria-expanded="true"] .kic { animation: pop var(--m-med) var(--spring); }
.place:hover .ic { transform: translateY(-1px) scale(1.1); }
.place[data-place="make"]:hover .ic { transform: rotate(90deg) scale(1.1); }
.btn:hover .ic { transform: scale(1.12); }
.erail button:hover .ic { transform: scale(1.12) rotate(-6deg); }
.bcard:hover .mono { transform: rotate(-8deg) scale(1.08); }
#bell.ring .ic { transform-origin: 50% 3px; animation: ring 1.1s var(--ease-out) .9s 2; }
.dot, .tabs .n, .place[data-live]::after { transition: transform var(--m-small) var(--spring); }
.build:hover .rec, .build.rolling .rec { animation: pulse .9s infinite; }
.build.shake, .shake { animation: shake .36s var(--ease-io); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.st-building i { animation: pulse 1.4s infinite, ping 1.6s ease-out infinite; }
.status { transition: color var(--m-small), background-color var(--m-small); }
.pop { animation: pop var(--m-med) var(--spring); }
.flash { --fc: var(--green); animation: glowpulse 1.1s var(--ease-out) 2; }
.arrive { animation: arrive var(--m-large) var(--ease-out) both; }
.kind:has(input:checked)::before { animation: popin var(--m-small) var(--spring); }
.check { animation: inup var(--m-small) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.check.flip::before { animation: pop var(--m-med) var(--spring); }
.welcome li.done::before { animation: pop var(--m-med) var(--spring); }
.voice.on .play, .star.on { animation: pop var(--m-med) var(--spring); }
/* progress: bars fill with transform, with a light running along; the building clip's stripes move */
.lbar i, .pbar i { width: 100% !important; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .9s var(--ease-out); }
.lbar i { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: shine 1.8s linear infinite; }
.clip.now::before { background: linear-gradient(135deg, var(--ember-t) 25%, transparent 25% 50%, var(--ember-t) 50% 75%, transparent 75%); background-size: 16px 16px; animation: stripes .8s linear infinite; }
.clip { transition: background-color var(--m-med), color var(--m-med), border-color var(--m-med); }
.clip.done .ic { animation: pop var(--m-med) var(--spring); }
.playhead { box-shadow: 0 0 12px color-mix(in srgb, var(--ember) 70%, transparent); transition: left .9s var(--ease-out); }
.gauge .arc { transition: stroke-dashoffset .9s var(--ease-out); }
/* the detail pane cross-fades when you pick another film */
.detail.swap > * { animation: inup var(--m-med) var(--ease-out) both; }
.detail.swap > :nth-child(2) { animation-delay: 35ms; } .detail.swap > :nth-child(3) { animation-delay: 70ms; }
/* loading: a light sweeps across whatever is waiting */
.loading { position: relative; overflow: hidden; }
.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ink) 10%, transparent) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; pointer-events: none; }
.btn.busy { pointer-events: none; }
.btn.busy::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spinr .7s linear infinite; }
@keyframes spinr { to { transform: rotate(360deg); } }
/* account: bars grow from the left, the calendar fills in column by column */
.partition div { transform-origin: left; animation: growx var(--m-large) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.heat div i { animation: cellin var(--m-med) var(--spring) both; animation-delay: calc(var(--c, 0) * 22ms); }
.plan-card { background-size: 140% 140%, 140% 140%, auto; animation: plandrift 18s ease-in-out infinite alternate; }
@keyframes plandrift { to { background-position: 30% 20%, 70% 80%, 0 0; } }
/* the floating film */
.island { transition: opacity var(--m-small), transform var(--m-small) var(--ease-out); animation: toast-in var(--m-med) var(--spring); }
.island.out { opacity: 0; transform: translateY(10px) scale(.96); }
.island.dragging { transform-origin: center; }

/* ---------- editor ---------- */
.epanel.swap > * { animation: inup var(--m-med) var(--ease-out) both; }
.epanel.swap > :nth-child(2) { animation-delay: 35ms; } .epanel.swap > :nth-child(3) { animation-delay: 70ms; } .epanel.swap > :nth-child(4) { animation-delay: 105ms; } .epanel.swap > :nth-child(n+5) { animation-delay: 140ms; }
@keyframes wipe { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tl-inner.enter > * { animation: wipe .9s var(--ease-out) both; }
.tl-inner.enter > :nth-child(2) { animation-delay: 60ms; } .tl-inner.enter > :nth-child(3) { animation-delay: 120ms; } .tl-inner.enter > :nth-child(4) { animation-delay: 180ms; } .tl-inner.enter > :nth-child(5) { animation-delay: 240ms; } .tl-inner.enter > :nth-child(6) { animation-delay: 300ms; } .tl-inner.enter > :nth-child(7) { animation-delay: 360ms; }
#view-edit.on .monitor { animation: inup var(--m-large) var(--ease-out) both; }
#view-edit.on .ebar { animation: indown var(--m-med) var(--ease-out) both; }
.it:hover { transform: translateY(-1px); }
.it.lift { z-index: 6; transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .7), 0 0 0 1.5px var(--ink); transition: none; }
.it.flash { --fc: var(--ink); animation: glowpulse .8s var(--ease-out); }
.it.new { animation: popin var(--m-med) var(--spring) both; }
.phead { box-shadow: 0 0 10px color-mix(in srgb, var(--ember) 70%, transparent); }
#e-render .n.pop { animation: pop var(--m-med) var(--spring); }
.e-cap { transition: opacity var(--m-micro); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before, .mtrack, .qbar::before, .hello em, .plus, .rgrid .poster img, .bbp-num, .bchip.on .bm { animation: none !important; }
}

/* view-transition helpers used by the Films list (only posters move; the rest swaps at once) */
html[data-morph]::view-transition-old(page) { animation: none; opacity: 0; }
html[data-morph]::view-transition-new(page) { animation: none; }
html[data-morph]::view-transition-old(root), html[data-morph]::view-transition-new(root) { animation: none; }
.knob b { transition: color var(--m-small); }
@media (max-width: 1080px) { .detail .dhero { touch-action: none; } }
.qgo .ic { transition: transform var(--m-small) var(--ease-out), opacity var(--m-small); }
.qph { transition: opacity var(--m-micro), transform var(--m-micro); }
/* a shared element with no partner on the other page (the paste bar leaving the home) fades fast instead of lingering */
::view-transition-old(*):only-child { animation: 120ms var(--ease-in) both fadeout; }
::view-transition-new(*):only-child { animation: var(--m-med) var(--ease-out) 90ms both fadein; }

/* the + fans its three choices out of itself; the attachment drops into the bar */
@keyframes fanin { from { opacity: 0; transform: translate(-10px, -18px) scale(.86) rotate(-4deg); } }
@keyframes fanout { to { opacity: 0; transform: translate(-6px, -10px) scale(.94); } }
.fan { transform-origin: 22px -22px; animation: fanin var(--m-med) var(--spring) both; }
.fan.leaving { animation: fanout var(--m-micro) var(--ease-in) forwards; pointer-events: none; }
.fan-item { animation: fanin var(--m-med) var(--spring) both; }
.fan-item:nth-child(1) { animation-delay: 50ms; } .fan-item:nth-child(2) { animation-delay: 95ms; } .fan-item:nth-child(3) { animation-delay: 140ms; }
.fan-item:hover .kic { transform: scale(1.1) rotate(-8deg); }
.chip-att { animation: arrive var(--m-large) var(--spring) both; }
.chip-att.leaving { animation: fanout var(--m-small) var(--ease-in) forwards; }
.plus.nudge { animation: pop var(--m-med) var(--spring); }
.bchip, .mark-opt, .color-opt, .tpl-opt img { transition: border-color var(--m-micro), background-color var(--m-micro), box-shadow var(--m-small) var(--ease-out), transform var(--m-small) var(--spring), opacity .2s, filter .2s; }
.bchip:hover .bm, .mark-opt:hover { transform: scale(1.06) rotate(-4deg); }
.bchip .bm { transition: transform var(--m-med) var(--spring); }
.bchip.on .bm { animation: pop var(--m-med) var(--spring); }
.color-opt:hover { transform: scale(1.12); }
.bbp-mark, .bbp-thumb, .bbp-gfx { transition: background var(--m-med), transform var(--m-med) var(--spring); }
.bbp-mark.pop, .bbp-num.pop { animation: pop var(--m-med) var(--spring); }
.view.entering .bb-form > *, .view.entering .bb-preview, .view.entering .bpick-wrap { animation: inup var(--m-med) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }

/* still things breathe a little (owner, 2026-09-28): slow, small, and off with reduced motion */
@keyframes ringout { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 11px transparent; } }
@keyframes pan { 0%, 100% { transform: scale(1.07) translate(-1.4%, -.9%); } 50% { transform: scale(1.07) translate(1.4%, .9%); } }
@keyframes breathe { 50% { transform: scale(1.04); } }
@keyframes floaty { 50% { transform: translateY(-4px); } }
.qbar:not(.has-att) .plus:not([aria-expanded="true"]) { animation: ringout 2.8s var(--ease-out) 1.4s infinite; }
.rgrid .poster img { animation: pan 20s ease-in-out infinite; }
.rgrid .fcard:nth-child(2n) .poster img { animation-delay: -7s; animation-duration: 23s; }
.rgrid .fcard:nth-child(3n) .poster img { animation-delay: -13s; }
.bchip.on .bm { animation: pop var(--m-med) var(--spring), breathe 5s ease-in-out 1s infinite; }
.bbp-num { animation: floaty 4.5s ease-in-out infinite; }
.haze::before { transition: opacity .6s; }