/* Reuse each story's animated hero artwork within the selected-work cards. */
.project-grid .project-card,.project-grid .myko-interface { background-color:#f0ede7; }
.project-grid .myko-interface { background-image:radial-gradient(ellipse at 72% 65%,#f4c84b20,transparent 65%); }
.card-myko-bands { position:absolute;right:-8%;top:27%;width:90%;height:70%;overflow:visible;pointer-events:none;z-index:0; }
.project-grid .orbit-boost,.project-grid .orbit-away,.project-grid .orbit-temperature,.project-grid .orbit-consumption,.project-grid .orbit-ambient { display:none; }
.project-grid .orbit-heating { left:24%;bottom:4%; }
.project-grid .orbit-colour { right:3%;bottom:4%; }
.project-grid .smart-grid-card,.project-grid .migration-card { background:#f0ede7;overflow:hidden; }
.project-grid .smart-grid-card .summary-copy,.project-grid .migration-card .summary-copy { position:relative;z-index:3; }
.project-grid .smart-grid-card .summary-footer { width:min(70%,25rem);right:-.75rem;bottom:-.4rem; }
.project-grid .story-thumb-smart-grid { overflow:visible; }
.project-grid .story-thumb-smart-grid .sg-hero-art { display:block;width:100%;height:auto;overflow:visible; }
.project-grid .migration-visual { width:min(80%,25rem);right:-2%;bottom:-1.5rem; }
.project-grid .migration-transfer-art { display:block;width:100%;height:auto;overflow:visible;transform:rotate(-7deg); }
.sg-cables { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: url(#card-sg-cable-colour); }
.sg-grid-extension { opacity: .65; }
.sg-grid-extension .sg-cables { stroke: url(#card-sg-grid-colour); }
.sg-grid-extension .sg-cables-current:not(.sg-cables-current-glow) { stroke: #fff4ff; opacity: .65; }
.sg-cables-solid { stroke-width: 4; opacity: .9; }
.sg-cables-glow { stroke-width: 13; opacity: .7; filter: url(#card-sg-cable-glow); }
.sg-cables-current { stroke: #fff4ff; stroke-width: 3; stroke-dasharray: 65 935; opacity: .9; }
.sg-cables-current path { animation: sg-cable-flow calc(var(--cable-time) * .7) linear infinite; animation-delay: var(--cable-delay); }
.sg-cables-current-glow { stroke: url(#card-sg-cable-colour); stroke-width: 20; filter: url(#card-sg-cable-glow); }
@keyframes sg-cable-flow { to { stroke-dashoffset: -1000; } }
.migration-shooting-arrow { animation: migration-arrow-flight var(--flight-time) linear infinite; animation-delay: var(--flight-delay); }
.migration-shooting-arrow path { fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes migration-arrow-flight { 0% { transform: translateX(-60px); opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateX(450px); opacity: 0; } }
.migration-shooting-arrow--steady { animation-name: migration-arrow-steady; }
@keyframes migration-arrow-steady { from { transform: translateX(-60px); opacity: .85; } to { transform: translateX(450px); opacity: .85; } }

@media(prefers-reduced-motion:reduce) { .migration-shooting-arrow { animation: none; transform: translateX(160px); opacity: .85; } .migration-shooting-arrow:nth-of-type(n+4) { display: none; } }


@media(hover:hover) { .project-grid .project-card:hover .myko-interface,.project-grid .project-card:hover .project-copy,.project-grid .smart-grid-card:hover,.project-grid .migration-card:hover { background-color:#eae5dc; } }
@media(max-width:760px) {
 .card-myko-bands { top:5%;right:-12%;width:105%;height:80%; }
 .project-grid .smart-grid-card .summary-footer { width:min(70%,23rem); }
 .project-grid .migration-visual { width:min(80%,24rem); }
}
@media(prefers-reduced-motion:reduce) { .project-grid :is(.band-dot,.migration-shooting-arrow,.sg-cables-current path) { animation:none; }.project-grid .migration-shooting-arrow { transform:translateX(160px);opacity:.85; } }

/* Leave the main story quiet while its illustration is reconsidered. */
.project-grid .myko-interface { background-image:none; }