/*
================================================
  Root & Variables
================================================
*/

:root {
  --neon-green: #39ff14;
  --dark-green: #1cb102;
  --neon-red: #ff003c;
  --dark-bg: #0a0a0a;
  --light-gray: #aaa;
  --mid-gray: #444;
  --dark-gray: #222;
  --almost-black: #111;
  --cobalt-blue: #0047ab;
  --crimson: #af0000;
  --orange: orange;
  --white: #fff;
  --grey: grey;
  --navbar-hover: rgb(41, 41, 41);
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  position: relative;
  background: transparent;
  background-color: rgba(0, 0, 0, 0.99);
  /*background-color: #000; */
  color: #333333;
  margin: 0;
  font-family:
    "Kdam Thmor Pro", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial,
    sans-serif;
}
.mothership-container {
  display: flex;
  flex-direction: column; /* Stacks elements vertically */
  justify-content: center;
  align-items: center; /* Center items horizontally */
}
.noize-container {
  font-family:
    "Metal Mania", "Trebuchet MS", "Lucida Sans Unicode", sans-serif; /* Set a different font */
  position: relative;
  display: inline-block;
  font-size: 6rem;
  letter-spacing: -0.15em;
  color: var(--cobalt-blue);
  margin: 0 auto;
  padding-top: 20px;
  animation: flicker 2s infinite;
  z-index: 2; /* Ensure text is above the skulls */
}
.welcome-container {
  font-family:
    "Kdam Thmor Pro", "Trebuchet MS", "Lucida Sans Unicode", sans-serif; /* Set a different font */
  font-size: 16px;
  color: var(--grey);
  text-align: center; /* Center the content horizontally */
  margin-top: 10px; /* Add some space between containers */
}
.letter {
  display: inline-block;
  transition:
    transform 0.3s,
    top 0.3s,
    left 0.3s,
    color 0.3s;
  position: relative;
  animation: chase 5s infinite;
  z-index: 3; /* Ensure each letter is above the skulls */
}
.shake {
  animation: shake 0.3s infinite;
}
@keyframes shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, 2px);
  }
  50% {
    transform: translate(2px, -2px);
  }
  75% {
    transform: translate(-2px, -2px);
  }
}
@keyframes skull-shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-3px, 0) rotate(-3deg);
  }
  20% {
    transform: translate(3px, 0) rotate(3deg);
  }
  30% {
    transform: translate(-4px, 0) rotate(-2deg);
  }
  40% {
    transform: translate(4px, 0) rotate(2deg);
  }
  50% {
    transform: translate(-3px, 0) rotate(-1deg);
  }
  60% {
    transform: translate(3px, 0) rotate(1deg);
  }
  70% {
    transform: translate(-2px, 0) rotate(0deg);
  }
  80% {
    transform: translate(2px, 0) rotate(1deg);
  }
  90% {
    transform: translate(-1px, 0) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.spin {
  animation: spin 1s infinite;
  color: var(--grey);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.glow {
  color: var(--neon-red);
  text-shadow:
    0 0 15px var(--neon-red),
    0 0 30px var(--crimson),
    0 0 45px var(--crimson);
}
@keyframes flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow:
      0 0 5px #001e48,
      0 0 15px #001e48,
      0 0 25px #001e48,
      0 0 35px #001e48,
      0 0 45px #001e48,
      0 0 55px #001e48,
      0 0 65px #001e48;
  }
  20%,
  24%,
  55% {
    text-shadow: none;
  }
}
@keyframes chase {
  0% {
    text-shadow: none;
  }
  20% {
    text-shadow: 0 0 10px #504faf;
  }
  40% {
    text-shadow: 0 0 20px #504faf;
  }
  60% {
    text-shadow: 0 0 30px #504faf;
  }
  80% {
    text-shadow: 0 0 40px #504faf;
  }
  100% {
    text-shadow: none;
  }
}
.skull {
  position: absolute;
  width: 200px;
  opacity: 0;
  top: 0;
  translate: 0 -40vh; /* do the slide with typed transforms was -100px;*/
  transition:
    opacity 1s,
    top 1.5s;
  z-index: 1; /* Ensure skulls are below the text */
}
.skull-left {
  left: -220px;
  transform: rotateY(0);
}
.skull-right {
  right: -220px;
  transform: rotateY(180deg);
}
.skull.fade-in {
  opacity: 1;
  translate: 0 0; /* slide down into place */
}
@keyframes candle-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
.styled-img {
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;
}

.styled-img:hover {
  transform: scale(1.1);
}
a:hover {
  color: var(--orange);
  font-weight: bold;
  text-decoration: none;
}
.center {
  line-height: 1.5;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
img.logo-img {
  cursor: url("../gpx/cursor/Skull-icon.png"), auto;
  width: auto;
  height: auto;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Improved spin-on-hover for broader browser support */
.spin-on-hover {
  transition: transform 0.8s linear;
  transform: rotate(0deg); /* default */
}
.spin-on-hover:hover {
  transform: rotate(360deg); /* 360° spin */
}
/* Ensure navbar styles are specific and override existing styles */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  /* This is 50% transparent black. Adjust the 0.5 as needed. */
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 0;
  z-index: 10;
}

.navbar a {
  color: var(--cobalt-blue) !important; /* Cobalt Blue text */
  text-decoration: none;
  padding: 7px 20px;
  transition:
    color 1s ease-in-out,
    transform 0.3s ease-in-out; /* Smooth transition for color and size */
  font-family: "Nosifer", cursive !important; /* New Rocker font */
  font-size: 2em; /* Increase font size */
  font-weight: normal; /* Ensure normal font weight */
}

.navbar a:hover {
  color: var(--navbar-hover) !important; /* Ensure it fades to dark grey */
  font-weight: bolder; /* Ensure no bold effect on hover */
  transform: scale(1.1); /* Slightly increase size */
}

.navbar a:active {
  color: var(--grey) !important; /* Active state */
}

/* Accessibility: Focus outline for nav and dropdown links */
.navbar a:focus,
.dropdown-content a:focus {
  outline: 2px solid var(--neon-green);
  outline-offset: 2px;
}

/* Center the navbar container */
.navbar-container {
  display: flex;
  justify-content: center;
  margin-top: 40px; /* Adds space below the navbar */
  z-index: 10;
}
/* This is the main container for the dropdown menu */
.dropdown {
  position: relative;
  display: inline-block; /* Keeps it in line with other nav links */
}

/* This is the submenu box, set up for the slide-down animation */
.dropdown-content {
  position: absolute;
  background-color: rgba(10, 10, 10, 0.9);
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  z-index: 100;
  border-radius: 4px;

  /* Properties for the smooth slide/fade animation */
  opacity: 0;
  visibility: hidden;

  /* Positioning to keep it centered under the parent link */
  left: 50%;
  transform: translate(-50%, -10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
}

/* These are the links inside the dropdown */
.dropdown-content a {
  color: var(--white);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;

  /* Font set back to Nosifer, but at a smaller, readable size */
  font-family: "Kdam Thmor Pro", cursive !important;
  font-size: 1rem;
  font-weight: normal;

  transition:
    color 1s ease-in-out,
    transform 0.3s ease-in-out,
    background-color 0.3s ease;

  white-space: nowrap; /* Prevents text from wrapping to a new line */
}

/* Keeps the main menu link dark when hovering over its submenu */
.dropdown:hover > a {
  color: var(--navbar-hover) !important; /* The same dark grey from your hover state */
  font-weight: bolder;
  transform: scale(1.1);
}

/* Adds a hover effect to the submenu links */
.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0); /* Center horizontally and slide to final spot */
}

.title {
  font-family: "Metal Mania", cursive;
  font-size: 8em;
  position: relative;
  text-align: center; /* Center text within its container */
  color: var(--cobalt-blue); /* Cobalt blue color */
}

.title span {
  display: inline-block;
  animation: bounceAndRotate 2s ease-in-out infinite; /* Combined animations */
  animation-play-state: running; /* Initial state is running */
}

/* Adding different animation delays to each letter */
.title span:nth-child(1) {
  animation-delay: 0s;
}
.title span:nth-child(2) {
  animation-delay: 0.1s;
}
.title span:nth-child(3) {
  animation-delay: 0.2s;
}
.title span:nth-child(4) {
  animation-delay: 0.3s;
}
.title span:nth-child(5) {
  animation-delay: 0.4s;
}
.title span:nth-child(6) {
  animation-delay: 0.5s;
}
.title span:nth-child(7) {
  animation-delay: 0.6s;
}
.title span:nth-child(8) {
  animation-delay: 0.7s;
}
.title span:nth-child(9) {
  animation-delay: 0.8s;
}
.title span:nth-child(10) {
  animation-delay: 0.9s;
}
.title span:nth-child(11) {
  animation-delay: 1s;
}

@keyframes bounceAndRotate {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(-15deg);
  }
}

@keyframes randomPause {
  0% {
    animation-timing-function: step-start;
  }
  100% {
    animation-timing-function: step-end;
  }
}

.content-box {
  position: relative; /* Added for overlay positioning */
  max-width: 1000px; /* Increase the width */
  margin: 20px auto;
  padding: 20px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3); /* Solid border for consistency */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  color: var(--cobalt-blue); /* Cobalt blue color */
  background-image: url("../gpx/backgrounds/creepy.bg.png"); /* Add background image */
  background-repeat: repeat; /* Tile the background image */
  background-color: var(--almost-black); /* Fallback background color */
}

.content {
  position: relative;
  z-index: 2; /* Ensure text is above the overlay */
}

.content h2 {
  margin-top: 0;
}

.content p {
  line-height: 1.6;
}

/*
================================================
  Background & Effects
================================================
*/

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Use --dynamic-bg if set, otherwise fall back to a known asset path (path is relative to this CSS file) */
  background-image: var(--dynamic-bg, url("../gpx/backgrounds/noize-background-19.png"));
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.06;
  pointer-events: none;
  animation: driftStatic 60s linear infinite;
  transition: background-image 2s ease-in-out;
}

.bg-audio {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.05;
}

@keyframes driftStatic {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  50% {
    transform: translate(-30px, -20px) scale(1.02);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

/*
================================================
  Layout & Core Components
================================================
*/

/* Slogan directly under logo with flicker */
.slogan {
  margin-bottom: 2em;
  font-size: 1.3em;
  max-width: 1100px;
  margin: 8px auto 10px;
  text-align: center;
  line-height: 1.35;
  color: var(--dark-green);
  text-shadow:
    0 0 6px rgba(57, 255, 20, 0.45),
    0 0 12px rgba(57, 255, 20, 0.25);
  animation: undzFlicker 3.2s infinite;
  position: relative;
  z-index: 10;
}
@keyframes undzFlicker {
  0%,
  100% {
    opacity: 0.98;
    text-shadow:
      0 0 6px rgba(57, 255, 20, 0.45),
      0 0 12px rgba(57, 255, 20, 0.25);
  }
  5% {
    opacity: 0.94;
    text-shadow:
      0 0 4px rgba(57, 255, 20, 0.35),
      0 0 10px rgba(57, 255, 20, 0.18);
  }
  11% {
    opacity: 1;
    text-shadow:
      0 0 7px rgba(57, 255, 20, 0.55),
      0 0 14px rgba(57, 255, 20, 0.32);
  }
  17% {
    opacity: 0.92;
    text-shadow:
      0 0 3px rgba(57, 255, 20, 0.28),
      0 0 8px rgba(57, 255, 20, 0.15);
  }
  31% {
    opacity: 0.99;
    text-shadow:
      0 0 6px rgba(57, 255, 20, 0.45),
      0 0 12px rgba(57, 255, 20, 0.25);
  }
  46% {
    opacity: 0.93;
    text-shadow:
      0 0 5px rgba(57, 255, 20, 0.38),
      0 0 10px rgba(57, 255, 20, 0.2);
  }
  58% {
    opacity: 1;
    text-shadow:
      0 0 7px rgba(57, 255, 20, 0.55),
      0 0 16px rgba(57, 255, 20, 0.35);
  }
  73% {
    opacity: 0.95;
    text-shadow:
      0 0 4px rgba(57, 255, 20, 0.33),
      0 0 9px rgba(57, 255, 20, 0.18);
  }
  88% {
    opacity: 0.98;
    text-shadow:
      0 0 6px rgba(57, 255, 20, 0.45),
      0 0 12px rgba(57, 255, 20, 0.25);
  }
}

/* Responsive improvements for smaller screens */
@media (max-width: 600px) {
  .title {
    font-size: 3em;
  }
  .noize-container {
    font-size: 2.5rem;
  }
  .navbar a {
    font-size: 1.2em;
    padding: 7px 10px;
  }
  .skull {
    width: 120px;
  }
}