/* Home: one opening with the trial and a short privacy note.

   The markup alone is the finished picture: a phone with Day on its screen, the name, the line and the App Store badge.
   The motion only runs with prefers-reduced-motion: no-preference. Pieces of Day (the Readiness card, the V's line and
   four tiles, cut from the same capture) arrive from each side, the V perches on his card, a plain phone outline draws
   itself around them and fills in, Day's screen comes up behind them and they hand over to it, then the name, the line
   and the badge rise. The phone is a generic device (no island, no buttons), as Apple's marketing guidelines ask of
   drawn devices. All of it is done by about 0.9 seconds: the name, line and badge are readable by 0.5 seconds and
   the badge is a plain link throughout, so a tap never waits for the motion. */

.opening{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 16px 40px;overflow-x:hidden;overflow-x:clip}

/* The device box is 1290 x 2706: a 1206 x 2622 screen inside a 42 bezel. Every position below is a share of it.
   Its height leaves room under it for the name, line and badge in the first view, from small phones to wide screens. */
.phone{--h:clamp(260px,min(calc(100vh - 480px),110vw),600px);position:relative;height:var(--h);aspect-ratio:1290/2706;container-type:inline-size}
@supports (height:100svh){.phone{--h:clamp(260px,min(calc(100svh - 480px),110vw),600px)}}
.frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bezel{fill:var(--ink)}
.outline{fill:none;stroke:var(--ink);stroke-width:12;stroke-dasharray:1 1;stroke-dashoffset:0}
.screen{position:absolute;left:3.256%;top:1.552%;width:93.488%;height:96.896%;border-radius:14.419cqw;overflow:hidden;background:#C6DCEE}
.screen img{display:block;width:100%;height:100%}

/* The pieces sit exactly where they are on the screen, and stay hidden once the screen is in. */
.pieces{position:absolute;inset:0;pointer-events:none}
.piece,.pieces .v{position:absolute;display:block;opacity:0}
.piece img{display:block;width:100%;height:auto;border-radius:5.581cqw;box-shadow:0 2px 4px rgba(60,45,25,.05),0 14px 36px rgba(60,45,25,.10)}
.p-ready{left:6.977%;top:24.132%;width:86.047%}
.p-bubble{left:14.186%;top:18.736%;width:49.07%}
.p-bubble img{border-radius:999px;box-shadow:0 6px 20px rgba(60,45,25,.10)}
.p-activity,.p-nutrition{left:6.977%;width:41.395%}
.p-training,.p-sleep{left:51.628%;width:41.395%}
.p-activity,.p-training{top:47.265%}
.p-nutrition,.p-sleep{top:62.121%}
.pieces .v{left:61.395%;top:15.854%;width:26.434%;height:auto;transform-origin:50% 100%}

.name{font-family:var(--serif);font-weight:500;font-size:clamp(44px,5vw,64px);line-height:1.05;letter-spacing:-.02em;margin:24px 0 8px}
.line{font-size:clamp(18px,1.6vw,21px);color:var(--caption);margin:0}
.get{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:24px}
.badge{display:block;border-radius:10px;line-height:0}
.badge img{display:block;height:54px;width:auto}
.badge:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.scan{display:none}
.privacy-note{max-width:560px;margin-top:24px;color:var(--caption);font-size:14px;line-height:1.5}
.privacy-note p{margin:0}
.privacy-note strong{font-weight:600}
.privacy-note a{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px}

/* A computer gets a code to scan with the phone; a phone gets the badge alone. The code is a background so a phone never downloads it. */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .scan{display:flex;align-items:center;gap:16px;text-align:left}
  .scan .qr{display:block;width:80px;height:80px;background:url(/assets/33/app-store-qr.svg) center/100% 100% no-repeat}
  .scan p{margin:0;max-width:128px;font-size:13px;line-height:1.4;color:var(--caption)}
}

@media (prefers-reduced-motion:no-preference){
  .piece{animation:fly-in 520ms cubic-bezier(.16,1,.3,1) both,hand-over 200ms ease-out 720ms forwards}
  .from-left{--from:-24vw}
  .from-right{--from:24vw}
  .p-bubble{animation-delay:40ms,720ms}
  .p-activity{animation-delay:80ms,720ms}
  .p-training{animation-delay:120ms,720ms}
  .p-nutrition{animation-delay:160ms,720ms}
  .p-sleep{animation-delay:200ms,720ms}
  .pieces .v{animation:perch 420ms cubic-bezier(.34,1.45,.64,1) 300ms both,hand-over 200ms ease-out 720ms forwards}
  .outline{animation:draw 600ms cubic-bezier(.65,0,.35,1) 100ms both}
  .bezel,.screen{animation:come-up 450ms ease-out 250ms both}
  .name{animation:rise 360ms cubic-bezier(.16,1,.3,1) 120ms both}
  .line{animation:rise 360ms cubic-bezier(.16,1,.3,1) 160ms both}
  .get{animation:rise 360ms cubic-bezier(.16,1,.3,1) 200ms both}
}
@keyframes fly-in{from{transform:translateX(var(--from)) scale(1.04);opacity:1}to{transform:none;opacity:1}}
@keyframes perch{from{transform:translateY(-36%) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes hand-over{to{opacity:0}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes come-up{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:800px){
  .opening{padding-bottom:32px}
  .name{margin-top:20px}
  .get{margin-top:20px}
  .privacy-note{max-width:420px;margin-top:20px}
}
@media (forced-colors:active){
  .bezel{fill:CanvasText}
  .outline{stroke:CanvasText}
}