/* ==========================================================================
   ARTOMETRICS — SHOEGAZE LAVA-LAMP GRADIENT & TACTILE DROP SHADOW SYSTEM
   Palette: 3D Glasses / Slurpee (Hot Cherry Red #E60000 + Cobalt Blue #3367E7)
   Textures: Analog Film Grain (feTurbulence) + Diffused Fluid Blobs
   Tactile: Deep Drop Shadows + Crisp Morphic Highlights
   ========================================================================== */

/* ── Moving Lava-Lamp Stage ────────────────────────────────────────── */
.shoegaze-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}

.shoegaze-stage--dark {
  background-color: #111212;
}

.shoegaze-stage--light {
  background-color: #F4F1EA;
}

/* ── Fluid Orbs ────────────────────────────────────────────────────── */
.shoegaze-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

.shoegaze-stage--light .shoegaze-orb {
  mix-blend-mode: multiply;
}

/* Orb 1: Warm Gold (#A8862E) */
.shoegaze-orb--red {
  width: min(75vw, 680px);
  height: min(75vw, 680px);
  top: -10%;
  left: -8%;
  background: radial-gradient(circle, rgba(168, 134, 46, 0.28) 0%, rgba(168, 134, 46, 0.12) 45%, rgba(168, 134, 46, 0) 70%);
  filter: blur(85px);
  animation: shoegaze-drift-red 26s ease-in-out infinite alternate;
}

.shoegaze-stage--light .shoegaze-orb--red {
  background: radial-gradient(circle, rgba(168, 134, 46, 0.14) 0%, rgba(168, 134, 46, 0.05) 50%, rgba(168, 134, 46, 0) 75%);
  filter: blur(75px);
}

/* Orb 2: Pale Champagne Gold (#D8C6A0) */
.shoegaze-orb--blue {
  width: min(85vw, 780px);
  height: min(85vw, 780px);
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle, rgba(216, 198, 160, 0.32) 0%, rgba(216, 198, 160, 0.14) 50%, rgba(216, 198, 160, 0) 72%);
  filter: blur(95px);
  animation: shoegaze-drift-blue 32s ease-in-out infinite alternate;
}

.shoegaze-stage--light .shoegaze-orb--blue {
  background: radial-gradient(circle, rgba(216, 198, 160, 0.16) 0%, rgba(216, 198, 160, 0.06) 50%, rgba(216, 198, 160, 0) 75%);
  filter: blur(80px);
}

/* Orb 3: Deep Bronze / Earth Glow (#7D6222) */
.shoegaze-orb--indigo {
  width: min(60vw, 550px);
  height: min(60vw, 550px);
  top: 40%;
  left: 25%;
  background: radial-gradient(circle, rgba(125, 98, 34, 0.25) 0%, rgba(125, 98, 34, 0.09) 50%, rgba(125, 98, 34, 0) 70%);
  filter: blur(80px);
  animation: shoegaze-drift-indigo 22s ease-in-out infinite alternate;
}

.shoegaze-stage--light .shoegaze-orb--indigo {
  background: radial-gradient(circle, rgba(125, 98, 34, 0.10) 0%, rgba(125, 98, 34, 0.03) 50%, rgba(125, 98, 34, 0) 75%);
  filter: blur(70px);
}

/* Orb 4: Subtle Warm Paper Glow (#EBE8E1) */
.shoegaze-orb--cyan {
  width: min(50vw, 460px);
  height: min(50vw, 460px);
  bottom: 20%;
  left: -5%;
  background: radial-gradient(circle, rgba(214, 211, 204, 0.22) 0%, rgba(214, 211, 204, 0.08) 50%, rgba(214, 211, 204, 0) 70%);
  filter: blur(90px);
  animation: shoegaze-drift-cyan 28s ease-in-out infinite alternate;
}

.shoegaze-stage--light .shoegaze-orb--cyan {
  background: radial-gradient(circle, rgba(214, 211, 204, 0.12) 0%, rgba(214, 211, 204, 0.03) 50%, rgba(214, 211, 204, 0) 75%);
  filter: blur(75px);
}

/* ── Drifting Lava-Lamp Keyframes ──────────────────────────────────── */
@keyframes shoegaze-drift-red {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(28vw, 18vh, 0) scale(1.15);
  }
  66% {
    transform: translate3d(12vw, 38vh, 0) scale(0.92);
  }
  100% {
    transform: translate3d(32vw, 8vh, 0) scale(1.08);
  }
}

@keyframes shoegaze-drift-blue {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  35% {
    transform: translate3d(-30vw, -22vh, 0) scale(1.18);
  }
  70% {
    transform: translate3d(-15vw, -45vh, 0) scale(0.88);
  }
  100% {
    transform: translate3d(-38vw, -12vh, 0) scale(1.12);
  }
}

@keyframes shoegaze-drift-indigo {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-18vw, 15vh, 0) scale(1.22);
  }
  100% {
    transform: translate3d(15vw, -20vh, 0) scale(0.9);
  }
}

@keyframes shoegaze-drift-cyan {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  45% {
    transform: translate3d(25vw, -25vh, 0) scale(1.1);
  }
  100% {
    transform: translate3d(10vw, 18vh, 0) scale(0.95);
  }
}

/* ── Analog Noise Grain Layer (SVG feTurbulence) ───────────────────── */
.shoegaze-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grainFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grainFilter)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.38;
}

.shoegaze-stage--light .shoegaze-grain {
  mix-blend-mode: multiply;
  opacity: 0.24;
}

/* ── Atmospheric Depth Vignette ────────────────────────────────────── */
.shoegaze-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(6, 7, 11, 0.65) 100%);
}

.shoegaze-stage--light .shoegaze-vignette {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 60%, rgba(240, 240, 236, 0.5) 100%);
}

/* ── Reduced Motion Accessibility ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .shoegaze-orb {
    animation: none !important;
  }
}

/* ==========================================================================
   FLOATING TACTILE CARDS & DROP SHADOWS (Morph / Elevation System)
   ========================================================================== */

/* ── Floating Box with Deep Drop Shadow (Image 2 style) ────────────── */
.art-floating-box {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  box-shadow: 0 10px 0 #0A0A0A, 0 16px 28px -6px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.art-floating-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 0 #0A0A0A, 0 22px 34px -6px rgba(0, 0, 0, 0.24);
  border-color: rgba(51, 103, 231, 0.35);
}

html[data-theme="dark"] .art-floating-box {
  background: rgba(14, 16, 24, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 0 #000000, 0 18px 32px -4px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(51, 103, 231, 0.15);
}

html[data-theme="dark"] .art-floating-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 0 #000000, 0 24px 38px -4px rgba(0, 0, 0, 0.85), 0 0 16px rgba(51, 103, 231, 0.25);
  border-color: rgba(107, 148, 255, 0.45);
}

/* ── Stat Card Pill Badges ─────────────────────────────────────────── */
.art-stat-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(51, 103, 231, 0.08);
  color: #3367E7;
  border: 1px solid rgba(51, 103, 231, 0.18);
  text-transform: capitalize;
}

html[data-theme="dark"] .art-stat-pill {
  background: rgba(51, 103, 231, 0.16);
  color: #8BAAFE;
  border-color: rgba(51, 103, 231, 0.35);
}

.art-stat-pill--red {
  background: rgba(230, 0, 0, 0.08);
  color: #E60000;
  border-color: rgba(230, 0, 0, 0.18);
}

html[data-theme="dark"] .art-stat-pill--red {
  background: rgba(230, 0, 0, 0.16);
  color: #FF5A5A;
  border-color: rgba(230, 0, 0, 0.35);
}

/* ── Stat Card Big Metric ──────────────────────────────────────────── */
.art-stat-value {
  font-family: 'Anton', 'DM Sans', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #3367E7;
  margin: 0.85rem 0 0.5rem;
}

html[data-theme="dark"] .art-stat-value {
  color: #6B94FF;
}

.art-stat-value--red {
  color: #E60000;
}

html[data-theme="dark"] .art-stat-value--red {
  color: #FF4D4D;
}

/* ── Stat Card Body Text ───────────────────────────────────────────── */
.art-stat-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1C1C1E;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

html[data-theme="dark"] .art-stat-body {
  color: #E2E2E6;
}

/* ── Stat Card Citation Link ───────────────────────────────────────── */
.art-stat-citation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: #3367E7;
  text-decoration: none;
  transition: color 0.15s;
  margin-top: auto;
}

.art-stat-citation:hover {
  text-decoration: underline;
  color: #E60000;
}

html[data-theme="dark"] .art-stat-citation {
  color: #8BAAFE;
}

html[data-theme="dark"] .art-stat-citation:hover {
  color: #FF6666;
}

/* ── Article Body Drop Shadows Integration ─────────────────────────── */
.artometrics-article-body .art-chart {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 0 #0A0A0A, 0 14px 24px -4px rgba(0, 0, 0, 0.12) !important;
  padding: 1rem 1rem 0.5rem !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.artometrics-article-body .art-chart:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 0 #0A0A0A, 0 18px 28px -4px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .artometrics-article-body .art-chart {
  background: rgba(14, 16, 24, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 0 #000000, 0 16px 28px -4px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="dark"] .artometrics-article-body .art-chart:hover {
  box-shadow: 0 11px 0 #000000, 0 20px 32px -4px rgba(0, 0, 0, 0.8) !important;
}

/* Callout and Quote Floating Boxes */
.artometrics-article-body blockquote,
.artometrics-article-body .art-callout {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-left: 5px solid #3367E7 !important;
  border-radius: 8px 12px 12px 8px !important;
  box-shadow: 0 6px 0 #0A0A0A, 0 10px 18px -3px rgba(0, 0, 0, 0.1) !important;
  padding: 1.2rem 1.5rem !important;
  margin: 1.8rem auto !important;
}

html[data-theme="dark"] .artometrics-article-body blockquote,
html[data-theme="dark"] .artometrics-article-body .art-callout {
  background: rgba(16, 18, 26, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 5px solid #6B94FF !important;
  box-shadow: 0 6px 0 #000000, 0 12px 22px -3px rgba(0, 0, 0, 0.6) !important;
}

/* Code exhibit floating box */
.artometrics-article-body .art-code-pre {
  background: #0E1018 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 4px solid #3367E7 !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 6px 0 #000000, 0 12px 20px -3px rgba(0, 0, 0, 0.5) !important;
  color: #E2E8F0 !important;
}