/* A flat phone beside a small connected living room. */
.project-grid .project-card .myko-depth-phone,
.project-grid .project-card:hover .myko-depth-phone { left:76%;top:12%;height:82%;aspect-ratio:957/2048;padding:0;border:0;background:transparent;border-radius:12.5% / 5.9%;box-shadow:0 14px 24px #342e251c;transform:translateX(-50%);transition:none; }
.project-grid .project-card .myko-depth-phone::before { display:none; }
.myko-room-scene { position:absolute;left:1%;bottom:3%;width:65%;height:57%;overflow:visible;pointer-events:none; }
.room-light { color:#a23fe0;animation:room-colour 8s ease-in-out infinite; }
.room-lamp-glow { opacity:0;animation:room-light-level 8s ease-in-out infinite; }
.room-lamp-shade-glow { opacity:0;animation:room-shade-level 8s ease-in-out infinite; }
.room-air { opacity:0;animation:room-airflow 2.8s ease-in-out infinite; }
.room-ac-led { animation:room-ac-led 8s ease-in-out infinite; }
@keyframes room-colour { 0%,34% { color:#a23fe0; } 45%,56% { color:#ff8a21; } 68%,100% { color:#4f86ff; } }
@keyframes room-light-level { 0%,12%,95%,100% { opacity:0; } 25%,34% { opacity:.18; } 45%,56% { opacity:.35; } 68%,84% { opacity:.12; } }
@keyframes room-shade-level { 0%,12%,95%,100% { opacity:0; } 25%,34% { opacity:.3; } 45%,56% { opacity:.65; } 68%,84% { opacity:.2; } }
@keyframes room-airflow {
 0%,100% { opacity:0;transform:translate(0,-4px); }
 25% { opacity:.7; }
 65% { opacity:.4; }
 90% { opacity:0;transform:translate(-18px,36px); }
}
@keyframes room-ac-led { 0%,100% { fill:#8dab9a; } 30%,80% { fill:#56c9e4; } }
/* All three stories are still until hovered or reached with the keyboard. */
.project-grid > a * { animation-play-state:paused !important; }
.project-grid > a:hover *,.project-grid > a:focus-visible * { animation-play-state:running !important; }
@media(max-width:760px) { .project-grid .project-card .myko-depth-phone,.project-grid .project-card:hover .myko-depth-phone { left:76%;top:9%;height:82%; }.myko-room-scene { left:-3%;bottom:5%;width:68%;height:58%; } }
@media(prefers-reduced-motion:reduce) { .myko-room-scene * { animation:none !important; }.room-lamp-glow { opacity:.12; }.room-lamp-shade-glow { opacity:.2; } }

/* Match the tactile 3D house and app-icon illustrations, keeping light effects live. */
.myko-room-scene { left:0;bottom:1%;width:67%;height:60%; }
@media(max-width:760px) { .myko-room-scene { left:-4%;bottom:4%;width:70%;height:61%; } }