/* =========================================================
   BASE.CSS — foundational structure
   Custom cursor, main navigation, page/section scaffolding,
   shared keyframe animations, scroll-reveal utility, and the
   small mono-font section labels used throughout the site.
   Do not edit page-specific visuals here — see components.css.
========================================================= */
/* ─── CURSOR ─────────────────────────────────────────────────────────────── */
#cur{
  position:fixed;width:10px;height:10px;
  background:var(--y);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .15s ease,width .3s,height .3s;
}
#cur-ring{
  position:fixed;width:36px;height:36px;
  border:1px solid rgba(255,232,2,.4);border-radius:50%;
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .3s,height .3s,border-color .3s;
}
body:has(a:hover) #cur-ring,
body:has(button:hover) #cur-ring{
  width:56px;height:56px;border-color:var(--y);
}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:26px 48px;
  display:flex;justify-content:space-between;align-items:center;
  transition:background .4s,backdrop-filter .4s;
}
nav::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,10,.95) 0%,transparent 100%);
  pointer-events:none;
}
nav.scrolled{background:rgba(10,10,10,.97);backdrop-filter:blur(20px);}
.nav-logo{
  font-family:'Space Mono',monospace;font-weight:700;
  font-size:1.05rem;letter-spacing:.05em;
  color:var(--wh);text-decoration:none;
  position:relative;z-index:1;cursor:none;
}
.nav-logo span{color:var(--y);}
.nav-links{
  display:flex;gap:36px;list-style:none;
  position:relative;z-index:1;
}
.nav-links a{
  font-family:'Space Mono',monospace;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gt);text-decoration:none;
  transition:color .2s;cursor:none;
}
.nav-links a:hover{color:var(--wh);}
.nav-links a.active{color:var(--y);}

/* Work dropdown */
.nav-work-wrap{position:relative;}
.nav-work-drop{
  position:absolute;top:calc(100% + 16px);left:-20px;
  background:rgba(17,17,17,.98);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.06);
  padding:12px 0;min-width:220px;
  opacity:0;pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s,transform .2s;
}
.nav-work-wrap:hover .nav-work-drop,
.nav-work-drop:hover{opacity:1;pointer-events:all;transform:translateY(0);}
.nav-work-drop a{
  display:block;padding:10px 20px;
  font-family:'Space Mono',monospace;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gt);text-decoration:none;
  transition:color .15s,background .15s;cursor:none;
}
.nav-work-drop a:hover{color:var(--y);background:rgba(255,232,2,.04);}
.nav-work-drop .drop-divider{
  height:1px;background:rgba(255,255,255,.06);margin:8px 0;
}

/* Mobile menu */
.nav-burger{
  display:none;background:none;border:none;cursor:none;
  position:relative;z-index:1;padding:4px;
}
.nav-burger span{
  display:block;width:26px;height:2px;
  background:var(--wh);margin:6px 0;
  transition:transform .3s,opacity .3s;
}
.nav-mobile{
  position:fixed;inset:0;
  background:var(--bk);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:32px;
  z-index:190;
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.nav-mobile.open{opacity:1;pointer-events:all;}
.nav-mobile a{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.02em;
  color:var(--gt);text-decoration:none;
  transition:color .2s;cursor:none;
}
.nav-mobile a:hover{color:var(--y);}

/* ─── PAGES ──────────────────────────────────────────────────────────────── */
.page{display:none;}
.page.active{display:block;}

/* ─── KEYFRAMES ──────────────────────────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(40px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes gridShift{
  0%{transform:translateY(0);}
  100%{transform:translateY(80px);}
}
@keyframes glowPulse{
  0%,100%{opacity:.5;transform:scale(1);}
  50%{opacity:1;transform:scale(1.08);}
}
@keyframes tickerScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@keyframes stripScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ─── REVEAL ─────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease;}
.rv.in{opacity:1;transform:translateY(0);}
.rv1{transition-delay:.1s;}
.rv2{transition-delay:.2s;}
.rv3{transition-delay:.3s;}
.rv4{transition-delay:.4s;}

/* ─── SECTION LABEL ──────────────────────────────────────────────────────── */
.sec-label{
  font-family:'Space Mono',monospace;
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--y);
  display:flex;align-items:center;gap:12px;
  margin-bottom:48px;
}
.sec-label::after{
  content:'';flex:1;max-width:60px;
  height:1px;background:var(--y);
}
.sec-label.center{justify-content:center;}
.sec-label.center::after{flex:0;width:40px;}