/* =========================================================================
   Rooky — vivid.css   (color & motion layer; loaded after live.css)
   ========================================================================= */

/* ---------- scroll progress bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--blue),var(--cyan) 50%,var(--violet));
  box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 55%,transparent);
  transition:width .12s linear}

/* ---------- aurora blobs ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;animation:hueDrift 24s linear infinite}
@keyframes hueDrift{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(28deg)}}
.aurora .blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.85;will-change:transform}
.aurora .b1{width:640px;height:640px;left:-140px;top:-200px;
  background:radial-gradient(circle,color-mix(in srgb,var(--violet) 52%,transparent),transparent 66%);
  animation:drift1 14s ease-in-out infinite alternate}
.aurora .b2{width:760px;height:760px;right:-220px;top:-120px;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 48%,transparent),transparent 66%);
  animation:drift2 18s ease-in-out infinite alternate}
.aurora .b3{width:560px;height:560px;left:30%;bottom:-260px;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 38%,transparent),transparent 66%);
  animation:drift3 16s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(120px,80px) scale(1.2)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-150px,90px) scale(0.9)}}
@keyframes drift3{from{transform:translate(0,0)}to{transform:translate(100px,-80px) scale(1.16)}}
[data-theme="light"] .aurora .blob{opacity:.5}

/* ---------- gradient-panning headline ---------- */
.hero h1 .grad{background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--blue) 45%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .accent{
  background:linear-gradient(110deg,var(--blue),var(--cyan) 25%,var(--violet) 50%,var(--cyan) 75%,var(--blue) 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradPan 5s linear infinite;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--blue) 40%,transparent))}
@keyframes gradPan{from{background-position:0% 0}to{background-position:240% 0}}

/* hero particles canvas */
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none}

/* gradient keywords for section titles */
.tinted{background:linear-gradient(110deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.tinted.v{background:linear-gradient(110deg,var(--violet),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.tinted.g{background:linear-gradient(110deg,var(--up),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- rotating gradient borders (hero console + consensus + CTA) ---------- */
.grad-border{position:relative}
.grad-border::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--gb-angle,0deg),
    color-mix(in srgb,var(--blue) 70%,transparent),
    color-mix(in srgb,var(--cyan) 60%,transparent) 25%,
    transparent 50%,
    color-mix(in srgb,var(--violet) 60%,transparent) 75%,
    color-mix(in srgb,var(--blue) 70%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:gbSpin 9s linear infinite}
@property --gb-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes gbSpin{from{--gb-angle:0deg}to{--gb-angle:360deg}}
/* fallback for browsers without @property: gentle opacity pulse */
@supports not (background:conic-gradient(from var(--gb-angle,0deg),#000,#fff)){
  .grad-border::before{animation:gbPulse 4s ease-in-out infinite alternate}
  @keyframes gbPulse{from{opacity:.5}to{opacity:1}}
}

/* ---------- live system ticker ---------- */
.ticker{border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  background:color-mix(in srgb,var(--bg) 70%,var(--panel-2));overflow:hidden;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.ticker-track{display:flex;gap:0;width:max-content;animation:tickerMove 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{display:inline-flex;align-items:center;gap:9px;padding:11px 26px;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;color:var(--ink-3)}
.ticker-item b{color:var(--ink-2);font-weight:500}
.ticker-item .tk{font-size:10px;padding:2.5px 7px;border-radius:5px;font-weight:600;letter-spacing:0.06em}
.ticker-item .tk.b{color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent)}
.ticker-item .tk.c{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 13%,transparent)}
.ticker-item .tk.g{color:var(--up);background:var(--up-soft)}
.ticker-item .tk.v{color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent)}
.ticker-item .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-4)}

/* ---------- button: gradient + shine ---------- */
.btn-primary{position:relative;overflow:hidden;
  background:linear-gradient(110deg,var(--blue-deep),var(--blue) 40%,color-mix(in srgb,var(--violet) 75%,var(--blue)));
  background-size:160% 100%;animation:btnPan 6s ease-in-out infinite alternate}
@keyframes btnPan{from{background-position:0% 0}to{background-position:100% 0}}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,72%{left:-80%}100%{left:130%}}

/* ---------- panel & card hover glow ---------- */
.pcard,.trust-card,.gate-tile,.pstep,.loop-item{transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.pcard:hover,.trust-card:hover{transform:translateY(-4px)}
.pcard.hero-path:hover{transform:translateY(-12px)}
.trust-card:hover{box-shadow:0 18px 44px -24px color-mix(in srgb,var(--violet) 36%,transparent)}
.pcard.muted:hover{box-shadow:0 18px 44px -24px rgba(0,0,0,0.45)}
.pcard.hero-path{box-shadow:0 30px 70px -45px color-mix(in srgb,var(--blue) 55%,transparent)}
.gate-tile:hover{transform:translateY(-3px)}
.gate-tile.ok:hover{box-shadow:0 14px 36px -20px color-mix(in srgb,var(--up) 45%,transparent)}
.pstep:hover .pic{color:var(--cyan)}
.pstep .pic{transition:color .3s,transform .3s}
.pstep:hover .pic svg{transform:translateY(-2px)}
.pstep .pic svg{transition:transform .3s var(--ease)}
.loop-item:hover{transform:translateX(5px);border-color:color-mix(in srgb,var(--down) 30%,var(--hair))}
.loop-item:hover .li-n{color:var(--down)}
.loop-item .li-n{transition:color .3s}

/* colorful pipeline indices */
.pstep:nth-child(1) .pidx{color:var(--blue)}
.pstep:nth-child(2) .pidx{color:var(--cyan)}
.pstep:nth-child(3) .pidx{color:var(--up)}
.pstep:nth-child(4) .pidx{color:var(--warn)}
.pstep:nth-child(5) .pidx{color:var(--violet)}
.pstep:nth-child(6) .pidx{color:var(--down)}

/* per-gate tile hue accents */
.gate-tile:nth-child(1) .gt-bar > i.ok{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.gate-tile:nth-child(2) .gt-bar > i.ok{background:linear-gradient(90deg,var(--cyan),var(--up))}
.gate-tile:nth-child(3) .gt-bar > i.ok{background:linear-gradient(90deg,var(--violet),var(--blue))}
.gate-tile:nth-child(4) .gt-bar > i.ok{background:linear-gradient(90deg,var(--up),var(--cyan))}
.gate-tile:nth-child(5) .gt-bar > i.ok{background:linear-gradient(90deg,var(--blue),var(--violet))}
.gate-tile:nth-child(6) .gt-bar > i.ok{background:linear-gradient(90deg,var(--cyan),var(--blue))}
.gate-tile:nth-child(7) .gt-bar > i.ok{background:linear-gradient(90deg,var(--violet),var(--cyan),var(--up))}
.gauge-num{background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--cyan) 55%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.consensus-decision.engage{box-shadow:0 0 28px -6px color-mix(in srgb,var(--up) 55%,transparent);animation:engagePulse 2.4s ease-in-out infinite}
@keyframes engagePulse{0%,100%{box-shadow:0 0 22px -8px color-mix(in srgb,var(--up) 45%,transparent)}50%{box-shadow:0 0 34px -4px color-mix(in srgb,var(--up) 65%,transparent)}}

/* per-section tinted glows */
#gates .field-glow,#gates ~ .field-glow{opacity:1}
.glow-violet{background:radial-gradient(55% 50% at 85% 10%,color-mix(in srgb,var(--violet) 14%,transparent),transparent 62%),
  radial-gradient(50% 55% at 10% 90%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 60%)}
.glow-cyan{background:radial-gradient(55% 50% at 12% 8%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 62%),
  radial-gradient(50% 55% at 90% 92%,color-mix(in srgb,var(--violet) 11%,transparent),transparent 60%)}
.glow-green{background:radial-gradient(55% 50% at 85% 12%,color-mix(in srgb,var(--up) 10%,transparent),transparent 62%)}

/* watch-band stat accents */
.watch-stat:nth-child(1) .ws-n{color:var(--cyan)}
.watch-stat:nth-child(2) .ws-n{color:var(--blue)}
.watch-stat:nth-child(3) .ws-n{color:var(--violet)}
.watch-stat:nth-child(4) .ws-n{color:var(--up)}

/* proof bar accent underlines + gradient numbers */
.proof .pn{background:linear-gradient(110deg,var(--ink),color-mix(in srgb,var(--blue) 60%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.proof .pn b{background:linear-gradient(110deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.proof:nth-child(2) .pn b{background:linear-gradient(110deg,var(--cyan),var(--up));-webkit-background-clip:text;background-clip:text;color:transparent}
.proof:nth-child(3) .pn b{background:linear-gradient(110deg,var(--violet),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.proof:nth-child(4) .pn b{background:linear-gradient(110deg,var(--up),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.proof{position:relative}
.proof::after{content:"";position:absolute;left:28px;bottom:22px;height:2.5px;width:34px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:.85}
.proof:nth-child(2)::after{background:linear-gradient(90deg,var(--cyan),var(--up))}
.proof:nth-child(3)::after{background:linear-gradient(90deg,var(--violet),var(--blue))}
.proof:nth-child(4)::after{background:linear-gradient(90deg,var(--up),var(--cyan))}

/* timeline dots pulse when active */
.tl-item.done .tl-dot i{animation:tlGlow 3s ease-in-out infinite}
.tl-item:nth-child(2) .tl-dot i{animation-delay:.4s}
.tl-item:nth-child(3) .tl-dot i{animation-delay:.8s}
.tl-item:nth-child(4) .tl-dot i{animation-delay:1.2s}
.tl-item:nth-child(5) .tl-dot i{animation-delay:1.6s}
.tl-item:nth-child(6) .tl-dot i{animation-delay:2s}
@keyframes tlGlow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 8px 1px color-mix(in srgb,var(--up) 55%,transparent)}}

/* hero status chip shimmer */
.hero-status{position:relative;overflow:hidden}
.hero-status::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--cyan) 18%,transparent),transparent);
  transform:skewX(-20deg);animation:shine 6s ease-in-out infinite;animation-delay:1.2s}

/* nav waitlist button pop */
.nav .btn-primary{box-shadow:0 6px 22px -8px color-mix(in srgb,var(--blue) 70%,transparent)}

/* CTA box gets aurora + stronger gradient */
.cta-box{background:linear-gradient(180deg,
  color-mix(in srgb,var(--blue) 12%,var(--panel-2)),
  color-mix(in srgb,var(--violet) 9%,var(--panel-2)))}

/* reduced motion: kill the party, keep the colors */
@media(prefers-reduced-motion:reduce){
  .aurora,.aurora .blob,.hero h1 .accent,.grad-border::before,.ticker-track,
  .btn-primary,.btn-primary::after,.hero-status::after,.tl-item.done .tl-dot i,
  .consensus-decision.engage{animation:none}
  .hero-particles{display:none}
}