/* Turbo Boost (Skyline background) - palette: violet / magenta / cyan on dark */
.turbo-fx{position:fixed;inset:0;z-index:1;pointer-events:none}   /* above .home (z1, earlier in DOM), below the z-[2] page content */
.turbo-fx canvas{display:block;position:absolute;inset:0;pointer-events:none}

.turbo-ui{
  position:fixed;left:0;top:0;z-index:3;pointer-events:none;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
}
.turbo-ui[data-visible="true"]{opacity:1;visibility:visible;transition:opacity .5s ease .25s,visibility 0s}

.turbo-btn{
  pointer-events:auto;position:relative;display:inline-flex;align-items:center;gap:.75em;
  padding:.85em 1.1em .85em 1em;border-radius:999px;border:1px solid rgba(139,92,246,.55);
  background:linear-gradient(180deg,rgba(26,12,52,.62),rgba(10,6,24,.74));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#e9e4ff;cursor:pointer;
  font:600 11px/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 8px 26px rgba(8,2,28,.5),inset 0 0 14px rgba(139,92,246,.16),0 0 0 rgba(34,211,238,0);
  transition:border-color .22s,box-shadow .28s,color .22s,background .3s;
  -webkit-tap-highlight-color:transparent;
}
/* subtle idle shimmer: one soft pass along the border every ~6.5 s (not a constant pulse) */
.turbo-btn::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 38%,rgba(103,232,249,.95) 50%,transparent 62%) 130% 0/260% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:turbo-shimmer 6.5s ease-in-out 1.5s infinite;
}
@keyframes turbo-shimmer{0%,60%{background-position:130% 0;opacity:0}66%{opacity:1}90%,100%{background-position:-30% 0;opacity:0}}

.turbo-bolt{flex:none;color:#67e8f9;transition:transform .22s,filter .22s,color .22s}
.turbo-key{
  margin-left:.15em;padding:.3em .55em;border-radius:6px;border:1px solid rgba(233,228,255,.22);
  font:inherit;font-size:9px;letter-spacing:.14em;color:rgba(233,228,255,.62);
}
.turbo-btn:hover{
  border-color:rgba(34,211,238,.9);color:#fff;
  box-shadow:0 8px 26px rgba(8,2,28,.5),inset 0 0 18px rgba(217,70,239,.24),0 0 24px rgba(34,211,238,.32);
}
.turbo-btn:hover .turbo-bolt{transform:translateY(-1px) scale(1.14);filter:drop-shadow(0 0 5px #22d3ee)}
.turbo-btn:active{transform:translateY(1px)}
.turbo-btn:focus-visible{outline:2px solid #67e8f9;outline-offset:4px;box-shadow:0 0 0 5px rgba(34,211,238,.16),0 8px 26px rgba(8,2,28,.5)}

/* engaged state (restored automatically when the boost ends) */
.turbo-btn[data-state="boost"]{
  border-color:#f5d0fe;color:#fff;cursor:default;
  background:linear-gradient(100deg,rgba(124,58,237,.92),rgba(217,70,239,.88) 48%,rgba(34,211,238,.9));
  box-shadow:0 0 30px rgba(217,70,239,.62),0 0 64px rgba(34,211,238,.36),inset 0 0 14px rgba(255,255,255,.25);
}
.turbo-btn[data-state="boost"] .turbo-bolt{color:#fff;filter:drop-shadow(0 0 7px #fff);animation:turbo-flicker .18s steps(2) infinite}
.turbo-btn[data-state="boost"]::before{animation:none;opacity:0}
@keyframes turbo-flicker{50%{opacity:.55}}

.turbo-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (hover:none),(pointer:coarse){.turbo-key{display:none}}
@media (max-width:700px){.turbo-btn{font-size:10px;padding:.8em 1em}}
@media (prefers-reduced-motion:reduce){
  .turbo-btn::before{display:none}
  .turbo-ui,.turbo-ui[data-visible="true"]{transition:opacity .2s linear}
  .turbo-btn[data-state="boost"] .turbo-bolt{animation:none}
}