.motion-enhanced .modal-overlay,
.motion-enhanced .modal {
    transition: none;
}

.motion-enhanced .card-featured,
.motion-enhanced .btn,
.motion-enhanced .icon-btn,
.motion-enhanced .view-tab,
.motion-enhanced .panel-row {
    backface-visibility: hidden;
}

.motion-enhanced .card {
    overflow: hidden;
    /* GSAP owns card movement. CSS interpolation must not chase every tween
       write while the parent canvas is also scaling. Only featured cards tilt
       in 3D; flat cards do not need backface-driven compositor layers. */
    transition: box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.3s ease;
}

.motion-enhanced .card::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg, transparent 18%, rgba(236, 196, 192, 0.24) 44%, rgba(255, 255, 255, 0.75) 50%, rgba(180, 215, 255, 0.22) 56%, transparent 74%);
    transform: translateX(-130%);
}

body[data-theme='dark'].motion-enhanced .card::after {
    background: linear-gradient(115deg, transparent 18%, rgba(210, 141, 149, 0.16) 44%, rgba(255, 255, 255, 0.32) 50%, rgba(143, 182, 255, 0.16) 56%, transparent 74%);
}

.motion-enhanced .card-project-compact::after {
    animation: cardAmbientSheen 8.5s ease-in-out infinite;
}

.motion-enhanced .card-project-compact:nth-of-type(3n)::after {
    animation-delay: 1.3s;
}

.motion-enhanced .card-project-compact:nth-of-type(3n + 1)::after {
    animation-delay: 2.6s;
}

.motion-enhanced .card.is-connection-source::after,
.motion-enhanced .card.is-connection-neighbor::after,
.motion-enhanced .card.is-tool-selected::after,
.motion-enhanced .card:hover::after {
    animation: cardFocusSheen 1.9s ease-out infinite;
}

.motion-enhanced .card.is-tool-selected {
    box-shadow:
        0 0 0 1px rgba(217, 138, 147, 0.28),
        0 10px 34px rgba(217, 138, 147, 0.12);
}

.motion-enhanced svg.connections path.is-connected {
    filter: drop-shadow(0 0 9px rgba(178, 58, 72, 0.38));
}

.motion-enhanced svg.connections path[data-from][data-to]:not(.motion-flow-path):not(.is-connected) {
    opacity: 0.12;
    filter: none;
    transition: opacity 0.25s ease, stroke-width 0.25s ease;
}

body[data-theme='dark'].motion-enhanced svg.connections path[data-from][data-to]:not(.motion-flow-path):not(.is-connected) {
    opacity: 0.18;
}

.motion-enhanced svg.connections path[data-from][data-to].is-connected {
    opacity: 0.95;
    stroke-width: 2.3;
}

.motion-enhanced svg.connections path.motion-flow-path {
    pointer-events: none;
    stroke-width: 2.05;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(217, 138, 147, 0.08));
    transition: opacity 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease;
}

.motion-enhanced svg.connections path.motion-flow-path[data-lane="core"],
.motion-enhanced svg.connections path.motion-flow-path[data-kind="primary"] {
    stroke: rgba(178, 58, 72, 0.42);
}

.motion-enhanced svg.connections path.motion-flow-path[data-lane="project"] {
    stroke: rgba(85, 178, 128, 0.48);
}

.motion-enhanced svg.connections path.motion-flow-path[data-kind="secondary"],
.motion-enhanced svg.connections path.motion-flow-path[data-lane="support"] {
    stroke: rgba(132, 160, 214, 0.44);
}

.motion-enhanced svg.connections path.motion-flow-path[data-lane="outreach"] {
    stroke: rgba(190, 132, 74, 0.42);
}

.motion-enhanced svg.connections path.motion-flow-path.is-muted {
    opacity: 0 !important;
    filter: none;
}

.motion-enhanced svg.connections path.motion-flow-path:not(.is-active-flow) {
    opacity: 0 !important;
}

.motion-enhanced svg.connections path.motion-flow-path.is-active-flow {
    stroke-width: 2.7;
    opacity: 0.78 !important;
    filter: drop-shadow(0 0 9px rgba(217, 138, 147, 0.2));
}

.motion-pointer-signal {
    position: fixed;
    top: 0;
    left: 0;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(178, 58, 72, 0.42);
    border-radius: 999px;
    pointer-events: none;
    z-index: 9000;
    opacity: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 18px rgba(217, 138, 147, 0.16);
}

.motion-pointer-signal.is-visible {
    opacity: 1;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .motion-pointer-signal {
        display: none;
    }

    .motion-enhanced .card::after {
        animation: none;
    }

    .motion-enhanced .card.is-tool-selected {
        box-shadow: var(--shadow-card);
    }
}

@keyframes cardAmbientSheen {
    0%, 58% {
        opacity: 0;
        transform: translateX(-130%);
    }
    68% {
        opacity: 0.22;
    }
    82%, 100% {
        opacity: 0;
        transform: translateX(130%);
    }
}

@keyframes cardFocusSheen {
    0% {
        opacity: 0;
        transform: translateX(-130%);
    }
    38% {
        opacity: 0.26;
    }
    100% {
        opacity: 0;
        transform: translateX(130%);
    }
}

/* Project evidence stays still while the surrounding canvas retains its motion. */
.motion-enhanced .card-project-compact::after {
    animation: none;
    display: none;
}