/*
  FRACTILIS MAGIKPUNK DESIGN SYSTEM
  Inspirations: Bungie (Brutalism), Star Citizen (Diegetic), ArtStation (Immersive)
*/

:root {
  --bg-deep: #04040D;
  --bg-panel: rgba(8, 8, 21, 0.85);
  --accent-cry: #00CEC9;
  --accent-pk: #E84393;
  --accent-gold: #F0C040;
  --accent-ac: #5B4EE8;
  --tx-main: #EEEEF5;
  --tx-dim: #8888AA;
  --br-main: rgba(91, 78, 232, 0.3);
  --glow-cry: 0 0 15px rgba(0, 206, 201, 0.4);
  --glow-pk: 0 0 15px rgba(232, 67, 147, 0.4);
  --font-header: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* --- IMMERSION & BACKGROUND --- */
body {
  background-color: var(--bg-deep);
  color: var(--tx-main);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Preserving background images while adding a digital overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,4,13,0.2) 0%, rgba(4,4,13,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Scanline effect for the diegetic terminal feel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
}

/* --- BRUTALIST COMPONENTS --- */
.mp-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  border: 1px solid var(--br-main);
  border-radius: 2px; /* Hard edges for brutalist feel */
  box-shadow: var(--glow-cry);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mp-panel:hover {
  border-color: var(--accent-cry);
  box-shadow: 0 0 25px rgba(0, 206, 201, 0.2);
}

/* --- GLITCH ANIMATION --- */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.glitch-text {
  position: relative;
  animation: glitch 5s infinite linear alternate-reverse;
}

.glitch-text:hover {
  animation: glitch 0.2s infinite;
  color: var(--accent-pk);
  text-shadow: 2px 0 var(--accent-cry), -2px 0 var(--accent-gold);
}

/* --- INTERACTIVE ELEMENTS --- */
.mp-btn {
  font-family: var(--font-header);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 10px 20px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--accent-ac);
  color: var(--tx-main);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.mp-btn:hover {
  background: var(--accent-ac);
  color: white;
  box-shadow: 0 0 15px var(--accent-ac);
}

/* --- TRANSITIONS --- */
.page-transition {
  animation: pageFadeIn 0.6s ease-out;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}