/* ============================================================
   VIDYA · around the devices
   The phone is assets/phone.css and the laptop assets/laptop.css. This
   file is what sits around them: the chapter claims that drive a device,
   the heroes' laptop-and-phone pair, and the caption under a recording.
   assets/clips.js drives the playback; recordings play on their own.
   ============================================================ */

/* a device standing still (the reduced-motion path, or autoplay refused)
   plays when tapped (clips.js) */
[data-clip-group].is-paused .phone,[data-clip-group].is-paused .laptop{cursor:pointer}

/* a device that plays several recordings in turn (chapters): they cross-fade,
   and the status bar or menu bar follows the look of the one playing
   (clips.js sets data-look) */
.phone-screen.ch-stack video,.lt-screen.ch-stack video{opacity:0;transition:opacity .45s var(--ease-out)}
.phone-screen.ch-stack video.is-on,.lt-screen.ch-stack video.is-on{opacity:1}
.ph-status,.ph-home,.phone-screen,.lt-bar,.lt-screen{transition:background-color .45s var(--ease-out),color .45s var(--ease-out)}
.ph-home::after{transition:background-color .45s var(--ease-out)}

/* the claims that drive a device */
.tp-bar{position:absolute;left:46px;right:16px;bottom:8px;height:2px;border-radius:2px;background:var(--ink-100,#E3E9E7);overflow:hidden;opacity:0;transition:opacity .3s var(--ease-out)}
.tp-bar i{display:block;height:100%;background:var(--tide-500,#37BEB0);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* a laptop and a phone together (the heroes): the same product at a desk and
   in a pocket. One group (data-clip-all): both recordings play together.
   As the page scrolls, the laptop settles flat and the phone rises into
   place (--tilt from clips.js, 1 to 0, transform only). */
.duo{position:relative;z-index:2;width:min(1120px,100%);margin:clamp(56px,7vw,88px) auto 0;container-type:inline-size}
.duo-stage{position:relative;padding-bottom:6cqw}
.duo-stage::before{content:"";position:absolute;z-index:-1;inset:4% -2% -4%;pointer-events:none;background:radial-gradient(54% 52% at 46% 44%,rgba(55,190,176,.30) 0%,rgba(12,97,112,.15) 46%,transparent 72%)}
.duo-laptop{width:88%;opacity:0;animation:duorise 1.2s cubic-bezier(.16,1,.3,1) .45s forwards}
.duo-laptop .laptop{transform-origin:50% 100%;transform:perspective(2600px) rotateX(calc(var(--tilt,1) * 6deg))}
.duo-phone{position:absolute;right:0;bottom:0;--pw:23cqw;opacity:0;animation:duorise 1.2s cubic-bezier(.16,1,.3,1) .7s forwards}
.duo-phone .phone{transform:translateY(calc(var(--tilt,1) * 4cqw));
  box-shadow:0 0 0 .5px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.35),0 2px 3px rgba(6,16,15,.14),0 30px 60px -24px rgba(6,16,15,.6),0 60px 120px -50px rgba(12,97,112,.5)}
@keyframes duorise{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
/* on the lava, the captions are light */
.hero .phone-cap-t{color:#F1F6F4}
.hero .phone-cap-t em{color:rgba(227,233,231,.78)}
@media (max-width:640px){
  .duo-laptop{width:94%}
  .duo-phone{--pw:31cqw;right:-1%}
  .duo-stage{padding-bottom:16cqw}
        }

/* caption under a recording */
.clip-cap{margin:16px 0 0;font-size:12px;font-style:italic;font-weight:300;letter-spacing:.02em;color:var(--ink-400,#687270)}

@media (prefers-reduced-motion:reduce){
  .phone-screen.ch-stack video,.lt-screen.ch-stack video,.tp-bar,.ph-status,.ph-home,.phone-screen,.lt-bar,.lt-screen{transition:none!important}
  .duo-laptop,.duo-phone{animation:none!important;opacity:1}
  .duo-laptop .laptop,.duo-phone .phone{transform:none!important}
}
/* the same, for a machine rasterising in software (assets/gpu-gate.js) */
html.sw-render .phone-screen.ch-stack video,html.sw-render .lt-screen.ch-stack video,html.sw-render .tp-bar,html.sw-render .ph-status,html.sw-render .ph-home,html.sw-render .phone-screen,html.sw-render .lt-bar,html.sw-render .lt-screen{transition:none!important}
html.sw-render .duo-laptop,html.sw-render .duo-phone{animation:none!important;opacity:1}
html.sw-render .duo-laptop .laptop,html.sw-render .duo-phone .phone{transform:none!important}