/* ═══════════════════════════════════════════════════════
   BASE.CSS — Reset, body, cursor, grain overlay, keyframes
═══════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--k); color:var(--w); font-family:var(--fb);
  overflow-x:hidden; cursor:none; transition:background .4s,color .4s;
}

/* Scrollbar */
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--k) }
::-webkit-scrollbar-thumb { background:var(--y); border-radius:2px }

/* Custom Cursor */
#cur,#cur-r { position:fixed;top:0;left:0;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);border-radius:50% }
#cur  { width:10px;height:10px;background:var(--cur-c);transition:width .15s,height .15s,background .3s }
#cur-r{ width:32px;height:32px;border:1.5px solid var(--cur-c);opacity:.5;z-index:9996;transition:width .2s,height .2s,border-color .3s,opacity .3s }

/* Grain overlay */
body::after {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:800; opacity:.45; transition:opacity .4s;
}
body[data-theme="light"]::after { opacity:.15 }

/* ═══════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════ */
@keyframes logoAppear  { from{opacity:0;transform:translate(-50%,-50%) scale(.8)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes hexGlow     { 0%,100%{box-shadow:none} 50%{box-shadow:none} }
@keyframes cornerPulse { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes scanFull    { 0%{top:-2%} 100%{top:102%} }
@keyframes gridPan     { 0%{transform:translateY(0)} 100%{transform:translateY(55px)} }
@keyframes floatY      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes floatYRev   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(14px)} }
@keyframes spinSlow    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes spinRev     { from{transform:rotate(360deg)} to{transform:rotate(0deg)} }
@keyframes rotateHex   { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(30deg)} }
@keyframes pulseGlow   { 0%,100%{box-shadow:0 0 6px rgba(255,214,0,.1)} 50%{box-shadow:0 0 14px rgba(255,214,0,.22)} }
@keyframes pulseGlowText{ 0%,100%{text-shadow:none} 50%{text-shadow:none} }
@keyframes shimmerX    { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes scanLine    { 0%{top:-5%} 100%{top:105%} }
@keyframes glitch1     { 0%,89%,100%{opacity:0} 90%{opacity:.8;clip-path:inset(20% 0 40% 0);transform:skewX(-4deg) translateX(-4px);color:#ff4d4d} 92%{clip-path:inset(60% 0 5% 0);transform:skewX(3deg) translateX(3px);color:#FFD600} 94%{opacity:0} }
@keyframes glitch2     { 0%,93%,100%{opacity:0} 94%{opacity:.7;clip-path:inset(45% 0 25% 0);transform:skewX(3deg) translateX(5px);color:#00ffff} 96%{clip-path:inset(5% 0 65% 0);transform:skewX(-2deg)} 98%{opacity:0} }
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes orb1        { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,-60px) scale(1.2)} 66%{transform:translate(-40px,80px) scale(.85)} }
@keyframes orb2        { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-100px,40px) scale(1.1)} 66%{transform:translate(60px,-80px) scale(.9)} }
@keyframes orb3        { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,60px)} }
@keyframes fadeUp      { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fu          { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes marqueeAnim { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes starTwinkle { 0%,100%{opacity:.25;transform:scale(1)} 50%{opacity:1;transform:scale(1.6)} }
@keyframes bounceIn    { 0%{transform:scale(0) rotate(-180deg)} 60%{transform:scale(1.25) rotate(12deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes breathe     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }