/* === MAX CRAZY DESIGN === */

/* 1. Retro fonter (brukes via Tailwind utility, men fallback her) */
.font-pixel { font-family: 'Press Start 2P', cursive; }
.font-tech { font-family: 'Turret Road', cursive; font-weight: 800; }

/* 2. Glitch-effekt for logo og overskrifter */
.glitch {
  position: relative;
  color: #fff;
  font-weight: bold;
  animation: glitch-anim 2.5s infinite steps(1);
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #FF00E5;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  animation: glitch-anim-before 2.5s infinite steps(1) reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #00F2FF;
  clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
  animation: glitch-anim-after 2.5s infinite steps(1) reverse;
}
@keyframes glitch-anim {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-5px,5px); }
  40% { transform: translate(5px,-5px); }
  60% { transform: translate(-5px,-5px); }
  80% { transform: translate(5px,5px); }
}
@keyframes glitch-anim-before {
  0%{clip-path:polygon(0 0,100% 0,100% 33%,0 33%)}
  5%,45%{clip-path:polygon(0 25%,100% 25%,100% 50%,0 50%)}
  50%,100%{clip-path:polygon(0 0,100% 0,100% 33%,0 33%)}
}
@keyframes glitch-anim-after {
  0%{clip-path:polygon(0 66%,100% 66%,100% 100%,0 100%)}
  5%,45%{clip-path:polygon(0 40%,100% 40%,100% 80%,0 80%)}
  50%,100%{clip-path:polygon(0 66%,100% 66%,100% 100%,0 100%)}
}

/* 3. Scanlines bakgrunn */
body.crazy-bg {
  background-color: #0D0221;
  color: #F0F8FF;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,242,255,0.05) 19px, rgba(0,242,255,0.05) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255,0,229,0.05) 19px, rgba(255,0,229,0.05) 20px);
  background-size: 20px 20px;
  animation: bgScanlines 0.2s linear infinite, bgJitter 0.1s linear infinite alternate;
}
@keyframes bgScanlines { from { background-position-y: 0; } to { background-position-y: 20px; } }
@keyframes bgJitter { from { background-position-x: -1px; } to { background-position-x: 1px; } }

/* 4. Neon-glow på bokser og knapper */
.neon-box {
  border: 2px solid #FF00E5;
  box-shadow: 0 0 10px #FF00E5, 0 0 20px #00F2FF inset, 0 0 30px #FAFF00;
  transition: all 0.3s ease;
  background: rgba(0,0,0,0.4);
}
.neon-box:hover {
  border-color: #00F2FF;
  box-shadow: 0 0 15px #00F2FF, 0 0 30px #00F2FF inset, 0 0 40px #FF00E5;
  transform: scale(1.03) skew(-2deg, 1deg);
}
.neon-btn {
  background: #FAFF00;
  color: #0D0221;
  border: 2px solid #FAFF00;
  text-shadow: 1px 1px 0 #0D0221;
  box-shadow: 0 0 10px #FAFF00, 0 0 20px #FF00E5;
  transition: all 0.2s;
}
.neon-btn:hover {
  background: #FF00E5;
  border-color: #FF00E5;
  color: #F0F8FF;
  box-shadow: 0 0 20px #FF00E5;
}

/* 5. CRT/noise overlay */
.crazy-noise::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXVuZmZnpKSZmZmfn59npqɑora2trq6gqKjMzc2ZmZfn5+fOzMyYlpZERERPT0/CwsJeXl4nJyfZ2dkgICAqKilUKGlZeLVoAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAQUlEQVQ4jWNgwAD/sQUEAmYCBmpwAn1mEFB3BUAaBQlCRsLyU9HIQMPCCgYxASqsVoUMXgMWnN1c3JxcXV7D0YpAUAwcAAA5BQ0n52TAAAAAElFTkSuQmCC");
  opacity: 0.04;
  pointer-events: none;
  z-index: 1000;
  animation: noiseAnim 0.1s linear infinite alternate;
}
@keyframes noiseAnim { from { transform: translate(0,0); } to { transform: translate(1px,1px); } }

/* 6. Blinking cursor/tekst */
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* 7. Fargepalett for tekst */
.text-neon-pink { color: #FF00E5; }
.text-neon-cyan { color: #00F2FF; }
.text-neon-yellow { color: #FAFF00; }
.bg-neon-pink { background: #FF00E5; }
.bg-neon-cyan { background: #00F2FF; }
.bg-neon-yellow { background: #FAFF00; }

/* === SLUTT MAX CRAZY DESIGN === */