/* ============================================================
 * maisy-voice.css — AI voice-agent background for the intro's
 * left column (.svc-intro). Additive: everything is injected by
 * maisy-voice.js, so the page markup is untouched.
 *
 * The centrepiece is a voice orb built from many thin strands
 * that undulate organically, sitting behind the copy. The
 * reference for this idiom sits on black, where neon glow
 * carries it; this column is white with navy text, so the
 * strands are drawn as layered line density rather than glow —
 * on a light background additive blending only washes out and
 * costs legibility.
 *
 * Kill switch: <html data-mv="off">
 * ========================================================== */

/* The page pins .svc-intro .reveal to a fixed 492px. Released
   here only for the column we touch; the chat card keeps it. */
.svc-intro .reveal.mv-col{height:auto;}

.mv-col{position:relative;}
/* copy always sits above the artwork */
.mv-col > *:not(.mv-orb){position:relative;z-index:1;}

/* ---------- the voice orb ---------- */
/* Anchored to the column's left edge and pulled further out, so the
   bundle sits at the far left of the section and bleeds off it. Left
   overflow does not create a horizontal scrollbar, so nothing needs
   clipping — which matters, because clipping would cut the orb.

   --mv-size is the section's height, measured in JS; --mv-top centres
   the orb on the section rather than on this (shorter) column. The vw
   cap stops a tall stacked layout on a phone producing a huge circle. */
.mv-orb{
  position:absolute;
  left:0;top:var(--mv-top,50%);
  width:min(var(--mv-size,620px),115vw);
  height:min(var(--mv-size,620px),115vw);
  transform:translate(-40%,-50%);
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.22,.8,.3,1);
  /* soften the outer edge so it dissolves into the page */
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.45) 80%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.45) 80%,transparent 100%);
}
.mv-on .mv-orb{opacity:.74;}
.mv-orb canvas{display:block;width:100%;height:100%;}

/* ---------- heading: words rise, "agentic AI" speaks ---------- */
.mv-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.18em;margin-bottom:-.18em;
}
.mv-w > i{
  display:inline-block;font-style:inherit;
  transform:translateY(112%);
  opacity:0;
  transition:transform .9s cubic-bezier(.22,.8,.3,1),
             opacity .55s cubic-bezier(.22,.8,.3,1);
  transition-delay:var(--d,0ms);
}
.mv-on .mv-w > i{transform:none;opacity:1;}

.svc-intro h2 .g{background-size:220% auto;}
.mv-on .svc-intro h2 .g{animation:mvShimmer 5s linear infinite;}
@keyframes mvShimmer{to{background-position:220% center;}}

/* ---------- voice equaliser under the heading ----------
 * A row of rounded bars pulsing around a centre line. Each bar is
 * scaled rather than resized, so the whole row composites on the GPU
 * and never touches layout. Bars carry a negative animation-delay
 * stepped by index, which starts each one already part-way through
 * its cycle — that is what makes a wave appear to travel along the
 * row instead of every bar throbbing in unison. */
.mv-eqline{
  display:flex;
  align-items:center;
  gap:var(--eq-gap,3px);
  height:26px;
  max-width:340px;
  margin-top:8px;
  opacity:0;
  transition:opacity .8s cubic-bezier(.22,.8,.3,1) .2s;
}
.mv-on .mv-eqline{opacity:1;}

.mv-eqline i{
  display:block;
  flex:0 0 auto;
  width:var(--eq-w,3px);
  height:100%;
  border-radius:99px;
  transform:scaleY(var(--min,.16));
  transform-origin:50% 50%;
  will-change:transform;
  animation:mvBar var(--dur,1.1s) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
  animation-play-state:paused;
}
.mv-on .mv-eqline i{animation-play-state:running;}

@keyframes mvBar{
  from{transform:scaleY(var(--min,.16));}
  to{transform:scaleY(var(--peak,1));}
}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .mv-on .mv-orb{opacity:.56;}
}
@media (max-width:560px){
  /* the column runs edge to edge here, so pull it out less or most of
     the bundle ends up off the screen */
  .mv-orb{transform:translate(-30%,-50%);}
  .mv-on .mv-orb{opacity:.46;}
}

/* ---------- opt-outs ---------- */
@media (prefers-reduced-motion:reduce){
  .mv-orb{display:none;}
  .mv-w > i{transform:none !important;opacity:1 !important;transition:none !important;}
  .mv-on .svc-intro h2 .g{animation:none !important;}
  /* show the bars at rest, pulse nothing */
  .mv-eqline{opacity:1 !important;transition:none !important;}
  .mv-eqline i{animation:none !important;transform:scaleY(var(--peak,.6)) !important;}
}
@media print{
  .mv-orb,.mv-eqline{display:none !important;}
}