@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

:root {
  --neon-text-color: #08f;
}

/* BASE BACKGROUND (FALLBACK) */
.sunset-bg {
  background: url('../img/fine_pixel_synthwave_beach.png') no-repeat center bottom fixed;
  background-size: cover;
}

/* ANIMATED PIXEL CANVAS BACKGROUND */
.pixel-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  background-color: #1a0033;
}

/* DARKEN THE BACKGROUND SO THE NEON AND WHITE TEXT POP */
.sunset-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
  pointer-events: none;
}

/* NEON TITLE WITH GRADIENT */

.tsunami-title-container {
  perspective: 1000px;
}

.tsunami-neon-title {
  font-family: "Press Start 2P", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(3.6rem, 8vw, 8rem);
  line-height: 1.2;
  
  /* Slant the font slightly */
  transform: skewX(-8deg) rotate(-2deg);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;

  /* Tri-color gradient matching Neon Beach Sessions */
  background: linear-gradient(to bottom, #00f0ff 0%, #ff8c00 50%, #ff007f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* Use drop-shadow filter instead of text-shadow for gradient text glow */
  filter: drop-shadow(0 0 0.2rem rgba(255, 255, 255, 0.6)) drop-shadow(0 0 1rem rgba(0, 240, 255, 0.8)) drop-shadow(0 0 2.5rem rgba(255, 0, 127, 0.8));
}

.tsunami-neon-title:hover {
  /* Lift up and pop out with a hard 3D shadow similar to stippling.app */
  transform: skewX(-8deg) rotate(-2deg) translate(-5px, -10px);
  filter: drop-shadow(8px 12px 0px #ff007f) drop-shadow(0 0 0.2rem rgba(255, 255, 255, 0.8)) drop-shadow(0 0 2rem rgba(0, 240, 255, 1));
}

.tsunami-neon-title-flicker {
  animation: tsunami-flicker 1.6s infinite alternate;
}

@keyframes tsunami-flicker {

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0.3rem rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1.5rem rgba(0, 240, 255, 1)) drop-shadow(0 0 3.5rem rgba(255, 0, 127, 1));
  }

  20%,
  24%,
  55% {
    opacity: 0.8;
    filter: drop-shadow(0 0 0.1rem rgba(255, 255, 255, 0.4)) drop-shadow(0 0 0.5rem rgba(0, 240, 255, 0.5)) drop-shadow(0 0 1.5rem rgba(255, 0, 127, 0.5));
  }
}

.tsunami-neon-title-flicker:hover {
  /* Stop the flicker on hover to emphasis the solid 3D shadow */
  animation: none;
}

/* MARQUEE BAR */

.tsunami-ticker {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(4px);
  border-top: 2px solid #ff1869 !important;
  color: #ff1869 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  z-index: 9999;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.tsunami-ticker-track {
  display: flex;
  width: max-content;
  animation: tsunami-marquee 40s linear infinite;
}

.tsunami-ticker-inner {
  display: flex;
  white-space: nowrap;
  padding: 0.3rem 2.8rem;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 900;
}

.tsunami-ticker-inner span {
  margin-right: 4rem;
}

.tsunami-ticker a {
  color: #ff1869 !important;
  text-decoration: underline;
}

@keyframes tsunami-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* SPACE FOR BAR SO CONTENT DOESN'T HIDE */

/* REMOVED BUGGY PADDING THAT CAUSED SCROLLBAR */
body {
  margin: 0;
  padding: 0;
}

/* RETRO ARCADE NAVIGATION */

.floating-nav {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2rem;
  z-index: 50;
}

.nav-btn {
  position: relative;
  z-index: 2;
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: 0.65rem;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 2px 2px 0px #000;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.nav-btn:hover {
  color: #ff007f;
  text-shadow: 2px 2px 0px #000, 0 0 10px #ff007f;
  transform: translateY(-2px);
}

.nav-btn.active {
  color: #00f0ff;
  text-shadow: 2px 2px 0px #000, 0 0 10px #00f0ff;
}

/* PIXEL TYLER */

.tsunami-character {
  position: fixed;
  bottom: 60px; /* Accounts for 14px of transparent padding at the bottom of the image */
  left: 1rem;
  z-index: 10000;
  pointer-events: none;
}

.tsunami-character img {
  height: 420px;
  width: auto;
  image-rendering: pixelated;
}

@media (max-width: 900px) {
  .tsunami-character img {
    height: 340px;
  }
}

@media (max-width: 600px) {
  .tsunami-character {
    bottom: 60px;
    left: 0.6rem;
  }

  .tsunami-character img {
    height: 300px;
  }
}

/* CSS HALFTONE / STIPPLE PATTERN */
.bg-stipple-pattern {
  background-color: transparent;
  background-image: radial-gradient(#06eef9 1px, transparent 1px);
  background-size: 12px 12px;
  /* Add an inner shadow or gradient to make the dots fade out toward the center */
  mask-image: radial-gradient(circle at center, transparent 20%, black 80%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 20%, black 80%);
  opacity: 0.15;
  pointer-events: none;
}

/* Add a glowing glass card for the About section content */
.glass-stipple-card {
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(6, 238, 249, 0.15);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(6, 238, 249, 0.05);
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
}