/* Override this file to customise the theme's CSS for your site */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap");
@font-face {
  font-family: "DIN 6776";
  src: url("/fonts/DIN-6776.woff2") format("woff2"),
    url("/fonts/DIN-6776.woff") format("woff"),
    url("/fonts/DIN-6776.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  /* If you add bold/italic variants, declare more @font-face blocks */
}

body {
  margin: 0;
  padding: 2rem;
  background-color: #000;
  color: #ff6acb;
  font-family: "Share Tech Mono", "Rajdhani", "DIN 6776", "IBM Plex Mono",
    "DIN 1451 Mittelschrift", sans-serif;
  letter-spacing: 0.03em;
  text-align: center;
}

/* Universal diffuse glow */
body,
body * {
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.25), 0 0 10px rgba(0, 255, 255, 0.13),
    0 0 20px rgba(0, 255, 255, 0.08);
}

/* Stronger heading glow */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.45), 0 0 14px rgba(0, 255, 255, 0.25),
    0 0 30px rgba(0, 255, 255, 0.12);
}

/* Hero section center */
.hero {
  margin-top: 60px;
}

.hero-sub {
  font-size: 1.2rem;
  color: #1fb8ff; /* bright blue */
  margin-top: 2rem; /* extra space below banner */
  /* Teal with subtle magenta glow */
  text-shadow: 0 0 2px rgba(31, 184, 255, 0.75), 0 0 4px rgba(255, 0, 255, 0.12);
  transition: text-shadow 0.25s ease;
}

.hero-sub a {
  color: #1fb8ff;
  text-decoration: none;
}

.hero-sub a:hover {
  color: #ffffff;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.95), 0 0 8px rgba(255, 0, 255, 0.4);
}

/* Hide top brand on homepage (prevent duplicate logo) */
body.home .site-brand {
  display: none;
}

/* Scanline overlay */
.scanline-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: scan 8s linear infinite;
  z-index: 1;
}

@keyframes scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

/* Pixel grid overlay */
.pixel-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 255, 0.05) 2px,
      rgba(0, 255, 255, 0.05) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 255, 0.05) 2px,
      rgba(0, 255, 255, 0.05) 4px
    );
  z-index: 2;
}

/* Content layers above overlays */
header,
main,
footer,
.main-container {
  position: relative;
  z-index: 10;
}

/* Link styling & hover */
a {
  position: relative;
  color: #ff92e2;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

a:hover {
  color: #ffffff;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 255, 0.6);
}

/* Streaking laser line (title only) */
.hero-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -120%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, #00ffff 0%, #ffffff 50%, #00ffff 100%);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(0, 255, 255, 0.7);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

/* Trigger laser on hover */
.hero-link:hover::after {
  animation: streak-move 0.45s linear forwards;
}

@keyframes streak-move {
  0% {
    left: -120%;
    opacity: 0;
  }
  /* Keep hidden until the line is just about to enter the link */
  40% {
    opacity: 0;
  }
  /* Instantly reveal right before entry */
  41% {
    opacity: 0.85;
  }
  /* Stay visible while traversing the link */
  90% {
    opacity: 0.85;
  }
  /* Fade out as it exits on the right */
  100% {
    left: 120%;
    opacity: 0;
  }
}

/* Site brandg the  styling */
.site-brand a {
  font-size: 1.2rem;
  color: #ff92e2;
  text-decoration: none;
}
.site-brand a:hover {
  color: #ffffff;
}

/* Pixelated videogame-style teal glow utility class */
.glow-pixel {
  position: relative;
}

.glow-pixel::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(200% + 6px);
  height: calc(100% + 4px);
  background: radial-gradient(
    circle,
    rgba(0, 255, 255, 0.6) 0%,
    rgba(0, 255, 255, 0) 70%
  );
  pointer-events: none;
  filter: drop-shadow(0 0 2px #0ff) drop-shadow(0 0 4px #0ff);
  image-rendering: pixelated;
}

.hero-link {
  color: #ff00ff;
  font-style: italic; /* italicize Dashcrystal */
  text-shadow: 0 0 6px rgba(255, 146, 226, 0.6),
    0 0 18px rgba(255, 146, 226, 0.3);
  transition: color 0.25s ease, text-shadow 0.25s ease;
  letter-spacing: 0.08em;
}

/* Header and footer themed colors */
.site-header,
.site-header a {
  color: #1fb8ff;
}

.site-footer-blue {
  color: #1fb8ff;
}

.site-footer-pink {
  color: #ff6acb;
}

/* Per-letter hover for hero subtitle */
.hero-sub span {
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}

.hero-sub span:hover {
  transform: translateY(-1px) scale(1.05);
  color: #d0e7ff;
  text-shadow: 0 0 3px rgba(208, 231, 255, 0.6), 0 0 6px rgba(0, 255, 255, 0.35);
}

/* Enhanced Dashcrystal title glow */
.hero-link {
  color: #ff00ff;
  text-shadow: 0 0 6px rgba(255, 146, 226, 0.6),
    0 0 18px rgba(255, 146, 226, 0.3);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.hero-sub a.gold-link:hover {
  color: #ffd700;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 223, 0, 0.7);
}

/* Hide header entirely on home so nothing appears above Dashcrystal */
body.home .site-header {
  display: none;
}

/* Easter egg styles */
.easter-hidden {
  display: none;
  transform: rotate(4deg);
}

.easter-visible {
  display: inline-block !important;
}

/* Shimmering gold link */
.gold-link {
  position: relative;
  background: linear-gradient(90deg, #ffce3d 0%, #fff7c4 50%, #ffce3d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.6), 0 0 8px rgba(255, 255, 200, 0.4);
}

.gold-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
  animation: gold-shine 2.4s linear infinite;
}

@keyframes gold-shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* removed reveal-gold animation */

.hero-sub .easter-hidden {
  display: none;
}

@keyframes gold-pulse {
  0% {
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 14px rgba(255, 215, 0, 1);
  }
  100% {
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.4);
  }
}

.gold-dot {
  animation: gold-pulse 6s ease-in-out infinite;
}

/* Ripple static shock */
.shock {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(0, 255, 255, 0.2) 0%,
    rgba(0, 255, 255, 0) 70%
  );
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.5;
}

.hero-tag {
  font-size: 1rem;
  color: #ff92e2;
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 3px rgba(255, 146, 226, 0.6),
    0 0 6px rgba(255, 146, 226, 0.25);
}

.hero h1 {
  margin: 0.5rem 0 0.6rem;
}

#golden-labs-banner {
  margin: 0.8rem 0 1rem;
}

#golden-labs-banner .alt {
  display: none;
}
#golden-labs-banner:hover .main {
  display: none;
}
#golden-labs-banner:hover .alt {
  display: inline;
}

.hero-sub {
  margin-top: 2.5rem;
}

/* Clickable golden background dot */
.gold-dot {
  background: #ffce3d !important;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.8);
  cursor: pointer;
}

/* Golden Ridge Labs banner */
#golden-labs-banner {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  font-weight: 600;
  background: linear-gradient(90deg, #ffce3d 0%, #fff7c4 50%, #ffce3d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.8), 0 0 12px rgba(255, 215, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  animation: labs-fade 1s ease forwards;
  z-index: 20;
}

@keyframes labs-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.about-container {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 1rem;
}

.blue-dot:hover,
.gold-dot:hover {
  transform: scale(1.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.blue-dot {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gold-dot {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pink-dot,
.white-dot,
.blue-dot {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pink-dot:hover,
.white-dot:hover {
  transform: scale(1.4);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

#hero-title-adjust {
}

#golden-labs-banner a {
  text-decoration: none;
  color: #ffce3d;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.8), 0 0 12px rgba(255, 215, 0, 0.5);
  background: none;
}
