/* "Suyuq shisha" umumiy qatlam. Sayt o'z ranglarini :root da beradi:
   --fx-g1 (yorug' dog' markazi) --fx-g2 (chekkasi) --fx-spec (yaltiroq nuqta) --fx-rim (chekka nuri) */
:root{--sp:0;--fx-g1:rgba(140,205,255,.40);--fx-g2:rgba(61,139,255,.16);--fx-spec:rgba(255,255,255,.28);--fx-rim:rgba(190,225,255,.95);--fx-rim2:rgba(108,196,255,.35)}
.fx{--mx:50%;--my:50%;--hv:0;--sv:0;--rx:0deg;--ry:0deg;isolation:isolate}
.fx-rel{position:relative}
.fx:not(.fx-nb)::before,.fx-nb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:var(--hv);transition:opacity .35s ease;
  background:radial-gradient(calc(120px + var(--sv)*1px) calc(120px - var(--sv)*.35px) at var(--mx) var(--my),var(--fx-g1),var(--fx-g2) 45%,transparent 72%),
             radial-gradient(56px 56px at var(--mx) var(--my),var(--fx-spec),transparent 100%)}
.fx-rim::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:1;opacity:var(--hv);transition:opacity .35s ease;padding:1.5px;
  background:radial-gradient(176px 176px at var(--mx) var(--my),var(--fx-rim),var(--fx-rim2) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-tilt:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px) scale(1.012);will-change:transform;transition:transform .18s ease-out,box-shadow .22s,border-color .22s}
.fx-rip{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;z-index:2;
  border:2px solid var(--fx-rim);background:radial-gradient(circle,var(--fx-g1),transparent 70%);animation:fxrip .75s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fxrip{to{transform:scale(var(--rs,14));opacity:0}}
@keyframes fxmorph{0%{border-radius:60% 40% 55% 45%/50% 60% 40% 50%;transform:translate(0,0) rotate(0)}50%{border-radius:40% 60% 45% 55%/60% 40% 60% 40%;transform:translate(-30px,24px) rotate(40deg)}100%{border-radius:55% 45% 62% 38%/42% 55% 45% 58%;transform:translate(18px,-16px) rotate(90deg)}}
@keyframes fxaurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(70vmax,35vmax) scale(1.2)}100%{transform:translate(25vmax,85vmax) scale(.9)}}
@media(prefers-reduced-motion:reduce){.fx-tilt:hover{transform:none}.fx-rip{display:none}}