/* ─── palette (safe to keep global) ───────────────── */
:root{
  --c-ring1:#1a2c55;
  --c-ring2:#233b6e66;
  --c-ring3:#1c2f5466;

  --c-drop-light:#c6f3ff;
  --c-drop-dark:#009dff;
  --c-core:#00040e;
  --c-glow:#009dff;
}

/* ─── water-drop component  (everything is scoped) ─ */
.water-drop{
  /* master size — override inline or in media-queries */
  --size:clamp(180px, 30vw, 320px);

  /* derived sizes */
  --inner:calc(var(--size)*.86);
  --mid  :calc(var(--size)*.93);
  --ring :var(--size);

  width:var(--size);
  height:var(--size);
  display:inline-block;
  position:absolute;
}

.water-drop .frame{
position:absolute;width:100%;height:100%;
z-index:0;
}

/* rings ------------------------------------------------ */
.water-drop .wavy-line,
.water-drop .wavy-line.second{
  position:absolute;inset:0;margin:auto;
  background:transparent;border:2px solid var(--c-ring1);
  animation:wiggle 6s ease-in-out infinite alternate,
           drop-spin 8s linear infinite;
}
.water-drop .wavy-line{
  width:var(--inner);height:var(--inner);
  border-radius:45% 55% 50% 60%/55% 50% 60% 45%;
}
.water-drop .wavy-line.second{
  width:var(--mid);height:var(--mid);
  border:2px solid var(--c-ring2);
  border-radius:50% 55% 60% 45%/55% 50% 45% 60%;
  animation:wiggle-2 8s ease-in-out infinite alternate,
           drop-spin 8s linear infinite;
  z-index:0;
}

/* static outer circle --------------------------------- */
.water-drop .ring-static{
  position:absolute;inset:0;margin:auto;
  width:var(--ring);height:var(--ring);
  border:2px solid var(--c-ring3);
  border-radius:50%;
  z-index:0;
}

/* rotating drop --------------------------------------- */
.water-drop .drop{
  position:absolute;
  inset:calc(var(--size)*.14);
  background:radial-gradient(circle at 30% 30%,var(--c-drop-light),var(--c-drop-dark));
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  box-shadow:0 0 calc(var(--size)*.14) var(--c-glow)66;
  animation:wiggle 4s ease-in-out infinite alternate,
           drop-spin 8s linear infinite;
  z-index:0;
}
.water-drop .drop::before{
  content:"";position:absolute;inset:10%;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffffff44,transparent 70%);
  transform:rotate(-45deg);animation:highlight 4s ease-in-out infinite;
}
.water-drop .drop::after{
  content:"";position:absolute;top:50%;left:50%;
  width:75%;height:75%;border-radius:50%;
  transform:translate(-50%,-50%) rotate(-45deg);
  background:var(--c-core);
}

/* keyframes (unchanged) -------------------------------- */
@keyframes drop-spin{0%{transform:rotate(45deg)}100%{transform:rotate(405deg)}}
@keyframes wiggle{0%,100%{border-radius:45% 55% 50% 60%/55% 50% 60% 45%}
                  50%{border-radius:60% 50% 55% 45%/40% 60% 50% 60%}}
@keyframes wiggle-2{0%,100%{border-radius:50% 55% 60% 45%/55% 50% 45% 60%}
                    50%{border-radius:60% 50% 50% 40%/40% 60% 55% 50%}}
@keyframes highlight{0%,100%{opacity:.3;transform:scale(1) rotate(-45deg)}
                     50%{opacity:.6;transform:scale(1.05) rotate(-45deg)}}