:root {
  --cursor-water-core: rgba(255, 255, 255, 0.82);
  --cursor-water-frost: rgba(255, 255, 255, 0.58);
  --cursor-water-mist: rgba(255, 255, 255, 0.28);
  --cursor-water-shadow: rgba(255, 255, 255, 0.1);
  --cursor-water-edge: rgba(16, 38, 34, 0.16);
  --cursor-water-edge-soft: rgba(16, 38, 34, 0.08);
}

.cursor-fluid-canvas,
.cursor-fluid-dot,
.cursor-fluid-ring,
.cursor-fluid-ripple {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99997;
}

.cursor-fluid-canvas {
  width: 100vw;
  height: 100vh;
}

.cursor-fluid-dot,
.cursor-fluid-ring {
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity, width, height, box-shadow, background;
  transition:
    width 0.26s ease,
    height 0.26s ease,
    opacity 0.26s ease,
    border-color 0.26s ease,
    box-shadow 0.26s ease,
    background 0.26s ease;
}

.cursor-fluid-dot {
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 1) 0%, var(--cursor-water-core) 26%, rgba(255, 255, 255, 0.9) 58%, rgba(255, 255, 255, 0.56) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    0 0 0 1px var(--cursor-water-edge),
    0 0 0 4px rgba(255, 255, 255, 0.06),
    0 0 18px rgba(255, 255, 255, 0.18),
    0 0 34px rgba(255, 255, 255, 0.1),
    0 6px 18px rgba(16, 38, 34, 0.12);
  backdrop-filter: blur(6px);
}

.cursor-fluid-ring {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.015) 66%, transparent 76%);
  box-shadow:
    0 0 0 1px var(--cursor-water-edge-soft),
    inset 0 0 24px rgba(255, 255, 255, 0.09),
    inset 0 0 8px rgba(255, 255, 255, 0.12),
    0 0 20px rgba(255, 255, 255, 0.1),
    0 8px 32px rgba(255, 255, 255, 0.05),
    0 10px 30px rgba(16, 38, 34, 0.08);
  backdrop-filter: blur(8px) saturate(145%);
}

.cursor-fluid-ripple {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  opacity: 0;
  box-shadow:
    0 0 0 1px rgba(16, 38, 34, 0.08),
    0 0 0 5px rgba(255, 255, 255, 0.05),
    0 0 0 14px rgba(255, 255, 255, 0.02),
    0 0 30px rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(16, 38, 34, 0.07);
  backdrop-filter: blur(8px);
}

.cursor-fluid-ripple.is-active {
  animation: cursor-fluid-ripple 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.cursor-fluid-active {
  cursor: none;
}

body.cursor-fluid-active a,
body.cursor-fluid-active button,
body.cursor-fluid-active .btn,
body.cursor-fluid-active [role="button"],
body.cursor-fluid-active input[type="submit"],
body.cursor-fluid-active input[type="button"],
body.cursor-fluid-active .swiper-button-next,
body.cursor-fluid-active .swiper-button-prev,
body.cursor-fluid-active .accordion-button,
body.cursor-fluid-active .share-button,
body.cursor-fluid-active .fw-btn,
body.cursor-fluid-active summary,
body.cursor-fluid-active label {
  cursor: none;
}

body.cursor-fluid-active.is-cursor-hover .cursor-fluid-dot {
  width: 16px;
  height: 16px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.98) 34%, rgba(255, 255, 255, 0.74) 68%, rgba(255, 255, 255, 0.42) 100%);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(16, 38, 34, 0.18),
    0 0 0 6px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(255, 255, 255, 0.2),
    0 0 48px rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(16, 38, 34, 0.12);
}

body.cursor-fluid-active.is-cursor-hover .cursor-fluid-ring {
  width: 76px;
  height: 76px;
  border-color: rgba(255, 255, 255, 0.42);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12) 34%, rgba(255, 255, 255, 0.04) 58%, transparent 74%);
  box-shadow:
    0 0 0 1px rgba(16, 38, 34, 0.1),
    inset 0 0 28px rgba(255, 255, 255, 0.1),
    0 0 24px rgba(255, 255, 255, 0.12),
    0 0 56px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(16, 38, 34, 0.08);
}

body.cursor-fluid-active.is-cursor-down .cursor-fluid-dot {
  width: 18px;
  height: 18px;
}

body.cursor-fluid-active.is-cursor-down .cursor-fluid-ring {
  width: 58px;
  height: 58px;
}

body.cursor-fluid-active.cursor-hidden .cursor-fluid-dot,
body.cursor-fluid-active.cursor-hidden .cursor-fluid-ring,
body.cursor-fluid-active.cursor-hidden .cursor-fluid-canvas {
  opacity: 0;
}

body.cursor-fluid-active [data-cursor-magnetic] {
  transition: transform 0.26s ease, box-shadow 0.26s ease;
  will-change: transform;
}

body.cursor-fluid-active [data-cursor-magnetic].is-magnetic-active {
  box-shadow:
    0 14px 32px rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

::selection {
  background: rgba(255, 255, 255, 0.32);
  color: #102622;
}

@keyframes cursor-fluid-ripple {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.4);
    opacity: 0.55;
  }
  70% {
    transform: translate3d(-50%, -50%, 0) scale(5.8);
    opacity: 0.1;
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(7.4);
    opacity: 0;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 991px) {
  .cursor-fluid-canvas,
  .cursor-fluid-dot,
  .cursor-fluid-ring,
  .cursor-fluid-ripple {
    display: none !important;
  }

  body.cursor-fluid-active {
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-fluid-canvas,
  .cursor-fluid-dot,
  .cursor-fluid-ring,
  .cursor-fluid-ripple {
    display: none !important;
  }

  body.cursor-fluid-active {
    cursor: auto;
  }

  body.cursor-fluid-active [data-cursor-magnetic] {
    transition: none !important;
    transform: none !important;
  }
}