:root {
    --o2b-motion-distance-xs: 6px;
    --o2b-motion-distance-sm: 10px;
    --o2b-motion-distance-md: 14px;
    --o2b-motion-duration-fast: 240ms;
    --o2b-motion-duration-base: 420ms;
    --o2b-motion-duration-slow: 720ms;
    --o2b-motion-ease: var(--ease-out);
    --o2b-motion-ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
    --o2b-stagger-step: 80ms;
}

/* =========================================================
   Experience System: Global Motion
   ========================================================= */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

main,
.main-content {
    animation: pageFadeIn var(--o2b-motion-duration-base) var(--o2b-motion-ease) both;
}

[data-o2b-reveal],
[data-o2b-stagger] > *,
[data-o2b-parallax] {
    opacity: 0;
    transform: translateY(var(--o2b-reveal-distance, var(--o2b-motion-distance-sm)));
    transition:
        opacity var(--o2b-reveal-duration, var(--o2b-motion-duration-base)) var(--o2b-motion-ease),
        transform var(--o2b-reveal-duration, var(--o2b-motion-duration-base)) var(--o2b-motion-ease);
    transition-delay: var(--o2b-delay, 0ms);
    will-change: opacity, transform;
}

[data-o2b-reveal="fade"] {
    transform: none;
}

[data-o2b-reveal="line"] {
    transform: translateY(var(--o2b-motion-distance-xs));
}

[data-o2b-reveal="rise"] {
    transform: translateY(var(--o2b-motion-distance-md));
}

[data-o2b-reveal="shift"] {
    transform: translateX(8px);
}

[data-o2b-parallax="soft"] {
    transform: scale(1.02);
    transform-origin: center;
}

[data-o2b-speed="slow"] {
    --o2b-reveal-duration: var(--o2b-motion-duration-slow);
}

[data-o2b-speed="fast"] {
    --o2b-reveal-duration: var(--o2b-motion-duration-fast);
}

[data-o2b-reveal].is-inview,
[data-o2b-parallax].is-inview {
    opacity: 1;
    transform: translateY(0);
}

[data-o2b-reveal="fade"].is-inview {
    transform: none;
}

[data-o2b-reveal="shift"].is-inview {
    transform: translateX(0);
}

[data-o2b-parallax="soft"].is-inview {
    transform: scale(1);
}

[data-o2b-stagger].is-inview > * {
    opacity: 1;
    transform: translateY(0);
}

[data-o2b-stagger] > *:nth-child(1) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 0);
}

[data-o2b-stagger] > *:nth-child(2) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 1);
}

[data-o2b-stagger] > *:nth-child(3) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 2);
}

[data-o2b-stagger] > *:nth-child(4) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 3);
}

[data-o2b-stagger] > *:nth-child(5) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 4);
}

[data-o2b-stagger] > *:nth-child(6) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 5);
}

[data-o2b-stagger] > *:nth-child(7) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 6);
}

[data-o2b-stagger] > *:nth-child(8) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 7);
}

[data-o2b-stagger] > *:nth-child(9) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 8);
}

[data-o2b-stagger] > *:nth-child(10) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 9);
}

[data-o2b-stagger] > *:nth-child(11) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 10);
}

[data-o2b-stagger] > *:nth-child(12) {
    transition-delay: calc(var(--o2b-delay, 0ms) + var(--o2b-stagger-step) * 11);
}