/* ===== Neon dashboard — motion & polish layer ===== */
.scroll-progress{position:fixed;z-index:50;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--silver),var(--accent));box-shadow:0 0 14px rgba(255, 255, 255, 0.33)}

/* ambient + brand motion */
.ambient-a{animation:drift 14s ease-in-out infinite alternate}
.ambient-b{animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{translate:-60px 70px;scale:1.2}}
.title-glow{background:linear-gradient(100deg,var(--accent),#fff,var(--silver),var(--accent));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:-250% 0}}
.live-dot{animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255, 255, 255, 0.33)}100%{box-shadow:0 0 0 9px rgba(255, 255, 255, 0.0)}}

/* hero stage */
.stage-record{animation:spin 9s linear infinite}
.orbit-one{animation:spin 16s linear infinite}
.orbit-two{animation:spin 24s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
.stage-star,.mod-spark,.chat-spark,.invite-spark{animation:twinkle 2.6s ease-in-out infinite}
.stage-star-two{animation-delay:1.1s}
@keyframes twinkle{50%{opacity:.35;scale:.7}}
.now-playing{animation:floaty 5s ease-in-out infinite}
.mini-disc{animation:spin 6s linear infinite}
@keyframes floaty{50%{translate:0 -7px}}
.visual-stage{transition:transform .25s ease-out;transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg))}


.reveal{opacity:0;translate:0 26px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;translate:0 0}

/* cards: cursor spotlight */
.feature-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255, 255, 255, 0.061),transparent 70%)}
.feature-card:hover::after{opacity:1}
.feature-card{transition:border-color .2s,transform .25s ease-out}

/* stats strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:6px 0 46px}
.stat{padding:16px 17px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(148deg,rgba(24, 24, 24, .9),rgba(16, 16, 16, .95));transition:border-color .2s,translate .2s}
.stat:hover{border-color:rgba(255, 255, 255, 0.165);translate:0 -3px}
.stat strong{display:block;font:700 28px "Space Grotesk",sans-serif;letter-spacing:-1px;color:var(--accent)}
.stat span{color:var(--muted);font-size:10px;letter-spacing:.9px;font-weight:600;text-transform:uppercase}

/* buttons */
.button-accent,.top-invite{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.button-accent:hover,.top-invite:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255, 255, 255, 0.121)}
.button-accent::before{content:"";position:absolute;inset:0;translate:-120% 0;background:linear-gradient(100deg,transparent,rgba(255, 255, 255, .45),transparent);transition:translate .6s}
.button-accent:hover::before{translate:120% 0}
.start-steps>div{transition:translate .2s,border-color .2s}.start-steps>div:hover{translate:6px 0;border-color:rgba(255, 255, 255, 0.165)}

@media(max-width:700px){.stats-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;translate:none}
}

/* palette: black / white / dark red */
:root{--silver:#e6e6e6;--accent-deep:#8a0b15}
.ambient-a{opacity:.2}.ambient-b{opacity:.16}
.title-glow{background-image:linear-gradient(100deg,var(--accent),#fff,var(--accent-deep),var(--accent))}
.scroll-progress{background:linear-gradient(90deg,var(--accent-deep),var(--accent),#fff)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 120%,rgba(255, 255, 255, 0.099),transparent 60%)}

/* hero stage: mouse parallax layers */
.visual-stage{--px:0;--py:0;--cx:0px;--cy:0px;transition:none;cursor:crosshair}
.stage-grid{translate:calc(var(--px)*-10px) calc(var(--py)*-10px);scale:1.08}
.stage-glow{translate:var(--cx) var(--cy)}
.stage-record{translate:calc(var(--px)*-14px) calc(var(--py)*-14px);cursor:pointer}
.stage-record:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.orbit-one{translate:calc(var(--px)*22px) calc(var(--py)*22px)}
.orbit-two{translate:calc(var(--px)*-30px) calc(var(--py)*-30px)}
.stage-star-one{translate:calc(var(--px)*34px) calc(var(--py)*34px)}
.stage-star-two{translate:calc(var(--px)*-26px) calc(var(--py)*-26px)}
.stage-caption{translate:calc(var(--px)*8px) calc(var(--py)*8px)}
.now-playing{transform:translate(calc(var(--px)*-18px),calc(var(--py)*-18px))}

/* magnetic buttons */
.button-accent{transition:transform .2s,box-shadow .2s,translate .15s}

/* ===== hero orb (no music): follows the cursor everywhere ===== */
.visual-stage{--hx:32%;--hy:28%}
.stage-record,.orbit-one,.orbit-two{animation:none}
.stage-record{background:radial-gradient(circle at var(--hx) var(--hy),#fff 0,#8b0a16 25%,#2e2e2e 56%,#161616 76%)}
.stage-record>span{translate:calc(var(--px)*7px) calc(var(--py)*7px)}
.stage-record::before,.stage-record::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.303);animation:ring 3.4s ease-out infinite}
.stage-record::after{animation-delay:1.7s}
@keyframes ring{to{scale:1.75;opacity:0}}
.orbit-one{rotate:calc(var(--ang,0)*1deg)}
.orbit-two{rotate:calc(var(--ang,0)*-.6deg)}
.stage-sat{position:absolute;z-index:2;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px 4px rgba(255, 255, 255, 0.358),0 0 0 4px rgba(255, 255, 255, 0.088);translate:var(--sx,0px) var(--sy,0px)}
.status-icon{display:grid;width:26px;height:26px;place-items:center;border:1px solid rgba(255, 255, 255, 0.22);border-radius:7px;color:var(--accent);font-size:13px;animation:spin 7s linear infinite}

/* ===== legal pages ===== */
.legal-hero{--px:0;--py:0;--ang:0}
.legal-hero-mark{rotate:calc(var(--ang)*1deg)}
.legal-hero::after{translate:calc(var(--px)*-18px) calc(var(--py)*-18px)}
.policy-toc a{position:relative;transition:color .18s,background .18s,padding .18s}
.policy-toc a.active{padding-left:14px;background:rgba(255, 255, 255, 0.066);color:#fff;box-shadow:inset 2px 0 var(--accent)}
.policy-section{transition:background .25s}
.policy-section:hover{background:rgba(255,255,255,.02)}
.policy-section:hover .policy-number{color:var(--accent)}

/* back to top */
.to-top{position:fixed;right:22px;bottom:22px;z-index:20;display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(255, 255, 255, 0.275);border-radius:11px;background:rgba(10,10,10,.85);color:#fff;font-size:16px;cursor:pointer;opacity:0;pointer-events:none;translate:0 10px;transition:opacity .25s,translate .25s,background .2s}
.to-top.show{opacity:1;pointer-events:auto;translate:0 0}
.to-top:hover{background:var(--accent-deep)}
@media(prefers-reduced-motion:reduce){.stage-sat{display:none}}

/* page load */
body{animation:pageIn .6s ease-out}
@keyframes pageIn{from{opacity:0}}