/* ══════════════════════════════════════════════════════════════════════
   VELYRON · motion — the platform's micro-animation vocabulary.

   Ported and adapted from AIcss (https://www.aicss.dev) by Kevin
   (@kvnkld) — a free, open-source collection of UI components for AI
   agent interfaces (thinking shimmer, web-search cascade, to-do reveal,
   collapse, citation hover, streaming caret, enhancing border, …).
   Every effect here is recolored to the --v-* tokens in /velyron-ui.css
   (both themes come for free) and renamed under the .vm- prefix.

   Contracts:
   · additive + progressive: pages must render correctly without this file
   · tokens only — no hardcoded palettes
   · calm by default: small distances, soft easings, sub-600ms timings
   · prefers-reduced-motion neutralizes every animation below
   ══════════════════════════════════════════════════════════════════════ */

/* ── keyframes ─────────────────────────────────────────────────────── */

/* label-shine (aicss "Thinking State"): a soft brightness valley sweeps
   through text painted with background-clip:text */
@keyframes vm-shine{
  0%,18%{background-position:100% 0}
  82%,100%{background-position:0% 0}
}

/* entrance: rise + fade (aicss ws-enter / todo-item-in) */
@keyframes vm-rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes vm-rise-sm{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

/* entrance: pure fade (aicss tr-block-in / tr-sentence-in) */
@keyframes vm-fade{
  from{opacity:0}
  to{opacity:1}
}

/* menu / modal pop (aicss pi-menu-in) */
@keyframes vm-pop{
  from{opacity:0;transform:scale(.975) translateY(4px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* streaming caret blink (aicss caret-blink) */
@keyframes vm-caret-blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* conic border sweep (aicss pi-border-spin, monochromed to the signal) */
@property --vm-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes vm-ring-spin{
  to{--vm-angle:360deg}
}

/* ── entrance utilities ────────────────────────────────────────────── */

/* one element: <h1 class="vm-reveal vm-d2">…  (delay classes below) */
.vm-reveal{animation:vm-rise .55s var(--v-ease) backwards}
.vm-reveal--fade{animation:vm-fade .5s var(--v-ease) backwards}
.vm-d1{animation-delay:.07s}
.vm-d2{animation-delay:.14s}
.vm-d3{animation-delay:.21s}
.vm-d4{animation-delay:.28s}
.vm-d5{animation-delay:.35s}
.vm-d6{animation-delay:.42s}
.vm-d7{animation-delay:.49s}
.vm-d8{animation-delay:.56s}

/* a list/grid: children cascade in DOM order (aicss to-do reveal) */
.vm-stagger>*{animation:vm-rise .5s var(--v-ease) backwards}
.vm-stagger>:nth-child(1){animation-delay:.05s}
.vm-stagger>:nth-child(2){animation-delay:.11s}
.vm-stagger>:nth-child(3){animation-delay:.17s}
.vm-stagger>:nth-child(4){animation-delay:.23s}
.vm-stagger>:nth-child(5){animation-delay:.29s}
.vm-stagger>:nth-child(6){animation-delay:.35s}
.vm-stagger>:nth-child(7){animation-delay:.41s}
.vm-stagger>:nth-child(8){animation-delay:.47s}
.vm-stagger>:nth-child(9){animation-delay:.53s}
.vm-stagger>:nth-child(10){animation-delay:.59s}
.vm-stagger>:nth-child(11){animation-delay:.65s}
.vm-stagger>:nth-child(12){animation-delay:.71s}

/* ── thinking shimmer (aicss "Thinking State" / ws-shimmer) ────────── */
/* apply to a short label ("Pensando…", "Buscando…"); reads in both themes */
.vm-shimmer{
  color:transparent;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(90deg,
    var(--v-fg-dim) 0%, var(--v-fg-dim) 30%,
    color-mix(in oklab, var(--v-fg-dim) 40%, transparent) 45%,
    color-mix(in oklab, var(--v-fg-dim) 40%, transparent) 55%,
    var(--v-fg-dim) 70%, var(--v-fg-dim) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:vm-shine 2.25s cubic-bezier(.25,.1,.25,1) infinite;
}

/* ── streaming caret (aicss "Streaming Text") ──────────────────────── */
.vm-caret{
  display:inline-block;width:7px;height:1.05em;margin-left:2px;
  background:var(--v-fg);vertical-align:text-bottom;
  animation:vm-caret-blink 1s step-end infinite;
}

/* ── collapse (aicss grid-rows disclosure; web-search/to-dos/thinking) ─
   <div class="vm-collapse"><div class="vm-collapse-inner">…</div></div>
   toggle .is-closed on .vm-collapse */
.vm-collapse{
  display:grid;grid-template-rows:1fr;opacity:1;
  transition:grid-template-rows .32s var(--v-ease),opacity .22s var(--v-ease);
}
.vm-collapse.is-closed{grid-template-rows:0fr;opacity:0;pointer-events:none}
.vm-collapse-inner{min-height:0;overflow:hidden}

/* chevron that follows aria-expanded on its toggle */
.vm-chevron{transition:transform .28s var(--v-ease)}
[aria-expanded="false"] .vm-chevron{transform:rotate(180deg)}

/* ── link-row hover arrow (aicss inline-citations / web-search) ────────
   <a class="vm-linkrow">…<span class="vm-arrow">↗svg</span></a> */
.vm-linkrow .vm-arrow{
  display:inline-flex;flex:none;color:var(--v-fg-mute);
  opacity:0;transform:rotate(45deg) translate(0,2px);
  transition:opacity .16s var(--v-ease),transform .22s var(--v-ease);
  pointer-events:none;
}
.vm-linkrow:hover .vm-arrow,.vm-linkrow:focus-visible .vm-arrow{
  opacity:1;transform:rotate(45deg) translate(0,0);
}

/* ── tooltip (aicss cite-tip: blur-fade above the anchor) ──────────────
   <span class="vm-tip">anchor<span class="vm-tip-box">label</span></span> */
.vm-tip{position:relative;display:inline-flex}
.vm-tip-box{
  position:absolute;left:50%;bottom:calc(100% + 6px);
  transform:translateX(-50%) translateY(1px);
  font-family:var(--v-font);font-size:11px;line-height:1;font-weight:500;
  color:var(--v-fg);background:color-mix(in oklab, var(--v-raised) 78%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--v-line);border-radius:var(--v-r1);
  padding:5px 7px;white-space:nowrap;pointer-events:none;
  opacity:0;filter:blur(2px);z-index:1000;
  transition:opacity .15s var(--v-ease),transform .15s var(--v-ease),filter .15s var(--v-ease);
}
.vm-tip:hover .vm-tip-box,.vm-tip:focus-within .vm-tip-box{
  opacity:1;filter:blur(0);transform:translateX(-50%) translateY(0);
}

/* ── working ring (aicss "enhancing" conic border, monochromed) ────────
   add .vm-ring to a rounded container while the AI is working */
.vm-ring{position:relative}
.vm-ring::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid transparent;
  background:conic-gradient(from var(--vm-angle,0deg),
    transparent 0%,
    color-mix(in oklab, var(--v-signal) 55%, transparent) 18%,
    var(--v-signal) 32%,
    color-mix(in oklab, var(--v-signal) 55%, transparent) 46%,
    transparent 64%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:vm-ring-spin 1.4s linear infinite,vm-fade .22s var(--v-ease) backwards;
  pointer-events:none;
}

/* ── hover / press micro-interactions ──────────────────────────────── */
.vm-lift{transition:transform .22s var(--v-ease),border-color .22s var(--v-ease),box-shadow .22s var(--v-ease)}
.vm-lift:hover{transform:translateY(-2px);box-shadow:var(--v-shadow-sm)}
.vm-press{transition:transform .12s var(--v-ease)}
.vm-press:active{transform:scale(.97)}
.vm-pop{animation:vm-pop .26s var(--v-ease) backwards}

/* ── shared primitives polish (.v-btn / .v-card / .v-chip / .v-modal) ─ */
.v-card{transition:transform .22s var(--v-ease),border-color .22s var(--v-ease),box-shadow .22s var(--v-ease)}
.v-chip{transition:color .18s var(--v-ease),border-color .18s var(--v-ease),background .18s var(--v-ease)}
.v-btn:active{transform:translateY(1px) scale(.99)}
.v-modal-scrim:not([hidden]){animation:vm-fade .18s var(--v-ease) backwards}
.v-modal-scrim:not([hidden]) .v-modal{animation:vm-pop .26s var(--v-ease) backwards}

/* ── shared shell polish (.vsh-* from /velyron-shell.js) ───────────── */
/* drawer contents cascade in DOM order each time it opens */
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot){animation:vm-rise-sm .3s var(--v-ease) backwards}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(2){animation-delay:.02s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(3){animation-delay:.04s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(4){animation-delay:.06s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(5){animation-delay:.08s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(6){animation-delay:.10s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(7){animation-delay:.12s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(8){animation-delay:.14s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(9){animation-delay:.16s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(10){animation-delay:.18s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(11){animation-delay:.20s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(12){animation-delay:.22s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(13){animation-delay:.24s}
.vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot):nth-child(n+14){animation-delay:.26s}

/* press feedback on the chrome buttons */
.vsh-burger:active,.vsh-tbtn:active{transform:scale(.94)}
.vsh-burger,.vsh-tbtn{transition:color .18s,background .18s,border-color .18s,transform .12s var(--v-ease)}

/* drawer item icons ease toward full ink on hover */
.vsh-it .vsh-ico{transition:color .16s var(--v-ease)}
.vsh-it:hover .vsh-ico{color:var(--v-fg)}

/* header settles in once per load (very soft) */
.vsh-header{animation:vm-fade .35s var(--v-ease) backwards}

/* ── reduced motion: neutralize everything above ───────────────────── */
@media (prefers-reduced-motion: reduce){
  .vm-reveal,.vm-reveal--fade,.vm-stagger>*,.vm-pop,.vm-caret,
  .vsh-drawer.vsh-on :is(.vsh-it,.vsh-sec,.vsh-foot),.vsh-header,
  .v-modal-scrim:not([hidden]),.v-modal-scrim:not([hidden]) .v-modal{animation:none}
  .vm-shimmer{animation:none;background:none;-webkit-text-fill-color:var(--v-fg-dim);color:var(--v-fg-dim)}
  .vm-ring::after{animation:none;--vm-angle:0deg}
  .vm-collapse,.vm-chevron,.vm-lift,.vm-press,.vm-linkrow .vm-arrow,.vm-tip-box{transition:none}
  .vm-lift:hover{transform:none}
  .vm-press:active,.vsh-burger:active,.vsh-tbtn:active,.v-btn:active{transform:none}
}