/* Composition refinement. The saved v9 artwork, colours and form stay intact. */
.cover--v10 .cover__masthead {
  top: 20%;
  transform: rotate(-3deg) translate3d(calc(var(--px)*-2px),calc(var(--py)*-1px),0);
}
.cover--v10 .hero-flight {
  top: -4%; left: 48%; width: 48%;
  transform: rotate(1deg) translate3d(calc(var(--px)*8px),calc(var(--py)*5px),0);
  will-change: transform, translate;
}
.cover--v10 .hero-flight[data-loading=true] { visibility: hidden; }
.cover--v10 .hero-signup { top: 49%; left: 51%; }
.cover--v10 .hero-neon {
  transform: translateX(-18px) rotate(3deg);
  margin-bottom: -10px;
}
.cover--v10 .hero-prop--butter {
  left: -4%; top: 46%; width: 25%; z-index: 6;
  transform: rotate(23deg) translate3d(calc(var(--px)*-13px),calc(var(--py)*-9px - var(--scroll-shift)*.6),0) rotateY(calc(var(--px)*5deg));
}
.cover--v10 .hero-prop--spoon {
  right: 5%; top: 43%; width: 18%; z-index: 6;
  transform: rotate(14deg) translate3d(calc(var(--px)*7px),calc(var(--py)*6px + var(--scroll-shift)*.25),0) rotateY(calc(var(--px)*-4deg));
}
.cover--v10 .cover__toast { top: 60%; left: -23%; width: 76%; }
.cover--v10 .cover__paper { top: 69%; left: 72%; width: 31%; }
.cover--v10 .cover__cloth { bottom: -145px; height: 295px; }

@media (min-width:1600px) {
  .cover--v10 .hero-flight { width: 46%; left: 50%; top: -5%; }
  .cover--v10 .hero-signup { top: 51%; }
  .cover--v10 .hero-prop--butter { top: 46%; width: 24%; }
  .cover--v10 .hero-prop--spoon { top: 44%; width: 17%; }
  .cover--v10 .cover__toast { width: 71%; top: 58%; left: -21%; }
  .cover--v10 .cover__paper { top: 65%; }
}
@media (min-width:701px) and (max-width:1050px) {
  .cover--v10 .cover__masthead { top: 21%; }
  .cover--v10 .hero-flight { top: 0; width: 58%; left: 39%; }
  .cover--v10 .hero-signup { top: 45%; width: 47%; }
  .cover--v10 .hero-prop--butter { width: 29%; top: 40%; left: -7%; }
  .cover--v10 .hero-prop--spoon { width: 22%; top: 48%; right: 2%; }
  .cover--v10 .cover__toast { width: 87%; left: -32%; top: 65%; }
  .cover--v10 .cover__paper { left: 69%; width: 35%; top: 70%; }
}
@media (max-width:700px) {
  .cover--v10 .cover__masthead {
    top: clamp(108px,13svh,132px); left: -2%; width: 104%;
    transform: rotate(-5deg);
  }
  .cover--v10 .hero-flight {
    top: 8px; left: 1%; width: 98%;
    transform: rotate(1deg) translate3d(calc(var(--px)*4px),calc(var(--py)*3px),0);
  }
  .cover--v10 .hero-signup { top: 33.5%; left: 51%; width: 85%; }
  .cover--v10 .hero-neon { transform: translateX(-7px) rotate(3deg); margin-bottom: -3px; }
  .cover--v10 .hero-prop--butter {
    top: 22%; left: -9%; width: 38%; z-index: 1;
    transform: rotate(23deg) translate3d(calc(var(--px)*-8px),calc(var(--py)*-5px - var(--scroll-shift)*.45),0);
  }
  .cover--v10 .hero-prop--spoon {
    top: 49%; right: 1%; width: 33%; z-index: 6;
    transform: rotate(14deg) translate3d(calc(var(--px)*5px),calc(var(--py)*4px + var(--scroll-shift)*.2),0);
  }
  .cover--v10 .cover__toast { top: 64%; left: -58%; width: 135%; }
  .cover--v10 .cover__paper { top: 70%; left: 62%; width: 57%; }
  .cover--v10 .cover__cloth {
    top: 59%; bottom: auto; left: -18%; width: 142%; height: 49%;
    background-size: 66px 66px;
    transform: rotate(9deg) translate3d(calc(var(--px)*-3px),calc(var(--py)*-2px),0);
  }
}
@media (max-width:370px) {
  .cover--v10 .hero-signup { top: 35%; width: 88%; }
  .cover--v10 .hero-prop--butter { top: 59%; left: -12%; width: 42%; z-index: 6; }
  .cover--v10 .hero-prop--spoon { top: 54%; width: 33%; }
  .cover--v10 .cover__cloth { top: 63%; }
  .cover--v10 .cover__toast { top: 72%; }
  .cover--v10 .cover__paper { top: 77%; }
}
/* Wider portrait screens need their own spacing, not a stretched phone stack. */
@media (min-width:480px) and (max-width:700px) {
  .cover--v10 .cover__masthead { top: clamp(158px,26vw,183px); }
  .cover--v10 .hero-flight { top: 0; width: 86%; left: 12%; }
  .cover--v10 .hero-signup { top: 38%; }
  .cover--v10 .hero-prop--butter { top: 28%; width: 34%; }
  .cover--v10 .hero-prop--spoon { top: 55%; width: 30%; }
  .cover--v10 .cover__cloth { top: 64%; }
  .cover--v10 .cover__toast { top: 70%; }
  .cover--v10 .cover__paper { top: 78%; }
}
@media (min-width:701px) and (max-width:1050px) and (min-height:900px) {
  .cover--v10 .cover__masthead { top: 16%; }
  .cover--v10 .hero-flight { top: 0; width: 65%; left: 31%; }
  .cover--v10 .hero-signup { top: 38%; }
  .cover--v10 .hero-prop--butter { top: 36%; }
  .cover--v10 .hero-prop--spoon { top: 45%; }
  .cover--v10 .cover__toast { top: 61%; width: 92%; }
  .cover--v10 .cover__paper { top: 66%; }
  .cover--v10 .cover__cloth { bottom: -40px; height: 400px; }
}
@media (min-width:701px) and (max-height:620px) {
  .cover--v10 .cover__masthead { top: 17%; left: 5%; width: 90%; }
  .cover--v10 .hero-flight { top: -7%; left: 51%; width: 45%; }
  .cover--v10 .hero-signup { top: 51%; width: 330px; left: 51%; }
  .cover--v10 .hero-neon { margin-bottom: -13px; transform: translateX(-10px) rotate(3deg); }
  .cover--v10 .hero-prop--butter { top: 49%; width: 23%; left: -4%; }
  .cover--v10 .hero-prop--spoon { top: 47%; right: 3%; width: 17%; }
  .cover--v10 .cover__toast { top: 71%; left: -25%; width: 67%; }
  .cover--v10 .cover__paper { top: 74%; left: 76%; width: 29%; }
  .cover--v10 .cover__cloth { top: 82%; bottom: auto; height: 180px; }
}
@media (prefers-reduced-motion:reduce) {
  .cover--v10 .hero-flight { translate: 0 0 !important; will-change: auto; }
}