/* ════════════════════════════════════════════════════════════════
   VibeSwitcher — Website
   Tokens lifted directly from DarkTheme.xaml / ProfileCard_Reference
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg:        #0d0d12;
  --bg-2:      #09090e;
  --surface:   #16161e;
  --surface-2: #1e1e28;
  --surface-3: #242432;
  --nav-bg:    #10101a;
  --inset:     #101018;
  --puck:      #13131e;

  /* Borders */
  --border:    #2c2c42;
  --border-h:  #484860;
  --hairline:  rgba(255,255,255,.05);

  /* Text */
  --text:      #e4e4ef;
  --text-dim:  #a0a0c0;
  --text-mut:  #7878a0;
  --text-faint:#52526a;

  /* Accent — orange */
  --orange:        #f5820a;
  --orange-hover:  #e07409;
  --orange-press:  #c96500;
  --orange-dim:    rgba(245,130,10,.12);
  --orange-border: rgba(245,130,10,.28);
  --orange-glow:   rgba(245,130,10,.07);

  /* Status */
  --green: #2dca72;
  --blue:  #4aa8ff;
  --mint:  #30d278;
  --purple:#9b69ff;
  --red:   #e05555;
  --gold:  #ffc340;

  /* Radii */
  --r-card: 14px;
  --r-btn:  8px;

  /* Type */
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-snap: cubic-bezier(.34,1.4,.64,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Page grain / dot field background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.013) 1px, transparent 0);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(245,130,10,.28); color: #fff; }

/* Custom cursor active → hide native cursor on pointer devices */
body.vs-cursor-on,
body.vs-cursor-on * { cursor: none !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1e1e30; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #363650; }

/* ════════════════════════════════════════════════════════════════
   SHARED LOGO (V + 5 bars)
   ════════════════════════════════════════════════════════════════ */
.vs-mark { display: block; }
.vs-mark .v-chevron { transform-box: fill-box; transform-origin: 50% 50%; }
.vs-mark .eq { transform-box: fill-box; transform-origin: 50% 100%; }

/* Idle breathing logo (nav) */
.vs-mark.is-live .v-chevron { animation: vBreathe 1.6s ease-in-out infinite; }
.vs-mark.is-live .eq-1 { animation: navEq1 1.2s ease-in-out infinite -.22s; }
.vs-mark.is-live .eq-2 { animation: navEq2 .98s ease-in-out infinite -.14s; }
.vs-mark.is-live .eq-3 { animation: navEq3 .86s ease-in-out infinite; }
.vs-mark.is-live .eq-4 { animation: navEq4 1.06s ease-in-out infinite -.30s; }
.vs-mark.is-live .eq-5 { animation: navEq5 1.12s ease-in-out infinite -.40s; }

@keyframes vBreathe { 0%,100%{transform:translateY(0);} 30%{transform:translateY(-5px);} 70%{transform:translateY(2.5px);} }
@keyframes navEq1 { 0%,100%{transform:scaleY(1);} 40%{transform:scaleY(1.8);} 72%{transform:scaleY(.55);} }
@keyframes navEq2 { 0%,100%{transform:scaleY(1);} 35%{transform:scaleY(1.55);} 68%{transform:scaleY(.55);} }
@keyframes navEq3 { 0%,100%{transform:scaleY(1);} 30%{transform:scaleY(1.42);} 65%{transform:scaleY(.65);} }
@keyframes navEq4 { 0%,100%{transform:scaleY(1);} 38%{transform:scaleY(1.55);} 72%{transform:scaleY(.6);} }
@keyframes navEq5 { 0%,100%{transform:scaleY(1);} 45%{transform:scaleY(1.8);} 72%{transform:scaleY(.55);} }

/* ════════════════════════════════════════════════════════════════
   INTRO OVERLAY
   ════════════════════════════════════════════════════════════════ */
#intro {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#intro.is-gone { display: none; }

.intro-stage { position: relative; display: flex; flex-direction: column; align-items: center; }

.intro-puck {
  width: 116px; height: 116px; border-radius: 26px;
  background: var(--puck);
  border: 1px solid var(--orange-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 48px rgba(0,0,0,.6), 0 0 64px rgba(245,130,10,.06);
  opacity: 0;
}
.intro-puck .vs-mark { width: 88px; height: 88px; }

.intro-text { margin-top: 26px; text-align: center; opacity: 0; }
.intro-text .wordmark {
  font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
}
.intro-text .wordmark span { color: var(--orange); }
.intro-text .tag { margin-top: 8px; font-size: 14px; color: var(--text-mut); }

/* Intro press choreography (applied via .is-playing) */
.intro-puck.fade-in { animation: puckIn .34s var(--ease) forwards; }
@keyframes puckIn { from { opacity:0; transform: scale(.9); } to { opacity:1; transform: scale(1); } }

.intro-puck.press .v-chevron { animation: vPress 1.45s linear .08s both; }
@keyframes vPress {
  0%{transform:translateY(0);} 26%{transform:translateY(0);}
  39%{transform:translateY(-16px);} 52%{transform:translateY(11px);}
  64%{transform:translateY(-5px);} 76%{transform:translateY(1.5px);}
  88%{transform:translateY(-.5px);} 100%{transform:translateY(0);}
}
.intro-puck.press .eq-3 { animation: eqPressC 1.2s linear .48s both; }
.intro-puck.press .eq-2,
.intro-puck.press .eq-4 { animation: eqPressI 1.2s linear .48s both; }
.intro-puck.press .eq-1,
.intro-puck.press .eq-5 { animation: eqPressO 1.2s linear .48s both; }
@keyframes eqPressC {
  0%{transform:scaleY(1);} 39%{transform:scaleY(1);} 47%{transform:scaleY(.28);}
  61%{transform:scaleY(2.6);} 73%{transform:scaleY(.62);} 85%{transform:scaleY(1.6);}
  93%{transform:scaleY(.88);} 100%{transform:scaleY(1);}
}
@keyframes eqPressI {
  0%{transform:scaleY(1);} 43%{transform:scaleY(1);} 51%{transform:scaleY(.38);}
  65%{transform:scaleY(2.1);} 77%{transform:scaleY(.7);} 88%{transform:scaleY(1.42);}
  95%{transform:scaleY(.92);} 100%{transform:scaleY(1);}
}
@keyframes eqPressO {
  0%{transform:scaleY(1);} 47%{transform:scaleY(1);} 55%{transform:scaleY(.5);}
  68%{transform:scaleY(1.7);} 80%{transform:scaleY(.8);} 90%{transform:scaleY(1.25);}
  96%{transform:scaleY(.96);} 100%{transform:scaleY(1);}
}
.intro-text.show { animation: introTextIn .4s var(--ease) forwards; }
@keyframes introTextIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

.intro-skip {
  position: fixed; bottom: 26px; right: 28px;
  font-size: 12px; color: var(--text-faint); letter-spacing: .04em;
  background: none; border: 1px solid var(--border); border-radius: 20px;
  padding: 7px 15px; cursor: pointer; transition: all .15s; opacity: 0;
  animation: skipIn .4s ease 1s forwards;
}
.intro-skip:hover { color: var(--text-dim); border-color: var(--border-h); }
@keyframes skipIn { to { opacity: 1; } }

/* Flying bar particles during assemble */
.fly-bar {
  position: fixed; z-index: 2100; border-radius: 3px;
  background: var(--orange); pointer-events: none;
  transform-origin: 50% 100%;
}

/* ════════════════════════════════════════════════════════════════
   NAV — persistent equalizer
   ════════════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 64px;
  background: rgba(16,16,26,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid #1c1c2c;
  display: flex; align-items: center;
  padding: 0 26px; gap: 22px;
  opacity: 0;
}
#nav.show { opacity: 1; transition: opacity .5s var(--ease); }

.nav-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; flex-shrink: 0; }
.nav-logo .puck {
  width: 38px; height: 38px; border-radius: 11px; background: var(--puck);
  border: 1px solid var(--orange-border); display: flex; align-items: center; justify-content: center;
}
.nav-logo .puck .vs-mark { width: 28px; height: 28px; }
.nav-logo .label { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.nav-logo .label span { color: var(--orange); }

.nav-items { display: flex; align-items: stretch; gap: 4px; margin-left: auto; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 0 14px; height: 64px; background: none; border: none; cursor: pointer;
  color: var(--text-mut); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: color .2s, opacity .4s var(--ease), transform .4s var(--ease);
}
.nav-logo { transition: opacity .4s var(--ease); }
.nav-item:hover { color: var(--text-dim); }
.nav-item.active { color: var(--text); }
/* per-item equalizer bar */
.nav-item .bar {
  width: 4px; height: 9px; border-radius: 2px;
  background: var(--text-faint); flex-shrink: 0;
  transition: height .35s var(--ease-snap), background .3s;
}
.nav-item:hover .bar { background: var(--text-mut); }
.nav-item.active .bar {
  height: 22px; background: var(--orange);
  box-shadow: 0 0 12px rgba(245,130,10,.5);
  animation: activeBar 1.1s ease-in-out infinite;
}
@keyframes activeBar { 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(.64);} }
.nav-item.active .bar { animation-duration: 1.6s !important; }
.nav-item .bar { transform-origin: 50% 100%; }

.nav-cta {
  margin-left: 8px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: var(--r-btn);
  background: var(--orange); color: #0d0d12; font-weight: 600; font-size: 13.5px;
  cursor: pointer; border: none; transition: background .15s, transform .12s; flex-shrink: 0;
}
.nav-cta:hover { background: var(--orange-hover); }

.nav-burger { display: none; }

/* ════════════════════════════════════════════════════════════════
   V CURSOR
   ════════════════════════════════════════════════════════════════ */
#vcursor {
  position: fixed; top: 0; left: 0; z-index: 3000; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  opacity: 0; will-change: transform;
}
#vcursor.show { opacity: 1; }
#vcursor svg { width: 100%; height: 100%; display: block; overflow: visible; }
#vcursor .vc-v { transition: stroke .2s; transform-box: fill-box; transform-origin: 50% 100%; }
/* Click = the V presses down (mirrors the splash V press), not a shrink */
#vcursor.clicking .vc-v { animation: vClickPress .36s cubic-bezier(.3,0,.25,1); }
@keyframes vClickPress {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(7px); }
  58%  { transform: translateY(-2.5px); }
  80%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

.blip {
  position: fixed; z-index: 2900; pointer-events: none;
  border: 2px solid var(--orange); border-radius: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  animation: blip .5s var(--ease) forwards;
}
@keyframes blip { from{transform:scale(.4);opacity:.9;} to{transform:scale(3.6);opacity:0;} }

/* ════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════ */
main { position: relative; z-index: 1; counter-reset: sec; }
.section { position: relative; padding: 72px 26px; counter-increment: sec; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--orange-border); }

/* Brand name always orange */
.ob { color: var(--orange); }
.nav-logo .label, .footer-logo b, .aw-nav .logo b, .intro-text .wordmark { color: var(--orange); }

h2.section-title {
  font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05; text-wrap: balance; margin-bottom: 18px;
}
.section-lead {
  font-size: clamp(16px, 1.7vw, 19px); color: var(--text-dim); max-width: 600px;
  line-height: 1.65; text-wrap: pretty;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--r-btn); font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: all .16s; white-space: nowrap;
}
.btn-primary { background: var(--orange); color: #0d0d12; }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ghost { background: rgba(255,255,255,.03); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--border-h); }
.btn svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .vs-mark.is-live * { animation: none !important; }
}