/* The Ratesque mark in motion: menu previews (Work, Services) and the chain on Home's
   "Launching something?". Shared by every page; the markup is in Menu.astro and index.astro. */

/* Menu previews: one scene, one camera. Work pulls back to a grid of marks with the middle one lit,
   Services frames a row of three, About frames the single mark (as the About
   page shows it). Hovering a link moves the camera, so each state flows from the last. */
.mk-scene{position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%, rgba(78,52,120,0.55), rgba(22,62,74,0.32) 55%, transparent 100%),#000}
.mk-scene svg{display:block;width:100%;height:100%}
.mk-cam{transform-box:view-box;transform-origin:50% 50%;transform:scale(.276);transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.mk-grid{fill:#f5f5f5;opacity:.14;transition:opacity .8s cubic-bezier(.65,0,.35,1)}
.mk-mid{fill:#f5f5f5}
.mk-scene[data-mk-view="2"] .mk-cam{transform:none}
.mk-scene[data-mk-view="2"] .mk-grid{opacity:0}
/* Services: a row of three, a little smaller than About's single mark; the two beside it lighter. */
.mk-row{fill:#f5f5f5;opacity:0;transition:opacity .8s cubic-bezier(.65,0,.35,1)}
.mk-scene[data-mk-view="1"] .mk-cam{transform:scale(.78)}
.mk-scene[data-mk-view="1"] .mk-grid{opacity:0}
.mk-scene[data-mk-view="1"] .mk-row{opacity:.32}

@media (prefers-reduced-motion:reduce){
.mk-cam,.mk-grid,.mk-row{transition:none}
}