/* Hero phone. Static: a plain frameless phone showing the first real screen.
   With /assets/story3d.js: a 3D phone (three.js canvas) playing the story. */
.duet-host{--w:300px;position:relative;width:var(--w);max-width:78vw;aspect-ratio:402/832;margin:0 auto}
@media (min-width:900px){.duet-host{--w:330px}}
.duet{position:absolute;inset:0;border-radius:calc(var(--w)*.104);overflow:hidden;background:#F4F8F7;
  box-shadow:0 0 0 1px rgba(20,20,19,.06),0 28px 64px -28px rgba(20,20,19,.28),0 10px 22px -14px rgba(20,20,19,.14);transition:opacity .4s}
.dk .duet{background:#0E1615;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 28px 64px -28px rgba(0,0,0,.6)}
.story .sc{position:absolute;inset:0;opacity:0}
.story .sc.on{opacity:1}
.story .sc img{display:block;width:100%;height:100%;object-fit:cover}
/* the 3D canvas is a bit bigger than the phone so the tilt has room */
.duet3d{position:absolute;left:-14%;top:-6%;width:128%;height:112%;opacity:0;transition:opacity .5s;pointer-events:none}
.duet-host::after{content:"";position:absolute;left:12%;right:12%;bottom:-3%;height:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,40,32,.22),transparent);opacity:0;transition:opacity .5s;z-index:-1}
.duet-host.is3d .duet3d,.duet-host.is3d::after{opacity:1}
.duet-host.is3d .duet{opacity:0;transition:none}