/* TollSpark hero — night tollway scene + state-driven brand mark.
   Each facet of the mark leads one state:  blue = listening, gold = thinking, magenta = speaking.
   Loaded after style.css / phone.css; selectors are scoped to .hero.ts-stage to override legacy rules. */

.hero.ts-stage{
  --tsx-blue:#4f9dff; --tsx-gold:#f5b53a; --tsx-magenta:#e0479e;
  --c:var(--tsx-blue);
  position:relative!important;overflow:hidden!important;isolation:isolate;
  background:#06142a!important;
}
.hero.ts-stage::before,.hero.ts-stage::after{display:none!important}
body.mode-thinking .hero.ts-stage{--c:#8f8cff}
body.mode-speaking .hero.ts-stage{--c:var(--tsx-magenta)}

/* ---------- scene ---------- */
.tsx-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.tsx-horizon{stroke:#7fb3ff;stroke-opacity:.28;stroke-width:.5}
.tsx-horizon-glow{fill:var(--c);opacity:.32;transition:fill .5s,opacity .5s}
body.mode-speaking .tsx-horizon-glow{animation:tsxGlowPulse .84s ease-in-out infinite}
body.mode-thinking .tsx-horizon-glow{opacity:.42}
@keyframes tsxGlowPulse{0%,100%{opacity:.3}40%{opacity:.55}}

/* distant city lights twinkle softly */
.tsx-b{opacity:var(--o);animation-name:tsxTwinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes tsxTwinkle{0%,100%{opacity:var(--o)}50%{opacity:calc(var(--o) * .35)}}

/* lane markings flow toward the viewer; speed follows the state */
.tsx-dashes line{stroke-dasharray:5 9;animation:tsxFlow 2.6s linear infinite}
body.mode-listening .tsx-dashes line{animation-duration:1.7s}
body.mode-thinking  .tsx-dashes line{animation-duration:.75s}
body.mode-speaking  .tsx-dashes line{animation-duration:1.25s}
@keyframes tsxFlow{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}

/* invitation under the mark */
.tsx-hint{position:absolute;left:50%;bottom:7%;z-index:4;transform:translateX(-50%);
  padding:5px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font-family:inherit;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.1px;color:#dcecff;
  background:rgba(6,20,42,.62);border:1px solid rgba(127,179,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;translate:0 6px;transition:opacity .45s ease,translate .45s ease}
.tsx-hint.show{opacity:1;translate:0 0}

/* ---------- mark ---------- */
.tsx-mark{
  position:absolute;left:50%;top:44%;z-index:2;
  width:min(104px,18vh);aspect-ratio:178/191;
  transform:translate(-50%,-50%);pointer-events:none;
}
.tsx-facets{position:absolute;inset:0;animation:tsxFloat 6s ease-in-out infinite}
.tsx-facet{
  position:absolute;inset:0;width:100%;height:100%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease,opacity .45s ease;
  will-change:transform;
}
.tsx-magenta{transform-origin:29% 47%}
.tsx-blue{transform-origin:71% 33%}
.tsx-gold{transform-origin:60% 72%}

/* glow under the mark, tinted by state */
.tsx-shadow{position:absolute;left:18%;right:18%;bottom:-9%;height:12%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 55%,transparent),transparent);
  opacity:.55;transition:background .4s,opacity .4s}
.tsx-halo{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);
  opacity:.35;transition:opacity .45s ease}

/* rings share geometry */
.tsx-ripple,.tsx-level,.tsx-arc{position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.tsx-ripple{width:118%;border:1.5px solid var(--c)}
.tsx-level{width:122%;border:2px solid var(--c);transition:transform 90ms linear,opacity .3s}
.tsx-arc{width:126%;
  background:conic-gradient(from 0deg,transparent 0 62%,color-mix(in srgb,var(--c) 70%,transparent) 88%,var(--c) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}

/* ---------- idle ---------- */
@keyframes tsxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3%)}}

/* ---------- listening: blue facet leans in, soft ripples (and live voice level on iPhone) ---------- */
body.mode-listening .tsx-blue{transform:translate(2%,-3%) scale(1.07);filter:drop-shadow(0 0 10px rgba(79,157,255,.85))}
body.mode-listening .tsx-magenta,body.mode-listening .tsx-gold{filter:brightness(.82) saturate(.9)}
body.mode-listening .tsx-ripple{animation:tsxRipple 2.7s cubic-bezier(.2,.6,.3,1) infinite}
body.mode-listening .tsx-r2{animation-delay:.9s}
body.mode-listening .tsx-r3{animation-delay:1.8s}
body.mode-listening.ts-phone .tsx-level{opacity:calc(.15 + var(--ts-level,0)*.75);transform:translate(-50%,-50%) scale(calc(1 + var(--ts-level,0)*.32))}
@keyframes tsxRipple{0%{transform:translate(-50%,-50%) scale(.85);opacity:0}15%{opacity:.55}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}

/* ---------- thinking: the three pieces ease outward a touch and orbit clockwise,
   each glowing brighter in its own colour (no ring) ---------- */
.tsx-arc{display:none!important}
.tsx-facets{transform-origin:50% 50%}
body.mode-thinking .tsx-facets{animation:tsxOrbit 2.6s linear infinite}
body.mode-thinking .tsx-magenta{transform:translate(-7%,-2%) scale(.92);animation:tsxGlowM 1.3s ease-in-out infinite}
body.mode-thinking .tsx-blue{transform:translate(6%,-6%) scale(.92);animation:tsxGlowB 1.3s ease-in-out infinite .43s}
body.mode-thinking .tsx-gold{transform:translate(1%,7%) scale(.92);animation:tsxGlowG 1.3s ease-in-out infinite .86s}
body.mode-thinking .tsx-halo{opacity:.5}
@keyframes tsxOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes tsxGlowM{0%,100%{filter:brightness(1.05) drop-shadow(0 0 5px rgba(224,71,158,.55))}50%{filter:brightness(1.35) drop-shadow(0 0 14px rgba(224,71,158,1))}}
@keyframes tsxGlowB{0%,100%{filter:brightness(1.05) drop-shadow(0 0 5px rgba(79,157,255,.55))}50%{filter:brightness(1.35) drop-shadow(0 0 14px rgba(79,157,255,1))}}
@keyframes tsxGlowG{0%,100%{filter:brightness(1.05) drop-shadow(0 0 5px rgba(245,181,58,.55))}50%{filter:brightness(1.35) drop-shadow(0 0 14px rgba(245,181,58,1))}}

/* ---------- speaking: facets pulse in turn like syllables, magenta halo breathes ---------- */
body.mode-speaking .tsx-facets{animation:none}
body.mode-speaking .tsx-magenta{animation:tsxSyllable .84s ease-in-out infinite;filter:drop-shadow(0 0 11px rgba(224,71,158,.9))}
body.mode-speaking .tsx-blue{animation:tsxSyllable .84s ease-in-out infinite .28s}
body.mode-speaking .tsx-gold{animation:tsxSyllable .84s ease-in-out infinite .56s}
body.mode-speaking .tsx-halo{animation:tsxBreathe .84s ease-in-out infinite;opacity:.7}
body.mode-speaking .tsx-shadow{opacity:.9}
@keyframes tsxSyllable{0%,100%{scale:1}35%{scale:1.075}}
@keyframes tsxBreathe{0%,100%{opacity:.45}40%{opacity:.85}}

/* ---------- muted ---------- */
.app:has(#mic.off) .tsx-facets{filter:saturate(.35) brightness(.72);animation-play-state:paused}
.app:has(#mic.off) .tsx-halo,.app:has(#mic.off) .tsx-shadow{opacity:.15}

/* the click target sits on top, invisible */
.hero.ts-stage .face{display:block!important;pointer-events:auto!important;position:absolute!important;inset:0!important;z-index:3!important;cursor:pointer!important;width:100%!important;height:100%!important;
  background:transparent!important;box-shadow:none!important;filter:none!important;border:0!important}
.hero.ts-stage .face>*{display:none!important}
.hero.ts-stage .face.clicked~.tsx-mark,.hero.ts-stage:has(.face.clicked) .tsx-facets{scale:1.06;transition:scale .25s}

@media (prefers-reduced-motion:reduce){
  .tsx-trail{display:none}
  .tsx-b,.tsx-dashes line,.tsx-horizon-glow{animation:none!important}
  .tsx-trail,.tsx-facets,.tsx-facet,.tsx-ripple,.tsx-arc,.tsx-halo,.brand .ts-ver i{animation:none!important}
}

/* ---------- version badge: TOLLSPARK 1.0 ---------- */
.brand .ts-ver{display:inline-block;margin-left:.42em;padding:.12em .55em .1em;border-radius:999px;vertical-align:.42em;
  font-size:.46em;font-weight:800;font-style:normal;letter-spacing:.12em;line-height:1.25;
  border:1.5px solid transparent;
  background:linear-gradient(#071a33,#071a33) padding-box,
             linear-gradient(120deg,#4f9dff,#e0479e 50%,#f5b53a) border-box;
  box-shadow:0 0 10px rgba(79,157,255,.35),0 0 18px rgba(224,71,158,.18)}
.brand .ts-ver i{font-style:normal;color:transparent;
  background:linear-gradient(100deg,#bfe1ff 0%,#ffffff 30%,#ffb3dd 50%,#ffd68a 65%,#bfe1ff 85%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  animation:tsVerShine 4.5s linear infinite}
@keyframes tsVerShine{from{background-position:0% 0}to{background-position:-220% 0}}

/* ---------- standby (waiting for a tap, e.g. after a conversation ends): the mark rests fully
   assembled and gently floats; no leaning facet, no leftover thinking/speaking transforms ---------- */
body.ts-standby .tsx-facet{transform:none!important;scale:1!important;animation:none!important;filter:none!important;opacity:1!important}
body.ts-standby .tsx-facets{animation:tsxFloat 6s ease-in-out infinite!important;rotate:none!important}
body.ts-standby .tsx-ripple{animation-duration:4.5s!important;border-width:1px}
body.ts-standby .tsx-level{opacity:0!important}
body.ts-standby .tsx-halo{opacity:.3}
/* every state change eases back to the resting shape instead of jumping */
.tsx-facet{transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease,opacity .45s ease,scale .4s ease}
.tsx-mark{transition:width .45s ease,top .45s ease}