/* Depth Digital water UI system
   Shared, progressively enhanced lenses, glass surfaces and pointer ripples. */

:root {
  --water-deep: #031522;
  --water-mid: #0b5968;
  --water-teal: #2f9da4;
  --water-aqua: #8feae3;
  --water-ice: #d9fffb;
  --water-glass: rgba(216, 255, 251, .08);
  --water-glass-strong: rgba(12, 63, 76, .58);
  --water-border: rgba(202, 255, 250, .24);
  --water-ripple: rgba(194, 255, 249, .34);
  --water-ease: cubic-bezier(.2, .72, .24, 1);
}

.water-ui-page .water-current-section {
  background-image:
    radial-gradient(42rem 24rem at 8% 12%, rgba(79, 195, 200, .1), transparent 72%),
    radial-gradient(34rem 22rem at 92% 82%, rgba(52, 126, 178, .08), transparent 72%);
  background-blend-mode: normal;
}

.water-ui-page .panel--light.water-current-section {
  background-color: #f1f7f5;
  background-image:
    radial-gradient(38rem 24rem at 5% 8%, rgba(66, 178, 179, .11), transparent 70%),
    radial-gradient(32rem 22rem at 94% 88%, rgba(70, 135, 183, .09), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(232,244,242,.92));
}

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

.water-droplets > span {
  --drop-size: 5rem;
  --drop-x: 8%;
  --drop-y: 14%;
  --drop-delay: 0s;
  position: absolute;
  top: var(--drop-y);
  left: var(--drop-x);
  width: var(--drop-size);
  aspect-ratio: 1;
  border: 1px solid rgba(92, 179, 187, .16);
  border-radius: 58% 42% 54% 46% / 46% 58% 42% 54%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.44), transparent 12%),
    radial-gradient(circle at 58% 65%, rgba(61, 169, 178, .08), transparent 66%),
    rgba(183, 239, 235, .05);
  box-shadow: inset -10px -12px 24px rgba(16, 105, 119, .06), 0 18px 42px rgba(13, 87, 105, .05);
  opacity: .66;
  transform: translate3d(0, 0, 0) rotate(-8deg);
  animation: water-drop-drift 11s var(--water-ease) var(--drop-delay) infinite alternate;
}

.water-droplets > span:nth-child(2) {
  --drop-size: 2.8rem;
  --drop-x: 88%;
  --drop-y: 18%;
  --drop-delay: -4s;
  opacity: .48;
}

.water-droplets > span:nth-child(3) {
  --drop-size: 3.7rem;
  --drop-x: 78%;
  --drop-y: 76%;
  --drop-delay: -7s;
  opacity: .38;
}

@keyframes water-drop-drift {
  from { transform: translate3d(0, -4px, 0) rotate(-8deg); }
  to { transform: translate3d(8px, 7px, 0) rotate(7deg); }
}

.water-current-section > .panel__inner,
.water-current-section > .split-layout {
  position: relative;
  z-index: 1;
}

.water-lens {
  --lens-color: var(--water-teal);
  position: relative;
  display: inline-grid;
  width: clamp(3.4rem, 5vw, 4.6rem);
  aspect-ratio: 1;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lens-color) 42%, transparent);
  border-radius: 58% 42% 55% 45% / 44% 57% 43% 56%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.62), transparent 11%),
    radial-gradient(circle at 63% 70%, color-mix(in srgb, var(--lens-color) 18%, transparent), transparent 64%),
    color-mix(in srgb, var(--lens-color) 8%, rgba(255,255,255,.2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset -8px -10px 20px color-mix(in srgb, var(--lens-color) 9%, transparent),
    0 14px 32px -20px color-mix(in srgb, var(--lens-color) 62%, transparent);
  color: color-mix(in srgb, var(--lens-color) 86%, #07313b 14%);
  transform: translate3d(0, 0, 0);
  transition: border-radius .55s var(--water-ease), transform .5s var(--water-ease), box-shadow .5s ease;
}

.water-lens::after {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.35) transparent transparent rgba(255,255,255,.18);
  border-radius: inherit;
  pointer-events: none;
}

.water-icon {
  width: 56%;
  height: 56%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: transform .55s var(--water-ease);
}

.water-surface {
  --water-pointer-x: 50%;
  --water-pointer-y: 50%;
  position: relative;
  isolation: isolate;
}

.service-card.water-surface > :not(.water-sheen),
.service-detail-card.water-surface > :not(.water-sheen),
.resource-card.water-surface > :not(.water-sheen) { position: relative; z-index: 1; }

.water-surface .water-sheen {
  position: absolute;
  z-index: 0;
  top: var(--water-pointer-y);
  left: var(--water-pointer-x);
  width: min(24rem, 72%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194,255,249,.16), rgba(120,222,218,.055) 38%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(.82);
  transition: opacity .4s ease, transform .55s var(--water-ease);
}

@media (hover: hover) and (pointer: fine) {
  .water-surface:is(:hover, :focus-within) .water-sheen {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  .water-surface:is(:hover, :focus-within) .water-lens {
    border-radius: 44% 56% 47% 53% / 58% 43% 57% 42%;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      inset -8px -10px 20px color-mix(in srgb, var(--lens-color) 13%, transparent),
      0 18px 38px -18px color-mix(in srgb, var(--lens-color) 72%, transparent);
    transform: translate3d(0, -3px, 0) rotate(2deg);
  }

  .water-surface:is(:hover, :focus-within) .water-icon { transform: scale(1.055) rotate(-2deg); }
}

.water-ripple {
  position: absolute !important;
  z-index: 5 !important;
  top: var(--water-ripple-y, 50%);
  left: var(--water-ripple-x, 50%);
  width: 1rem;
  aspect-ratio: 1;
  border: 1px solid var(--water-ripple);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(.25);
  animation: water-ripple-release .72s var(--water-ease) forwards;
}

.water-ripple::after {
  content: '';
  position: absolute;
  inset: -42%;
  border: 1px solid color-mix(in srgb, var(--water-ripple) 58%, transparent);
  border-radius: inherit;
}

@keyframes water-ripple-release {
  0% { opacity: .78; transform: translate3d(-50%, -50%, 0) scale(.3); }
  70% { opacity: .25; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(9); }
}

/* Homepage and service cards */
.service-card.water-surface,
.service-detail-card.water-surface {
  overflow: hidden;
  border-color: rgba(44, 137, 151, .2);
  background:
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(219,239,237,.38)),
    rgba(239,247,245,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 26px 60px -42px rgba(5, 71, 84, .4);
  backdrop-filter: none;
}

.service-card__water-icon { margin-bottom: clamp(1.15rem, 2.4vw, 1.8rem); }
.service-card.water-surface .service-card__number { display: block; margin-bottom: .85rem; }
.service-card.water-surface h3 { margin-top: 0; }

.service-detail-card__topline {
  align-items: center;
}

.service-detail-card__topline .water-lens {
  width: clamp(3rem, 4vw, 3.8rem);
  margin-right: auto;
}

.service-detail-card.water-surface {
  border: 1px solid rgba(33, 124, 139, .19);
}

.panel--light .water-lens {
  --lens-color: #238f98;
}

/* Resources use a native vertical stream rather than repeated content. */
.resource-list.water-stream {
  position: relative;
}

.resource-list.water-stream::before {
  content: '';
  position: absolute;
  top: -2rem;
  bottom: -2rem;
  left: clamp(.7rem, 2.6vw, 2.2rem);
  width: 1px;
  background: linear-gradient(transparent, rgba(158,244,238,.38) 8%, rgba(102,197,205,.17) 82%, transparent);
  box-shadow: 0 0 28px rgba(103,224,216,.18);
  pointer-events: none;
}

.resource-card.water-surface { --water-ripple: rgba(190,255,250,.28); }

.resource-card__water-icon {
  --lens-color: var(--water-aqua);
  width: clamp(3.3rem, 5vw, 4.3rem);
  margin: 0 0 1rem;
  color: #c9fffb;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.48), transparent 11%),
    rgba(45, 144, 153, .13);
}

/* Calm case-study treatment. */
.case-study-page.water-ui-page .case-hero__meta {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid rgba(193, 248, 245, .18);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(184,245,240,.065), rgba(3,25,39,.22));
}

.case-water-symbol {
  display: grid;
  width: 3.25rem;
  aspect-ratio: 1;
  grid-column: 1 / -1;
  place-items: center;
  margin-bottom: .4rem;
  border: 1px solid rgba(166, 241, 236, .26);
  border-radius: 58% 42% 54% 46% / 45% 58% 42% 55%;
  background: rgba(101, 224, 217, .07);
  color: #a9f5ee;
}

.case-water-symbol .water-icon { width: 58%; height: 58%; }

.case-study-page.water-ui-page .case-chapter {
  position: relative;
  padding-top: 2rem;
}

.case-study-page.water-ui-page .case-chapter::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(137,234,227,.65), rgba(137,234,227,.12) 48%, transparent);
  box-shadow: 0 0 18px rgba(115,221,216,.16);
}

/* Interactive buttons receive a local ripple without changing their layout. */
.button[data-water-interactive],
.header-links__cta[data-water-interactive],
.setup-guide__external[data-water-interactive],
.resource-card__player a[data-water-interactive] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .service-card.water-surface,
  .service-detail-card.water-surface { background: #eaf4f2; }
  .case-study-page.water-ui-page .case-hero__meta { background: #082936; }
}

@media (max-width: 700px) {
  .water-droplets > span:nth-child(n+2) { display: none; }
  .water-droplets > span:first-child { --drop-size: 3rem; opacity: .28; }
  .water-surface .water-sheen { display: none; }
  .resource-list.water-stream::before { left: .72rem; }
  .service-detail-card__topline .water-lens { order: -1; }
}

@media (hover: none), (pointer: coarse) {
  .water-surface .water-sheen { display: none; }
  .resources-page .resource-card { backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .water-droplets > span { animation: none; }
  .water-lens,
  .water-icon,
  .water-surface .water-sheen { transition: none; transform: none !important; }
  .water-ripple { display: none; animation: none; }
}

.water-data-saver .water-droplets > span { animation: none; }

@media (forced-colors: active) {
  .water-lens,
  .service-card.water-surface,
  .service-detail-card.water-surface,
  .case-study-page.water-ui-page .case-hero__meta { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .water-droplets,
  .water-sheen { display: none; }
}