html {
    scroll-behavior: smooth;
}

body {
    transition: opacity 520ms ease, transform 520ms ease, filter 260ms ease;
}

body.page-ready {
    animation: page-enter 520ms ease both;
}

body.page-leaving {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(4px);
}

.motion-reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 760ms cubic-bezier(.2,.8,.2,1),
        transform 760ms cubic-bezier(.2,.8,.2,1),
        filter 760ms cubic-bezier(.2,.8,.2,1),
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.motion-slide-left {
    transform: translateX(-38px) scale(0.985);
}

.motion-slide-right {
    transform: translateX(38px) scale(0.985);
}

.motion-slide-left.is-visible,
.motion-slide-right.is-visible {
    transform: translateX(0) scale(1);
}

.motion-card,
.motion-media,
.motion-button {
    transform-style: preserve-3d;
}

.motion-card,
.motion-media {
    transition:
        transform 320ms cubic-bezier(.2,.8,.2,1),
        border-color 320ms ease,
        box-shadow 320ms ease,
        background-color 320ms ease,
        opacity 320ms ease,
        filter 320ms ease;
}

.motion-card:hover,
.motion-media:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 209, 255, 0.28) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), 0 0 26px rgba(0, 209, 255, 0.08);
}

.motion-media img {
    transition: transform 760ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease, filter 320ms ease;
}

.motion-media:hover img {
    transform: scale(1.055);
}

.motion-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 180ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        color 220ms ease,
        filter 220ms ease;
}

.motion-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 255, 255, 0.28), transparent 34%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.motion-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28), 0 0 22px rgba(0, 209, 255, 0.16);
}

.motion-button:hover::after {
    opacity: 1;
}

.motion-button:active {
    transform: translateY(1px) scale(0.985);
}

.motion-button.is-clicked {
    animation: button-pop 280ms ease;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 1px;
    background: #00d1ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms ease;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

nav {
    transition: background-color 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

nav.nav-scrolled {
    background-color: rgba(19, 19, 20, 0.94) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

@keyframes button-pop {
    0% { transform: scale(1); }
    45% { transform: scale(0.965); }
    100% { transform: scale(1); }
}

@keyframes page-enter {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body,
    .motion-reveal,
    .motion-card,
    .motion-media,
    .motion-media img,
    .motion-button,
    nav {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}