/**
 * PragPhysicsUI — Universal Physical & Viscoelastic UI Primitives
 * Architecture: 2nd-order damped harmonic oscillators, Poisson's ratio compliance, optical catchlights.
 * Pure monochrome, zero emojis, 100% accessible with prefers-reduced-motion fallback.
 */

:root {
  --phys-stiffness: 220;
  --phys-damping: 18;
  --phys-mass: 1.0;
  --phys-vol-ratio: 0.35;
  --phys-tilt-max: 6deg;
  --phys-light-x: 50%;
  --phys-light-y: 50%;
  --phys-light-angle: 135deg;
  --phys-specular: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   1. Viscoelastic Hydro-Gel Cards (data-phys-card)
   ========================================================================== */
[data-phys-card] {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transform: perspective(1000px) rotateX(var(--phys-rx, 0deg)) rotateY(var(--phys-ry, 0deg)) translateZ(var(--phys-tz, 0px)) scale3d(var(--phys-sx, 1), var(--phys-sy, 1), 1);
  transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    inset 0 1px 0 0 var(--phys-specular),
    0 10px 30px -10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  user-select: none;
}

[data-phys-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--phys-cursor-x, 50%) var(--phys-cursor-y, 50%), rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  opacity: var(--phys-glare-opacity, 0);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

[data-phys-card]:hover::after {
  --phys-glare-opacity: 1;
}

/* ==========================================================================
   2. Mercury Droplet Tabs & Segmented Control (data-mercury-tabs)
   ========================================================================== */
[data-mercury-tabs] {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: rgba(15, 17, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  user-select: none;
}

[data-mercury-tabs] .mercury-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  will-change: transform, width;
  transform-origin: center center;
  z-index: 1;
}

[data-mercury-tabs] .mercury-tab {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(241, 245, 249, 0.7);
  cursor: pointer;
  border-radius: 9999px;
  transition: color 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

[data-mercury-tabs] .mercury-tab:hover {
  color: #ffffff;
}

[data-mercury-tabs] .mercury-tab.is-active {
  color: #ffffff;
  font-weight: 600;
}

/* ==========================================================================
   3. Bistable Leaf-Spring Switch (data-phys-switch)
   ========================================================================== */
[data-phys-switch] {
  position: relative;
  width: 56px;
  height: 32px;
  background: rgba(20, 24, 33, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 3px;
  cursor: pointer;
  outline: none;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

[data-phys-switch][aria-checked="true"] {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
}

[data-phys-switch] .switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  will-change: transform;
  transform: translateX(var(--thumb-x, 0px)) scaleX(var(--thumb-sx, 1)) scaleY(var(--thumb-sy, 1));
}

[data-phys-switch]:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   4. Capacitive Membrane Input (data-phys-input)
   ========================================================================== */
[data-phys-input] {
  position: relative;
  width: 100%;
  background: rgba(15, 18, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

[data-phys-input].is-focused {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 4px 16px -2px rgba(56, 189, 248, 0.2);
}

[data-phys-input] input,
[data-phys-input] textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 14px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
}

[data-phys-input] .input-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  transform: scale(0);
  opacity: 1;
  animation: inputRippleExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes inputRippleExpand {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* ==========================================================================
   5. Pneumatic Chamber Modal (data-pneumatic-modal)
   ========================================================================== */
.pneumatic-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 8, 0.75);
  backdrop-filter: blur(var(--pneumatic-blur, 0px));
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.pneumatic-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  --pneumatic-blur: 24px;
}

[data-pneumatic-modal] {
  position: relative;
  background: rgba(18, 21, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 30px 80px -15px rgba(0, 0, 0, 0.85);
  padding: 2rem;
  max-width: 540px;
  width: calc(100% - 2rem);
  will-change: transform, opacity;
  transform: translateY(var(--pneumatic-y, 40px)) scale(var(--pneumatic-s, 0.96));
  opacity: var(--pneumatic-opacity, 0);
  user-select: none;
}

/* ==========================================================================
   6. Capillary Droplet Popover (data-droplet-popover)
   ========================================================================== */
[data-droplet-popover] {
  position: absolute;
  background: rgba(15, 18, 25, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 36px -4px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  padding: 8px 14px;
  font-size: 0.82rem;
  color: #e2e8f0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: top center;
  transform: translateY(-8px) scale(0.9);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  white-space: nowrap;
}

[data-droplet-popover].is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ==========================================================================
   7. Kinetic Odometer Counter (data-kinetic-counter)
   ========================================================================== */
[data-kinetic-counter] {
  display: inline-flex;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: middle;
}

.odometer-digit-column {
  display: inline-flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.odometer-digit-value {
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
}

/* ==========================================================================
   8. Prefers-Reduced-Motion Accessibility Overrides
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-phys-card],
  [data-mercury-tabs] .mercury-indicator,
  [data-phys-switch] .switch-thumb,
  [data-pneumatic-modal],
  .odometer-digit-column {
    transform: none !important;
    transition: none !important;
  }
}