/* The trail sits behind the page; movement and bites follow scroll distance. */
svg.brand-traveller {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    transform: none;
    pointer-events: none;
    overflow: hidden;
    color: #22d3ee;
    will-change: auto
}

#brand-pacman {
    filter: drop-shadow(0 0 6px currentColor)
}

#brand-dots {
    opacity: .8
}

#brand-eye {
    filter: none
}

.hero-brand-lockup {
    width: clamp(230px, 32vw, 320px);
    margin: 0 auto 20px;
    justify-content: center
}

.hero-brand-lockup .brand-logo {
    width: 100%;
    height: auto
}

.pacman-enabled #hero-brand img,
.pacman-enabled #footer-brand img {
    clip-path: inset(0 0 0 15%)
}

.pacman-resting #brand-pacman {
    filter: none
}

.pacman-docked #brand-pacman {
    filter: none;
    animation: cybrus-arrival .8s ease-out 1
}

@keyframes cybrus-arrival {

    0%,
    100% {
        filter: none
    }

    45% {
        filter: drop-shadow(0 0 10px var(--arrival-colour))
    }
}

@media(min-width:760px) {
    .hero-copy {
        top: clamp(108px, 12%, 145px)
    }
}

@media(max-width:759px) {
    .hero-brand-lockup {
        width: min(280px, 90%);
        margin-bottom: 22px
    }

    #brand-pacman {
        filter: drop-shadow(0 0 3px currentColor)
    }

    #brand-dots {
        filter: none
    }
}

@media(prefers-reduced-motion:reduce) {
    #brand-dots {
        display: none
    }

    #brand-pacman {
        filter: none;
        animation: none
    }
}