/* Pasapas Floating Shapes - ALLEEN shapes, raakt NIKS anders aan */

.pasapas-deco {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: visible !important;
}

.deco-star-4 {
    position: absolute;
    display: inline-block;
    pointer-events: none;
}

.deco-star-4::before {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.38 65.14'%3E%3Cpath d='M63.81,36.95c.86,0,1.57-.45,1.57-1s-.5-1-1.11-1-4.05-1.41-7.66-3.13c-10.32-4.93-17.63-13.68-21.17-25.37-.14-.45-.26-.88-.38-1.27-1.19-3.93-1.57-5.18-1.94-5.18-.21,0-.42.42-.78.98-.51.81-.94,2.37-.95,3.47-.03,3.87-5.99,14.58-10.79,19.38-3.05,3.04-7.81,6.26-12.73,8.59l-7.87,3.74,7.59,2.93c11.9,4.59,18.84,12.16,23.26,25.36.54,1.6,1.32.62,3.93-5,1.99-4.26,5.13-8.84,8.05-11.71,4.54-4.45,16.85-10.79,20.98-10.79Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.38 65.14'%3E%3Cpath d='M63.81,36.95c.86,0,1.57-.45,1.57-1s-.5-1-1.11-1-4.05-1.41-7.66-3.13c-10.32-4.93-17.63-13.68-21.17-25.37-.14-.45-.26-.88-.38-1.27-1.19-3.93-1.57-5.18-1.94-5.18-.21,0-.42.42-.78.98-.51.81-.94,2.37-.95,3.47-.03,3.87-5.99,14.58-10.79,19.38-3.05,3.04-7.81,6.26-12.73,8.59l-7.87,3.74,7.59,2.93c11.9,4.59,18.84,12.16,23.26,25.36.54,1.6,1.32.62,3.93-5,1.99-4.26,5.13-8.84,8.05-11.71,4.54-4.45,16.85-10.79,20.98-10.79Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.deco-circle {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    pointer-events: none;
}

@keyframes decoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(5deg); }
    50% { transform: translateY(-25px) rotate(-3deg); }
    75% { transform: translateY(-10px) rotate(4deg); }
}
@keyframes decoFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(15px) rotate(-5deg); }
    50% { transform: translateY(25px) rotate(3deg); }
    75% { transform: translateY(10px) rotate(-4deg); }
}
@keyframes decoTwinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    25% { opacity: 0.4; transform: scale(0.7) rotate(15deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(-10deg); }
    75% { opacity: 0.6; transform: scale(0.85) rotate(5deg); }
}
@keyframes decoPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

.deco-animate-float { animation: decoFloat 6s ease-in-out infinite; }
.deco-animate-float-reverse { animation: decoFloatReverse 7s ease-in-out infinite; }
.deco-animate-twinkle { animation: decoTwinkle 4s ease-in-out infinite; }
.deco-animate-pulse { animation: decoPulse 3s ease-in-out infinite; }

.deco-star-4:nth-child(2n) { animation-delay: -1.5s; }
.deco-star-4:nth-child(3n) { animation-delay: -3s; }
.deco-star-4:nth-child(4n) { animation-delay: -0.8s; }
.deco-star-4:nth-child(5n) { animation-delay: -2.2s; }
.deco-circle:nth-child(2n) { animation-delay: -1s; }
.deco-circle:nth-child(3n) { animation-delay: -2s; }

@media (max-width: 480px) {
    .deco-star-4, .deco-circle { display: none !important; }
}