:root {
    --motion-distance-sm: 18px;
    --motion-distance-md: 32px;
    --motion-distance-lg: 52px;
    --motion-duration: 0.9s;
    --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.motion-ready .fade-in-section,
body.motion-ready .journey-step,
body.motion-ready .class-item,
body.motion-ready .pet-card,
body.motion-ready .simple-play-card,
body.motion-ready .feature-card,
body.motion-ready .gallery-item,
body.motion-ready .faq-item,
body.motion-ready .about-game,
body.motion-ready .download-card {
    opacity: 0;
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease),
        filter var(--motion-duration) var(--motion-ease);
    will-change: transform, opacity;
}

body.motion-ready .fade-in-section,
body.motion-ready .about-game {
    transform: translate3d(0, var(--motion-distance-md), 0);
}

body.motion-ready .journey-step,
body.motion-ready .download-card {
    transform: translate3d(0, var(--motion-distance-sm), 0) scale(0.98);
}

body.motion-ready .class-item,
body.motion-ready .pet-card,
body.motion-ready .simple-play-card,
body.motion-ready .feature-card,
body.motion-ready .gallery-item,
body.motion-ready .faq-item {
    transform: translate3d(0, var(--motion-distance-lg), 0) scale(0.97);
    filter: saturate(0.92);
}

body.motion-ready .is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1);
}

body.motion-ready.gsap-enhanced .fade-in-section {
    opacity: 1;
    transform: none;
    filter: none;
}

.hero {
    --hero-shift-x: 0px;
    --hero-shift-y: 0px;
}

body.motion-ready .hero::before {
    transform: translate3d(calc(var(--hero-shift-x) * 0.18), calc(var(--hero-shift-y) * 0.18), 0);
}

body.motion-ready .hero::after {
    transform: translateX(-50%) translate3d(calc(var(--hero-shift-x) * -0.1), calc(var(--hero-shift-y) * -0.1), 0);
}

body.motion-ready .ink-wash-bg {
    transform: translate3d(0, calc(var(--scroll-y, 0px) * 0.04), 0);
    transition: transform 0.18s linear;
}

body.motion-ready .texture-overlay {
    transform: translate3d(0, calc(var(--scroll-y, 0px) * 0.02), 0);
    transition: transform 0.18s linear;
}

body.motion-ready .giant-ink-blob {
    transform: translate3d(calc(var(--scroll-y, 0px) * 0.015), calc(var(--scroll-y, 0px) * -0.03), 0);
}

body.motion-ready .floating-ink {
    transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.018), 0);
}

.hero-downloads,
.journey-step,
.class-item,
.pet-card,
.simple-play-card,
.feature-card,
.gallery-item,
.faq-item,
.about-game,
.download-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --float-y: 0px;
}

body.motion-ready .tilt-card {
    transform:
        perspective(1200px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translate3d(0, var(--float-y), 0);
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s ease,
        border-color 0.3s ease,
        background 0.3s ease;
    transform-style: preserve-3d;
}

body.motion-ready .tilt-card.is-visible {
    transform:
        perspective(1200px)
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        translate3d(0, var(--float-y), 0);
}

.motion-glow {
    position: relative;
}

.motion-glow::before {
    content: '';
    position: absolute;
    inset: 8% 12%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 248, 230, 0.42) 0%, transparent 72%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.motion-glow:hover::before {
    opacity: 1;
}

.reveal-stagger-1 { transition-delay: 0.06s; }
.reveal-stagger-2 { transition-delay: 0.14s; }
.reveal-stagger-3 { transition-delay: 0.22s; }
.reveal-stagger-4 { transition-delay: 0.3s; }
.reveal-stagger-5 { transition-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
    body.motion-ready .ink-wash-bg,
    body.motion-ready .texture-overlay,
    body.motion-ready .giant-ink-blob,
    body.motion-ready .floating-ink,
    body.motion-ready .hero::before,
    body.motion-ready .hero::after,
    body.motion-ready .tilt-card,
    body.motion-ready .tilt-card.is-visible {
        transform: none !important;
    }
}