/* =========================================
   NEURODIRECTOR MOTION SYSTEM
========================================= */

:root {
    --ease-smooth: cubic-bezier(.16,1,.3,1);
    --ease-soft: cubic-bezier(.22,.8,.2,1);
}

:is(
    .fade-in,
    .slide-up,
    .slide-left,
    .scale-in,
    .float,
    .hover-lift,
    .shimmer,
    .stagger > *,
    .card-glow,
    .reveal
) {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.fade-in {
    opacity: 0;
    animation: fadeIn .8s var(--ease-smooth) forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.slide-up {
    opacity: 0;
    transform: translateY(34px);
    animation: slideUp .85s var(--ease-smooth) forwards;
}

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

.slide-left {
    opacity: 0;
    transform: translateX(42px);
    animation: slideLeft .85s var(--ease-smooth) forwards;
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.scale-in {
    opacity: 0;
    transform: scale(.95);
    animation: scaleIn .6s var(--ease-soft) forwards;
}

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.float {
    animation: float 9s ease-in-out infinite;
}

@keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.gradient-sweep {
    background: linear-gradient(92deg, #7dffd0, #ecfff4, #39d798, #7dffd0);
    background-size: 220%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sweep 16s linear infinite;
}

@keyframes sweep {
    0% { background-position: 0%; }
    100% { background-position: 300%; }
}

.hover-lift {
    transition: transform .32s var(--ease-smooth), box-shadow .32s var(--ease-smooth);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26), 0 0 20px rgba(57, 215, 152, 0.16);
}

.tilt-hover {
    transition: transform .35s var(--ease-soft);
}

.tilt-hover:hover {
    transform: perspective(900px) rotateX(2deg) rotateY(-2deg) scale(1.01);
}

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 44%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(215, 255, 236, .22), transparent);
    animation: shimmerMove 3.8s infinite;
}

@keyframes shimmerMove {
    100% { left: 145%; }
}

.cyber-underline {
    position: relative;
    display: inline-block;
}

.cyber-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #39d798, #9cffda);
    transition: width .32s var(--ease-smooth);
}

.cyber-underline:hover::after {
    width: 100%;
}

.magnetic {
    transition: transform .25s var(--ease-soft);
}

.magnetic:hover {
    transform: scale(1.02);
}

.stagger > * {
    opacity: 0;
    transform: translateY(24px);
    animation: staggerFade .72s var(--ease-smooth) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.06s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.18s; }
.stagger > *:nth-child(4) { animation-delay: 0.24s; }
.stagger > *:nth-child(5) { animation-delay: 0.30s; }

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

.card-glow {
    transition: box-shadow .32s var(--ease-smooth), transform .32s var(--ease-smooth);
}

.card-glow:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), 0 0 20px rgba(57, 215, 152, 0.16);
    transform: translateY(-2px);
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .fade-in,
        .slide-up,
        .slide-left,
        .scale-in,
        .stagger > *,
        .reveal
    ) {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

body.perf-lite :is(.float, .gradient-sweep) {
    animation: none !important;
}

body.perf-lite .shimmer::after {
    animation: none !important;
}

body.page-hidden * {
    animation-play-state: paused !important;
}