/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
  --glass: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.1);
  --accent: #00f2ff;
}

/* This creates the drifting water background */
.bg-fluid {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: radial-gradient(circle at 50% 50%, #001a1f 0%, #050505 100%);
  z-index: -1;
}
/* Add this at the top to ensure colors show up */
* { box-sizing: border-box; }

/* Pure CSS Grainy Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.05; /* Increase this to 0.1 if you want more visible grain */
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3ExternalLink %3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* --- THE VIBE: MIXED MEDIA WATER --- */
:root {
  --glass: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.15);
  --accent: #00f2ff; /* Neon water blue */
}

body {
  margin: 0;
  background: #050505;
  color: #e0e0e0;
  font-family: "Helvetica", "Arial", sans-serif;
  overflow-x: hidden;
}

/* The Grainy Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.08;
  pointer-events: none;
  z-index: 999;
}

/* The Fluid Background */
.bg-fluid {
  position: fixed;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, #003b46 0%, #000 70%);
  animation: drift 20s infinite alternate;
  z-index: -1;
}

@keyframes drift {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(5deg) scale(1.1); }
}

/* Mixed Media Window */
.window {
  background: var(--glass);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border);
  margin: 40px auto;
  max-width: 900px;
  padding: 30px;
  position: relative;
  box-shadow: 20px 20px 60px rgba(0,0,0,0.5);
}

/* Virgil/Web3 Bold Text Accents */
.label {
  display: inline-block;
  background: #fff;
  color: #000;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

img, video {
  max-width: 100%;
  filter: grayscale(20%) contrast(110%);
  border: 1px solid var(--border);
}
/* --- DRAGGABLE PLAYER STYLES --- */
#music-player {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 242, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
  z-index: 10000;
  cursor: grab;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#music-player:active { cursor: grabbing; }

.player-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.play-btn {
  background: #00f2ff;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wave-bar {
  flex-grow: 1;
  height: 20px;
  background: rgba(0, 242, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Animated "Fluid" Visualizer Placeholder */
.wave-bar::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #00f2ff, transparent);
  left: -100%;
  animation: wave 2s infinite linear;
}

@keyframes wave {
  0% { left: -100%; }
  100% { left: 100%; }
}