/* VSSGEO design team: "controls" lane, FRONT DOOR (2026-09-28). Load LAST on the front door, after door/r2/rhythm.css.
   Pairs with door/r2/controls.js (adds .vgc-go to the send button for ~480 ms on press, so the launch also plays on a quick click).

   A5  One control style, flat: hairline border + the brand ring on hover/focus. No sheen or bevel highlights.
       Removes the white highlight sweep on .btn-solid and .t-cta.solid. They keep their red glow and the press scale.
   A6  The composer's controls move like the pricing ×, which turns 90° on hover:
         send  the arrow hops and settles a little higher on hover. On press it launches out of the top and a new arrow rises in.
         mic   a small wobble on hover. The listening state (red + pulse) is unchanged.
       The brand ring stays on both. The mic gets the ring too, drawn on ::before because ::after holds the listening pulse.
   A7  The question box ring is ONE colour cycle at ONE speed that never restarts (14 s, the calm rest speed from fd-polish).
       Rest, focus, typing, the landing sweep and "working" all share the same animation-name and -duration.
       Focus only adds the outer halo (box-shadow in the accent). Nothing else changes between states.
   Tokens only. Reduced motion: no hops, wobbles or launches, and the ring holds still. */


/* ══ A7 · the question box: one continuous ring ═══════════════════════════════════════════════════════════════
   frontdoor.css (6 s on focus), frontdoor-r2.css (paused at rest, running while typing, a 0.8 s fdx-sweep on landing,
   1.6 s while working) and fd-polish.css (6 s, then 14 s / 10 s on focus) each restated the animation, so every
   state change restarted --vg-ang from 0 and the colours jumped. The high specificity here is on purpose: it has
   to beat those !important rules. */
html:root body .fd .composer.composer::after,
html:root body .fd .composer.composer:focus-within::after,
html:root body .fd .composer.composer.fdx-typing:focus-within::after,
html:root body .fd .composer.composer.fdx-guide::after,
html:root body .fd .composer.composer.fdx-guide:focus-within::after,
html:root body .fd.fdx-working .composer.composer::after,
html:root body .fd.fdx-working .composer.composer:focus-within::after{
  opacity:1!important;
  animation:vg-spin 14s linear infinite!important;
  animation-play-state:running!important;
  animation-delay:0s!important}
/* the border never flips between the hairline and transparent (the ring covers it in every state) */
html:root body .fd .composer.composer{border-color:transparent;transition:box-shadow .45s ease}
/* focus (and the hand-off) only add the halo */
html:root body .fd .composer.composer:not(:focus-within){box-shadow:none}
html:root body .fd .composer.composer:focus-within,
html:root body .fd.fdx-working .composer.composer{box-shadow:0 0 44px var(--vg-accent-soft)}


/* ══ A5 · no highlight sweeps on solid buttons ══════════════════════════════════════════════════════════════════ */
html:root body .fd :is(.btn-solid,.t-cta.solid)::after,
html:root body .fd :is(.btn-solid,.t-cta.solid):hover::after{background:none!important;animation:none!important}
.btn-solid::after,.t-cta.solid::after{background:none!important;animation:none!important}   /* also when the modal is outside .fd */


/* ══ A6 · send: the arrow hops on hover, launches on press ═══════════════════════════════════════════════════════ */
html:root body .fd .send{overflow:hidden}                                       /* the arrow leaves through the top */
html:root body .fd .send svg{transition:transform .35s var(--vg-spring),opacity .2s ease}
@media (hover:hover){
  html:root body .fd .send:hover{transform:scale(1.06)}
  html:root body .fd .send:hover svg{animation:vgc-hop .55s var(--vg-spring) both!important;animation-iteration-count:1!important}
}
/* press: .vgc-go (controls.js) plays the full launch. :active is a fallback if the JS is missing. */
html:root body .fd .send:active svg{transform:translateY(-4px)}
html:root body .fd .send.vgc-go svg{animation:vgc-launch .48s cubic-bezier(.3,.7,.2,1) both!important;animation-iteration-count:1!important}
html:root body .fd .send:active{transform:scale(.94)}


/* ══ A6 · mic: a small wobble on hover, plus the ring ═══════════════════════════════════════════════════════════ */
html:root body .fd .composer .vg-mic{position:relative;isolation:isolate}
html:root body .fd .composer .vg-mic svg{transform-origin:50% 70%}
html:root body .fd .composer .vg-mic::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--vg-ang),var(--vg-gold) 0deg,var(--vg-red) 110deg,var(--vg-blue) 210deg,var(--vg-gold) 330deg,var(--vg-gold) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .22s ease}
@media (hover:hover){
  html:root body .fd .composer .vg-mic:not(.vg-mic-on):hover::before{opacity:1;animation:vg-spin 4.5s linear infinite}
  html:root body .fd .composer .vg-mic:not(.vg-mic-on):hover svg{animation:vgc-wobble .6s ease-in-out both}
}
html:root body .fd .composer .vg-mic:not(.vg-mic-on):focus-visible::before{opacity:1;animation:vg-spin 4.5s linear infinite}
html:root body .fd .composer .vg-mic:not(.vg-mic-on):active svg{transform:scale(.9)}
html:root body .fd .composer .vg-mic.vg-mic-on::before{opacity:0;animation:none}


/* ══ keyframes (the same names and values as door/r2/controls.css, so both pages move alike) ═════════════════════ */
@keyframes vgc-hop{0%{transform:none}45%{transform:translateY(-4px)}72%{transform:translateY(-1px)}100%{transform:translateY(-2px)}}
@keyframes vgc-launch{0%{transform:translateY(-2px);opacity:1}40%{transform:translateY(-150%);opacity:0}41%{transform:translateY(150%);opacity:0}100%{transform:none;opacity:1}}
@keyframes vgc-wobble{0%,100%{transform:none}25%{transform:rotate(-12deg) scale(1.08)}55%{transform:rotate(9deg) scale(1.08)}80%{transform:rotate(-4deg) scale(1.04)}}


/* ══ reduced motion ══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html:root body .fd .composer.composer::after,
  html:root body .fd .composer.composer:focus-within::after,
  html:root body .fd .composer.composer.fdx-typing:focus-within::after,
  html:root body .fd .composer.composer.fdx-guide::after,
  html:root body .fd.fdx-working .composer.composer::after{animation:none!important}
  html:root body .fd .send svg,html:root body .fd .send:hover svg,html:root body .fd .send.vgc-go svg,
  html:root body .fd .composer .vg-mic svg,html:root body .fd .composer .vg-mic:hover svg{animation:none!important;transform:none!important}
  html:root body .fd .send:hover,html:root body .fd .send:active{transform:none}
  html:root body .fd .composer .vg-mic:hover::before{animation:none}
}