/* ==========================================================================
   CUTIE COLLECTIVE - Vertical Liquid Melted Typography Design System
   ========================================================================== */

:root {
  --bg-deep: #06070a;
  --text-main: #ffffff;
  --text-muted: #8a929e;
  --font-editorial: 'Space Grotesk', monospace;
  --font-bold: 'Syne', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-editorial);
}

body.aura-theme {
  background-color: #06070a;
}

/* 3D WebGL Canvas Layer */
#webgl-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  contain: strict;
}

#canvas-3d {
  width: 100%;
  height: 100%;
  display: block;
}

/* Silky-Smooth Y2K Liquid Mesh Gradient Lavalamp Background */
.aura-mesh-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  background-color: #06070a;
  contain: strict;
}

.aura-blob {
  position: absolute;
  filter: blur(55px);
  opacity: 0.82;
  mix-blend-mode: screen;
  will-change: transform, border-radius;
  transform: translate3d(0, 0, 0);
}

.aura-cyan {
  width: 55vw;
  height: 55vh;
  top: -10vh;
  left: -5vw;
  background: radial-gradient(circle at center, #00f0ff 0%, #0066ff 45%, transparent 75%);
  animation: lavaBlob1 14s infinite alternate ease-in-out;
}

.aura-magenta {
  width: 60vw;
  height: 60vh;
  bottom: -15vh;
  right: -5vw;
  background: radial-gradient(circle at center, #ff007f 0%, #aa00ff 45%, transparent 75%);
  animation: lavaBlob2 18s infinite alternate ease-in-out;
}

.aura-yellow {
  width: 48vw;
  height: 48vh;
  top: 20vh;
  right: 10vw;
  background: radial-gradient(circle at center, #ffea00 0%, #ff6600 45%, transparent 75%);
  animation: lavaBlob3 13s infinite alternate ease-in-out;
}

.aura-purple {
  width: 50vw;
  height: 50vh;
  bottom: 10vh;
  left: 10vw;
  background: radial-gradient(circle at center, #8000ff 0%, #00e5ff 45%, transparent 75%);
  animation: lavaBlob4 16s infinite alternate ease-in-out;
}

.aura-green {
  width: 42vw;
  height: 42vh;
  top: 35vh;
  left: 30vw;
  background: radial-gradient(circle at center, #a6ff00 0%, #00ffaa 45%, transparent 75%);
  animation: lavaBlob5 15s infinite alternate ease-in-out;
}

/* Mouse-Following Nearest Lavalamp Blob */
.aura-cursor {
  width: 45vw;
  height: 45vh;
  top: 0;
  left: 0;
  background: radial-gradient(circle at center, #00f0ff 0%, #ff007f 40%, transparent 75%);
  opacity: 0.88;
  filter: blur(50px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@keyframes lavaBlob1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  50% {
    transform: translate3d(25vw, 20vh, 0) scale(1.25) rotate(90deg);
    border-radius: 60% 40% 30% 70% / 50% 30% 70% 50%;
  }
  100% {
    transform: translate3d(5vw, 35vh, 0) scale(0.95) rotate(180deg);
    border-radius: 30% 70% 50% 50% / 30% 60% 40% 70%;
  }
}

@keyframes lavaBlob2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 60% 40% 50% 50% / 30% 60% 40% 70%;
  }
  50% {
    transform: translate3d(-22vw, -25vh, 0) scale(1.2) rotate(-90deg);
    border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
  }
  100% {
    transform: translate3d(-12vw, -40vh, 0) scale(0.85) rotate(-180deg);
    border-radius: 70% 30% 40% 60% / 40% 50% 50% 60%;
  }
}

@keyframes lavaBlob3 {
  0% {
    transform: translate3d(0, 0, 0) scale(0.85) rotate(0deg);
    border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
  }
  50% {
    transform: translate3d(-20vw, 22vh, 0) scale(1.3) rotate(120deg);
    border-radius: 70% 30% 60% 40% / 60% 40% 50% 50%;
  }
  100% {
    transform: translate3d(-30vw, -10vh, 0) scale(0.9) rotate(240deg);
    border-radius: 40% 60% 50% 50% / 50% 30% 70% 50%;
  }
}

@keyframes lavaBlob4 {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 30% 70% 60% 40% / 50% 50% 40% 60%;
  }
  50% {
    transform: translate3d(22vw, -18vh, 0) scale(1.15) rotate(-120deg);
    border-radius: 60% 40% 40% 60% / 40% 60% 60% 40%;
  }
  100% {
    transform: translate3d(32vw, 15vh, 0) scale(0.9) rotate(-240deg);
    border-radius: 50% 50% 70% 30% / 60% 40% 50% 50%;
  }
}

@keyframes lavaBlob5 {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8) rotate(0deg);
    opacity: 0.4;
    border-radius: 50%;
  }
  50% {
    transform: translate3d(-15vw, -20vh, 0) scale(1.35) rotate(180deg);
    opacity: 0.85;
    border-radius: 30% 70% 50% 50% / 60% 40% 60% 40%;
  }
  100% {
    transform: translate3d(15vw, 20vh, 0) scale(0.9) rotate(360deg);
    opacity: 0.5;
    border-radius: 60% 40% 70% 30% / 40% 60% 50% 50%;
  }
}

/* Ultra-Soft Grain Overlay */
.grain-overlay-soft {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at center, transparent 35%, rgba(4, 5, 7, 0.7) 100%);
}