/* ═══════════════════════════════════════════
   Scroll
   ═══════════════════════════════════════════ */

        .hero__scroll {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 12;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .5rem;
            opacity: 0
        }

        .hero__scroll-text {
            font-size: .6rem;
            font-weight: 500;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--accent-dark)
        }

        .hero__scroll-line {
            width: 1px;
            height: 32px;
            background: linear-gradient(to bottom, transparent, var(--accent-dark))
        }

        .hero__scroll-chevron {
            width: 10px;
            height: 10px;
            border-right: 1px solid var(--accent-dark);
            border-bottom: 1px solid var(--accent-dark);
            transform: rotate(45deg);
            animation: chevBounce 2s ease-in-out infinite
        }

        @keyframes chevBounce {

            0%,
            100% {
                transform: rotate(45deg) translateY(0);
                opacity: .4
            }

            50% {
                transform: rotate(45deg) translateY(5px);
                opacity: 1
            }
        }