:root {
    --seo-motion-accent: #f56363;
    --seo-motion-ease: cubic-bezier(.22, .8, .25, 1);
}

#seo-scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 1100;
    width: 100%;
    height: 3px;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #f56363 0%, #f3bd4f 52%, #35b8c9 100%);
    box-shadow: 0 0 12px rgb(245 99 99 / 35%);
}

.navbar {
    transition: box-shadow 240ms ease, background-color 240ms ease;
}

.site-scrolled .navbar {
    box-shadow: 0 8px 28px rgb(16 24 40 / 18%);
}

.navbar .nav > li > a {
    position: relative;
}

.navbar .nav > li > a::after {
    position: absolute;
    right: 15px;
    bottom: 8px;
    left: 15px;
    height: 2px;
    content: "";
    background: var(--seo-motion-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms var(--seo-motion-ease);
}

.navbar .nav > li > a:hover::after,
.navbar .nav > li > a:focus-visible::after,
.navbar .nav > li.active > a::after {
    transform: scaleX(1);
}

.seo-hero-title {
    animation: seo-hero-enter 780ms var(--seo-motion-ease) both;
    text-shadow: 0 8px 28px rgb(0 0 0 / 28%);
}

.seo-hero-subtitle {
    animation: seo-hero-enter 780ms 110ms var(--seo-motion-ease) both;
}

.seo-hero-tagline {
    animation: seo-hero-enter 780ms 210ms var(--seo-motion-ease) both;
}

.seo-hero-title::after {
    display: inline-block;
    width: .16em;
    height: .16em;
    margin-left: .35em;
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
    vertical-align: .8em;
    animation: seo-orbit 3.4s ease-in-out 800ms infinite;
}

.seo-motion-ready .seo-motion-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.99);
    transition: opacity 680ms var(--seo-motion-ease), transform 680ms var(--seo-motion-ease);
    transition-delay: var(--seo-motion-delay, 0ms);
    will-change: opacity, transform;
}

.seo-motion-ready .seo-motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

#isotope .isotope-item {
    transition: transform 320ms var(--seo-motion-ease), filter 320ms ease;
}

#isotope .isotope-item:hover {
    z-index: 2;
    filter: drop-shadow(0 16px 20px rgb(24 32 48 / 16%));
    transform: translateY(-6px);
}

#isotope .isotope-item img {
    transition: transform 520ms var(--seo-motion-ease);
}

#isotope .isotope-item:hover img {
    transform: scale(1.035);
}

.seo-motion-ready .seo-motion-reveal.is-visible:nth-child(4n + 2) {
    transition-delay: 70ms;
}

.seo-motion-ready .seo-motion-reveal.is-visible:nth-child(4n + 3) {
    transition-delay: 120ms;
}

.seo-motion-ready .seo-motion-reveal.is-visible:nth-child(4n + 4) {
    transition-delay: 170ms;
}

@keyframes seo-hero-enter {
    from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes seo-orbit {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(3px, -8px, 0) scale(1.3); }
}

@media (max-width: 767px) {
    #isotope .isotope-item:hover { transform: none; filter: none; }
    #isotope .isotope-item:hover img { transform: none; }
    .seo-hero-title::after { animation-duration: 4.8s; }
}

@media (prefers-reduced-motion: reduce) {
    #seo-scroll-progress { display: none; }
    .site-scrolled .navbar,
    .navbar .nav > li > a::after,
    #isotope .isotope-item,
    #isotope .isotope-item img {
        transition: none;
    }
    .seo-hero-title,
    .seo-hero-title::after,
    .seo-hero-subtitle,
    .seo-hero-tagline {
        animation: none;
    }
    .seo-motion-ready .seo-motion-reveal,
    .seo-motion-ready .seo-motion-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}