*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#04040a;--bg1:#0a0a14;
  --cyan:#00d4ff;--magenta:#ff2d6b;--purple:#a78bfa;--green:#00e896;--amber:#ffb340;
  --t1:#eef0ff;--t2:#7d83a8;--t3:#3a3f60;
  --mono:'JetBrains Mono',Consolas,Menlo,monospace;
  --display:'Orbitron','Segoe UI',sans-serif;
}
html,body{height:100%;background:#000;color:var(--t1);font-family:var(--mono);overflow:hidden}

/* ── 3D background canvas ───────────────────────────────────────── */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}

/* ── Glitch cursor overlay ──────────────────────────────────────────
   Sits above everything (z-index:9999) but never captures clicks
   (pointer-events:none). The native system cursor stays visible
   underneath, so users can always see where they're clicking. */
.gcursor{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:9999;
  transform:translate3d(-9999px,-9999px,0);will-change:transform}
.gcursor .g-c,.gcursor .g-m{position:absolute;left:-12px;top:-12px;width:24px;height:24px;
  border:1px solid;border-radius:50%;mix-blend-mode:screen;
  animation:gcSplit 1.6s infinite steps(1)}
.gcursor .g-c{border-color:var(--cyan);box-shadow:0 0 8px var(--cyan),inset 0 0 6px rgba(0,212,255,.4);
  animation-name:gcSplitA}
.gcursor .g-m{border-color:var(--magenta);box-shadow:0 0 8px var(--magenta),inset 0 0 6px rgba(255,45,107,.4);
  animation-name:gcSplitB}
.gcursor.hover .g-c{width:42px;height:42px;left:-21px;top:-21px;border-width:1.5px}
.gcursor.hover .g-m{width:42px;height:42px;left:-21px;top:-21px;border-width:1.5px}
@keyframes gcSplitA{
  0%,100%{transform:none}
  20%{transform:translate(-3px,1px) scale(1.05)}
  22%{transform:translate(2px,-1px) scale(.95)}
  24%{transform:none}
  60%{transform:translate(-1px,2px)}
  62%{transform:none}
}
@keyframes gcSplitB{
  0%,100%{transform:none}
  20%{transform:translate(3px,-1px) scale(.95)}
  22%{transform:translate(-2px,1px) scale(1.05)}
  24%{transform:none}
  60%{transform:translate(1px,-2px)}
  62%{transform:none}
}

/* ── Scanlines overlay (cyberpunk CRT effect) ───────────────────── */
.scanlines{position:fixed;inset:0;z-index:8;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply}
.vignette{position:fixed;inset:0;z-index:9;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.65) 100%)}

/* ── Noise grain ────────────────────────────────────────────────── */
.noise{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>")}

/* ── HUD top/bottom bars ────────────────────────────────────────── */
.hud-bar{position:fixed;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:10px 22px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--t2);
  font-family:var(--mono);font-weight:600;pointer-events:none}
.hud-top{top:0;border-bottom:1px solid rgba(0,212,255,.18);background:linear-gradient(180deg,rgba(0,0,0,.7),transparent)}
.hud-bot{bottom:0;border-top:1px solid rgba(0,212,255,.18);background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
.hud-bar > div{display:flex;gap:18px;align-items:center}
.hud-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:dotPulse 1.6s ease-in-out infinite}
.hud-dot.warn{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.hud-dot.crit{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

/* ── Corner brackets (HUD frame) ─────────────────────────────────── */
.brackets{position:fixed;inset:30px;z-index:6;pointer-events:none}
.brackets::before,.brackets::after,
.brackets > span::before,.brackets > span::after{content:'';position:absolute;width:34px;height:34px;
  border-color:var(--cyan);border-style:solid;border-width:0;
  filter:drop-shadow(0 0 4px rgba(0,212,255,.6))}
.brackets::before{top:0;left:0;border-top-width:2px;border-left-width:2px}
.brackets::after{top:0;right:0;border-top-width:2px;border-right-width:2px}
.brackets > span::before{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.brackets > span::after{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}

/* ── Center stage ─────────────────────────────────────────────────── */
.stage{position:relative;z-index:5;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 20px}

/* TEMUS logo with chromatic-aberration glitch */
.brand-block{margin-bottom:16px;position:relative}
.brand-eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--cyan);letter-spacing:8px;
  text-transform:uppercase;margin-bottom:14px;opacity:.85}
.brand-eyebrow .square{display:inline-block;width:8px;height:8px;background:var(--cyan);margin-right:14px;
  box-shadow:0 0 8px var(--cyan);animation:dotPulse 1.4s ease-in-out infinite}
.glitch{position:relative;font-family:var(--display);font-size:clamp(48px,9vw,108px);font-weight:900;
  letter-spacing:6px;color:#fff;line-height:.95;text-shadow:0 0 18px rgba(255,255,255,.18);
  text-transform:uppercase;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none}
.glitch::before{color:var(--cyan);text-shadow:none;mix-blend-mode:screen;
  animation:glitchA 3.4s infinite steps(1)}
.glitch::after{color:var(--magenta);text-shadow:none;mix-blend-mode:screen;
  animation:glitchB 3.4s infinite steps(1)}
@keyframes glitchA{
  0%,100%{transform:none;clip-path:inset(0 0 0 0)}
  4%{transform:translate(-3px,1px);clip-path:inset(0 0 80% 0)}
  8%{transform:translate(2px,-1px);clip-path:inset(60% 0 10% 0)}
  12%{transform:none;clip-path:inset(0 0 0 0)}
  62%{transform:translate(-2px,2px);clip-path:inset(30% 0 50% 0)}
  68%{transform:none;clip-path:inset(0 0 0 0)}
}
@keyframes glitchB{
  0%,100%{transform:none;clip-path:inset(0 0 0 0)}
  4%{transform:translate(3px,-1px);clip-path:inset(40% 0 40% 0)}
  10%{transform:translate(-2px,1px);clip-path:inset(0 0 70% 0)}
  14%{transform:none;clip-path:inset(0 0 0 0)}
  60%{transform:translate(2px,-2px);clip-path:inset(70% 0 0 0)}
  66%{transform:none;clip-path:inset(0 0 0 0)}
}
.brand-sub{font-family:var(--mono);font-size:13px;color:var(--t2);letter-spacing:4px;
  text-transform:uppercase;margin-top:8px;font-weight:600}
.brand-sub .accent{color:var(--magenta);text-shadow:0 0 6px rgba(255,45,107,.6)}

/* Terminal boot strip */
.terminal{margin-top:24px;height:22px;font-family:var(--mono);font-size:12px;color:var(--green);
  letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:10px;text-shadow:0 0 4px var(--green)}
.terminal::before{content:'>';color:var(--cyan);text-shadow:0 0 4px var(--cyan)}
.terminal .blink{display:inline-block;width:10px;height:14px;background:var(--green);box-shadow:0 0 6px var(--green);
  animation:cursorBlink .9s step-end infinite}
@keyframes cursorBlink{50%{opacity:0}}

/* SSO action button — neon glitch pill */
.cta-wrap{margin-top:48px;position:relative;display:inline-block}
.cta{position:relative;display:inline-flex;align-items:center;gap:14px;padding:18px 42px;
  font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:4px;text-transform:uppercase;
  color:#0a0014;background:linear-gradient(135deg,#22e3ff 0%,#00d4ff 50%,#7c3aed 100%);
  border:none;border-radius:0;cursor:pointer;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  box-shadow:0 0 24px rgba(0,212,255,.55),0 0 60px rgba(124,58,237,.35);
  transition:transform .15s,box-shadow .25s;
  animation:ctaGlitch 5.2s infinite steps(1)}
@keyframes ctaGlitch{
  0%,90%,100%{transform:none}
  91%{transform:translate(-2px,1px)}
  92%{transform:translate(3px,-1px)}
  93%{transform:translate(-1px,-1px)}
  94%{transform:translate(2px,2px)}
  95%{transform:none}
}
/* RGB-split chromatic aberration ghosts on the button text */
.cta::before,.cta::after{content:attr(data-glitch);position:absolute;left:0;top:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:18px 42px;letter-spacing:4px;font-weight:800;text-transform:uppercase;
  pointer-events:none;mix-blend-mode:screen;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.cta::before{color:#00d4ff;animation:ctaSplitA 5.2s infinite steps(1)}
.cta::after {color:#ff2d6b;animation:ctaSplitB 5.2s infinite steps(1)}
@keyframes ctaSplitA{
  0%,89%,96%,100%{opacity:0;transform:none}
  90%{opacity:.85;transform:translate(-3px,1px)}
  92%{opacity:.7;transform:translate(2px,-1px)}
  94%{opacity:.85;transform:translate(-2px,2px)}
}
@keyframes ctaSplitB{
  0%,89%,96%,100%{opacity:0;transform:none}
  90%{opacity:.85;transform:translate(3px,-1px)}
  92%{opacity:.7;transform:translate(-2px,1px)}
  94%{opacity:.85;transform:translate(2px,-2px)}
}
.cta:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 36px rgba(0,212,255,.85),0 0 80px rgba(124,58,237,.55),inset 0 0 24px rgba(255,255,255,.25)}
.cta:active{transform:translateY(0) scale(.99)}
.cta svg{width:18px;height:18px;fill:currentColor;flex-shrink:0;position:relative;z-index:2}
.cta > span{position:relative;z-index:2}
.cta-frame{position:absolute;inset:-8px;border:1px solid rgba(0,212,255,.4);
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);pointer-events:none;
  animation:framePulse 2.4s ease-in-out infinite}
@keyframes framePulse{0%,100%{opacity:.4}50%{opacity:.95}}

/* Status banner (auth state) */
.status-banner{position:fixed;left:50%;top:30px;transform:translateX(-50%);z-index:11;
  padding:10px 22px;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  border:1px solid;display:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.status-banner.show{display:block;animation:bannerIn .3s ease-out}
.status-banner.info{color:var(--cyan);border-color:var(--cyan);background:rgba(0,212,255,.08);box-shadow:0 0 16px rgba(0,212,255,.3)}
.status-banner.err {color:var(--magenta);border-color:var(--magenta);background:rgba(255,45,107,.08);box-shadow:0 0 16px rgba(255,45,107,.3)}
.status-banner.ok  {color:var(--green);border-color:var(--green);background:rgba(0,232,150,.08);box-shadow:0 0 16px rgba(0,232,150,.3)}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}

/* Random RGB jitter on whole stage every now and then */
.stage{animation:globalGlitch 7s infinite}
@keyframes globalGlitch{
  0%,99%,100%{filter:none}
  98.5%{filter:hue-rotate(15deg) contrast(1.4)}
  99.2%{filter:hue-rotate(-20deg) saturate(1.5)}
}

/* Boot reveal */
.stage > *{opacity:0;animation:fadeUp .8s forwards}
.stage > *:nth-child(1){animation-delay:.2s}
.stage > *:nth-child(2){animation-delay:.45s}
.stage > *:nth-child(3){animation-delay:.7s}
.stage > *:nth-child(4){animation-delay:.95s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Respect users who opt out of motion (a11y + anti-seizure safeguard) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .stage{animation:none}
  .glitch::before,.glitch::after{display:none}
  .cta::before,.cta::after{display:none}
  .gcursor{display:none}
}