.project-card[data-motion-scene] {
    --motion-x:50%;
    --motion-y:50%;
    --motion-rx:0deg;
    --motion-ry:0deg;
    transform:perspective(1100px) rotateX(var(--motion-rx)) rotateY(var(--motion-ry));
    transform-style:preserve-3d;
    transition:transform 320ms cubic-bezier(.2,.8,.2,1),border-color 260ms cubic-bezier(.2,.8,.2,1),box-shadow 320ms cubic-bezier(.2,.8,.2,1);
}

.project-card[data-motion-scene]::after {
    background:radial-gradient(circle at var(--motion-x) var(--motion-y),rgba(245,158,11,.16) 0%,transparent 52%);
}

.project-card[data-motion-scene].is-motion-active {
    border-color:rgba(245,158,11,.38);
    box-shadow:0 24px 60px rgba(0,0,0,.42),0 0 36px rgba(217,119,6,.16);
}

.project-card[data-motion-scene] .project-screenshot {
    transform:scale(1);
    transition:transform 380ms cubic-bezier(.2,.8,.2,1),filter 320ms cubic-bezier(.2,.8,.2,1);
}

.project-card[data-motion-scene].is-motion-active .project-screenshot {
    transform:scale(1.025);
    filter:saturate(1.02) contrast(1.08) brightness(.96);
}

.project-motion-scene {
    position:absolute;
    inset:0;
    z-index:4;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity 260ms cubic-bezier(.2,.8,.2,1);
}

.project-card[data-motion-scene].is-motion-active .project-motion-scene { opacity:1; }

.motion-scan {
    position:absolute;
    inset:0 auto 0 0;
    width:38%;
    background:linear-gradient(90deg,transparent,rgba(245,158,11,.2),transparent);
    opacity:0;
    transform:translateX(-120%);
}

.motion-chart {
    position:absolute;
    right:7%;
    bottom:10%;
    display:flex;
    align-items:flex-end;
    gap:7%;
    width:38%;
    height:32%;
}

.motion-chart i {
    flex:1;
    height:var(--bar-height,45%);
    border-radius:4px 4px 1px 1px;
    background:linear-gradient(#f59e0b,#d97706);
    opacity:0;
    transform:scaleY(.15);
    transform-origin:bottom;
}

.motion-chart i:nth-child(1) { --bar-height:30%; }
.motion-chart i:nth-child(2) { --bar-height:44%; }
.motion-chart i:nth-child(3) { --bar-height:56%; }
.motion-chart i:nth-child(4) { --bar-height:73%; }
.motion-chart i:nth-child(5) { --bar-height:92%; }

.motion-count {
    position:absolute;
    top:10%;
    right:7%;
    display:grid;
    padding:8px 10px;
    border:1px solid rgba(245,158,11,.3);
    border-radius:8px;
    background:rgba(17,16,15,.82);
    opacity:0;
    transform:translateY(8px);
}

.motion-count b { color:#fff; font-size:16px; }
.motion-count span { color:#c6b9aa; font-size:9px; }
.is-motion-active[data-motion-scene="content"] .motion-scan { animation:motion-scan 820ms cubic-bezier(.2,.8,.2,1) 80ms both; }
.is-motion-active[data-motion-scene="content"] .motion-chart i { animation:motion-bar 420ms cubic-bezier(.2,.8,.2,1) both; }
.is-motion-active[data-motion-scene="content"] .motion-chart i:nth-child(1) { animation-delay:100ms; }
.is-motion-active[data-motion-scene="content"] .motion-chart i:nth-child(2) { animation-delay:160ms; }
.is-motion-active[data-motion-scene="content"] .motion-chart i:nth-child(3) { animation-delay:220ms; }
.is-motion-active[data-motion-scene="content"] .motion-chart i:nth-child(4) { animation-delay:280ms; }
.is-motion-active[data-motion-scene="content"] .motion-chart i:nth-child(5) { animation-delay:340ms; }
.is-motion-active[data-motion-scene="content"] .motion-count { animation:motion-rise 360ms cubic-bezier(.2,.8,.2,1) 430ms both; }

.motion-messages {
    position:absolute;
    bottom:9%;
    left:6%;
    display:grid;
    gap:7px;
    width:42%;
}

.motion-message {
    padding:7px 9px;
    border:1px solid rgba(56,189,248,.3);
    border-radius:8px;
    background:rgba(16,24,39,.88);
    color:#dff5ff;
    font-size:9px;
    font-style:normal;
    opacity:0;
    transform:translateY(8px);
}

.motion-wave {
    position:absolute;
    right:8%;
    bottom:15%;
    display:flex;
    align-items:center;
    gap:3px;
    height:42px;
}

.motion-wave i {
    width:3px;
    height:var(--wave-height,14px);
    border-radius:3px;
    background:#38bdf8;
    opacity:0;
    transform:scaleY(.2);
}

.motion-wave i:nth-child(2),.motion-wave i:nth-child(6) { --wave-height:24px; }
.motion-wave i:nth-child(3),.motion-wave i:nth-child(5) { --wave-height:36px; }
.motion-wave i:nth-child(4) { --wave-height:42px; }

.motion-done {
    position:absolute;
    top:9%;
    right:7%;
    padding:6px 9px;
    border-radius:999px;
    background:rgba(22,101,52,.75);
    color:#bbf7d0;
    font-size:9px;
    opacity:0;
    transform:scale(.94);
}

.is-motion-active[data-motion-scene="assistant"] .motion-message { animation:motion-rise 360ms cubic-bezier(.2,.8,.2,1) both; }
.is-motion-active[data-motion-scene="assistant"] .motion-message:nth-child(1) { animation-delay:80ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-message:nth-child(2) { animation-delay:250ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i { animation:motion-wave 420ms cubic-bezier(.2,.8,.2,1) both; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i:nth-child(1) { animation-delay:360ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i:nth-child(2) { animation-delay:390ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i:nth-child(3) { animation-delay:420ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i:nth-child(4) { animation-delay:450ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i:nth-child(5) { animation-delay:480ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i:nth-child(6) { animation-delay:510ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-wave i:nth-child(7) { animation-delay:540ms; }
.is-motion-active[data-motion-scene="assistant"] .motion-done { animation:motion-confirm 320ms cubic-bezier(.2,.8,.2,1) 600ms both; }

.motion-flow {
    position:absolute;
    right:6%;
    bottom:13%;
    left:6%;
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    align-items:center;
    gap:6px;
}

.motion-node {
    padding:7px 8px;
    border:1px solid rgba(245,158,11,.28);
    border-radius:8px;
    background:rgba(17,16,15,.86);
    color:#fff;
    font-size:9px;
    font-style:normal;
    opacity:.35;
}

.motion-link {
    height:2px;
    background:linear-gradient(90deg,#d97706,#38bdf8);
    transform:scaleX(0);
    transform-origin:left;
}

.motion-pulse {
    --flow-distance:min(470px,70vw);
    position:absolute;
    bottom:11%;
    left:7%;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#f59e0b;
    box-shadow:0 0 18px #f59e0b;
    opacity:0;
}

.is-motion-active[data-motion-scene="automation"] .motion-node { animation:motion-node 260ms cubic-bezier(.2,.8,.2,1) both; }
.is-motion-active[data-motion-scene="automation"] .motion-node:nth-child(1) { animation-delay:80ms; }
.is-motion-active[data-motion-scene="automation"] .motion-node:nth-child(3) { animation-delay:330ms; }
.is-motion-active[data-motion-scene="automation"] .motion-node:nth-child(5) { animation-delay:580ms; }
.is-motion-active[data-motion-scene="automation"] .motion-link { animation:motion-link 260ms cubic-bezier(.2,.8,.2,1) both; }
.is-motion-active[data-motion-scene="automation"] .motion-link:nth-child(2) { animation-delay:180ms; }
.is-motion-active[data-motion-scene="automation"] .motion-link:nth-child(4) { animation-delay:430ms; }
.is-motion-active[data-motion-scene="automation"] .motion-pulse { animation:motion-flow-pulse 760ms cubic-bezier(.2,.8,.2,1) 110ms both; }

.motion-calendar {
    position:absolute;
    bottom:10%;
    left:7%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    width:38%;
}

.motion-calendar i {
    display:grid;
    min-height:24px;
    place-items:center;
    border-radius:6px;
    background:rgba(255,255,255,.07);
    color:#c6b9aa;
    font-size:9px;
    font-style:normal;
    opacity:0;
    transform:translateY(6px);
}

.motion-calendar .is-selected { background:#d97706; color:#fff; box-shadow:0 0 18px rgba(217,119,6,.42); }

.motion-booked {
    position:absolute;
    right:7%;
    bottom:13%;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(20,83,45,.82);
    color:#dcfce7;
    font-size:9px;
    opacity:0;
    transform:scale(.94);
}

.motion-bell {
    position:absolute;
    top:9%;
    right:7%;
    display:grid;
    width:24px;
    height:24px;
    place-items:center;
    border-radius:50%;
    background:#e87040;
    color:#fff;
    font-size:10px;
    opacity:0;
    transform:scale(.8);
}

.is-motion-active[data-motion-scene="booking"] .motion-calendar i { animation:motion-rise 280ms cubic-bezier(.2,.8,.2,1) both; }
.is-motion-active[data-motion-scene="booking"] .motion-calendar i:nth-child(1) { animation-delay:60ms; }
.is-motion-active[data-motion-scene="booking"] .motion-calendar i:nth-child(2) { animation-delay:100ms; }
.is-motion-active[data-motion-scene="booking"] .motion-calendar i:nth-child(3) { animation-delay:140ms; }
.is-motion-active[data-motion-scene="booking"] .motion-calendar i:nth-child(4) { animation-delay:180ms; }
.is-motion-active[data-motion-scene="booking"] .motion-calendar i:nth-child(5) { animation-delay:220ms; }
.is-motion-active[data-motion-scene="booking"] .motion-calendar i:nth-child(6) { animation-delay:260ms; }
.is-motion-active[data-motion-scene="booking"] .motion-calendar i:nth-child(7) { animation-delay:300ms; }
.is-motion-active[data-motion-scene="booking"] .motion-booked { animation:motion-confirm 340ms cubic-bezier(.2,.8,.2,1) 420ms both; }
.is-motion-active[data-motion-scene="booking"] .motion-bell { animation:motion-confirm 300ms cubic-bezier(.2,.8,.2,1) 610ms both; }

@keyframes motion-scan { from { opacity:0; transform:translateX(-120%); } 20% { opacity:.8; } to { opacity:0; transform:translateX(320%); } }
@keyframes motion-bar { to { opacity:1; transform:scaleY(1); } }
@keyframes motion-rise { from { opacity:0; transform:translateY(8px); filter:blur(3px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes motion-wave { 0% { opacity:0; transform:scaleY(.2); } 60% { opacity:1; transform:scaleY(1); } 100% { opacity:.75; transform:scaleY(.65); } }
@keyframes motion-node { from { opacity:.35; filter:saturate(.3); } to { opacity:1; filter:saturate(1); } }
@keyframes motion-link { to { transform:scaleX(1); } }
@keyframes motion-flow-pulse { 0% { opacity:0; transform:translateX(0) scale(.7); } 15% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translateX(var(--flow-distance)) scale(1); } }
@keyframes motion-confirm { 0% { opacity:0; transform:scale(.94); } 70% { opacity:1; transform:scale(1.02); } 100% { opacity:1; transform:scale(1); } }

@media (hover:none), (pointer:coarse) {
    .project-card[data-motion-scene] { transform:none; }
    .project-card[data-motion-scene].is-motion-active .project-motion-scene { opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
    .project-card[data-motion-scene],
    .project-card[data-motion-scene] *,
    .project-card[data-motion-scene] *::before,
    .project-card[data-motion-scene] *::after { animation:none!important; transition:none!important; }
    .project-motion-scene { display:none; }
    .project-card[data-motion-scene] { transform:none!important; }
}