/* ==========================================================================
   quag — Work in Progress
   A quiet, glowing loop of a Quagsire, floating in an artificial pond.
   ========================================================================== */

:root {
  --bg-void: #05090d;
  --bg-deep: #071820;
  --teal: #4fd1c5;
  --teal-soft: #8fe3da;
  --purple: #8b7bd8;
  --purple-soft: #b7a9f2;
  --mud: #3a2f4d;
  --cream: #ecd9b8;
  --text-faint: #8fa3ad;

  --text-xs: clamp(0.7rem, 0.68rem + 0.15vw, 0.8rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 15%, var(--bg-deep) 0%, var(--bg-void) 65%, #020304 100%);
  font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-faint);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------- */
/* Ambient aurora blobs                                                   */
/* --------------------------------------------------------------------- */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: blur(60px) saturate(1.15);
  mix-blend-mode: screen;
  opacity: 0.75;
}

.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.blob--a {
  width: 60vmax;
  height: 60vmax;
  left: -15vmax;
  top: -20vmax;
  background: radial-gradient(circle, var(--teal) 0%, transparent 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.blob--b {
  width: 50vmax;
  height: 50vmax;
  right: -18vmax;
  top: 5vmax;
  background: radial-gradient(circle, var(--purple) 0%, transparent 70%);
  animation: drift-b 32s ease-in-out infinite alternate;
}

.blob--c {
  width: 45vmax;
  height: 45vmax;
  left: 20vw;
  bottom: -22vmax;
  background: radial-gradient(circle, #2f8f8a 0%, transparent 72%);
  animation: drift-c 22s ease-in-out infinite alternate;
}

@keyframes drift-a {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(8vmax, 6vmax) scale(1.15);
  }
}
@keyframes drift-b {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-6vmax, 8vmax) scale(0.9);
  }
}
@keyframes drift-c {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(5vmax, -5vmax) scale(1.1);
  }
}

/* --------------------------------------------------------------------- */
/* Faint giant echo of the official artwork, for depth                    */
/* --------------------------------------------------------------------- */

.echo {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(140vw, 1400px);
  transform: translate(-50%, -46%) scale(1);
  opacity: 0.05;
  filter: grayscale(1) blur(2px) brightness(1.6);
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: echo-breathe 18s ease-in-out infinite;
}

@keyframes echo-breathe {
  0%,
  100% {
    transform: translate(-50%, -46%) scale(1);
    opacity: 0.045;
  }
  50% {
    transform: translate(-50%, -46%) scale(1.04);
    opacity: 0.075;
  }
}

/* --------------------------------------------------------------------- */
/* Stage / pond                                                           */
/* --------------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pond {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--teal) 10%, transparent) 0%,
    color-mix(in srgb, #0a2b30 65%, transparent) 45%,
    #061014 100%
  );
  border-top: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  box-shadow: 0 -20px 60px -20px color-mix(in srgb, var(--teal) 25%, transparent) inset;
}

.pond__waves {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 26px;
  overflow: hidden;
}

.wave {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 220px 100%;
}

.wave--1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26'><path d='M0,13 C27.5,2 27.5,24 55,13 C82.5,2 82.5,24 110,13 C137.5,2 137.5,24 165,13 C192.5,2 192.5,24 220,13' fill='none' stroke='%238fe3da' stroke-width='1.6' stroke-opacity='0.65'/></svg>");
  animation: wave-scroll 9s linear infinite;
}

.wave--2 {
  top: 7px;
  opacity: 0.55;
  background-size: 300px 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26'><path d='M0,15 C37.5,4 37.5,26 75,15 C112.5,4 112.5,26 150,15 C187.5,4 187.5,26 225,15 C262.5,4 262.5,26 300,15' fill='none' stroke='%23b7a9f2' stroke-width='1.4' stroke-opacity='0.5'/></svg>");
  animation: wave-scroll 13s linear infinite reverse;
}

@keyframes wave-scroll {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -220px;
  }
}

/* --------------------------------------------------------------------- */
/* The Quagsire itself                                                    */
/* --------------------------------------------------------------------- */

.quag {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-6%);
}

.quag__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32rem;
  height: 32rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--teal) 55%, transparent) 0%,
    color-mix(in srgb, var(--purple) 30%, transparent) 40%,
    transparent 72%
  );
  filter: blur(28px);
  animation: halo-pulse 5.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes halo-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.quag__sprite,
.quag__ghost,
.quag__reflection {
  width: clamp(220px, 30vw, 460px);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.quag__sprite {
  position: relative;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--teal) 60%, transparent))
    drop-shadow(0 0 46px color-mix(in srgb, var(--purple) 35%, transparent));
  animation: bob 4.2s ease-in-out infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-0.6deg);
  }
  50% {
    transform: translateY(-14px) rotate(0.6deg);
  }
}

/* Chromatic "echo" ghosts trailing the sprite — subtle glitch-art feel */
.quag__ghost {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}

.quag__ghost--1 {
  filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(500%)
    hue-rotate(150deg) brightness(1.1);
  opacity: 0.35;
  animation: ghost-drift-1 6.4s ease-in-out infinite;
}

.quag__ghost--2 {
  filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(600%)
    hue-rotate(230deg) brightness(1.05);
  opacity: 0.28;
  animation: ghost-drift-2 7.8s ease-in-out infinite;
}

@keyframes ghost-drift-1 {
  0%,
  100% {
    transform: translate(6px, 2px) translateY(0);
  }
  50% {
    transform: translate(10px, -1px) translateY(-14px);
  }
}
@keyframes ghost-drift-2 {
  0%,
  100% {
    transform: translate(-6px, -2px) translateY(0);
  }
  50% {
    transform: translate(-9px, 1px) translateY(-14px);
  }
}

/* Reflection floating below, faded into the pond */
.quag__reflection {
  position: absolute;
  top: 100%;
  left: 0;
  transform: scaleY(-1);
  opacity: 0.22;
  filter: blur(2px) brightness(0.8);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 70%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 70%);
  animation: bob 4.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------- */
/* Rising bubbles                                                         */
/* --------------------------------------------------------------------- */

.bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -5%;
  left: var(--x, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in srgb, var(--teal-soft) 90%, white) 0%,
    color-mix(in srgb, var(--teal) 60%, transparent) 55%,
    transparent 100%
  );
  opacity: 0;
  animation: rise var(--dur, 10s) linear var(--delay, 0s) infinite;
}

@keyframes rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    opacity: var(--opacity, 0.55);
  }
  85% {
    opacity: var(--opacity, 0.55);
  }
  100% {
    transform: translate(var(--drift, 20px), -105vh);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------- */
/* Grain + vignette                                                       */
/* --------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 45%, transparent 45%, rgba(2, 4, 6, 0.75) 100%);
}

/* --------------------------------------------------------------------- */
/* Footer                                                                  */
/* --------------------------------------------------------------------- */

.wip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space, 1.1rem);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: none;
}

.wip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-soft);
  box-shadow: 0 0 6px var(--teal);
  animation: dot-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.wip p {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-faint) 75%, transparent);
  opacity: 0.55;
}

/* --------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------- */
/* Small screens                                                          */
/* --------------------------------------------------------------------- */

@media (max-width: 480px) {
  .quag__halo {
    width: 22rem;
    height: 22rem;
  }
  .pond {
    height: 36%;
  }
}