.scroll-indicator {
    position: absolute;
    width: 72px;
    height: 78px;
    margin: 0 auto;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
}

.chevron {
    position: absolute;
    left: 50%;
    bottom: 6px;

    width: 28px;
    height: 28px;

    border-right: 5px solid #58bce8;
    border-bottom: 5px solid #58bce8;

    transform: translateX(-50%) rotate(45deg);
    animation: pool-scroll 1.6s ease-in-out infinite;
}

.bubble {
    position: absolute;
    bottom: 18px;

    width: 7px;
    height: 7px;

    border: 2.5px solid #58bce8;
    border-radius: 50%;

    animation: bubble-rise 2.4s ease-in-out infinite;
}

.bubble-1 {
    left: 0;
    width: 6px;
    height: 6px;
    animation-delay: 0s;
}

.bubble-2 {
    left: 13px;
    width: 9px;
    height: 9px;
    animation-delay: 0.4s;
}

.bubble-3 {
    left: 27px;
    width: 6px;
    height: 6px;
    animation-delay: 0.9s;
}

.bubble-4 {
    right: 26px;
    width: 8px;
    height: 8px;
    animation-delay: 1.3s;
}

.bubble-5 {
    right: 11px;
    width: 6px;
    height: 6px;
    animation-delay: 0.7s;
}

.bubble-6 {
    right: -1px;
    width: 9px;
    height: 9px;
    animation-delay: 1.7s;
}

@keyframes pool-scroll {
    0%,
    100% {
        transform: translate(-50%, -5px) rotate(45deg);
    }

    50% {
        transform: translate(-50%, 7px) rotate(45deg);
    }
}

@keyframes bubble-rise {
    0% {
        transform: translateY(12px) scale(0.8);
    }

    50% {
        transform: translateY(-14px) scale(1);
    }

    100% {
        transform: translateY(-42px) scale(0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chevron,
    .bubble {
        animation: none;
    }
}