/* calmdownoscar — media motion, after koto.com. Everything here waits for html.motion,
   which motion.js sets only when JS runs and the visitor hasn't asked for reduced motion,
   so without it every screenshot simply shows. */

/* 1. Intro lines rise word by word on load */
html.motion .lede .w{ display:inline-block; opacity:0; transform:translateY(.45em); animation:rise .9s var(--ease) forwards; animation-delay:calc(120ms + var(--i) * 55ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* 2. Media opens upward as it enters the viewport */
html.motion .stage,
html.motion .shot{
  opacity:0; transform:translateY(48px) scale(.97);
  clip-path:inset(14% 0 0 0 round 6px);
  transition:opacity .8s ease, transform 1.1s var(--ease), clip-path 1.1s var(--ease);
}
html.motion .stage.in,
html.motion .shot.in{ opacity:1; transform:none; clip-path:inset(0 0 0 0 round 6px); }

/* 3. Devices inside a stage drift at different speeds while it scrolls (translate set by motion.js) */
html.motion .stage img{ transition:transform .6s var(--ease), translate .2s linear; }

/* 4. The case in the middle of the screen is the one in focus; the others step back */
@media (min-width:961px){
  html.motion .case .case-text{ transition:opacity .6s ease; }
  html.motion.has-focus .case:not(.is-active) .case-text{ opacity:.28; }
}

/* 5. Cues that point at the part of a screenshot that matters */
html.motion .mark-box{ opacity:0; transform:scale(1.08); transition:opacity .5s ease 0s, transform .6s var(--ease) 0s; }
html.motion .shot.in .mark-box{ opacity:1; transform:none; transition-delay:.9s; animation:ping 1.6s ease 1.5s 2; }
@keyframes ping{
  0%  { box-shadow:0 0 0 4px rgba(133,182,255,.18); }
  50% { box-shadow:0 0 0 12px rgba(133,182,255,0); }
  100%{ box-shadow:0 0 0 4px rgba(133,182,255,.18); }
}
html.motion .pin{ opacity:0; scale:.3; transition:opacity .35s ease, scale .5s cubic-bezier(.3,1.6,.5,1); }
html.motion .shot.in .pin{ opacity:1; scale:1; transition-delay:calc(.8s + var(--i) * 180ms); }
html.motion .pin-key li{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .6s var(--ease); }
html.motion .pin-key.in li{ opacity:1; transform:none; transition-delay:calc(.2s + var(--i) * 120ms); }

/* data lanes: each app's path draws from the device outward */
html.motion .lanes .flow{ transform:scaleX(0); transform-origin:left center; transition:transform .9s var(--ease); }
html.motion .lanes .dot{ opacity:0; scale:.2; transition:opacity .3s ease, scale .45s cubic-bezier(.3,1.6,.5,1); }
html.motion .lanes.in .flow{ transform:none; transition-delay:calc(var(--i) * 110ms + .25s); }
html.motion .lanes.in .dot{ opacity:1; scale:1; transition-delay:calc(var(--i) * 110ms + var(--d, 0s)); }

/* ClearSpace history screenshots follow one after another */
html.motion .history-shots img{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .9s var(--ease); }
html.motion .history-shots.in img{ opacity:1; transform:none; }
html.motion .history-shots.in img + img{ transition-delay:.15s; }

/* hold intro lines until motion.js has split them, so they don't flash in twice */
html.motion .lede:not(.words-ready){ opacity:0; }