/* ===== FLOATING BACKGROUND SKINS ===== */
.floating-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-bg__skin {
    position: absolute;
    opacity: 0.12;
    filter: blur(1.5px);
    animation: floatSkin 18s ease-in-out infinite alternate;
    will-change: transform;
}

.floating-bg__skin:nth-child(1) {
    width: 150px; top: 3%; left: 2%;
    filter: blur(2px);
    opacity: 0.1;
    animation-duration: 21s;
    animation-delay: 0s;
}
.floating-bg__skin:nth-child(2) {
    width: 95px; top: 12%; right: 8%;
    filter: blur(1px);
    opacity: 0.14;
    animation-duration: 15s;
    animation-delay: -4s;
    animation-name: floatSkin2;
}
.floating-bg__skin:nth-child(3) {
    width: 180px; top: 35%; left: 65%;
    filter: blur(2.5px);
    opacity: 0.09;
    animation-duration: 24s;
    animation-delay: -8s;
    animation-name: floatSkin3;
}
.floating-bg__skin:nth-child(4) {
    width: 115px; top: 58%; right: 2%;
    filter: blur(1.5px);
    opacity: 0.13;
    animation-duration: 17s;
    animation-delay: -1s;
}
.floating-bg__skin:nth-child(5) {
    width: 135px; top: 78%; left: 12%;
    filter: blur(2px);
    opacity: 0.11;
    animation-duration: 19s;
    animation-delay: -6s;
    animation-name: floatSkin2;
}
.floating-bg__skin:nth-child(6) {
    width: 85px; top: 22%; left: 42%;
    filter: blur(1px);
    opacity: 0.15;
    animation-duration: 22s;
    animation-delay: -10s;
    animation-name: floatSkin3;
}
.floating-bg__skin:nth-child(7) {
    width: 160px; top: 48%; left: 85%;
    filter: blur(3px);
    opacity: 0.08;
    animation-duration: 25s;
    animation-delay: -3s;
}
.floating-bg__skin:nth-child(8) {
    width: 105px; top: 88%; left: 72%;
    filter: blur(1.5px);
    opacity: 0.12;
    animation-duration: 16s;
    animation-delay: -7s;
    animation-name: floatSkin2;
}

@keyframes floatSkin {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    25%  { transform: translate(18px, -25px) rotate(5deg) scale(1.04); }
    50%  { transform: translate(-12px, -40px) rotate(-4deg) scale(0.96); }
    75%  { transform: translate(22px, -15px) rotate(7deg) scale(1.03); }
    100% { transform: translate(-8px, -35px) rotate(-5deg) scale(0.97); }
}

@keyframes floatSkin2 {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    20%  { transform: translate(-20px, -15px) rotate(-6deg) scale(1.05); }
    45%  { transform: translate(15px, -35px) rotate(4deg) scale(0.94); }
    70%  { transform: translate(-25px, -20px) rotate(-8deg) scale(1.06); }
    100% { transform: translate(10px, -30px) rotate(3deg) scale(0.98); }
}

@keyframes floatSkin3 {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    30%  { transform: translate(25px, -10px) rotate(8deg) scale(0.95); }
    60%  { transform: translate(-15px, -45px) rotate(-6deg) scale(1.07); }
    100% { transform: translate(20px, -25px) rotate(5deg) scale(0.96); }
}