/* A tactile phone, with a short illustrative sequence inside the real Myko screen. */
.project-grid .project-card .myko-interface { position:absolute;inset:0;min-height:0; }
.project-grid .project-card .myko-orbit { position:absolute;inset:0;min-height:0;perspective:1100px; }
.project-grid .project-card .myko-depth-phone { position:absolute;left:68%;top:12%;bottom:auto;width:auto;height:82%;aspect-ratio:977/2068;max-height:none;max-width:none;padding:clamp(5px,.7vw,10px);border:1px solid #fff;border-radius:14% / 6.6%;background:linear-gradient(115deg,#fffdf8,#e7e4de 48%,#cac7c1);overflow:visible;transform:translateX(-50%) rotate(-9deg) rotateY(-18deg) rotateX(5deg);box-shadow:1px 1px 0 #d3d0ca,3px 2px 0 #c7c3bc,5px 3px 0 #bdb8b0,7px 4px 0 #b3ada5,9px 5px 0 #a9a299,12px 10px 12px #28211818,22px 30px 30px #28211826;transition:transform .45s ease,box-shadow .45s ease; }
.myko-depth-phone::before { content:'';position:absolute;left:-3px;top:23%;width:3px;height:7%;background:#b9b3aa;border-radius:3px;box-shadow:0 2rem 0 #b9b3aa; }
.myko-depth-screen { position:relative;width:100%;height:100%;overflow:hidden;border-radius:12.5% / 5.9%;container-type:inline-size;background:white; }
.myko-depth-screen > img { display:block;width:100%;height:100%; }
.myko-demo-toggle { position:absolute;left:76.2%;top:25.6%;width:14.8%;height:3.55%;background:#c9c6cd;border-radius:999px;animation:myko-toggle-on 8s ease-in-out infinite; }
.myko-demo-toggle > i { position:absolute;left:5%;top:8%;width:41%;height:84%;border-radius:50%;background:white;box-shadow:0 1px 3px #0001;animation:myko-toggle-knob 8s ease-in-out infinite; }
.myko-demo-label { position:absolute;left:9%;top:32.35%;width:48%;height:2.2%;background:#f4f4f7;color:#60646c;font:400 3.5cqw/1.3 Arial,Helvetica,sans-serif; }
.myko-demo-label > span { position:absolute;inset:0;opacity:0;animation-duration:8s;animation-timing-function:steps(1,end);animation-iteration-count:infinite; }
.myko-demo-off { animation-name:myko-label-off; }.myko-demo-sixty { animation-name:myko-label-sixty; }.myko-demo-eighty { animation-name:myko-label-eighty; }.myko-demo-thirty { animation-name:myko-label-thirty; }
.myko-demo-slider { position:absolute;left:8.3%;top:35%;width:84%;height:4%;background:#f4f4f7; }
.myko-demo-track { position:absolute;left:1%;right:1%;top:46%;height:12%;border-radius:999px;background:white; }
.myko-demo-fill { position:absolute;inset:0 auto 0 0;width:0;background:#a23fe0;border-radius:999px;animation:myko-slider-fill 8s ease-in-out infinite; }
.myko-demo-knob { position:absolute;left:0;top:50%;width:7.4%;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0003;animation:myko-slider-knob 8s ease-in-out infinite; }
.myko-demo-bulb { position:absolute;left:8.9%;top:25.4%;width:6.2%;height:3.2%;background:#f4f4f7;color:#60646c;animation:myko-bulb-colour 8s ease-in-out infinite; }
@keyframes myko-toggle-on { 0%,10%,95%,100% { background:#c9c6cd; } 20%,84% { background:#a23fe0; } }
@keyframes myko-toggle-knob { 0%,10%,95%,100% { left:5%; } 20%,84% { left:54%; } }
@keyframes myko-slider-fill { 0%,12%,95%,100% { width:0; } 25%,34% { width:60%; } 45%,56% { width:85%; } 68%,84% { width:35%; } }
@keyframes myko-slider-knob { 0%,12%,95%,100% { left:0; } 25%,34% { left:60%; } 45%,56% { left:85%; } 68%,84% { left:35%; } }
@keyframes myko-bulb-colour { 0%,12%,95%,100% { color:#60646c;filter:none; } 25%,34% { color:#a23fe0;filter:drop-shadow(0 0 2px #a23fe055); } 45%,56% { color:#ff8a21;filter:drop-shadow(0 0 3px #ff8a2155); } 68%,84% { color:#4f86ff;filter:drop-shadow(0 0 2px #4f86ff55); } }
@keyframes myko-label-off { 0%,85% { opacity:1; } 16% { opacity:0; } }
@keyframes myko-label-sixty { 0% { opacity:0; } 16% { opacity:1; } 37% { opacity:0; } }
@keyframes myko-label-eighty { 0% { opacity:0; } 37% { opacity:1; } 61% { opacity:0; } }
@keyframes myko-label-thirty { 0% { opacity:0; } 61% { opacity:1; } 85% { opacity:0; } }
@media(hover:hover) { .project-grid .project-card:hover .myko-depth-phone { transform:translateX(-50%) translateY(-.4rem) rotate(-6deg) rotateY(-13deg) rotateX(3deg); } }
@media(max-width:760px) { .project-grid .project-card .myko-interface { position:relative;inset:auto;min-height:31rem; }.project-grid .project-card .myko-depth-phone { height:87%;left:55%;top:6%; }.project-grid .project-copy { z-index:4; } }
@media(prefers-reduced-motion:reduce) { .myko-depth-phone * { animation:none !important; }.myko-demo-toggle { background:#a23fe0; }.myko-demo-toggle > i { left:54%; }.myko-demo-fill { width:60%; }.myko-demo-knob { left:60%; }.myko-demo-sixty { opacity:1 !important; }.myko-demo-off,.myko-demo-eighty,.myko-demo-thirty { opacity:0 !important; }.project-grid .project-card .myko-depth-phone { transition:none; } }