/* theMakeApp — motion for case pages (main.cx), cases stream 17.10. Pairs with case-motion.js.
   Everything here is scoped to html.cm-on, which the script sets only when motion is allowed:
   without JS or with prefers-reduced-motion the case page renders exactly as before.
   Individual transform properties (translate / scale) are used on purpose: they compose with the
   per-case `transform: rotate(...)` on devices instead of overriding it. */

/* reading progress */
.cm-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--cm-p,0));background:var(--accent-text,#E5097F)}

/* hero: staggered entrance on load */
html.cm-on main.cx .cx-hero .cx-head > *,html.cm-on main.cx .cx-hero .cx-links{animation:cm-up-hero .9s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--cm-i,0) * 90ms + 60ms)}
html.cm-on main.cx .cx-hero .cx-vis .dev,html.cm-on main.cx .cx-hero .cx-vis > img,html.cm-on main.cx .cx-hero .cx-photo{animation:cm-rise-hero 1.2s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(var(--cm-i,0) * 110ms + 320ms)}
html.cm-on main.cx .cx-facts dl > *{animation:cm-fade .8s ease both;animation-delay:calc(var(--cm-i,0) * 70ms + 700ms)}
@keyframes cm-up{from{opacity:0;translate:0 28px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes cm-rise{from{opacity:0;translate:0 90px}to{opacity:1;translate:0 0}}
@keyframes cm-fade{from{opacity:0}to{opacity:1}}
/* hero entrance moves but never hides: the title and the cover are the LCP element, opacity:0 would delay it (SEO stream) */
@keyframes cm-up-hero{from{translate:0 28px}to{translate:0 0}}
@keyframes cm-rise-hero{from{translate:0 90px}to{translate:0 0}}

/* scroll reveal: text and blocks slide up, headings also sharpen, devices scale in */
html.cm-on .cm-rv{opacity:0;translate:0 36px;transition:opacity .9s cubic-bezier(.2,.7,.1,1),translate .9s cubic-bezier(.2,.7,.1,1),filter .9s ease;transition-delay:var(--cm-d,0ms)}
html.cm-on .cm-rv.cm-h{filter:blur(8px)}
html.cm-on .cm-rv.cm-dev{translate:none;scale:.92}
html.cm-on .cm-rv.cm-dev{transition:opacity 1s cubic-bezier(.2,.7,.1,1),scale 1.1s cubic-bezier(.2,.7,.1,1);transition-delay:var(--cm-d,0ms)}
html.cm-on .cm-rv.cm-in{opacity:1;translate:0 0;filter:none}
html.cm-on .cm-rv.cm-dev.cm-in{translate:none;scale:1}

/* devices: pointer tilt with a soft glare (fine pointers only, see JS) */
html.cm-on main.cx .dev.cm-tilt{transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s ease;will-change:transform}
html.cm-on main.cx .dev.cm-tilting{transition:transform .08s linear}
main.cx .dev .cm-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(60% 45% at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.28),rgba(255,255,255,0) 70%);mix-blend-mode:soft-light}
main.cx .dev.cm-tilting .cm-glare{opacity:1}

/* cards and tiles lift on hover */
@media (hover:hover) and (pointer:fine){
  html.cm-on main.cx :is(.cx-card,.bf-col,.st-sw,.st-font,[class$="-card"],.c-nb){transition:translate .45s cubic-bezier(.2,.7,.1,1),box-shadow .45s ease,opacity .9s cubic-bezier(.2,.7,.1,1)}
  html.cm-on main.cx :is(.cx-card,.st-font,[class$="-card"]).cm-in:hover{translate:0 -6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
  html.cm-on main.cx .st-sw.cm-in:hover{translate:0 -4px}
}

/* palette swatches: click to copy HEX */
html.cm-on main.cx .st-sw{cursor:copy}
.cm-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:210;translate:-50% 20px;opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:999px;background:#111;color:#fff;font:600 14px/1 var(--sans,system-ui);box-shadow:0 12px 40px rgba(0,0,0,.3);
  transition:opacity .3s ease,translate .3s cubic-bezier(.2,.7,.1,1)}
.cm-toast.on{opacity:1;translate:-50% 0}
.cm-toast i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px;box-shadow:0 0 0 1px rgba(255,255,255,.4)}

@media (prefers-reduced-motion:reduce){.cm-progress{display:none}}