@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,900&f[]=jet-brains-mono@400,700&f[]=satoshi@400,700&display=swap');

:root {
  --bg: #050505;
  --cyan: #00FFFF;
  --magenta: #FF00FF;
  --yellow: #FFFF00;
  --grey: #1A1A1A;
  --white: #FFFFFF;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Satoshi', sans-serif;
  background-color: var(--bg);
  color: var(--white);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Animated gradient background */
.animated-gradient {
  background: linear-gradient(45deg, #050505, #1a1a1a, #050505);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating animation */
.floating {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Pulse animation */
.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Basic glow effect */
.glow {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  transition: box-shadow 0.3s ease;
}

.glow:hover {
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
}

/* Basic card hover effect */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-2px);
}


/* Text reveal animation */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  animation: revealText 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(100%);
}

@keyframes revealText {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Number counting animation */
.count-up {
  display: inline-block;
}

/* Particle background */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: particleFloat 20s infinite linear;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }
}

/* Basic brutalist borders */
.brutalist-border {
  border: 3px solid var(--white);
  position: relative;
  overflow: hidden;
}

.brutalist-shadow-cyan {
  box-shadow: 6px 6px 0px 0px var(--cyan);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brutalist-shadow-cyan:hover {
  box-shadow: 8px 8px 0px 0px var(--cyan);
}

.brutalist-shadow-magenta {
  box-shadow: 6px 6px 0px 0px var(--magenta);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brutalist-shadow-magenta:hover {
  box-shadow: 8px 8px 0px 0px var(--magenta);
}

.brutalist-shadow-yellow {
  box-shadow: 6px 6px 0px 0px var(--yellow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brutalist-shadow-yellow:hover {
  box-shadow: 8px 8px 0px 0px var(--yellow);
}

/* Enhanced font displays */
.font-display {
  font-family: 'Cabinet Grotesk', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Enhanced glitch text effect */
.glitch-text {
  position: relative;
  display: inline-block;
  animation: glitch 2s infinite;
}

@keyframes glitch {
  0%, 100% { text-shadow: 2px 2px 0 var(--cyan), -2px -2px 0 var(--magenta); }
  25% { text-shadow: -2px 2px 0 var(--cyan), 2px -2px 0 var(--magenta); }
  50% { text-shadow: 2px -2px 0 var(--cyan), -2px 2px 0 var(--magenta); }
  75% { text-shadow: -2px -2px 0 var(--cyan), 2px 2px 0 var(--magenta); }
}

.glitch-text::before {
  position: absolute;
  left: 2px;
  text-shadow: -2px 0 var(--magenta);
  top: 0;
  background: var(--bg);
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

.scanlines {
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

@keyframes noise-anim {
  0% { clip: rect(41px, 9999px, 11px, 0); }
  5% { clip: rect(76px, 9999px, 5px, 0); }
  10% { clip: rect(100px, 9999px, 33px, 0); }
  15% { clip: rect(25px, 9999px, 14px, 0); }
  20% { clip: rect(81px, 9999px, 56px, 0); }
  25% { clip: rect(12px, 9999px, 7px, 0); }
  30% { clip: rect(35px, 9999px, 78px, 0); }
  35% { clip: rect(19px, 9999px, 40px, 0); }
  40% { clip: rect(59px, 9999px, 98px, 0); }
  45% { clip: rect(29px, 9999px, 14px, 0); }
  50% { clip: rect(20px, 9999px, 60px, 0); }
  55% { clip: rect(65px, 9999px, 10px, 0); }
  60% { clip: rect(13px, 9999px, 99px, 0); }
  65% { clip: rect(83px, 9999px, 32px, 0); }
  70% { clip: rect(44px, 9999px, 76px, 0); }
  75% { clip: rect(21px, 9999px, 54px, 0); }
  80% { clip: rect(48px, 9999px, 25px, 0); }
  85% { clip: rect(10px, 9999px, 90px, 0); }
  90% { clip: rect(70px, 9999px, 33px, 0); }
  95% { clip: rect(50px, 9999px, 11px, 0); }
  100% { clip: rect(12px, 9999px, 85px, 0); }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--white);
  border: 2px solid var(--bg);
}

sd-component { display: block; }

/* Wiki Specific Styles */
.sidebar-item:hover {
  box-shadow: 4px 4px 0px 0px var(--cyan);
  background: white;
  color: black;
}

.active-sidebar-item {
  box-shadow: 4px 4px 0px 0px var(--magenta);
  background: white;
  color: black;
}

.code-block {
  background: #111;
  border: 3px solid #333;
  font-family: 'JetBrains Mono', monospace;
  padding: 1.5rem;
  position: relative;
}

.code-block::before {
  content: 'SHELL';
  position: absolute;
  top: 0;
  right: 1.5rem;
  transform: translateY(-50%);
  background: #333;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  color: white;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

th, td {
  border: 1.5px solid #333;
  padding: 1rem;
}

th {
  background: #1a1a1a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--cyan);
}

.status-badge {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  text-transform: uppercase;
  border: 2px solid currentColor;
}