/* Motion layer. Metaphor: the phone travels around the table and its case
   changes colour with every team. Hidden start states only apply once JS has
   added `html.motion`, so the page is complete without JavaScript. */

@property --hold { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Scroll progress: four team colours fill in turn, like the phone going round. */
.m-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 80; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; pointer-events: none; }
.m-progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); }
.m-progress i:nth-child(1) { background: var(--sun); }
.m-progress i:nth-child(2) { background: var(--sea); }
.m-progress i:nth-child(3) { background: var(--violet); }
.m-progress i:nth-child(4) { background: var(--tomato); }

/* Header slides away while reading down, returns on the way up. */
.motion .site-header.m-hidden { translate: 0 -100%; }

/* Hero: the case assembles around the S. */
.motion .hero-mark .q { transition: transform .75s cubic-bezier(.2, .9, .2, 1.15), opacity .3s; }
.motion .hero-mark .s { transform-origin: center; transition: transform .55s cubic-bezier(.2, .9, .3, 1.3) .45s, opacity .3s .45s; }
.motion.m-intro .hero-mark .q1 { transform: translate(-90px, -90px); opacity: 0; }
.motion.m-intro .hero-mark .q2 { transform: translate(90px, -90px); opacity: 0; }
.motion.m-intro .hero-mark .q3 { transform: translate(90px, 90px); opacity: 0; }
.motion.m-intro .hero-mark .q4 { transform: translate(-90px, 90px); opacity: 0; }
.motion.m-intro .hero-mark .s { transform: scale(.6); opacity: 0; }

/* Lines and blocks rise into place. */
.motion .m-rise { transition: opacity .6s var(--ease), translate .7s var(--ease); }
.motion .m-rise.m-pending { opacity: 0; translate: 0 26px; }

/* Hero phone arrives from below, as if being handed up. */
.motion .phone { transition: background .38s var(--ease), translate .9s cubic-bezier(.2, .8, .2, 1) .2s, rotate .9s cubic-bezier(.2, .8, .2, 1) .2s, opacity .5s .2s; }
.motion.m-intro .phone { translate: 0 80px; rotate: 6deg; opacity: 0; }
.ph-hold { --hold: 0; transition: --hold var(--hold-ms, 0ms) linear; }
.ph-hold::before { transform: scaleX(var(--hold)); }

/* The four hands of a turn: each card is handed over from the side and takes its colour. */
.motion .hand { transition: translate .8s cubic-bezier(.2, .8, .2, 1), rotate .8s cubic-bezier(.2, .8, .2, 1), opacity .5s, background .5s var(--ease) .35s; }
.motion .hand.m-pending { opacity: 0; translate: -60px 30px; rotate: -5deg; background: var(--surface-2); }
.motion .hand:nth-child(even).m-pending { translate: 60px 30px; rotate: 5deg; }
.motion .hand .hand-num { transition: background .5s var(--ease) .35s; }
.motion .hand.m-pending .hand-num { background: var(--surface-2); }

/* The stake: the three cards start squared up and fan out. */
.motion .fan.m-pending .card { translate: 0 30px; rotate: 0deg; }
.motion .fan .card:nth-child(1) { transition-delay: .05s; }
.motion .fan .card:nth-child(3) { transition-delay: .12s; }

/* The download band's case passes through the team colours once. */
.motion .cta-band.m-pending { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .m-progress { display: none; }
}