/* The home page on a touch screen (a phone, or an iPad without a trackpad). index.html links this sheet for that media
   only, and home-touch.js drives it; the desktop's scripts stand aside there (site.js ZynolabsCalm).
   The page scrolls as one page over the fixed sky. The helmet, held still after its opening, fades at its foot into the
   sky (the fade is in the picture itself: index.html gives a touch screen hero/astronaut-fade.webp), the words come up
   as they reach the screen, and Explore is the constellation, as one screen of the page.
   Every animation here moves transforms and opacity only, on the real type: a phone's compositor plays those by
   itself, so nothing waits on the page's own thread, nothing is painted again frame by frame, and nothing is swapped
   at the end. Nothing is tied to the scroll. */

/* Sizes that never change while the page is read: the small viewport (svh, the screen with Safari's toolbars out)
   and the large one (lvh, with them folded) are fixed by definition, and iPhone Safari gives both truly (measured in
   the iOS simulator: 796 and 836 on an iPhone 18 Pro Max). The hero fills the screen as it first opens; the sky
   covers it with the toolbars gone, and a margin below. (A script that measured the screen in each page's head ran
   before the page's viewport took hold, measured a 980-wide desktop layout, 1773 or 2129 px tall, and corrected
   itself at the first scroll, so the sky and the heroes jumped; it is gone.) The picture sits a little high in the
   sky, so the nebula's red comes up to meet the words */
.cosmic-space { bottom: auto; height: calc(100lvh + 120px); }
.cosmic-space__image { inset: -24% -7% -7%; }
.hero { height: max(100svh, 760px); min-height: 0; }

/* The helmet's hero: no rule under it, no ground behind the picture, a shade over it that fades out by itself (no
   mask: iOS Safari does not always draw one), and no footer line (on a phone that is the menu's) */
.hero { border-bottom-color: transparent; }
.hero .hero__world { background: transparent; }
.hero .hero__world::before, .hero .hero__world::after { animation: none; }
.hero::after { background: radial-gradient(130% 62% at 0% 34%, #030605b3, #03060500 72%), linear-gradient(180deg, #03060566, #03060540 40%, #03060500 74%); }
.hero__legal { display: none; }
.hero__particles, .cosmic-space__stars, .cosmic-space__meteors { display: none; }
/* (the headline's rule draws itself in; its slow colour drift, painted again every frame, is a desktop's) */
.hero__title::before { animation: hero-rule-reveal 1450ms cubic-bezier(.42, 0, .2, 1) 450ms both; background-position: 50% 30%; }

/* The words after the helmet sit in the page, one part after another, over the same sky */
.services { min-height: 0; }
.services__intro { position: relative; min-height: 0; padding-block: 72px 40px; }
.services.is-static :is(.services__lede, .services__detail) { margin-top: 44px; }

/* The header steps up out of the way while the page is read downward, and comes back on a solid ground the moment it
   scrolls up (home-touch.js), so no word ever shows through under it */
body:has(.hero-journey:not(.is-active)) .bar::after { inset: 0 0 -24px; background: linear-gradient(180deg, #050709 0%, #050709 70%, rgba(5, 7, 9, 0) 100%); }
.bar { transition: translate .45s cubic-bezier(.22, 1, .36, 1); }
html.is-bar-away .bar { translate: 0 calc(-100% - 30px); }

/* Rising type (type-motion.js rise). Each word is the real text in a box of its own, and the box carries room for its
   ink: an italic's tail runs past its letters, and a word drawn on a layer of its own while it moves is cut to its box.
   Until its line is sent up a word waits a little low, tipped back and clear; then it comes into place in its turn
   (--d). Once in place it is plain text again, so nothing changes when the movement ends */
.rise .wi { display: inline-block; padding: .2em .26em .28em; margin: -.2em -.26em -.28em; opacity: 0; transform: perspective(600px) translate3d(0, .55em, 0) rotateX(-34deg); }
.rise.is-up .wi { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
/* (the hero's buttons and the search field come up whole) */
.lift { opacity: 0; transform: translate3d(0, 16px, 0); }
.lift.is-up { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }

/* Explore, the constellation as one screen of the page: the heading at its head and the five stars where they stand
   on a phone over the stage (--destination-mobile-x and -y), each with its cloud and its name. The stars light one
   after another as it comes up (home-touch.js), their names come in under them, and then each breathes to its own
   time */
.nebula-journey:not(.is-enhanced) .nebula-hub { position: relative; display: block; width: 100%; height: min(860px, 205vw); padding: 0; }
.nebula-journey:not(.is-enhanced) .nebula-hub__heading { position: absolute; top: 9%; left: 50%; width: max-content; margin: 0; transform: translateX(-50%); text-align: center; }
.nebula-journey:not(.is-enhanced) .nebula-destination { position: absolute; left: var(--destination-mobile-x); top: var(--destination-mobile-y); display: block; width: 154px; height: 94px; min-height: 0; padding: 0; transform: translate(-50%, -22px); }
.nebula-journey:not(.is-enhanced) .nebula-destination::before {
  content: ""; position: absolute; pointer-events: none; width: 190px; height: 120px; left: 50%; top: 22px;
  transform: translate(-50%, -50%) rotate(var(--cloud-angle));
  background: radial-gradient(ellipse at 43% 52%, rgb(var(--star-tint) / .17), transparent 62%), radial-gradient(ellipse at 61% 42%, rgb(var(--star-tint) / .09), transparent 65%);
  opacity: .55;
}
.nebula-journey:not(.is-enhanced) .nebula-star {
  position: absolute; left: 50%; top: 22px; width: 4px; height: 4px;
  transform: translate(-50%, -50%) scale(var(--star-scale));
  box-shadow: 0 0 8px 2px #e5ecff99, 0 0 24px 6px rgb(var(--star-tint) / .35);
}
.nebula-journey:not(.is-enhanced) .nebula-star::before { width: 23px; }
.nebula-journey:not(.is-enhanced) .nebula-star::after { width: 16px; }
.nebula-journey:not(.is-enhanced) .nebula-destination > span:last-child { position: absolute; top: 43px; left: 50%; width: 170px; transform: translateX(-50%); text-align: center; }
.nebula-journey:not(.is-enhanced) .nebula-destination strong { display: block; font: 300 14px/1.4 Sora, Archivo, sans-serif; letter-spacing: -.035em; color: #d4dde5; white-space: normal; text-shadow: 0 2px 12px #000; }
.nebula-journey:not(.is-enhanced) .nebula-destination em { display: none; }
.nebula-hub.is-waiting :is(.nebula-star, .nebula-destination > span:last-child), .nebula-hub.is-waiting .nebula-destination::before { opacity: 0; }
.nebula-hub.is-lit .nebula-star { animation: star-light 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 230ms + 260ms) both, star-breathe 3.4s ease-in-out calc(var(--i) * 230ms + 1.6s + var(--i) * .41s) infinite alternate; }
.nebula-hub.is-lit .nebula-destination::before { animation: star-cloud 1.8s ease-out calc(var(--i) * 230ms + 300ms) both; }
.nebula-hub.is-lit .nebula-destination > span:last-child { animation: star-name .95s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 230ms + 640ms) both; }
@keyframes star-light {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--star-scale) * 1.9)); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(var(--star-scale)); }
}
@keyframes star-breathe { from { opacity: 1; } to { opacity: .58; } }
@keyframes star-cloud { from { opacity: 0; } to { opacity: .55; } }
@keyframes star-name { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }

/* With reduced motion everything stands where it ends, at once (home-touch.js does not hold anything back then; this
   is the net under it) */
@media (prefers-reduced-motion: reduce) {
  .rise .wi, .lift { opacity: 1; transform: none; transition: none; }
  .nebula-hub.is-lit :is(.nebula-star, .nebula-destination > span:last-child), .nebula-hub.is-lit .nebula-destination::before { animation: none; }
  .bar { transition: none; }
}