/* VAULT · the marketing page · 6 · Kostas (9 Nov 2026; board 10, screen 6). m-kostas.js draws his voice as the ring on the canvas
   around his face, and plays the two exchanges in .convo; no chat bubbles for him: his words light on the page, one by one. */
.ask{overflow:hidden;overflow:clip}                                        /* the ring's canvas reaches past the column; never the page */
.ask-g .kface{width:min(380px,70vw,100%)}
.ask-g .kface .nm{top:calc(100% + 19%)}                                    /* below the ring's longest swell */

.ask-g .convo{display:grid;align-items:start}
.ask-x{grid-area:1/1;min-width:0;visibility:hidden}
.ask-x.show{visibility:visible}
.ask-x.rs,.ask-x.rs *{transition:none!important}

/* the question: a small glass pill that listens, then the words resolve out of its waveform */
.ask-q{display:flex;align-items:center;gap:12px;margin-left:auto;width:max-content;max-width:100%;padding:11px 18px 11px 14px;border-radius:24px;
 background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.4);
 -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);font-size:17px;line-height:1.35;letter-spacing:-.01em;color:var(--t);
 overflow:hidden;transform-origin:100% 50%;opacity:0;transform:translateY(10px) scale(.92);filter:blur(6px);
 transition:opacity .6s var(--ease),transform .8s var(--ease),filter .6s var(--ease)}
.ask-x.q-in .ask-q{opacity:1;transform:none;filter:blur(0)}
.ask-wv{flex:none;display:block;width:44px;height:22px;transition:opacity .6s}
.ask-ql{font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--f);padding-right:6px;white-space:nowrap}
.ask-qt{display:none;min-width:0}
.ask-q.one .ask-qt{white-space:nowrap}
.ask-x.q-on .ask-ql{display:none}.ask-x.q-on .ask-qt{display:block}
.ask-qw{display:inline-block;opacity:0;filter:blur(9px);transform:translateX(-12px) scaleY(1.35);transform-origin:0 50%}
.ask-qw.on{opacity:1;filter:blur(0);transform:none;transition:opacity .45s var(--ease),filter .6s var(--ease),transform .75s var(--ease)}

/* his answer: KOSTAS, then the words light as he says them */
.ask-a{margin-top:24px}
.ask-who{display:flex;align-items:center;gap:11px;font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--f);
 opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.ask-x.a-in .ask-who{opacity:1;transform:none}
.ask-av{position:relative;flex:none;width:24px;height:24px}
.ask-av img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.ask-av:after{content:"";position:absolute;inset:-3.5px;border-radius:50%;background:conic-gradient(#ff9f0a,#ffd60a,#4da3ff,#30d158,#ff9f0a);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.1px));
 opacity:0;transition:opacity .5s}
.ask-x.speaking .ask-av:after{opacity:1;animation:ask-turn 3.6s linear infinite}
@keyframes ask-turn{to{transform:rotate(1turn)}}
.ask-at{margin:13px 0 0;font-size:24px;line-height:1.48;letter-spacing:-.02em;font-weight:400;opacity:0;transform:translateY(4px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ask-x.a-on .ask-at{opacity:1;transform:none}
.ask-w{background:linear-gradient(90deg,#F5F5F7 0,#F5F5F7 42%,rgba(245,245,247,.2) 58%,rgba(245,245,247,.2) 100%) 100% 0/240% 100% no-repeat;
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:background-position var(--d,300ms) linear}
.ask-w.on{background-position:0 0}
/* the fact's place waits, faint and dashed, until he names it; then it is pressed in like a stamp */
.ask-fact{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;margin:0 2px;border-radius:10px;vertical-align:3px;
 font-size:13.5px;font-weight:500;letter-spacing:-.005em;line-height:1;white-space:nowrap;color:transparent;outline:1px dashed rgba(245,245,247,.14);outline-offset:-1px}
.ask-fact svg{flex:none;width:10px;height:11px}
.ask-fact.on{outline-color:transparent}
.ask-fact.red.on{color:#ff8a80;background:rgba(255,69,58,.13);box-shadow:inset 0 0 0 1px rgba(255,69,58,.38)}
.ask-fact.blue.on{color:#93c7ff;background:rgba(77,163,255,.12);box-shadow:inset 0 0 0 1px rgba(77,163,255,.38)}

@media (max-width:1000px){
 .ask-g .kface{margin-bottom:calc(min(380px,70vw) * .19 + 64px)}
 .ask-g .kface .nm{position:absolute;margin-top:0}
 .ask-g .convo{margin-top:26px}
}
@media (max-width:640px){
 .ask-q{font-size:15px;padding:10px 14px 10px 12px;gap:10px;border-radius:20px}
 .ask-wv{width:34px;height:18px}
 .ask-a{margin-top:20px}
 .ask-at{font-size:19px;line-height:1.5}
 .ask-fact{height:26px;padding:0 10px 0 9px;font-size:12.5px;vertical-align:2px;border-radius:9px}
}

/* 9 Nov (DevTeam6: "Kostas should blur in"): soft and a touch large → sharp; the ring blooms out after him; then his name */
.ask-g .kface .im{opacity:0;filter:blur(26px) saturate(.6);transform:scale(1.06)}
.ask-g .kface .ring{opacity:0;transform:scale(.9)}
.ask-g .kface .nm{opacity:0;transform:translateY(8px)}
.ask-g .kface.in .im{opacity:1;filter:none;transform:none;transition:opacity 1.1s var(--ease),filter 1.9s cubic-bezier(.22,.8,.2,1),transform 2.2s var(--ease)}
.ask-g .kface.in .ring{opacity:1;transform:none;transition:opacity 1.6s var(--ease) .55s,transform 2s var(--ease) .55s}
.ask-g .kface.in .nm{opacity:1;transform:none;transition:opacity 1s var(--ease) 1s,transform 1.2s var(--ease) 1s}
@media (prefers-reduced-motion:reduce){.ask-g .kface .im,.ask-g .kface .ring,.ask-g .kface .nm{opacity:1;filter:none;transform:none;transition:none}}