/* PixelHigh v2 — cleaned and fixed */

/* ========== Tokens ========== */
:root{
  --bg:#0b0c10;
  --fg:#ffffff;
  --muted:rgba(255,255,255,0.7);

  --topbar-h:56px;
  --ticker-h:64px;
  --ticker-bg: rgba(10,10,12,0.5);
  --ticker-size:22px;
  --ticker-gap:6rem;

  --blob1:#7c3aed; --blob2:#06b6d4; --blob3:#10b981; --blob4:#ef4444; --blob5:#f59e0b;
}

/* ========== Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100%;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);color:var(--fg);
  overflow:hidden;
}
.tagline a {
  color: var(--muted);
  text-decoration: underline;
}
.tagline a:hover {
  color: var(--fg);
}
/* ========== Background Stage ========== */
#bg{
  position:fixed;inset:0;overflow:hidden;
  z-index:0;
  filter:hue-rotate(0deg);
  animation:bgHue 90s linear infinite;
  pointer-events:none;
}
.blob{
  position:absolute;width:65vmax;height:65vmax;border-radius:90%;
  filter: blur(42px) saturate(120%);
  opacity:.33;mix-blend-mode:screen;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 66%),
    radial-gradient(circle at center,currentColor 0%, transparent 62%);
  will-change: transform, filter;
}
.b1{color:var(--blob1);left:-12vmax;top:-12vmax;animation:float1 50s ease-in-out infinite alternate}
.b2{color:var(--blob2);right:-18vmax;top:6vmax;animation:float2 60s ease-in-out infinite alternate}
.b3{color:var(--blob3);left:20vmax;bottom:-24vmax;animation:float3 70s ease-in-out infinite alternate}
.b4{color:var(--blob4);right:-22vmax;bottom:-20vmax;animation:float4 55s ease-in-out infinite alternate}
.b5{color:var(--blob5);left:-20vmax;bottom:10vmax;animation:float5 65s ease-in-out infinite alternate}

.grain{
  position:absolute;inset:-200% -200%;
  background-image:url('assets/grain.png');opacity:.05;
  animation:grainShift 12s steps(10) infinite;
  pointer-events:none;
}

/* ========== Top bar ========== */
.topbar{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;min-height:var(--topbar-h);
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0));
  backdrop-filter: blur(4px);
  z-index:1000;
  pointer-events:auto;
}
.brand{text-decoration:none;color:var(--fg);font-weight:800;letter-spacing:.08em;font-size:20px}
.nav{display:flex;gap:18px}
.nav-link{
  text-decoration:none;color:var(--muted);font-weight:600;font-size:16px;
  transition:color .2s ease;
}
.nav-link:hover,.nav-link:focus{color:var(--fg)}

/* ========== Hero ========== */
.hero{
  position: relative;
  height: 90vh;
  display: flex;align-items: center;justify-content: center;
  text-align: center;padding: 0 4vw;
  z-index: 100; /* below topbar, above bg */
}
.hero-inner{ display:grid; gap:12px; align-items:center; justify-items:center; }
.hero-word{
  font-size:clamp(52px, 16vw, 200px);line-height:.9;margin:0;text-transform:uppercase;
  letter-spacing:.06em;text-shadow:0 2px 16px rgba(0,0,0,.35)
}
.tagline{
  margin:0;font-size:clamp(14px,2.4vw,24px);color:var(--muted);
  font-weight:400;font-style: italic
}

/* ========== Ticker ========== */
.ticker-wrap{
  position:fixed;left:0;right:0;bottom:0;background:var(--ticker-bg);
  border-top:1px solid rgba(255,255,255,.08);height:var(--ticker-h);
  display:flex;align-items:center;overflow:hidden;z-index:900;
}
.ticker{position:relative;width:100%;height:100%;overflow:hidden}
.ticker-track{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:flex;gap:var(--ticker-gap);align-items:center;white-space:nowrap;
  will-change:transform;animation:scroll-rtl 35s linear infinite; /* left -> right */
  font-weight:800;text-transform:uppercase;font-size:var(--ticker-size);letter-spacing:.08em;
  color: rgba(255, 255, 255, 0.6);
}
.ticker-item{padding:0 .25rem}

/* ========== Content pages ========== */
.page{
  min-height:100vh;padding:96px 20px 72px;max-width:800px;margin:0 auto;line-height:1.7;position:relative;z-index:100;
}
.page h1{margin:0 0 12px;font-size:40px}
.page p,.page li{color:var(--muted)}
.page a{color:#c4b5fd}

/* ========== Keyframes ========== */
/* Marquee: move left -> right */
@keyframes scroll-rtl{
  from{ transform: translate3d(-50%,-50%,0); }
  to  { transform: translate3d(0,-50%,0); }
}

@keyframes bgHue{from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)}}
@keyframes float1{0%{transform:translate3d(0,0,0) scale(1) rotate(0)}100%{transform:translate3d(16vmax,8vmax,0) scale(1.18) rotate(8deg)}}
@keyframes float2{0%{transform:translate3d(0,0,0) scale(1.05) rotate(0)}100%{transform:translate3d(-14vmax,10vmax,0) scale(.95) rotate(-6deg)}}
@keyframes float3{0%{transform:translate3d(0,0,0) scale(1) rotate(0)}100%{transform:translate3d(10vmax,-14vmax,0) scale(1.12) rotate(10deg)}}
@keyframes float4{0%{transform:translate3d(0,0,0) scale(1) rotate(0)}100%{transform:translate3d(-12vmax,-10vmax,0) scale(1.15) rotate(12deg)}}
@keyframes float5{0%{transform:translate3d(0,0,0) scale(1.05) rotate(0)}100%{transform:translate3d(14vmax,-8vmax,0) scale(0.9) rotate(-10deg)}}
@keyframes grainShift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-5%,-5%,0)}}

/* ========== Safety ========== */
#bg, .blob, .ticker-track { animation-play-state: running !important; }

/* Debug overrides removed */