/* Corvex motion system (Next.js layer on top of styles.css).
   One system, by element type: headings rise word by word behind a mask, photos unveil, lists arrive in turn,
   everything else eases up. Only transform, opacity and clip-path animate. Reduced motion turns all of it off.
   The first screen plays from CSS at first paint (no wait for JavaScript); the rest plays as it scrolls into view. */
:root {
  --m-fast: 180ms; --m-base: 420ms; --m-slow: 900ms;
  --e-in: cubic-bezier(.22, 1, .36, 1);       /* entrances */
  --e-out: cubic-bezier(.55, 0, 1, .45);      /* exits */
  --e-travel: cubic-bezier(.65, 0, .35, 1);   /* things that travel */
  --m-step: 70ms;                              /* sequence step */
  --m-word: 560ms; --m-word-step: 36ms;        /* headline words */
}
@media (max-width: 672px) { :root { --m-word: 480ms; --m-word-step: 26ms; --m-step: 55ms; } }

/* ---------- words behind a mask ---------- */
.wrise .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wrise .w > span { display: inline-block; }
.js-motion .wrise .w > span {
  transform: translate3d(0, 108%, 0);
  transition: transform var(--m-word) var(--e-in);
  transition-delay: calc(min(var(--w), 12) * var(--m-word-step));
}
.js-motion .wrise.is-in .w > span, .js-motion .is-in .wrise .w > span { transform: none; }
/* a heading container keeps still: its words do the moving, the rest of it eases in */
.js-motion [data-reveal]:has(> .wrise) { opacity: 1; transform: none; }
.js-motion [data-reveal]:has(> .wrise) > :not(.wrise) { opacity: 0; transform: translate3d(0, .6rem, 0); transition: opacity var(--m-base) var(--e-in), transform var(--m-base) var(--e-in); }
.js-motion [data-reveal].is-in:has(> .wrise) > :not(.wrise) { opacity: 1; transform: none; }

@keyframes cvx-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes cvx-word { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
@keyframes cvx-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cvx-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- the first screen: label, headline words, intro, buttons, then the picture (all within ~0.9 s) ---------- */
  .js-motion main > section:first-of-type :is(.crumb, .ahead__meta) { animation: cvx-fade var(--m-base) var(--e-in) both; }
  .js-motion main > section:first-of-type .label { animation: cvx-rise var(--m-base) var(--e-in) both; }
  .js-motion main > section:first-of-type h1.wrise .w > span {
    transition: none; animation: cvx-word var(--m-word) var(--e-in) both;
    animation-delay: calc(var(--m-step) + min(var(--w), 12) * var(--m-word-step));
  }
  .js-motion main > section:first-of-type :is(.lede, .help__hint) { animation: cvx-rise var(--m-base) var(--e-in) both; animation-delay: calc(var(--m-step) * 3.4); }
  .js-motion main > section:first-of-type :is(.hero__actions, .shero__act, .ticks, .contact__det) { animation: cvx-rise var(--m-base) var(--e-in) both; animation-delay: calc(var(--m-step) * 4.4); }
  .js-motion main > section:first-of-type :is(.phero__vis, .bframe, .contact__form) { animation: cvx-rise 560ms var(--e-in) both; animation-delay: calc(var(--m-step) * 5.2); }
  /* hero photo unveils from the bottom (PC; phones keep the lighter fade and settle from styles.css) */
  @media (min-width: 673px) {
    .js-motion main > section:first-of-type .phero__vis img { animation: cvx-unveil var(--m-slow) var(--e-travel) both; animation-delay: calc(var(--m-step) * 5.6); }
  }

  /* ---------- small interactions ---------- */
  .btn { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: var(--m-fast); transition-timing-function: var(--e-in); }
  .btn:active { transform: scale(.985); box-shadow: 0 1px 2px rgba(22, 22, 22, .18); }
  .btn svg, .ghost svg, .lcard__go svg { transition: transform var(--m-fast) var(--e-in); }
  .lcard:hover .lcard__go svg, .scard:hover .lcard__go svg { transform: translateX(.25rem); }
  /* phone menu: links arrive in turn */
  .menu-open .sheet > * { animation: cvx-rise 360ms var(--e-in) both; }
  .menu-open .sheet > :nth-child(2) { animation-delay: 40ms; } .menu-open .sheet > :nth-child(3) { animation-delay: 80ms; }
  .menu-open .sheet > :nth-child(4) { animation-delay: 120ms; } .menu-open .sheet > :nth-child(5) { animation-delay: 160ms; }
  .menu-open .sheet > :nth-child(6) { animation-delay: 200ms; } .menu-open .sheet > :nth-child(n+7) { animation-delay: 240ms; }
  /* mega menu panels ease down */
  .mega:not([hidden]) .mega__in { animation: cvx-rise 260ms var(--e-in) both; }
  /* the demo dialog rises in */
  .demo[open] .demo__grid { animation: cvx-rise 320ms var(--e-in) both; }
}

/* the header tucks away while reading down and comes back on the way up; the phone section row moves up with it */
.header.is-tucked { transform: translate3d(0, -100%, 0); }
.jump { transition: top .3s var(--e-in); }
html.hdr-away .jump { top: 0; }

/* safety: if scripts never run, everything shows */
.motion-done .wrise .w > span { transform: none !important; animation: none !important; }

/* while the first screen is marked as already revealed, transitions are held off so nothing plays twice */
.reveal-now [data-reveal], .reveal-now [data-reveal] > *, .reveal-now [data-reveal] img { transition: none !important; }
/* the blurred preview behind a photo fills its frame */
.ph--img { background-repeat: no-repeat; }