/* Landing-page pool presentation: keep the water visible, calm and subordinate to the symbol. */
#fluid {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(21, 72, 88, .16), transparent 42%),
    linear-gradient(180deg, rgba(6, 18, 24, .78), rgba(1, 5, 8, .96)),
    #010507;
}

.noise {
  opacity: .018;
}

.depth-vignette {
  background:
    radial-gradient(circle at 50% 48%, transparent 24%, rgba(0, 0, 0, .14) 66%, rgba(0, 0, 0, .42) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .16), transparent 30%, transparent 74%, rgba(0, 0, 0, .30));
}

.water-shadow {
  top: 50.2%;
  width: min(43vw, 440px);
  height: min(5.4vw, 54px);
  transform: translate(-50%, -50%) scaleX(calc(1 + var(--hover) * .035));
  background:
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, .46) 0%,
      rgba(2, 11, 15, .34) 42%,
      rgba(75, 142, 156, .055) 68%,
      rgba(0, 0, 0, 0) 100%);
  filter: blur(15px);
  opacity: calc(.58 + var(--hover) * .08);
}

.symbol-stage {
  filter:
    drop-shadow(0 10px 17px rgba(0, 0, 0, .36))
    drop-shadow(0 0 24px rgba(116, 207, 230, .075));
}

.symbol-reflection {
  top: calc(50% + min(19vw, 172px));
  width: min(31vw, 286px);
  height: min(5.6vw, 50px);
  transform: translateX(-50%) scaleX(calc(1 + var(--hover) * .035));
  background:
    radial-gradient(ellipse at 50% 42%,
      rgba(209, 239, 245, .13) 0%,
      rgba(105, 177, 193, .075) 34%,
      rgba(29, 88, 103, .035) 58%,
      rgba(0, 0, 0, 0) 78%);
  filter: blur(11px);
  opacity: calc(.27 + var(--hover) * .08);
  mix-blend-mode: screen;
}

/* Desktop-only calibration.
   The mobile rendering is the visual reference and remains untouched.
   On fine-pointer devices the same shader gets a modest presentation boost:
   brighter water bands, slightly clearer petrol/cyan separation and crisper crests,
   without changing timing, geometry or interaction. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  #fluid {
    filter: brightness(1.20) contrast(1.045) saturate(1.09);
  }
}

@media (max-width: 760px) {
  .water-shadow {
    width: min(60vw, 360px);
    height: min(9vw, 48px);
  }

  .symbol-reflection {
    top: calc(50% + min(25vw, 154px));
    width: min(48vw, 270px);
    height: min(9vw, 46px);
  }
}