/* ═══════════════════════════════════════════════════════════
   Tesla Core Asset — Homepage
   Emerald design system: glass, glow, spotlight, orbs
   ═══════════════════════════════════════════════════════════ */

:root {
  --acc:   16 185 129;   /* emerald 500 */
  --acc-2: 52 211 153;   /* emerald 400 */
  --acc-3: 45 212 191;   /* teal 400 */
  --neg:   244 63 94;    /* rose 500 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; cursor: none; background: #03070a; overflow-x: hidden; }

::selection { background: rgba(var(--acc), .35); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #03070a; }
::-webkit-scrollbar-thumb { background: rgba(var(--acc), .55); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--acc), .8); }

/* Background canvas */
#cryptoBg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── Emerald ambient orbs ── */
.orb {
  position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 1;
  opacity: .5; animation: orbFloat 16s ease-in-out infinite alternate;
}
.orb-1 { width: 520px; height: 520px; background: rgba(var(--acc), .13); top: -180px; left: -140px; }
.orb-2 { width: 460px; height: 460px; background: rgba(var(--acc-3), .09); top: 34%; right: -190px; animation-delay: -6s; }
.orb-3 { width: 420px; height: 420px; background: rgba(var(--acc), .08); bottom: -160px; left: 30%; animation-delay: -11s; }
@keyframes orbFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, -34px) scale(1.08); }
}

/* ── Custom cursor ── */
#cursor { position: fixed; width: 10px; height: 10px; background: rgb(var(--acc-2)); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width .2s, height .2s; mix-blend-mode: screen; box-shadow: 0 0 12px rgba(var(--acc), .8); }
#cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(var(--acc), .45); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width .15s, height .15s, opacity .15s; }
.link-hov #cursor { width: 22px; height: 22px; }
.link-hov #cursor-ring { width: 52px; height: 52px; opacity: 0; }

/* ── Glass nav ── */
#mainnav { background: transparent; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, backdrop-filter .35s; }
#mainnav.scrolled { background: rgba(3, 10, 9, .72); border-bottom-color: rgba(var(--acc), .14); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }

/* ── Glass card base ── */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-strong {
  background: linear-gradient(165deg, rgba(16,185,129,.08), rgba(255,255,255,.015) 55%);
  border: 1px solid rgba(var(--acc), .22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Gradient border card (conic ring) ── */
.ring-card { position: relative; border-radius: 24px; }
.ring-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--ra, 0deg),
    rgba(var(--acc), 0) 0deg, rgba(var(--acc), .85) 60deg,
    rgba(var(--acc-3), .5) 110deg, rgba(var(--acc), 0) 170deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.ring-card:hover::before { opacity: 1; animation: spinBorder 3.2s linear infinite; }
@property --ra { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --ra: 360deg; } }

/* ── Spotlight cards (follow the cursor) ── */
.spot { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--acc), .12), transparent 42%);
  opacity: 0; transition: opacity .4s ease;
}
.spot:hover { transform: translateY(-5px); border-color: rgba(var(--acc), .4) !important; box-shadow: 0 22px 60px -22px rgba(var(--acc), .35), 0 8px 28px -12px rgba(0,0,0,.6); }
.spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ── Buttons ── */
.btn-glow { position: relative; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px rgba(var(--acc), .55); }
.btn-glow:active { transform: translateY(0); }

/* ── Hero ── */
.hero-glow {
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  width: min(900px, 92vw); height: 480px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--acc), .16), rgba(var(--acc-3), .05) 55%, transparent 72%);
  filter: blur(60px); pointer-events: none;
}
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gradient text */
.grad-text {
  background: linear-gradient(100deg, rgb(var(--acc-2)), rgb(var(--acc-3)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-warm { background: linear-gradient(100deg, #fbbf24, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Stat chip */
.stat-chip { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s; }
.stat-chip:hover { transform: translateY(-4px); border-color: rgba(var(--acc), .4); background: rgba(var(--acc), .06); }

/* Ticker */
.ticker-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { animation: tickerScroll 34s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Nav scrolled state — toggled by JS */
.mkttab { color: rgb(93 122 153); border-bottom: 2px solid transparent; transition: color .25s; }
.mkttab:hover { color: rgb(200 235 220); }
.mkttab.on { color: rgb(210 245 230); border-bottom-color: rgb(var(--acc)); }

/* Scroll-reveal */
.rv  { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rvl { opacity: 0; transform: translateX(-34px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rvr { opacity: 0; transform: translateX(34px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.rv.on, .rvl.on, .rvr.on { opacity: 1; transform: translate(0); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; } .d5 { transition-delay: .4s; } .d6 { transition-delay: .48s; }
.d7 { transition-delay: .56s; } .d8 { transition-delay: .64s; }

/* Floating preview mock */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.floaty { animation: floaty 7s ease-in-out infinite; }
.floaty-2 { animation: floaty 8.5s ease-in-out infinite; animation-delay: -3s; }

/* Marquee pause fallback for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .orb, .floaty, .floaty-2 { animation: none !important; }
  .rv, .rvl, .rvr { transition: none; opacity: 1; transform: none; }
}

/* Hide custom cursor on touch */
@media (max-width: 640px) {
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none; }
}