/* ==========================================================================
   Wise Planet Solutions — water motion styles (pairs with water.js)
   ========================================================================== */

/* ---------- Hero: living water background --------------------------------- */
.wps-hero { isolation: isolate; overflow: hidden; }
.wps-hero::before { opacity: 0 !important; }            /* replaced by the layers below */
.wps-hero > .e-con-inner { position: relative; z-index: 1; }
.wps-hero-water { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wps-hero-water > .wps-water-canvas { z-index: 2; }   /* bubbles + spray over the splash */

/* colour glow — wide, soft gradients instead of a live blur filter (a 70px blur on a
   moving layer re-rasterised every frame and was the main source of scroll lag) */
.wps-aurora { position: absolute; inset: -10%; opacity: .9; contain: strict; }
.wps-aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.wps-aurora i:nth-child(1) { width: 56vw; height: 56vw; right: -3%; top: -14%; background: radial-gradient(closest-side, rgba(48, 185, 211, .42), rgba(48, 185, 211, .18) 45%, transparent); animation: wps-blob-a 17s ease-in-out infinite alternate; }
.wps-aurora i:nth-child(2) { width: 48vw; height: 48vw; right: 22%; top: 24%; background: radial-gradient(closest-side, rgba(109, 108, 223, .32), rgba(109, 108, 223, .12) 45%, transparent); animation: wps-blob-b 21s ease-in-out infinite alternate; }
.wps-aurora i:nth-child(3) { width: 44vw; height: 44vw; left: 13%; top: 42%; background: radial-gradient(closest-side, rgba(120, 230, 210, .34), rgba(120, 230, 210, .13) 45%, transparent); animation: wps-blob-c 15s ease-in-out infinite alternate; }
@keyframes wps-blob-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-12vw, 10vh, 0) scale(1.15); } 100% { transform: translate3d(-4vw, -6vh, 0) scale(.9); } }
@keyframes wps-blob-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14vw, -12vh, 0) scale(1.2); } 100% { transform: translate3d(6vw, 8vh, 0) scale(.95); } }
@keyframes wps-blob-c { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(18vw, -8vh, 0) scale(.85); } 100% { transform: translate3d(-8vw, -14vh, 0) scale(1.1); } }

/* splash wrapper: JS writes pointer/scroll parallax straight to its transform; drift runs on the inner layer */
.wps-splash-wrap { position: absolute; inset: -5%; will-change: transform; }
.wps-splash-inner { position: absolute; inset: 0; animation: wps-splash-drift 11s ease-in-out infinite alternate; will-change: transform; }
.wps-hero-splash { position: absolute; inset: 0; opacity: .72; }
@media (max-width: 767px) { .wps-hero-splash { opacity: .5; } .wps-aurora { opacity: .6; } }  /* text sits over the splash on phones */
@keyframes wps-splash-drift {
  0%   { transform: scale(1.02) rotate(0deg) translate3d(0, 0, 0); }
  25%  { transform: scale(1.07) rotate(-1.4deg) translate3d(-22px, 12px, 0); }
  55%  { transform: scale(1.04) rotate(1.1deg) translate3d(18px, -16px, 0); }
  80%  { transform: scale(1.09) rotate(-.6deg) translate3d(-10px, -6px, 0); }
  100% { transform: scale(1.05) rotate(.8deg) translate3d(12px, 14px, 0); }
}
/* light glint + shimmer: masked to the splash; only their inner layer moves, by transform */
.wps-glint, .wps-shimmer { position: absolute; inset: 0; overflow: hidden; }
.wps-glint > i, .wps-shimmer > i { position: absolute; display: block; will-change: transform; }
.wps-glint > i {
  top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%, transparent 100%);
  animation: wps-glint 6.5s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes wps-glint { 0% { transform: translate3d(-110%, 0, 0); } 55%, 100% { transform: translate3d(240%, 0, 0); } }
.wps-shimmer > i {
  inset: -30%;
  background:
    radial-gradient(18% 12% at 30% 38%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(14% 10% at 62% 30%, rgba(255, 255, 255, .42), transparent 70%),
    radial-gradient(20% 12% at 72% 62%, rgba(255, 255, 255, .38), transparent 70%),
    radial-gradient(12% 9% at 44% 70%, rgba(220, 250, 255, .45), transparent 70%);
  animation: wps-shimmer 9s ease-in-out infinite alternate;
}
@keyframes wps-shimmer {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.08); }
  100% { transform: translate3d(-2%, 4%, 0) rotate(-4deg) scale(1.03); }
}

/* ---------- Canvases ------------------------------------------------------ */
.wps-water-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.wps-water-host { position: relative; isolation: isolate; }
.wps-water-host > .wps-water-canvas { z-index: -1; }

/* ---------- Waves --------------------------------------------------------- */
.wps-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; overflow: hidden; z-index: 0; }
/* !important: footer/theme icon rules size every svg to 16px */
.wps-waves .wps-wave { position: absolute !important; left: 0 !important; bottom: 0 !important; width: 200% !important; height: 100% !important; max-width: none !important; fill: initial; }
.wps-waves .wps-wave--1 { animation: wps-wave 16s linear infinite; }
.wps-waves .wps-wave--2 { animation: wps-wave 23s linear infinite reverse; height: 85% !important; }
.wps-waves .wps-wave--3 { animation: wps-wave 11s linear infinite; height: 65% !important; }
@keyframes wps-wave { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.wps-waves--hero { height: 140px; }
.wps-waves--footer { height: 150px; z-index: -1; }
.wps-waves--footer .wps-wave--1 { animation-duration: 20s; }
.wps-waves--footer { border-radius: inherit; }
@media (max-width: 767px) { .wps-waves { height: 70px; } .wps-waves--footer { height: 90px; } }

/* ---------- Click droplet ------------------------------------------------- */
.wps-drop {
  position: fixed; z-index: 100003; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 2px solid rgba(48, 185, 211, .8);
  animation: wps-drop-ring 700ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.wps-drop::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid rgba(109, 108, 223, .6);
  animation: wps-drop-ring 700ms cubic-bezier(.16, 1, .3, 1) 90ms forwards;
}
@keyframes wps-drop-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(5.5); opacity: 0; } }

/* ---------- Progress bar: flowing water highlight (transform-only) --------- */
html .wps-progress { overflow: hidden; }
html .wps-progress::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: wps-flow 2.4s linear infinite;
}
@keyframes wps-flow { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(300%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .wps-splash-inner, .wps-aurora i, .wps-glint > i, .wps-shimmer > i, .wps-wave, .wps-progress::after { animation: none !important; }
}