:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; place-items: center; background: #EEF2FF; }
.banner {
  position: relative;
  width: min(100vw, calc(100vh * 1432 / 1760));
  aspect-ratio: 1432 / 1760;
}
.artwork, .captions { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.artwork { z-index: 0; }
.captions { z-index: 2; pointer-events: none; }
.captions .layer { pointer-events: visiblePainted; }
.motion, .interactive { transform-box: fill-box; transform-origin: center; }
.js .banner:not(.is-ready) .motion { opacity: 0; }
.interactive { transition: transform 200ms ease; }
@media (prefers-reduced-motion: no-preference) {
  .layer:hover .interactive { transform: scale(1.05); }
}
.is-ready .motion { animation: enter var(--duration, 600ms) ease-in-out var(--delay, 0ms) both; }
.device { --from-x: -62px; --from-y: 0px; }
.mobile .device { --from-x: 0px; --from-y: 792px; --duration: 1000ms; }
.card { --from-x: -100px; --from-y: 60px; --delay: 600ms; }
.card-secondary { --from-x: -95px; --from-y: 109px; --delay: 800ms; }
.mobile .card { --from-x: 193px; --from-y: -116px; --delay: 1100ms; }
.mobile .card-secondary { --from-x: -199px; --from-y: 0px; --delay: 900ms; --duration: 800ms; }
.title-word { --from-x: 0px; --from-y: 46px; --delay: 400ms; }
.mobile .title-word { --delay: 800ms; }
@keyframes enter {
  from { opacity: 0; transform: translate(var(--from-x), var(--from-y)); }
  to { opacity: 1; transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-ready .motion { animation: none; }
  .interactive { transition: none; }
}

/* Night mode: banner-theme.js puts "banner-dark" on <html> and swaps every
   image without data-no-dark to its *-dark twin. */
body { transition: background-color .35s ease; }
html.banner-dark { color-scheme: dark; }
html.banner-dark body { background: #121826; }
/* Lifts the dark device / card screenshots off the dark background. */
html.banner-dark .artwork .interactive image { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35)); }