/* =========================
   COMPREHENSIVE ANIMATIONS
   Consolidated from all CSS files
   ========================= */

/* =========================
   CORE BACKGROUND ANIMATIONS
   ========================= */

:root {
    --motion-enabled: 1;
    --motion-duration-fast: 100ms;
    --motion-duration: 190ms;
    --motion-duration-slow: 360ms;
    --motion-delay-step: 40ms;
    --motion-distance: 12px;
    --motion-hover-lift: -2px;
    --motion-hover-scale: 1.01;
    --motion-page-exit: 200ms;
    --motion-theme-shift: 420ms;
    --motion-accent-shift: 380ms;
    --transition-duration: 140ms !important;
    --motion-origin-x: 50vw;
    --motion-origin-y: 50vh;
    --motion-next-color: var(--accent-color);
    --motion-theme-accent: var(--accent-color);
    --motion-theme-primary: var(--primary-color);
    --motion-theme-background: var(--background-color);
    --motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-easing-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes subtleEnter {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance));
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes subtleScaleIn {
    from {
        opacity: 0;
        transform: translateY(calc(var(--motion-distance) * 0.6)) scale(0.985);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes subtleFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes siteGradientDrift {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1.08) rotate(0deg);
        background-position:
            0% 0%,
            100% 0%,
            0% 100%,
            100% 100%,
            0% 50%;
    }

    50% {
        transform: translate3d(2%, 3%, 0) scale(1.14) rotate(1.5deg);
        background-position:
            12% 8%,
            88% 14%,
            10% 90%,
            92% 84%,
            100% 50%;
    }

    100% {
        transform: translate3d(4%, -3%, 0) scale(1.1) rotate(-1.2deg);
        background-position:
            18% 12%,
            82% 6%,
            16% 84%,
            86% 78%,
            0% 50%;
    }
}

@keyframes siteGradientFloat {
    0% {
        transform: translate3d(-4%, -2%, 0) scale(1.02);
        opacity: 0.72;
    }

    50% {
        transform: translate3d(3%, 4%, 0) scale(1.08);
        opacity: 0.94;
    }

    100% {
        transform: translate3d(6%, -3%, 0) scale(1.04);
        opacity: 0.78;
    }
}

@keyframes highlight {
    0% {
        background-color: rgba(52, 152, 219, 0.2);
    }

    100% {
        background-color: rgba(52, 152, 219, 0.1);
    }
}


body .navbar__link,
body .navbar__theme-button,
body .navbar__icon-button,
body .nav-accent-bubble,
body .home-card,
body .home-stat,
body .home-social__link,
body .hero-chip,
body .repo-card,
body .repo-card__link,
body .projects-section-link,
body .projects-gists__item,
body .jump-nav a,
body .filter-btn,
body .site-paginator__button,
body .image-box {
    transition-duration: var(--motion-duration);
    transition-timing-function: var(--motion-easing);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    html:not([data-hover-effects="off"]) body .hero-chip:hover,
    html:not([data-hover-effects="off"]) body .home-card:hover,
    html:not([data-hover-effects="off"]) body .home-stat:hover,
    html:not([data-hover-effects="off"]) body .repo-card:hover,
    html:not([data-hover-effects="off"]) body .projects-section-link:hover,
    html:not([data-hover-effects="off"]) body .projects-gists__item:hover,
    html:not([data-hover-effects="off"]) body .image-box:hover {
        transform: translateY(var(--motion-hover-lift)) scale(var(--motion-hover-scale));
    }
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 0%;
        transform: scale(1);
        opacity: 1;
    }

    25% {
        background-position: 100% 0%;
        transform: scale(1.02);
        opacity: 0.95;
    }

    50% {
        background-position: 100% 100%;
        transform: scale(1);
        opacity: 0.9;
    }

    75% {
        background-position: 0% 100%;
        transform: scale(1.02);
        opacity: 0.95;
    }

    100% {
        background-position: 0% 0%;
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================
   ENTRY ANIMATIONS
   ========================= */

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(32px) scale(0.96);
        filter: blur(2px);
    }

    60% {
        opacity: 0.8;
        transform: translateY(-4px) scale(1.01);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(48px) scale(0.94);
        filter: blur(3px);
    }

    40% {
        opacity: 0.6;
        transform: translateY(8px) scale(1.02);
        filter: blur(1px);
    }

    70% {
        opacity: 0.9;
        transform: translateY(-6px) scale(1.01);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-48px) scale(0.94) rotate(2deg);
        filter: blur(3px);
    }

    40% {
        opacity: 0.6;
        transform: translateY(-8px) scale(1.02) rotate(-1deg);
        filter: blur(1px);
    }

    70% {
        opacity: 0.9;
        transform: translateY(6px) scale(1.01) rotate(0.5deg);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-64px) scale(0.9) rotateY(45deg);
        filter: blur(4px);
    }

    50% {
        opacity: 0.7;
        transform: translateX(8px) scale(1.05) rotateY(-5deg);
        filter: blur(1px);
    }

    80% {
        opacity: 0.95;
        transform: translateX(-2px) scale(1.01) rotateY(2deg);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0deg);
        filter: blur(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(64px) scale(0.9) rotateY(-45deg);
        filter: blur(4px);
    }

    50% {
        opacity: 0.7;
        transform: translateX(-8px) scale(1.05) rotateY(5deg);
        filter: blur(1px);
    }

    80% {
        opacity: 0.95;
        transform: translateX(2px) scale(1.01) rotateY(-2deg);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0deg);
        filter: blur(0);
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.7) rotate(-10deg);
        filter: blur(6px);
    }

    30% {
        opacity: 0.4;
        transform: scale(1.1) rotate(5deg);
        filter: blur(2px);
    }

    60% {
        opacity: 0.8;
        transform: scale(0.95) rotate(-2deg);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes startupAnimation {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(40px) rotateX(15deg);
        filter: blur(8px);
        box-shadow: var(--shadow-2xl);
    }

    30% {
        opacity: 0.3;
        transform: scale(0.95) translateY(12px) rotateX(5deg);
        filter: blur(4px);
        box-shadow: var(--shadow-xl);
    }

    60% {
        opacity: 0.8;
        transform: scale(1.08) translateY(-12px) rotateX(-2deg);
        filter: blur(1px);
        box-shadow: var(--shadow-lg);
    }

    80% {
        opacity: 0.95;
        transform: scale(0.98) translateY(4px) rotateX(1deg);
        filter: blur(0.5px);
        box-shadow: var(--shadow-md);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0deg);
        filter: blur(0);
        box-shadow: var(--shadow-sm);
    }
}

/* =========================
   LIQUID GLASS ANIMATIONS
   ========================= */

@keyframes glassPopIn {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(40px) rotateX(20deg);
        filter: blur(12px) saturate(0.8);
        backdrop-filter: blur(0px) saturate(1.5);
        box-shadow:
            var(--shadow-2xl),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    25% {
        opacity: 0.4;
        transform: scale(0.98) translateY(20px) rotateX(8deg);
        filter: blur(6px) saturate(1.1);
        backdrop-filter: blur(4px) saturate(1.8);
        box-shadow:
            var(--shadow-xl),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    60% {
        opacity: 0.85;
        transform: scale(1.12) translateY(-16px) rotateX(-3deg);
        filter: blur(2px) saturate(1.3);
        backdrop-filter: blur(16px) saturate(2);
        box-shadow:
            var(--shadow-lg),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.1);
    }

    80% {
        opacity: 0.95;
        transform: scale(0.96) translateY(6px) rotateX(1deg);
        filter: blur(1px) saturate(1.2);
        backdrop-filter: blur(20px) saturate(1.8);
        box-shadow:
            var(--shadow-md),
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 0 15px rgba(255, 255, 255, 0.08);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0deg);
        filter: blur(0) saturate(1);
        backdrop-filter: blur(24px) saturate(1.6);
        box-shadow:
            var(--shadow-sm),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 10px rgba(255, 255, 255, 0.05);
    }
}

@keyframes glassShimmer {
    0% {
        background-position: -300% 0;
        opacity: 0.3;
        transform: skewX(-15deg);
    }

    50% {
        opacity: 0.8;
        transform: skewX(0deg);
    }

    100% {
        background-position: 300% 0;
        opacity: 0.3;
        transform: skewX(15deg);
    }
}

@keyframes glassFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-8px) rotate(1deg) scale(1.02);
    }

    50% {
        transform: translateY(-4px) rotate(0deg) scale(1.01);
    }

    75% {
        transform: translateY(6px) rotate(-1deg) scale(1.01);
    }
}

/* =========================
   INTERACTIVE ANIMATIONS
   ========================= */

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
        filter: blur(4px);
    }

    20% {
        opacity: 0.4;
        transform: scale(0.8) rotate(5deg);
        filter: blur(2px);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.25) rotate(-2deg);
        filter: blur(0.5px);
    }

    70% {
        opacity: 0.95;
        transform: scale(0.9) rotate(1deg);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.1) translateY(60px) rotate(-180deg);
        filter: blur(6px);
    }

    20% {
        opacity: 0.6;
        transform: scale(0.8) translateY(-30px) rotate(-45deg);
        filter: blur(3px);
    }

    40% {
        opacity: 0.9;
        transform: scale(1.3) translateY(15px) rotate(15deg);
        filter: blur(1px);
    }

    60% {
        opacity: 1;
        transform: scale(0.85) translateY(-8px) rotate(-5deg);
        filter: blur(0px);
    }

    80% {
        opacity: 1;
        transform: scale(1.1) translateY(4px) rotate(2deg);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 2px 8px rgba(255, 64, 129, 0.4),
            0 0 0 0 rgba(255, 64, 129, 0.7);
    }

    25% {
        transform: scale(1.03);
        box-shadow:
            0 4px 12px rgba(255, 64, 129, 0.5),
            0 0 0 4px rgba(255, 64, 129, 0.3);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            0 6px 16px rgba(255, 64, 129, 0.6),
            0 0 0 8px rgba(255, 64, 129, 0.2);
    }

    75% {
        transform: scale(1.03);
        box-shadow:
            0 4px 12px rgba(255, 64, 129, 0.5),
            0 0 0 4px rgba(255, 64, 129, 0.3);
    }
}

@keyframes pulsePositioned {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 2px 8px rgba(255, 64, 129, 0.4),
            0 0 0 0 rgba(255, 64, 129, 0.7);
    }

    25% {
        transform: translate(-50%, -50%) scale(1.03);
        box-shadow:
            0 4px 12px rgba(255, 64, 129, 0.5),
            0 0 0 4px rgba(255, 64, 129, 0.3);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow:
            0 6px 16px rgba(255, 64, 129, 0.6),
            0 0 0 8px rgba(255, 64, 129, 0.2);
    }

    75% {
        transform: translate(-50%, -50%) scale(1.03);
        box-shadow:
            0 4px 12px rgba(255, 64, 129, 0.5),
            0 0 0 4px rgba(255, 64, 129, 0.3);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow:
            0 0 8px color-mix(in srgb, var(--primary-color) 40%, transparent),
            0 0 16px color-mix(in srgb, var(--primary-color) 22%, transparent),
            0 0 24px color-mix(in srgb, var(--primary-color) 12%, transparent);
    }

    25% {
        box-shadow:
            0 0 12px color-mix(in srgb, var(--primary-color) 55%, transparent),
            0 0 24px color-mix(in srgb, var(--primary-color) 35%, transparent),
            0 0 36px color-mix(in srgb, var(--primary-color) 20%, transparent);
    }

    50% {
        box-shadow:
            0 0 16px color-mix(in srgb, var(--primary-color) 75%, transparent),
            0 0 32px color-mix(in srgb, var(--primary-color) 55%, transparent),
            0 0 48px color-mix(in srgb, var(--primary-color) 30%, transparent);
    }

    75% {
        box-shadow:
            0 0 12px color-mix(in srgb, var(--primary-color) 55%, transparent),
            0 0 24px color-mix(in srgb, var(--primary-color) 35%, transparent),
            0 0 36px color-mix(in srgb, var(--primary-color) 20%, transparent);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    10% {
        transform: translateX(-3px) rotate(-1deg);
    }

    20% {
        transform: translateX(3px) rotate(1deg);
    }

    30% {
        transform: translateX(-4px) rotate(-1.5deg);
    }

    40% {
        transform: translateX(4px) rotate(1.5deg);
    }

    50% {
        transform: translateX(-3px) rotate(-1deg);
    }

    60% {
        transform: translateX(3px) rotate(1deg);
    }

    70% {
        transform: translateX(-2px) rotate(-0.5deg);
    }

    80% {
        transform: translateX(2px) rotate(0.5deg);
    }

    90% {
        transform: translateX(-1px) rotate(-0.25deg);
    }
}

@keyframes wobble {
    0% {
        transform: translateX(0%) rotate(0deg) scale(1);
    }

    15% {
        transform: translateX(-30%) rotate(-6deg) scale(0.98);
    }

    30% {
        transform: translateX(25%) rotate(4deg) scale(1.02);
    }

    45% {
        transform: translateX(-20%) rotate(-4deg) scale(0.99);
    }

    60% {
        transform: translateX(15%) rotate(3deg) scale(1.01);
    }

    75% {
        transform: translateX(-8%) rotate(-2deg) scale(1);
    }

    90% {
        transform: translateX(4%) rotate(1deg) scale(1);
    }

    100% {
        transform: translateX(0%) rotate(0deg) scale(1);
    }
}

/* =========================
   NAVIGATION ANIMATIONS
   ========================= */

@keyframes navbar-dropin {
    0% {
        opacity: 0;
        transform: translateY(-30px);
        filter: blur(4px);
    }

    60% {
        opacity: 0.8;
        transform: translateY(2px);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-120%) scale(0.9) rotateX(20deg);
        filter: blur(6px);
    }

    40% {
        opacity: 0.7;
        transform: translateY(-20%) scale(1.05) rotateX(5deg);
        filter: blur(2px);
    }

    70% {
        opacity: 0.95;
        transform: translateY(8%) scale(1.02) rotateX(-2deg);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(120%) scale(0.9) rotateX(-20deg);
        filter: blur(6px);
    }

    40% {
        opacity: 0.7;
        transform: translateY(20%) scale(1.05) rotateX(-5deg);
        filter: blur(2px);
    }

    70% {
        opacity: 0.95;
        transform: translateY(-8%) scale(1.02) rotateX(2deg);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

/* =========================
   PAGE, THEME, AND COLOR TRANSITIONS
   ========================= */

/* Cross-document view transitions: navigations between pages of the site
   crossfade natively instead of flashing white. Works with plain full-page
   navigation (and prerendered pages), so no client-side DOM swapping is
   needed. Browsers without support simply fall back to a normal load. */
@view-transition {
    navigation: auto;
}

/* Pure crossfade: any positional drift here reads as the page "jumping"
   when the two layouts differ, so only opacity animates. */
@keyframes viewTransitionOut {
    to {
        opacity: 0;
    }
}

@keyframes viewTransitionIn {
    from {
        opacity: 0;
    }
}

::view-transition-old(root) {
    animation: viewTransitionOut 200ms var(--motion-easing-soft) both;
}

::view-transition-new(root) {
    animation: viewTransitionIn 200ms var(--motion-easing-soft) both;
}

/* The navbar is a fixture: snapshot it separately so it stays put while the
   page content transitions underneath it. */
#site-navbar {
    view-transition-name: site-navbar;
}

::view-transition-old(site-navbar) {
    animation: none;
    opacity: 0;
}

::view-transition-new(site-navbar) {
    animation: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

@keyframes pageExitSettle {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0.72;
        transform: translateY(-6px) scale(0.992);
        filter: blur(1.4px);
    }
}

@keyframes pageExitWash {
    0% {
        opacity: 0.86;
        transform: translate3d(0, 18px, 0) scaleY(0.92);
    }

    42% {
        opacity: 0.94;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scaleY(1.02);
    }
}

@keyframes themeTexturePan {
    0% {
        background-position:
            0 0,
            0 0,
            0% 0%,
            100% 0%,
            0% 100%,
            100% 100%,
            0% 50%;
    }

    100% {
        background-position:
            42px 28px,
            -34px 22px,
            12% 8%,
            86% 12%,
            14% 88%,
            88% 82%,
            100% 50%;
    }
}

@keyframes themeScanlinePan {
    0% {
        background-position:
            0 0,
            0 0,
            0% 0%,
            100% 0%,
            0% 100%,
            100% 100%,
            0% 50%;
    }

    100% {
        background-position:
            0 48px,
            48px 0,
            0% 0%,
            100% 0%,
            0% 100%,
            100% 100%,
            0% 50%;
    }
}

@keyframes themeNeonSweep {
    0% {
        background-position:
            0 0,
            0 0,
            50% 120%,
            0% 0%,
            100% 0%,
            0% 100%,
            100% 100%,
            0% 50%;
        filter: saturate(1.05);
    }

    50% {
        background-position:
            28px 44px,
            44px 28px,
            50% 90%,
            10% 8%,
            88% 12%,
            12% 88%,
            88% 82%,
            100% 50%;
        filter: saturate(1.42);
    }

    100% {
        background-position:
            56px 88px,
            88px 56px,
            50% 120%,
            18% 12%,
            82% 6%,
            16% 84%,
            86% 78%,
            0% 50%;
        filter: saturate(1.1);
    }
}

@keyframes pageEnterSettle {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.992);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes routeHeroStartup {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.965);
        filter: blur(10px) saturate(0.9);
    }

    54% {
        opacity: 0.92;
        transform: translateY(-6px) scale(1.012);
        filter: blur(1.5px) saturate(1.14);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) saturate(1);
    }
}

@keyframes routeSectionStartup {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(0.975);
        filter: blur(8px);
    }

    68% {
        opacity: 0.94;
        transform: translateY(-3px) scale(1.006);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes pageEnterWash {
    0% {
        opacity: 0.8;
        transform: translateY(0) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-12px) scaleY(0.96);
    }
}

@keyframes pageOverlayDismiss {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scaleY(1.02);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scaleY(0.98);
    }
}

@keyframes themeSurfaceShift {
    0% {
        opacity: 0.68;
        transform: translate3d(-12%, 0, 0) skewX(-8deg) scaleX(0.8);
        filter: blur(14px) saturate(1.2);
    }

    34% {
        opacity: 0.94;
        transform: translate3d(0, 0, 0) skewX(-2deg) scaleX(1.08);
        filter: blur(5px) saturate(1.45);
    }

    62% {
        opacity: 0.72;
        transform: translate3d(8%, 0, 0) skewX(3deg) scaleX(1);
        filter: blur(2px) saturate(1.25);
    }

    100% {
        opacity: 0;
        transform: translate3d(18%, 0, 0) skewX(6deg) scaleX(1.16);
        filter: blur(0) saturate(1);
    }
}

@keyframes themePagePulse {
    0% {
        transform: scale(1);
        filter: saturate(1);
    }

    42% {
        transform: scale(1.006);
        filter: saturate(1.25);
    }

    100% {
        transform: scale(1);
        filter: saturate(1);
    }
}

@keyframes accentColorWash {
    0% {
        opacity: 0;
        clip-path: circle(0 at var(--motion-origin-x) var(--motion-origin-y));
        filter: blur(16px) saturate(1.2);
    }

    34% {
        opacity: 0.46;
        clip-path: circle(34vmax at var(--motion-origin-x) var(--motion-origin-y));
        filter: blur(9px) saturate(1.35);
    }

    100% {
        opacity: 0;
        clip-path: circle(82vmax at var(--motion-origin-x) var(--motion-origin-y));
        filter: blur(0) saturate(1);
    }
}

@keyframes accentControlSettle {
    0% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.045);
    }

    100% {
        transform: scale(1);
    }
}

.site-motion-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    transform-origin: center;
    will-change: opacity, transform, filter, clip-path;
}

.page-motion-overlay {
    opacity: 0.92;
    background:
        radial-gradient(circle at 50% 110%,
            color-mix(in srgb, var(--accent-color) 46%, transparent) 0%,
            transparent 38%),
        linear-gradient(180deg,
            transparent 0%,
            color-mix(in srgb, var(--background-color) 72%, transparent) 32%,
            var(--background-color) 100%);
    animation: pageExitWash var(--motion-page-exit) var(--motion-easing-soft) both;
}

html.page-is-entering .page-motion-overlay {
    animation: pageEnterWash 520ms var(--motion-easing-soft) both;
}

html.page-is-entering .page-motion-overlay.is-dismissing,
.page-motion-overlay.is-dismissing {
    animation: pageOverlayDismiss 260ms var(--motion-easing-soft) both;
}

.theme-motion-overlay {
    opacity: 0.72;
    background:
        linear-gradient(110deg,
            transparent 0%,
            color-mix(in srgb, var(--motion-theme-primary) 26%, transparent) 16%,
            color-mix(in srgb, var(--motion-theme-accent) 54%, transparent) 42%,
            color-mix(in srgb, var(--motion-theme-background) 78%, transparent) 70%,
            transparent 100%);
    animation: themeSurfaceShift var(--motion-theme-shift) var(--motion-easing-soft) both;
    mix-blend-mode: plus-lighter;
}

.theme-motion-overlay.to-light {
    background:
        linear-gradient(110deg,
            rgba(255, 255, 255, 0) 0%,
            color-mix(in srgb, var(--motion-theme-accent) 32%, white 42%) 34%,
            rgba(255, 255, 255, 0.72) 58%,
            rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: normal;
}

.theme-motion-overlay.to-dark {
    background:
        linear-gradient(110deg,
            rgba(3, 7, 18, 0) 0%,
            color-mix(in srgb, var(--motion-theme-accent) 34%, #020617 54%) 38%,
            rgba(2, 6, 23, 0.82) 62%,
            rgba(3, 7, 18, 0) 100%);
    mix-blend-mode: screen;
}

.accent-motion-overlay {
    opacity: 0;
    background:
        radial-gradient(circle at var(--motion-origin-x) var(--motion-origin-y),
            color-mix(in srgb, var(--motion-next-color) 34%, transparent) 0%,
            color-mix(in srgb, var(--motion-next-color) 18%, transparent) 22%,
            transparent 58%);
    animation: accentColorWash var(--motion-accent-shift) var(--motion-easing-soft) both;
}

@media (prefers-reduced-motion: no-preference) {
    html.page-is-leaving body> :not(.site-motion-overlay) {
        animation: pageExitSettle var(--motion-page-exit) var(--motion-easing) both;
        transform-origin: 50% 0;
    }

    html.page-is-entering body> :not(.site-motion-overlay) {
        animation: pageEnterSettle 520ms var(--motion-easing-soft) both;
        transform-origin: 50% 0;
    }

    html.page-is-entering .site-hero-card {
        animation: routeHeroStartup 920ms var(--motion-easing-soft) both;
        transform-origin: 50% 28%;
        will-change: opacity, transform, filter;
    }

    html.page-is-entering .site-section-card {
        animation: routeSectionStartup 780ms var(--motion-easing-soft) both;
        transform-origin: 50% 24%;
        will-change: opacity, transform, filter;
    }

    html.page-is-entering .site-section:nth-of-type(2) .site-section-card {
        animation-delay: 70ms;
    }

    html.page-is-entering .site-section:nth-of-type(3) .site-section-card {
        animation-delay: 120ms;
    }

    html.theme-is-changing body::before,
    html.theme-is-changing body::after {
        animation-name: themePagePulse;
        animation-duration: var(--motion-theme-shift);
        animation-timing-function: var(--motion-easing-soft);
        animation-fill-mode: both;
    }

    html.accent-is-changing body .nav-accent-bubble,
    html.accent-is-changing body [data-accent-random],
    html.accent-is-changing body [data-accent-reset] {
        animation: accentControlSettle 360ms var(--motion-easing-soft) both;
    }
}

/* =========================
   LOADING ANIMATIONS
   ========================= */

@keyframes spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(90deg) scale(1.05);
    }

    50% {
        transform: rotate(180deg) scale(1);
    }

    75% {
        transform: rotate(270deg) scale(1.05);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes loading {

    0%,
    80%,
    100% {
        transform: scale(0) rotate(0deg);
        opacity: 0.3;
        filter: blur(2px);
    }

    20% {
        transform: scale(0.8) rotate(90deg);
        opacity: 0.8;
        filter: blur(1px);
    }

    40% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
        filter: blur(0px);
    }

    60% {
        transform: scale(0.9) rotate(270deg);
        opacity: 0.9;
        filter: blur(0.5px);
    }
}

@keyframes loadingDots {

    0%,
    20% {
        opacity: 0;
        transform: scale(0.6) translateY(20px);
        filter: blur(2px);
    }

    25% {
        opacity: 0.4;
        transform: scale(0.9) translateY(10px);
        filter: blur(1px);
    }

    50% {
        opacity: 1;
        transform: scale(1.3) translateY(-8px);
        filter: blur(0px);
    }

    75% {
        opacity: 0.6;
        transform: scale(1.1) translateY(4px);
        filter: blur(0.5px);
    }

    100% {
        opacity: 0;
        transform: scale(0.6) translateY(20px);
        filter: blur(2px);
    }
}

/* =========================
   SPECIAL EFFECTS
   ========================= */

@keyframes toggleFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.6) rotate(-20deg) translateY(30px);
        filter: blur(4px);
    }

    30% {
        opacity: 0.5;
        transform: scale(0.9) rotate(10deg) translateY(8px);
        filter: blur(2px);
    }

    60% {
        opacity: 0.9;
        transform: scale(1.15) rotate(-5deg) translateY(-12px);
        filter: blur(0.5px);
    }

    80% {
        opacity: 0.98;
        transform: scale(0.95) rotate(2deg) translateY(4px);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateY(0);
        filter: blur(0);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0.8;
        filter: blur(0px);
    }

    25% {
        transform: scale(1) rotate(90deg);
        opacity: 0.6;
        filter: blur(1px);
    }

    50% {
        transform: scale(2.5) rotate(180deg);
        opacity: 0.4;
        filter: blur(2px);
    }

    75% {
        transform: scale(3.5) rotate(270deg);
        opacity: 0.2;
        filter: blur(3px);
    }

    100% {
        transform: scale(5) rotate(360deg);
        opacity: 0;
        filter: blur(4px);
    }
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    10% {
        transform: scale(1.15) rotate(2deg);
    }

    20% {
        transform: scale(1.05) rotate(-1deg);
    }

    30% {
        transform: scale(1.25) rotate(3deg);
    }

    40% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(1deg);
    }

    60% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes typewriter {
    0% {
        width: 0;
        opacity: 0;
        border-right-color: transparent;
    }

    1% {
        opacity: 1;
        border-right-color: currentColor;
    }

    50% {
        border-right-color: currentColor;
    }

    100% {
        width: 100%;
        opacity: 1;
        border-right-color: transparent;
    }
}

@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
        filter: blur(2px);
    }

    50% {
        opacity: 0.8;
        transform: translateY(4px) scale(1.005);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes fadeInTextScale {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
        filter: blur(1.5px);
    }

    60% {
        opacity: 0.9;
        transform: translateY(-2px) scale(1.02);
        filter: blur(0.5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes fadeInTextUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(1px);
    }

    70% {
        opacity: 0.9;
        transform: translateY(-1px);
        filter: blur(0.2px);
    }

    100% {
        opacity: 0.85;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes blink {

    0%,
    49% {
        opacity: 1;
        transform: scale(1);
    }

    50%,
    99% {
        opacity: 0;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================
   UTILITY ANIMATIONS
   ========================= */

@keyframes slideUp {
    0% {
        transform: translateY(150%) scale(0.9) rotateX(15deg);
        opacity: 0;
        filter: blur(6px);
    }

    40% {
        transform: translateY(30%) scale(1.05) rotateX(5deg);
        opacity: 0.7;
        filter: blur(2px);
    }

    70% {
        transform: translateY(-8%) scale(1.02) rotateX(-2deg);
        opacity: 0.95;
        filter: blur(0.5px);
    }

    100% {
        transform: translateY(0) scale(1) rotateX(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-150%) scale(0.9) rotateX(-15deg);
        opacity: 0;
        filter: blur(6px);
    }

    40% {
        transform: translateY(-30%) scale(1.05) rotateX(-5deg);
        opacity: 0.7;
        filter: blur(2px);
    }

    70% {
        transform: translateY(8%) scale(1.02) rotateX(2deg);
        opacity: 0.95;
        filter: blur(0.5px);
    }

    100% {
        transform: translateY(0) scale(1) rotateX(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
        filter: blur(8px);
    }

    30% {
        transform: scale(0.6) rotate(-90deg);
        opacity: 0.4;
        filter: blur(4px);
    }

    60% {
        transform: scale(1.2) rotate(15deg);
        opacity: 0.9;
        filter: blur(1px);
    }

    80% {
        transform: scale(0.95) rotate(-5deg);
        opacity: 0.98;
        filter: blur(0px);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes scaleOut {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }

    20% {
        transform: scale(1.1) rotate(10deg);
        opacity: 0.9;
        filter: blur(1px);
    }

    50% {
        transform: scale(0.7) rotate(90deg);
        opacity: 0.5;
        filter: blur(3px);
    }

    80% {
        transform: scale(0.3) rotate(160deg);
        opacity: 0.2;
        filter: blur(6px);
    }

    100% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
        filter: blur(8px);
    }
}

@keyframes rotateIn {
    0% {
        transform: rotate(-270deg) scale(0.3);
        opacity: 0;
        filter: blur(8px);
    }

    25% {
        transform: rotate(-180deg) scale(0.6);
        opacity: 0.3;
        filter: blur(6px);
    }

    50% {
        transform: rotate(-90deg) scale(0.9);
        opacity: 0.7;
        filter: blur(3px);
    }

    75% {
        transform: rotate(15deg) scale(1.1);
        opacity: 0.9;
        filter: blur(1px);
    }

    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* =========================
   PERFORMANCE OPTIMIZATIONS
   ========================= */

/* Hardware acceleration hint for frequently animated elements */
.animate-optimized {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    body::before,
    body::after {
        animation: none !important;
    }

    .site-motion-overlay {
        display: none !important;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Keep essential animations but make them instant */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes glassPopIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

/* =========================
   USER MOTION TOGGLE
   Mirrors prefers-reduced-motion, but driven by the navbar switch
   (data-motion="off" on <html>). Kills every animation/transition site-wide.
   ========================= */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

html[data-motion="off"] body::before,
html[data-motion="off"] body::after {
    animation: none !important;
    will-change: auto !important;
}

html[data-motion="off"] .site-motion-overlay {
    display: none !important;
}

/* =========================
   ANIMATION UTILITY CLASSES
   ========================= */

.animate-text-reveal {
    animation: textReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-in {
    animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-in-up {
    animation: fadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-fade-in-down {
    animation: fadeInDown 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-glass-pop {
    animation: glassPopIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-pop-in {
    animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

.animate-bounce-in {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

.animate-pulse {
    animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-float {
    animation: glassFloat 8s ease-in-out infinite;
}

.animate-shimmer {
    animation: glassShimmer 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animate-startup {
    animation: startupAnimation 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-navbar-drop {
    animation: navbar-dropin 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.animate-scale-in {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-rotate-in {
    animation: rotateIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-slide-up {
    animation: slideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-slide-down {
    animation: slideDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-heartbeat {
    animation: heartbeat 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
    animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animate-wobble {
    animation: wobble 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.animate-shake {
    animation: shake 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Staggered animation delays for beautiful sequencing */
.animate-delay-1 {
    animation-delay: 0.1s;
}

.animate-delay-2 {
    animation-delay: 0.2s;
}

.animate-delay-3 {
    animation-delay: 0.3s;
}

.animate-delay-4 {
    animation-delay: 0.4s;
}

.animate-delay-5 {
    animation-delay: 0.5s;
}

.animate-delay-6 {
    animation-delay: 0.6s;
}

.animate-delay-7 {
    animation-delay: 0.7s;
}

.animate-delay-8 {
    animation-delay: 0.8s;
}

/* Animation duration modifiers */
.animate-fast {
    animation-duration: 0.5s !important;
}

.animate-slow {
    animation-duration: 1.5s !important;
}

.animate-slower {
    animation-duration: 2s !important;
}

/* Animation iteration modifiers */
.animate-once {
    animation-iteration-count: 1 !important;
}

.animate-twice {
    animation-iteration-count: 2 !important;
}

.animate-infinite {
    animation-iteration-count: infinite !important;
}

/* Animation fill modes */
.animate-fill-both {
    animation-fill-mode: both !important;
}

.animate-fill-forwards {
    animation-fill-mode: forwards !important;
}

.animate-fill-backwards {
    animation-fill-mode: backwards !important;
}

/* Hover-triggered animations */
html:not([data-hover-effects="off"]) .hover\:animate-pulse:hover {
    animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

html:not([data-hover-effects="off"]) .hover\:animate-bounce:hover {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

html:not([data-hover-effects="off"]) .hover\:animate-float:hover {
    animation: glassFloat 4s ease-in-out infinite;
}

/* Avoid continuous GPU work and expensive compositing on touch devices. */
@media (hover: none),
(pointer: coarse) {

    .animate-float,
    .animate-shimmer,
    .animate-pulse,
    .animate-heartbeat,
    .animate-infinite {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}