/* =========================================================
   SPYDR // MAIN CSS
   Dynamic Theme + Background FX System
   ========================================================= */

/* =========================================================
   CORE THEME VARIABLES
   ========================================================= */

:root {
  --theme-primary: #ffffff;
  --theme-secondary: #7c3aed;
  --theme-background: #090909;
  --theme-surface: #111111;
  --theme-text: #ffffff;
  --theme-muted: #bdbdbd;
  --theme-border: #2b2b2b;
  --theme-glow: rgba(124, 58, 237, 0.45);

  --primary-color: var(--theme-primary);
  --secondary-color: var(--theme-secondary);
  --background-color: var(--theme-background);
  --surface-color: var(--theme-surface);
  --text-color: var(--theme-text);
  --muted-color: var(--theme-muted);
  --border-color: var(--theme-border);
  --accent-color: var(--theme-primary);
  --accent-glow: var(--theme-glow);

  /* Legacy aliases */
  --bg: var(--background-color);
  --bg2: var(--theme-secondary);
  --card: var(--surface-color);
  --border: var(--border-color);
  --white: var(--text-color);
  --gray: var(--muted-color);
  --darkgray: var(--muted-color);
  --accent: var(--accent-color);

  /* Dynamic gradient colors */
  --gradient-1: var(--theme-background);
  --gradient-2: var(--theme-secondary);
  --gradient-3: var(--theme-primary);

  --t: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   GLOBAL RESETS
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--t);
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--background-color);
  color: var(--text-color);
  font-family: "JetBrains Mono", monospace;
  overflow: hidden;
}


/* =========================================================
   THEME COMPATIBILITY
   ========================================================= */

[data-theme="light"] {
  --bg: #f5f5f5;
  --bg2: #e0e0e0;
  --card: #d1d1d1;
  --border: #aaaaaa;
  --white: #111111;
  --gray: #555555;
  --darkgray: #666666;
  --accent: #3f5efb;

  --background-color: var(--bg);
  --surface-color: var(--card);
  --text-color: var(--white);
  --border-color: var(--border);
  --muted-color: var(--gray);

  --gradient-1: #f5f5f5;
  --gradient-2: #e0e0e0;
  --gradient-3: #3f5efb;
}

[data-theme="spydr-neon"] {
  --bg: #05050a;
  --bg2: #0a0a14;
  --card: #131333;
  --border: #4c1d95;
  --white: #ffffff;
  --gray: #d1d5db;
  --darkgray: #9ca3af;
  --accent: #7c3aed;

  --background-color: var(--bg);
  --surface-color: var(--card);
  --text-color: var(--white);
  --border-color: var(--border);
  --muted-color: var(--gray);

  --gradient-1: #05050a;
  --gradient-2: #131333;
  --gradient-3: #7c3aed;
}


/* =========================================================
   BASE ELEMENTS
   ========================================================= */

button,
.btn,
.button {
  background: var(--primary-color);
  color: var(--secondary-color);
  border: 1px solid var(--border-color);
}

input,
textarea,
select,
.card,
.panel,
.menu,
.dropdown-menu {
  background: var(--surface-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

a {
  color: var(--primary-color);
}

::selection {
  background: var(--primary-color);
  color: var(--secondary-color);
}


/* =========================================================
   DYNAMIC BACKGROUND SYSTEM
   ========================================================= */

#bg-effects-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  pointer-events: none;
  overflow: hidden;

  background:
    var(--theme-background);
}


/* =========================================================
   ANIMATED GRADIENT BACKGROUND
   ========================================================= */

#theme-gradient-background {
  background:
    radial-gradient(
      circle at 15% 20%,
      color-mix(
        in srgb,
        var(--theme-primary) 22%,
        transparent
      ),
      transparent 38%
    ),
    radial-gradient(
      circle at 85% 25%,
      color-mix(
        in srgb,
        var(--theme-secondary) 35%,
        transparent
      ),
      transparent 42%
    ),
    radial-gradient(
      circle at 50% 90%,
      color-mix(
        in srgb,
        var(--theme-primary) 15%,
        transparent
      ),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      var(--theme-background),
      var(--theme-secondary),
      var(--theme-background)
    );

  background-size: 250% 250%;

}


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

  25% {
    background-position: 100% 20%;
  }

  50% {
    background-position: 100% 80%;
  }

  75% {
    background-position: 0% 100%;
  }

  100% {
    background-position: 0% 50%;
  }
}


/* =========================================================
   STARS
   ========================================================= */

#stars-canvas {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  opacity: 1;

  pointer-events: none;

}


/* =========================================================
   FOG
   ========================================================= */

#fog-overlay {
  position: absolute;
  inset: -25%;

  width: 150%;
  height: 150%;

  opacity: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 20% 30%,
      color-mix(
        in srgb,
        var(--theme-primary) 22%,
        transparent
      ),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      color-mix(
        in srgb,
        var(--theme-primary) 16%,
        transparent
      ),
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      color-mix(
        in srgb,
        var(--theme-secondary) 35%,
        transparent
      ),
      transparent 60%
    );

  filter: blur(45px);

  transform: translate3d(0, 0, 0);

}


body[data-bg-style="fog"] #fog-overlay {
  opacity: 1;
  animation: spydrFogMove 18s ease-in-out infinite;
}


@keyframes spydrFogMove {
  0% {
    transform: translate(-8%, -4%) scale(1);
  }

  25% {
    transform: translate(6%, 5%) scale(1.08);
  }

  50% {
    transform: translate(10%, -6%) scale(1.15);
  }

  75% {
    transform: translate(-5%, 7%) scale(1.08);
  }

  100% {
    transform: translate(-8%, -4%) scale(1);
  }
}


/* =========================================================
   THEME FX PARTICLES
   ========================================================= */

.spydr-theme-fx {
  pointer-events: none;
}

#theme-gradient-background,
#theme-fx-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

#bg-effects-container,
#stars-canvas,
#fog-overlay {
  pointer-events: none;
}


/* =========================================================
   LOADING SCREEN
   ========================================================= */

#loader,
#loading-screen {
  position: fixed;
  inset: 0;

  background: var(--theme-background);

  z-index: 9999;
}

#loader video,
#loading-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================================
   TOP
   ========================================================= */

.top {
  position: absolute;

  top: 20px;
  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  color: var(--gray);

  z-index: 10;
}

#time {
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  color: var(--white);
}

#date {
  font-size: 13px;
}


/* =========================================================
   MENU WRAPPER
   ========================================================= */

.menu-wrapper {
  position: absolute;

  left: 20px;
  bottom: 20px;

  z-index: 100;
}


/* =========================================================
   MENU BUTTON
   ========================================================= */

#menu-btn {
  background: var(--card);

  border: 1px solid var(--border);

  color: var(--white);

  padding: 12px 14px;

  cursor: pointer;
}


/* =========================================================
   MENU BOX
   ========================================================= */

#menu {
  position: absolute;

  bottom: 55px;
  left: 0;

  width: 190px;

  background: var(--bg2);

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 8px;

  opacity: 0;

  pointer-events: none;

  transform: translateY(10px);

  transition: var(--t);

  z-index: 101;
}


/* =========================================================
   MENU OPEN STATES
   ========================================================= */

.menu-wrapper:hover #menu,
#menu.open {
  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

#menu button {
  width: 100%;

  background: transparent;

  border: none;

  color: var(--white);

  padding: 10px;

  text-align: left;

  cursor: pointer;

  display: flex;

  gap: 8px;

  align-items: center;
}

#menu button:hover {
  background: color-mix(
    in srgb,
    var(--theme-primary) 8%,
    transparent
  );

  transform: translateX(4px);
}


/* =========================================================
   HERO
   ========================================================= */

.center {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 5;
}


.hero-wrap {
  display: flex;

  align-items: center;

  gap: 20px;
}


/* =========================================================
   ANIMATED LOGO
   ========================================================= */

.logo-img {
  width: 240px;

  filter:
    drop-shadow(
      0 0 20px
      color-mix(
        in srgb,
        var(--theme-primary) 35%,
        transparent
      )
    );

  position: relative;

  z-index: 6;
}


/*
   If the homepage JS applies the animated gradient
   to the logo, this class will be available.
*/

.logo-gradient {
  background:
    linear-gradient(
      120deg,
      var(--theme-primary),
      var(--theme-secondary),
      var(--theme-primary)
    );

  background-size: 300% 300%;

  animation: spydrLogoGradient 6s ease infinite;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


.hero-text h1 {
  font-family: "Space Grotesk", sans-serif;

  font-size: 110px;

  color: var(--theme-text);
}


.const {
  color: var(--darkgray);

  font-size: 14px;

  margin-top: 6px;
}


/* =========================================================
   GAMES
   ========================================================= */

.games {
  position: absolute;

  bottom: 110px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 12px;

  z-index: 20;
}


/* =========================================================
   GAME CARDS
   ========================================================= */

.game-card {
  background: var(--card);

  border: 1px solid var(--border);

  padding: 12px 14px;

  border-radius: 10px;

  font-size: 13px;

  color: var(--gray);

  cursor: pointer;
}

.game-card:hover {
  border-color: var(--theme-primary);

  color: var(--white);

  transform: translateY(-3px);

  box-shadow:
    0 0 20px
    color-mix(
      in srgb,
      var(--theme-primary) 18%,
      transparent
    );
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}