/**
 * @pragcore/fluid-interface - Universal Fluid CSS Architecture
 *
 * Implements the styling layer for:
 * 1. Substrate water canvas & optical refraction lens
 * 2. 3D Floating rigid bodies (cards, panels, badges)
 * 3. Multi-density semiliquid droplet hierarchy (dense, glycerin, translucent oil)
 * 4. Specular meniscus rims, radial highlights, and volumetric inner depth
 * 5. Complete prefers-reduced-motion accessibility
 */

/* 1. Fluid Substrate Canvas & Liquid Lens */
.fluid-substrate-canvas,
.water-ripple-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9995;
}

.water-ripple-lens {
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: normal;
}

/* 2. Floating Rigid Bodies (3D Heave, Pitch, Roll on Liquid Surface) */
.is-floating-object,
.fluid-floating-body {
  --fluid-float-transform: translate3d(0, 0, 0);
  transform: var(--float-transform, var(--fluid-float-transform, translate3d(0, 0, 0)));
  will-change: transform;
  transform-style: preserve-3d;
}

/* 3. Multi-Density Semiliquid Droplets */
.has-magnetic-jelly,
.fluid-droplet {
  --jelly-transform: translateZ(0);
  --fluid-droplet-transform: translateZ(0);
  --float-transform: translate3d(0, 0, 0);
  --jelly-origin: 50% 50%;
  --fluid-origin: 50% 50%;
  --jelly-content-tx: 0px;
  --jelly-content-ty: 0px;
  --jelly-shadow-x: 0px;
  --jelly-shadow-y: 0px;
  --jelly-hl-x: 50%;
  --jelly-hl-y: 50%;
  --jelly-hl-opacity: 0;
  --jr-tl: 9999px;
  --jr-tr: 9999px;
  --jr-br: 9999px;
  --jr-bl: 9999px;
  position: relative;
  will-change: transform, border-radius;
  overflow: visible !important;
  border-radius: var(--jr-tl) var(--jr-tr) var(--jr-br) var(--jr-bl) !important;
}

/* Body transform composes droplet stretch with 3D water float */
.has-magnetic-jelly:not(:active):not(.is-pressed),
.fluid-droplet:not(:active):not(.is-pressed) {
  transform: var(--jelly-transform, var(--fluid-droplet-transform)) var(--float-transform, translate3d(0, 0, 0)) !important;
  transform-origin: var(--jelly-origin, var(--fluid-origin)) !important;
  transition: box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.has-magnetic-jelly:hover:not(:active):not(.is-pressed),
.fluid-droplet:hover:not(:active):not(.is-pressed) {
  transform: var(--jelly-transform, var(--fluid-droplet-transform)) var(--float-transform, translate3d(0, 0, 0)) !important;
  transform-origin: var(--jelly-origin, var(--fluid-origin)) !important;
  transition: box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Droplet Content Parallax */
.has-magnetic-jelly > *:not(canvas),
.fluid-droplet > *:not(canvas) {
  position: relative;
  z-index: 2;
  transform: translate(var(--jelly-content-tx, 0px), var(--jelly-content-ty, 0px));
  transition: transform 0s linear !important;
}

/* Droplet Subsurface Highlight */
.has-magnetic-jelly::before,
.fluid-droplet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 80px at var(--jelly-hl-x) var(--jelly-hl-y),
    rgba(255, 255, 255, var(--jelly-hl-opacity)),
    rgba(255, 255, 255, calc(var(--jelly-hl-opacity) * 0.15)) 50%,
    transparent 75%
  );
  transition: opacity 0.3s ease;
}

/* Droplet Volumetric Inner Depth */
.has-magnetic-jelly::after,
.fluid-droplet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 35%,
      transparent 70%,
      rgba(255, 255, 255, 0.06) 100%
    );
  mix-blend-mode: overlay;
}

/* 3D Gummy Buttons Suppress 2D Highlights */
.has-gummy-3d::before,
.has-gummy-3d::after,
[data-gummy-3d]::before,
[data-gummy-3d]::after,
.has-magnetic-jelly.has-gummy-3d::before,
.has-magnetic-jelly.has-gummy-3d::after,
.has-magnetic-jelly[data-gummy-3d]::before,
.has-magnetic-jelly[data-gummy-3d]::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* 3D Gummy Buttons Dedicated Physical Elevation Drop Shadow */
.has-gummy-3d.is-jelly-attracted:not(:active):not(.is-pressed),
[data-gummy-3d].is-jelly-attracted:not(:active):not(.is-pressed),
.btn.has-gummy-3d.has-magnetic-jelly.is-jelly-attracted:not(:active):not(.is-pressed),
[data-gummy-3d].has-magnetic-jelly.is-jelly-attracted:not(:active):not(.is-pressed) {
  box-shadow:
    calc(var(--jelly-shadow-x, 0px) * 0.8) calc(6px + var(--jelly-shadow-y, 0px) * 0.8) 18px -2px rgba(0, 0, 0, 0.80), calc(var(--jelly-shadow-x, 0px) * 1.4) calc(20px + var(--jelly-shadow-y, 0px) * 1.4) 44px -4px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.45) !important, inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* --- Multi-Density Droplet Variants --- */

/* 1. Dense Droplets (Mercury/Dense Gel - e.g. .btn-primary) */
.fluid-droplet.density-dense.is-jelly-attracted:not(:active):not(.is-pressed):not(.has-gummy-3d):not([data-gummy-3d]),
.btn-primary.has-magnetic-jelly.is-jelly-attracted:not(:active):not(.is-pressed):not(.has-gummy-3d):not([data-gummy-3d]) {
  box-shadow:
    calc(4px + var(--jelly-shadow-x)) calc(4px + var(--jelly-shadow-y)) 24px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    inset 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

/* 2. Glycerin/Medium Droplets (Viscous Gel - e.g. #realm-indicator, .btn-secondary) */
.fluid-droplet.density-glycerin.is-jelly-attracted:not(:active):not(.is-pressed):not(.has-gummy-3d):not([data-gummy-3d]),
.realm-indicator.has-magnetic-jelly.is-jelly-attracted:not(:active):not(.is-pressed):not(.has-gummy-3d):not([data-gummy-3d]) {
  box-shadow:
    calc(4px + var(--jelly-shadow-x)) calc(4px + var(--jelly-shadow-y)) 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(39, 212, 200, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2) !important;
}

.fluid-droplet.density-glycerin::before,
.realm-indicator.has-magnetic-jelly::before {
  background: radial-gradient(
    circle 80px at var(--jelly-hl-x) var(--jelly-hl-y),
    rgba(39, 212, 200, calc(var(--jelly-hl-opacity) * 0.7)),
    rgba(39, 212, 200, calc(var(--jelly-hl-opacity) * 0.1)) 50%,
    transparent 75%
  );
}

.fluid-droplet.density-glycerin::after,
.realm-indicator.has-magnetic-jelly::after {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 30%,
      transparent 65%,
      rgba(39, 212, 200, 0.06) 100%
    );
}

/* 3. Translucent Oil Droplets (Essential Oil - e.g. .btn-ghost) */
.fluid-droplet.density-translucent.is-jelly-attracted:not(:active):not(.is-pressed):not(.has-gummy-3d):not([data-gummy-3d]),
.btn-ghost.has-magnetic-jelly.is-jelly-attracted:not(:active):not(.is-pressed):not(.has-gummy-3d):not([data-gummy-3d]) {
  box-shadow:
    calc(4px + var(--jelly-shadow-x)) calc(4px + var(--jelly-shadow-y)) 26px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(39, 212, 200, 0.08),
    inset 0 0 18px rgba(0, 0, 0, 0.1) !important;
}

.fluid-droplet.density-translucent::before,
.btn-ghost.has-magnetic-jelly::before {
  background: radial-gradient(
    circle 80px at var(--jelly-hl-x) var(--jelly-hl-y),
    rgba(39, 212, 200, calc(var(--jelly-hl-opacity) * 0.7)),
    rgba(39, 212, 200, calc(var(--jelly-hl-opacity) * 0.1)) 50%,
    transparent 75%
  );
}

.fluid-droplet.density-translucent::after,
.btn-ghost.has-magnetic-jelly::after {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 30%,
      transparent 65%,
      rgba(39, 212, 200, 0.04) 100%
    );
}

/* 4. Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .has-magnetic-jelly,
  .fluid-droplet {
    --jelly-transform: translateZ(0) !important;
    --fluid-droplet-transform: translateZ(0) !important;
    --float-transform: translate3d(0, 0, 0) !important;
    --jelly-origin: 50% 50% !important;
    --fluid-origin: 50% 50% !important;
    --jelly-content-tx: 0px !important;
    --jelly-content-ty: 0px !important;
    --jelly-hl-opacity: 0 !important;
    --jr-tl: 9999px !important;
    --jr-tr: 9999px !important;
    --jr-br: 9999px !important;
    --jr-bl: 9999px !important;
  }
  .is-floating-object,
  .fluid-floating-body {
    transform: none !important;
  }
}