:root {
  --color-dark: #0A0A1F; /* Very Dark Blue/Black */
  --color-primary: #00FFFF; /* Teal - Main Accent */
  --color-secondary: #FF00FF; /* Fuchsia Pink - Secondary Accent/Warning */
  --color-highlight: #A020F0; /* Purple/Lavender Mix */
  --color-lavender: #E6E6FA; /* Lavender/White Flares - Lightest text */
}

/* Global Reset & Body Theme */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace; /* Monospace for that terminal feel */
}

body {
  background-color: var(--color-dark);
  color: var(--color-lavender);
  line-height: 1.6;
  padding: 20px;
  /* Ensure content sits on top of the background */
  position: relative;
  z-index: 1;
}

/* --- ANIMATED WALLPAPER EFFECT --- */
/* Wallpaper container: canvas-based animated wallpaper */
#wallpaper-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: transparent;
  display: block;
  overflow: hidden;
}

#wallpaper-background canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* GIF/image background: fluid, full-bleed, cover behavior */
#wallpaper-background img,
#wallpaper-gif {
  position: fixed; /* keep behind content and fixed to viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

/* On small screens ensure the content stays readable above the background */
@media (max-width: 600px) {
  #wallpaper-background img,
  #wallpaper-gif {
    filter: saturate(0.9) contrast(0.85) brightness(0.85);
    opacity: 0.9;
  }
}

/* If the canvas is paused or not supported, fall back to SVG wallpaper */
#wallpaper-background .fallback {
  position: absolute;inset:0;background-image: url('assets/wallpaper.svg');background-size:cover;opacity:0.6;filter:blur(0.5px);
}

/* Video wallpaper sizing */
#wallpaper-background video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Iframe player (YouTube) styling to behave like the video wallpaper */
#wallpaper-player, #wallpaper-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none; /* keep UI interactive above */
}

/* Background audio toggle button */
#bg-audio-toggle{
  position:relative; /* will be appended into header */
  margin-left:12px;
  background: rgba(255,255,255,0.04);
  color: var(--color-lavender);
  border: 1px solid rgba(255,255,255,0.06);
  padding:6px 10px;border-radius:8px;cursor:pointer;font-size:16px;
}
#bg-audio-toggle[aria-pressed="true"]{ box-shadow:0 6px 18px rgba(0,255,213,0.06); }

@keyframes gear-bootloop {
  /* 8-second loop */
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* --- Rest of the UI (Z-index 2 to be above the background) --- */
header, main, footer {
  position: relative;
  z-index: 2;
}

/* Typography and Headings */
h1, h2, h3 {
  color: var(--color-primary);
  text-transform: uppercase;
  text-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary); /* Neon Glow */
  margin-bottom: 10px;
}

.tagline {
  color: var(--color-secondary);
  font-size: 1.2em;
  margin-bottom: 20px;
}

/* Header & Navigation */
header {
  border-bottom: 2px solid var(--color-highlight);
  padding-bottom: 15px;
  margin-bottom: 30px;
}

/* Center header content and make it fluid/responsive */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

nav a {
  color: var(--color-lavender);
  text-decoration: none;
  margin-right: 15px;
  transition: color 0.3s;
  /* Adding subtle white flare effect on hover */
  text-shadow: 0 0 1px var(--color-lavender);
}

nav a:hover {
  color: var(--color-secondary);
  text-shadow: 0 0 8px var(--color-secondary), 0 0 15px var(--color-lavender); 
}

/* Buttons and CTAs */
#cta-button {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 5px var(--color-primary);
}

#cta-button:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
  box-shadow: 0 0 15px var(--color-primary), 0 0 25px var(--color-lavender); /* Added white flare effect */
}

/* Sections and Layout */
section {
  padding: 40px 0;
  margin-bottom: 20px;
  border-top: 1px dashed var(--color-highlight);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.service-item {
  background-color: #1a1a3a; /* Slightly lighter dark background */
  padding: 20px;
  border-left: 5px solid var(--color-secondary);
  transition: transform 0.2s;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(255, 0, 255, 0.5); /* Fuchsia shadow on hover */
}

/* Glitch Effect for Hero (Simple CSS Glitch) */
.glitch h1, .glitch h2,
.glitch h3 {
  animation: glitch-anim 2s infinite linear alternate;
}

/* Apply intensified glitch to h1 and h3 with glitch class */
h1.glitch,
.glitch h1 {
  animation-name: glitch-anim-h3;
  animation-duration: 4.056s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
  display: inline-block;
  position: relative;
}

/* Intensify the h3 glitch: slightly different animation and stronger glow */
.glitch h3 {
  animation-name: glitch-anim-h3;
  animation-duration: 4.056s;
  display: inline-block;
  position: relative;
}

/* Primary hero glitch (subtle) */
@keyframes glitch-anim {
  0% { transform: translateX(0); text-shadow: 5px 0 6px var(--color-primary), -5px 0 6px var(--color-secondary); }
  50% { transform: translateX(-1px); text-shadow: -5px 0 6px var(--color-primary), 5px 0 6px var(--color-secondary); }
  100% { transform: translateX(0); text-shadow: 0 0 8px var(--color-primary), 0 0 10px var(--color-secondary); }
}

/* H3-specific glitch: stronger offsets, slight skew and flicker */
@keyframes glitch-anim-h3 {
  0% {
    transform: translateX(0) skewX(0deg);
    text-shadow: 8px 0 10px var(--color-primary), -8px 0 10px var(--color-secondary);
  }
  25% {
    transform: translateX(-3px) skewX(-0.8deg);
    text-shadow: -10px 0 12px var(--color-primary), 10px 0 12px var(--color-secondary);
  }
  50% {
    transform: translateX(3px) skewX(0.8deg);
    text-shadow: 10px 0 14px var(--color-primary), -10px 0 14px var(--color-secondary);
  }
  75% {
    transform: translateX(-2px) skewX(-0.3deg);
    text-shadow: -6px 0 9px var(--color-primary), 6px 0 9px var(--color-secondary);
  }
  100% {
    transform: translateX(0) skewX(0deg);
    text-shadow: 0 0 12px var(--color-primary), 0 0 16px var(--color-secondary);
  }
}

/* Neon underline accent for glitched h1 and h3 */
h1.glitch::after,
.glitch h1::after,
h3.glitch::after,
.glitch h3::after {
  content: '';
  display: block;
  width: 60%;
  height: 5px;
  margin: 10px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0,255,255,0.95), rgba(255,0,255,0.95));
  box-shadow: 0 0 14px rgba(0,255,255,0.18), 0 0 30px rgba(255,0,255,0.12);
  opacity: 0.95;
  pointer-events: none;
  transform-origin: center;
  animation: neon-pulse 2.2s infinite ease-in-out;
}

@keyframes neon-pulse {
  0% { transform: scaleX(0.95); opacity: 0.9; filter: blur(0.6px); }
  50% { transform: scaleX(1.05); opacity: 1; filter: blur(0.6px); }
  100% { transform: scaleX(0.95); opacity: 0.9; filter: blur(0.6px); }
}

/* Elegance Core Status Display */
#core-status {
  background-color: #000000;
  border: 3px double var(--color-primary);
  color: var(--color-primary);
  padding: 15px;
  margin-top: 15px;
  text-align: center;
  font-size: 1.1em;
  box-shadow: 0 0 10px var(--color-primary);
}

/* Footer styling - pink themed */
footer {
  position: relative;
  z-index: 2;
  padding: 18px 12px;
  text-align: center;
  background: transparent;
}

footer p {
  margin: 0;
  color: var(--color-secondary);
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

footer a {
  color: var(--color-secondary);
  text-decoration: none;
  box-shadow: 0 0 10px rgba(255,0,255,0.12);
  transition: transform 160ms ease, opacity 160ms ease, text-shadow 160ms ease;
}

footer a:hover,
footer a:focus {
  text-decoration: underline;
  transform: translateY(-1px);
  text-shadow: 0 0 12px rgba(255,0,255,0.22);
  outline: none;
}

/* Social Links Section */
.social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  margin-bottom: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; /* half size */
  height: 24px; /* half size */
  color: var(--color-secondary);
  opacity: 0.7;
  text-decoration: none;
  border-radius: 50%;
}

.social-icon:hover,
.social-icon:focus {
  opacity: 0.7;
  outline: none;
}

.social-icon svg {
  width: 100%;
  height: 100%;
}

/* Contact Info Styling */
.contact-info a {
  color: var(--color-lavender);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-highlight);
  transition: color 0.3s;
}

.contact-info a:hover {
  color: var(--color-secondary);
}