/* ========== inspiratioNULL global.css ========== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --bg-dark:#000;
  --accent:#ffffff;
  --accent-alt:#ff00c8;
  --accent-soft:rgba(3, 255, 8, 0.15);
  --text-main:#fff;
  --font-display:'Chakra Petch','Rajdhani',sans-serif;
  --font-mono:'Share Tech Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  font-family:var(--font-display);
  background:radial-gradient(circle at center,#0a0a0a 0%,#000 100%);
  color:var(--text-main);
  min-height:100%;
  height:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* scanline + breathing aura */
body::before{
  content:"";
  position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,255,170,.03) 0,transparent 1px,transparent 2px,rgba(0,255,170,.03) 3px);
  animation:scanlines 10s linear infinite;
  pointer-events:none;z-index:999;
}
@keyframes scanlines{0%{transform:translateY(0)}100%{transform:translateY(8px)}}
body::after{
  content:"";
  position:fixed;inset:-50%;
  background:radial-gradient(circle,rgba(0,255,170,.05) 0%,transparent 70%);
  animation:breathe 6s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.6}}

.container{max-width:1200px;margin:0 auto;padding:2rem;position:relative;z-index:2;}
.void-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--accent-soft);
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 0 20px rgba(0,255,255,.1);
  transition:.3s ease all;
}
.void-card:hover{transform:translateY(-4px);box-shadow:0 0 25px rgba(0,255,255,.3);}
.fade-in{opacity:0;transform:translateY(10px);animation:fadeInUp .6s ease forwards;}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

.flicker{animation:flicker 3.5s alternate;text-shadow:0 0 4px var(--accent),0 0 12px var(--accent);}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1;}20%,24%,55%{opacity:.8;}}
.glow{text-shadow:0 0 5px var(--accent),0 0 15px var(--accent);}
.accent{color:var(--accent);}
.accent-alt{color:var(--accent-alt);}

/* header */
header{text-align:center;position:relative;z-index:3;padding:1.2rem 0;
  backdrop-filter:blur(6px);border-bottom:1px solid var(--accent-soft);
  background:rgba(0,0,0,.4);}
header .logo{font-size:clamp(2rem,6vw,3rem);font-weight:700;letter-spacing:3px;
  text-transform:uppercase;margin-bottom:.6rem;animation:flicker 4s;}
header nav a{color:var(--accent);text-decoration:none;margin:0 .6rem;font-weight:600;
  letter-spacing:1px;position:relative;transition:.3s;}
header nav a::after{content:"";position:absolute;bottom:-4px;left:50%;
  transform:translateX(-50%);width:0;height:2px;background:var(--accent);transition:.3s;}
header nav a:hover::after{width:100%;}
header nav a:hover{color:var(--accent-alt);text-shadow:0 0 10px var(--accent-alt);}

/* footer */
.footer{
  margin-top:2.5rem;
  text-align:center;
  position:relative;
  z-index:2;
}
.footer a{
  color:#00ffee;
  margin:0 0.6rem;
  text-decoration:none;
  transition:color .3s,text-shadow .3s;
}
.footer a:hover{
  color:#ff00c8;
  text-shadow:0 0 8px #ff00c8;
}
.footer img{
  width:48px;
  height:48px;
  border-radius:50%;
  box-shadow:0 0 12px rgba(0,255,255,0.3);
  margin-top:1rem;
  transition:transform .3s;
}
.footer img:hover{
  transform:scale(1.1);
}