/* ============================================================
   DMG Pharmaceutical — reusable public-page water motion
   Isolated behind .wm-water-motion. Safe to remove or disable.
   ============================================================ */

:root {
  --water-effect-opacity: 0.05;
  --water-highlight-opacity: 0.07;
  --bubble-opacity: 0.11;
  --ripple-opacity: 0.12;
  --wave-duration: 28s;
  --bubble-duration: 22s;
  --ripple-duration: 1100ms;
  --card-hover-lift: 3px;
  --liquid-blur: 18px;
}

.wm-water-motion {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-x: clip;
}

.wm-water-motion > main,
.wm-water-motion > .site-footer {
  position: relative;
  z-index: 1;
}

.wm-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.wm-liquid-light {
  position: absolute;
  inset: -12%;
  opacity: var(--water-highlight-opacity);
  background:
    radial-gradient(ellipse 42% 28% at 8% 18%, var(--dmg-sky), transparent 68%),
    radial-gradient(ellipse 38% 26% at 92% 42%, var(--dmg-green-500), transparent 70%),
    radial-gradient(ellipse 48% 34% at 55% 92%, var(--dmg-royal), transparent 74%);
  animation: wmLiquidLight 32s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.wm-wave {
  position: absolute;
  width: min(64vw, 980px);
  height: min(46vw, 680px);
  border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%;
  opacity: var(--water-effect-opacity);
  filter: blur(var(--liquid-blur));
  background:
    radial-gradient(ellipse at 35% 38%, rgba(255,255,255,0.94), transparent 38%),
    linear-gradient(135deg, var(--dmg-sky), var(--dmg-royal) 58%, var(--dmg-green-500));
  will-change: transform, opacity;
}

.wm-wave--left {
  left: -48vw;
  top: 8vh;
  animation: wmWaveLeft var(--wave-duration) ease-in-out infinite alternate;
}

.wm-wave--right {
  right: -48vw;
  top: 48vh;
  animation: wmWaveRight 34s ease-in-out -9s infinite alternate;
}

.wm-reflection {
  position: absolute;
  width: 46vw;
  height: 14vh;
  min-height: 90px;
  left: 27vw;
  top: 13vh;
  border-radius: 50%;
  opacity: 0.055;
  filter: blur(15px);
  background: linear-gradient(100deg, transparent, #fff 40%, var(--dmg-sky) 52%, transparent 74%);
  transform: rotate(-7deg);
  animation: wmReflection 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.wm-bubbles {
  position: absolute;
  inset: 0;
}

.wm-bubble {
  position: absolute;
  bottom: -42px;
  width: var(--wm-size, 14px);
  height: var(--wm-size, 14px);
  border: 1px solid rgba(41, 171, 226, 0.28);
  border-radius: 50%;
  opacity: var(--bubble-opacity);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(41,171,226,0.16) 34%, rgba(89,178,60,0.08) 66%, transparent 72%);
  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.8), 0 0 9px rgba(41,171,226,0.12);
  animation: wmBubbleRise var(--wm-duration, var(--bubble-duration)) linear var(--wm-delay, 0s) infinite;
  will-change: transform, opacity;
}

.wm-bubble:nth-child(1) { left: 2.2%; --wm-size: 10px; --wm-duration: 24s; --wm-delay: -7s; }
.wm-bubble:nth-child(2) { left: 6.5%; --wm-size: 19px; --wm-duration: 28s; --wm-delay: -18s; }
.wm-bubble:nth-child(3) { left: 10%; --wm-size: 8px; --wm-duration: 19s; --wm-delay: -12s; }
.wm-bubble:nth-child(4) { left: 15%; --wm-size: 27px; --wm-duration: 30s; --wm-delay: -24s; }
.wm-bubble:nth-child(5) { left: 88%; --wm-size: 12px; --wm-duration: 22s; --wm-delay: -15s; }
.wm-bubble:nth-child(6) { left: 93%; --wm-size: 23px; --wm-duration: 29s; --wm-delay: -4s; }
.wm-bubble:nth-child(7) { left: 97%; --wm-size: 9px; --wm-duration: 18s; --wm-delay: -9s; }
.wm-bubble:nth-child(8) { left: 84%; --wm-size: 31px; --wm-duration: 32s; --wm-delay: -26s; }

.wm-ripple-stage {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.wm-pointer-ripple {
  position: fixed;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 1px solid rgba(41,171,226,var(--ripple-opacity));
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 18px rgba(89,178,60,0.07), inset 0 0 10px rgba(47,107,255,0.06);
  animation: wmPointerRipple var(--ripple-duration) ease-out forwards;
  will-change: transform, opacity;
}

.wm-major-heading {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.wm-major-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(340px, 82%);
  height: 120%;
  left: var(--wm-glow-x, 50%);
  top: var(--wm-glow-y, 50%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(18px);
  background: radial-gradient(ellipse, rgba(41,171,226,0.1), rgba(89,178,60,0.045) 48%, transparent 72%);
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 420ms ease, transform 520ms ease;
  pointer-events: none;
}

.wm-major-heading.is-wm-glowing::before {
  opacity: 0.52;
  transform: translate(-50%, -50%) scale(1);
}

.wm-liquid-card {
  position: relative;
  overflow: hidden;
  transition-property: transform, box-shadow, border-color;
}

.wm-water-motion .wm-liquid-card:hover {
  transform: translateY(calc(0px - var(--card-hover-lift)));
  box-shadow: 0 22px 54px rgba(29,68,145,0.13), 0 0 28px rgba(89,178,60,0.035);
}

.wm-card-shine {
  position: absolute;
  z-index: 4;
  inset: -30% auto -30% -72%;
  width: 42%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 5%, rgba(255,255,255,0.1) 28%, rgba(41,171,226,0.075) 48%, rgba(89,178,60,0.055) 60%, transparent 88%);
  transform: skewX(-18deg) translateX(0);
  transition: transform 900ms cubic-bezier(.2,.65,.3,1), opacity 320ms ease;
  will-change: transform, opacity;
}

.wm-liquid-card:hover > .wm-card-shine {
  opacity: 0.8;
  transform: skewX(-18deg) translateX(430%);
}

.wm-button-ready {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wm-button-ripple {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.24);
  box-shadow: 0 0 0 1px rgba(41,171,226,0.08);
  animation: wmButtonRipple 720ms ease-out forwards;
  will-change: transform, opacity;
}

.wm-water-motion .vdc-wave {
  animation: wmDecorFloat 24s ease-in-out infinite alternate;
}

.wm-water-motion .trust-bar::before {
  animation: wmDecorFloat 30s ease-in-out -8s infinite alternate;
}

.wm-water-motion .trust-bar::after {
  animation: wmDecorFloatRotated 32s ease-in-out -14s infinite alternate;
}

.wm-water-motion .final-cta-box::after {
  animation: wmDecorBreathe 28s ease-in-out infinite alternate;
}

.wm-motion-paused .wm-layer *,
.wm-motion-paused .vdc-wave,
.wm-motion-paused .trust-bar::before,
.wm-motion-paused .trust-bar::after,
.wm-motion-paused .final-cta-box::after {
  animation-play-state: paused !important;
}

@keyframes wmLiquidLight {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.05; }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.04); opacity: var(--water-highlight-opacity); }
}

@keyframes wmWaveLeft {
  from { transform: translate3d(-2%, -1%, 0) rotate(-7deg) scale(0.98); }
  to { transform: translate3d(13%, 3%, 0) rotate(4deg) scale(1.04); }
}

@keyframes wmWaveRight {
  from { transform: translate3d(3%, 3%, 0) rotate(8deg) scale(1.03); }
  to { transform: translate3d(-12%, -2%, 0) rotate(-3deg) scale(0.97); }
}

@keyframes wmReflection {
  from { transform: translate3d(-6%, 0, 0) rotate(-7deg) scaleX(0.94); opacity: 0.035; }
  to { transform: translate3d(8%, 10px, 0) rotate(-4deg) scaleX(1.08); opacity: 0.065; }
}

@keyframes wmBubbleRise {
  0% { transform: translate3d(0, 5vh, 0) scale(0.88); opacity: 0; }
  12% { opacity: var(--bubble-opacity); }
  76% { opacity: 0.086; }
  100% { transform: translate3d(var(--wm-drift, 14px), -112vh, 0) scale(1.08); opacity: 0; }
}

@keyframes wmPointerRipple {
  0% { transform: scale(0.35); opacity: 0; }
  18% { opacity: 0.72; }
  100% { transform: scale(4.8); opacity: 0; }
}

@keyframes wmButtonRipple {
  from { transform: scale(0.4); opacity: 0.38; }
  to { transform: scale(24); opacity: 0; }
}

@keyframes wmDecorFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(7px, -8px, 0); }
}

@keyframes wmDecorFloatRotated {
  from { transform: rotate(180deg) translate3d(0, 0, 0); }
  to { transform: rotate(180deg) translate3d(7px, 8px, 0); }
}

@keyframes wmDecorBreathe {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.42; }
  to { transform: translate3d(-5px, -7px, 0) scale(1.025); opacity: 0.5; }
}

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .wm-liquid-light { opacity: 0.052; }
  .wm-wave { opacity: 0.039; }
  .wm-bubble:nth-child(n + 5) { display: none; }
  .wm-water-motion .trust-bar::before,
  .wm-water-motion .trust-bar::after,
  .wm-water-motion .final-cta-box::after { animation-duration: 40s; }
}

@media (max-width: 720px) {
  .wm-layer { opacity: 0.76; }
  .wm-wave { width: 105vw; height: 70vw; filter: blur(22px); }
  .wm-wave--left { left: -88vw; }
  .wm-wave--right { right: -88vw; }
  .wm-reflection { display: none; }
  .wm-bubble:nth-child(n + 5) { display: none; }
  .wm-bubble:nth-child(2) { left: 5%; }
  .wm-bubble:nth-child(4) { left: 92%; }
  .wm-major-heading::before { width: 72%; height: 105%; }
  .wm-water-motion .vdc-wave,
  .wm-water-motion .trust-bar::before,
  .wm-water-motion .trust-bar::after,
  .wm-water-motion .final-cta-box::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-layer {
    opacity: 1;
    background:
      radial-gradient(ellipse 42% 30% at 0% 28%, rgba(41,171,226,0.025), transparent 72%),
      radial-gradient(ellipse 38% 26% at 100% 70%, rgba(89,178,60,0.022), transparent 72%);
  }
  .wm-layer > * { animation: none !important; }
  .wm-wave { opacity: 0.024; transform: none !important; }
  .wm-liquid-light { opacity: 0.028; transform: none !important; }
  .wm-bubbles,
  .wm-reflection,
  .wm-ripple-stage,
  .wm-card-shine,
  .wm-major-heading::before,
  .wm-button-ripple { display: none !important; }
  .wm-water-motion .wm-liquid-card,
  .wm-water-motion .wm-liquid-card:hover { transform: none; transition: none; }
  .wm-water-motion .vdc-wave,
  .wm-water-motion .trust-bar::before,
  .wm-water-motion .trust-bar::after,
  .wm-water-motion .final-cta-box::after { animation: none !important; }
}