/* The main page in motion (js/motion.js). Everything is under .mo, which is only set when
   motion is allowed and the page isn't still. */

/* Everything that arrives comes in out of a soft blur. */
.mo .reveal { transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); transition-delay: var(--delay, 0s); }
.mo .reveal:not(.in) { filter: blur(10px); }
.mo .reveal.in { filter: none; }

/* Kickers wipe in from the left, just ahead of their heading. */
.mo .reveal.in .kicker, .mo .kicker.reveal.in { animation: mo-wipe 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards; }
/* (Wiped once it's arrived, not clipped while waiting: Chrome measures a revealing element
   through its own clip-path, and a fully clipped kicker would never count as in view.) */
@keyframes mo-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Headings: each word flips up out of its line instead of sliding. */
.mo.arrive-ready .words-in .w { perspective: 600px; }
.mo.arrive-ready .words-in .w > span { transform: translate3d(0, 55%, 0) rotateX(-82deg); transform-origin: 50% 100%; }
.mo.arrive-ready .words-in.arrived .w > span { transform: none; }

/* The hero's heading, word by word; the little Mac springs in with its word. */
.mo .hero h1.mo-hero .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; perspective: 700px; }
.mo .hero h1.mo-hero .w > span { display: inline-block; opacity: 0; filter: blur(6px); transform: translate3d(0, 60%, 0) rotateX(-85deg); transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease, filter 0.9s ease; transition-delay: calc(var(--i) * 75ms); }
.mo .hero h1.mo-go .w > span { opacity: 1; filter: none; transform: none; }
.mo .hero h1.mo-hero .mini-mac { opacity: 0; scale: 0.2; rotate: -14deg; transition: scale 0.9s cubic-bezier(0.34, 1.6, 0.64, 1), rotate 0.9s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.35s ease; transition-delay: calc(var(--i) * 75ms + 120ms); }
.mo .hero h1.mo-go .mini-mac { opacity: 1; scale: 1; rotate: 0deg; }
/* The underline under "useful" draws itself, one colour after another, only once the word
   has finished coming in (its flip takes 1.1 s after its own delay). */
.mo .hero h1 .squiggle path { transition: stroke-dashoffset 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
.mo .hero h1 .squiggle.drawn path:nth-child(1) { transition-delay: calc(var(--i) * 75ms + 1150ms); }
.mo .hero h1 .squiggle.drawn path:nth-child(2) { transition-delay: calc(var(--i) * 75ms + 1300ms); }
.mo .hero h1 .squiggle.drawn path:nth-child(3) { transition-delay: calc(var(--i) * 75ms + 1450ms); }
.mo .hero .lede.reveal { transition-delay: 0.5s; }
.mo .hero .cta.reveal { transition-delay: 0.68s; }
.mo .hero .hero-fine.reveal { transition-delay: 0.82s; }

/* Scrolling on: the hero's words drift back, the demo Mac grows to its full size. */
.mo .hero .intro { translate: 0 calc(var(--out, 0) * 70px); scale: calc(1 - var(--out, 0) * 0.05); opacity: calc(1 - var(--out, 0) * 0.75); }
.mo #demo { scale: calc(0.9 + var(--in, 1) * 0.1); transform-origin: 50% 0; }
.mo .demo-shell.full #demo, .mo #demo:fullscreen { scale: none; }

/* Stages that open like a lid as they scroll in, both ways. */
.mo .split, .mo .coding-block { perspective: 1800px; }
.mo .lid { transform-origin: 50% 100%; rotate: x calc((1 - var(--lid, 1)) * 18deg); translate: 0 calc((1 - var(--lid, 1)) * 70px); scale: calc(0.9 + var(--lid, 1) * 0.1); opacity: calc(0.15 + var(--lid, 1) * 0.85); }

/* The notch's own stages come out of it: a notch-sized pill at the top opens to the whole. */
.mo .from-notch { clip-path: inset(0 calc(50% - 64px) calc(100% - 36px) calc(50% - 64px) round 0 0 20px 20px); transition: clip-path 1.35s cubic-bezier(0.7, 0, 0.15, 1); }
.mo .from-notch.mo-in { clip-path: inset(0 0 0 0 round 0 0 22px 22px); }
.mo .from-notch.mo-done { clip-path: none; }

/* Lists wait unseen until their turn (their items are animated in by motion.js). */
.mo .mo-stagger:not(.mo-in) > * { opacity: 0; }

/* FAQ: the questions flip down into place. */
.mo.arrive-ready .faq details { transform-origin: 50% 0; }
.mo.arrive-ready .faq:not(.arrived) details { transform: perspective(900px) rotateX(-40deg) translateY(16px); }

/* Pricing: the icon springs in; the cards rise gently in turn; the regular price is struck through,
   the ticks are drawn one by one, and "Best value" pops. */
.mo .final .icon { transition: scale 0.9s cubic-bezier(0.34, 1.6, 0.64, 1) 0.1s, rotate 0.9s cubic-bezier(0.34, 1.6, 0.64, 1) 0.1s; }
.mo .final .reveal:not(.in) .icon { scale: 0.4; rotate: -20deg; }
.mo .plans .plan { transition: opacity 0.8s ease, translate 1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 120ms + 150ms); }
.mo .plans:not(.mo-in) .plan { opacity: 0; translate: 0 28px; }
.mo .plan-price s { position: relative; text-decoration: none; }
.mo .plan-price s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 2px; background: currentColor; scale: 0 1; transform-origin: 0 50%; transition: scale 0.5s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i) * 140ms + 750ms); }
.mo .plans.mo-in .plan-price s::after { scale: 1 1; }
.mo .plan-price strong.odo { line-height: 1; }
.mo .plan-price strong .odo .col, .mo .plan-price strong.odo .col { height: 1em; }
.mo .plan-price strong .strip i { height: 1em; line-height: 1; }
.mo .plan-list svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.45s ease; transition-delay: calc(var(--i) * 140ms + var(--j, 0) * 90ms + 950ms); }
.mo .plans.mo-in .plan-list svg path { stroke-dashoffset: 0; }
.mo .plan-badge { transition: scale 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) 1.5s, rotate 0.6s cubic-bezier(0.34, 1.8, 0.64, 1) 1.5s; }
.mo .plans:not(.mo-in) .plan-badge { scale: 0; rotate: -12deg; }