/* Aivo motion language
   --------------------
   Four effects, each with one job:
   - gooey: groups of related choices
   - beam: active/live surfaces
   - metal: one primary commitment per view
   - orb: voice/model state

   The implementation is framework-free so the current product can ship it.
   Every class is also a clean seam for the equivalent React package during
   the planned Next.js migration. Motion is removed, not merely slowed, when
   the visitor requests reduced motion. */

:root{
  --fx-hot:var(--orange,var(--accent,#f04b2f));
  --fx-hot-2:#ff9a83;
  --fx-mint:var(--ok,#5bdd97);
  --fx-ink:var(--ink,#131512);
  --fx-ground:var(--solid-1,var(--white,#fff));
  --fx-beam-speed:5.6s;
}

/* Shared stacking contract. The painted effects never intercept a click. */
.fx-surface{position:relative;isolation:isolate}
.fx-surface > *{position:relative;z-index:1}

/* Animated border beam. Quiet at rest, visible for live/current content. */
@property --fx-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
.fx-beam{position:relative;isolation:isolate}
.fx-beam::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  inset:-1px;padding:1px;border-radius:inherit;
  background:conic-gradient(from var(--fx-angle),transparent 0 66%,color-mix(in srgb,var(--fx-hot) 35%,transparent) 74%,var(--fx-hot-2) 82%,var(--fx-mint) 87%,transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.72;animation:fx-beam-turn var(--fx-beam-speed) linear infinite;
}
.fx-beam[data-fx-state="idle"]::before{opacity:.22;animation-play-state:paused}
.fx-beam:focus-within::before,.fx-beam:hover::before{opacity:1}
@keyframes fx-beam-turn{to{--fx-angle:360deg}}

/* Liquid-metal commitment action. Use once per decision surface, never for
   every button. A narrow ring keeps labels and hit targets fully native. */
.fx-metal{
  position:relative!important;isolation:isolate;overflow:visible!important;
  box-shadow:0 8px 26px color-mix(in srgb,var(--fx-hot) 20%,transparent)!important;
}
.fx-metal::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-3px;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--fx-angle),#f6d3c9,#735b50 11%,#fff 18%,var(--fx-hot) 28%,#48291e 39%,#f7eee8 51%,var(--fx-mint) 61%,#2b3932 71%,#fff 84%,#a66a54 93%,#f6d3c9);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:fx-metal-turn 6.4s linear infinite;
  filter:saturate(.88) contrast(1.08);
}
.fx-metal:hover::before,.fx-metal:focus-visible::before{animation-duration:2.8s}
@keyframes fx-metal-turn{to{--fx-angle:360deg}}

/* Gooey groups use an SVG filter injected by motion.js. SourceGraphic is
   merged last, leaving labels sharp while the moving alpha fields join. */
.fx-gooey{filter:url("#aivo-gooey");isolation:isolate;overflow:visible!important}
.fx-gooey > *{position:relative;isolation:isolate}
.fx-gooey > *::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:18px;height:18px;border-radius:50%;left:50%;top:50%;
  background:currentColor;opacity:0;transform:translate(-50%,-50%) scale(.2);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .24s ease;
}
.fx-gooey > *:hover::after,.fx-gooey > *:focus-visible::after,
.fx-gooey > *.active::after,.fx-gooey > *[aria-selected="true"]::after{
  opacity:.09;transform:translate(-50%,-50%) scale(2.4);
}

/* Dotted voice/model state. Canvas owns the drawing; this shell owns layout. */
.fx-orb{
  display:inline-grid;place-items:center;flex:0 0 auto;line-height:0;
  color:currentColor;contain:layout paint size;
}
.fx-orb canvas{display:block;width:100%;height:100%}
.fx-orb-status{display:inline-flex;align-items:center;gap:10px}
.fx-orb-label{font:600 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase}

/* Product placements. The effects are semantic rather than page-specific
   decoration: call surfaces beam, decision buttons metal, choices merge. */
.hero-product.fx-beam::before{inset:-2px;padding:2px;opacity:1}
.system-call .fx-orb-status{align-items:center}
.system-call .fx-orb-label{font:inherit;letter-spacing:inherit;text-transform:none}
.demo-top .fx-orb{margin-right:2px}
.gate-card.fx-beam{overflow:visible}
.gate-card > .fx-orb{position:absolute;right:22px;top:20px;color:var(--accent)}
.price-card.fx-beam::before{opacity:.9}
.pilot-form.fx-beam::before{opacity:.58}

/* Console surfaces keep the effect compact and purposeful. */
.side .mark.fx-beam::before{border-radius:inherit;opacity:.85}
.ck-row[data-check="activate"].fx-beam::before{opacity:.8}
.view.on > .vh .fx-orb{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .fx-beam::before,.fx-metal::before{animation:none!important}
  .fx-gooey{filter:none}
  .fx-gooey > *::after{display:none}
}

@media(max-width:560px){
  .gate-card > .fx-orb{right:16px;top:16px}
  .fx-metal::before{inset:-2px;padding:1px}
}