/* heyorb.ai motion: the page answers the visitor. Things arrive when you do (the first
   screen), when you reach them (every section) and when you touch them. Words come one
   after another, the way they are spoken. Two curves: --ease for what fades, --spring for
   what lands. With reduced motion, or without JavaScript, everything is simply there. */

/* ---------- arrival: the first screen. CSS alone, so it starts with the first paint.
   <html class="arriving"> is in the page from the start; main.js takes it off once
   everything has landed, so nothing shown or hidden later waits for its turn again. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes word-in { from { opacity: 0; transform: translateY(.42em); filter: blur(10px); } }
  @keyframes block-in { from { opacity: 0; transform: translateY(var(--from, 18px)); } }
  @keyframes phone-in { from { transform: translateY(var(--land, 64px)) scale(.95); } }
  @keyframes sky-out { from { opacity: 0; } }
  @keyframes orb-hello { from { transform: scale(0); } }
  @keyframes orb-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
  @keyframes rank-pop { from { opacity: 0; transform: scale(.4); } }

  /* the night comes out, far stars first */
  .arriving .sky-l, .arriving #heroStars { animation: sky-out 1.8s ease backwards; }
  .arriving .sky-l:nth-child(2) { animation-delay: .25s; }
  .arriving .sky-l:nth-child(3), .arriving #heroStars { animation-delay: .5s; }
  /* the logo's orb says hello */
  .arriving .bar-in > * { --from: -10px; animation: block-in .7s var(--spring) backwards .05s; }
  .arriving .logo-o { animation: orb-hello 1s var(--pop) backwards .25s; }
  .arriving .logo-ring { animation: orb-ring 1.5s var(--ease) .7s; }
  /* the headline is spoken: three words, a breath, three words; then the rest, quickly
     (the browser counts a text as shown only when its fade has ended) */
  .arriving .hero .kind { animation: block-in .7s var(--spring) backwards .05s; }
  .arriving .h-hero .wd { animation: word-in .8s var(--spring) backwards; }
  .arriving .h-hero .wd:nth-child(1) { animation-delay: .12s; }
  .arriving .h-hero .wd:nth-child(2) { animation-delay: .2s; }
  .arriving .h-hero .wd:nth-child(3) { animation-delay: .28s; }
  .arriving .h-hero .gold .wd:nth-child(1) { animation-delay: .46s; }
  .arriving .h-hero .gold .wd:nth-child(2) { animation-delay: .54s; }
  .arriving .h-hero .gold .wd:nth-child(3) { animation-delay: .62s; }
  .arriving .hero-sub { animation: block-in .65s var(--spring) backwards .66s; }
  .arriving .hero-copy .join { animation: block-in .7s var(--spring) backwards .76s; }
  .arriving .hero-copy > .fine { animation: block-in .7s var(--spring) backwards .86s; }
  /* the phone lands. It is there from the first paint (it only moves, it does not fade):
     the app is the first thing you see, and the browser counts it as shown at once. */
  .arriving .device .phone { animation: phone-in 1.3s var(--spring) backwards .1s; }
  /* under the words on a phone, it has less way to go (more of it is on the first screen) */
  @media (max-width: 859px) { .arriving .device .phone { --land: 28px; } }
  .arriving .film-row { animation: block-in .7s var(--spring) backwards 1.1s; }

  /* any time: "you joined" lands and your number pops; the logo's orb swells under the cursor */
  .joined { animation: block-in .8s var(--spring) backwards; }
  .joined-rank b { display: inline-block; animation: rank-pop .9s var(--pop) backwards .3s; }
  .logo-o { transition: transform var(--ui) var(--pop); }
  @media (hover: hover) { .logo:hover .logo-o { transform: scale(1.14); } }
}

/* ---------- reveals: a part of the page arrives when you reach it. motion.js puts .m on
   <html>, .rv on what moves (a block, each row of a list, each word of a title) and .seen
   when its time has come. --d is its place in the queue. */
.m .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--d, 0s), transform .9s var(--spring) var(--d, 0s); }
.m .rv.wd { transform: translateY(.42em); filter: blur(8px); transition: opacity .7s var(--ease) var(--d, 0s), transform .9s var(--spring) var(--d, 0s), filter .7s var(--ease) var(--d, 0s); }
.m .seen.rv, .m .seen .rv { opacity: 1; transform: none; filter: none; }
.m .now.rv, .m .now .rv { transition: none; }

/* ---------- small things that answer a touch */
.say { transition: border-color var(--touch), background-color var(--touch), color var(--touch), opacity var(--ui), transform var(--ui) var(--spring); }
@media (hover: hover) { .say:hover:not(:disabled) { transform: translateY(-2px); } }
.say:active:not(:disabled) { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .btn, .say, .logo-o { transition: none; }
}
@media print {
  .m .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
}