/* The 3D report in the hero. "Your report" pulses: a hairline ring leaves its edge and a
   sheen of the glass's own cool light crosses it with each beat, flat and pale, so it earns attention by
   moving rather than by colour (Start keeps the only fill). On a press the aurora steams off the hero
   from the foot up and the copy rises away with it, the headline too; Start and the button, now
   "Back", dock at the foot of the first screen with a line about the doctors and the example label,
   and the app's example report stands in the hero itself. Never a dialog. Flat: hairlines and tints,
   no glow, no shadow, no gradient surfaces. Every state rule starts at #hero, so it outranks the
   hero's layered type rules. The hero's entrance animation owns opacity and transform on the copy, so
   everything here moves it with translate and fades it with filter. */

#hero {
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --ease-glide: cubic-bezier(.22, 1, .36, 1);
  /* The app's column text width, which the dock's lines keep to; the script sets it exactly from
     the frame's width while the report is open. */
  --reveal-dock-w: 500px;
}
@media (max-width: 899.98px) {
  #hero {
    --reveal-dock-w: 440px;
  }
}

/* ---- The living button ----
   Held in the layout from first paint and only hidden from sight until the runtime is known, so
   showing it moves nothing. It is removed only when the 3D body cannot be offered at all. */
#hero .hero-ctas .hero-3d[hidden] {
  display: inline-flex;
  visibility: hidden;
}
#hero .hero-ctas .hero-3d.is-off {
  display: none;
}

#hero .hero-ctas .hero-3d {
  --pulse-ring: .58;
  --pulse-edge: .72;
  --pulse-sheen: .32;
  --pulse-fill: .07;
  --pulse-reach: 12px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  background-color: transparent;
  outline: 0 solid rgb(219 240 255 / 0);
  outline-offset: 0;
}

/* The sheen: a soft band of the glass light, clipped to the button. The ring is the outline, so
   it travels outside the button untouched by the clip. */
#hero .hero-ctas .hero-3d::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  background-image: linear-gradient(105deg,
    rgb(219 240 255 / 0) 28%,
    rgb(219 240 255 / calc(var(--pulse-sheen) * .55)) 42%,
    rgb(219 240 255 / var(--pulse-sheen)) 50%,
    rgb(219 240 255 / calc(var(--pulse-sheen) * .55)) 58%,
    rgb(219 240 255 / 0) 72%);
  transform: translateX(-100%);
  pointer-events: none;
}

/* The label changes in place: out with a 3 px lift, in where it stands. */
#hero .hero-3d__label {
  display: inline-block;
  transition: opacity .14s var(--ease-glide);
}
#hero .hero-3d.is-swapping .hero-3d__label {
  opacity: 0;
  translate: 0 -3px;
  transition: opacity .14s var(--ease-glide), translate .14s var(--ease-glide);
}
/* While the report is open the button says Back, after an arrow; the button's own gap spaces the
   two, and the arrow comes and goes with the words. At rest there is no arrow. */
#hero .hero-3d__arrow {
  display: none;
  transition: opacity .14s var(--ease-glide);
}
#hero .hero-3d.is-back .hero-3d__arrow {
  display: inline-flex;
  animation: hero-3d-arrow .14s var(--ease-glide);
}
#hero .hero-3d.is-swapping .hero-3d__arrow {
  opacity: 0;
}
#hero .hero-3d__arrow svg {
  display: block;
}
@keyframes hero-3d-arrow {
  from { opacity: 0; }
}

/* At rest it pulses on one 5 s clock that starts once the copy has arrived: a ring leaves the
   edge at 0 and 2.5 s, the hairline and a whisper of fill brighten with each ring, and the sheen
   crosses with each beat.
   Hover, keyboard focus and a press calm it; it plays only while the hero is at rest. */
#hero[data-reveal="idle"] .hero-ctas .hero-3d:not(:hover, :focus-visible, :active) {
  animation: hero-3d-ring 5s linear 1.6s infinite, hero-3d-edge 5s linear 1.6s infinite;
}
#hero[data-reveal="idle"] .hero-ctas .hero-3d:not(:hover, :focus-visible, :active)::after {
  animation: hero-3d-sheen 2.5s linear 1.6s infinite;
}

/* Preview knobs for the rest state: one phrase at a time, or no motion at all. */
#hero[data-reveal="idle"][data-reveal-pulse="phrase"] .hero-ctas .hero-3d:not(.is-phrase),
#hero[data-reveal="idle"][data-reveal-pulse="phrase"] .hero-ctas .hero-3d:not(.is-phrase)::after,
#hero[data-reveal="idle"][data-reveal-pulse="still"] .hero-ctas .hero-3d,
#hero[data-reveal="idle"][data-reveal-pulse="still"] .hero-ctas .hero-3d::after {
  animation: none;
}
#hero[data-reveal="idle"][data-reveal-pulse="phrase"] .hero-ctas .hero-3d.is-phrase:not(:hover, :focus-visible, :active) {
  animation: hero-3d-ring 5s linear, hero-3d-edge 5s linear;
}
#hero[data-reveal="idle"][data-reveal-pulse="phrase"] .hero-ctas .hero-3d.is-phrase:not(:hover, :focus-visible, :active)::after {
  animation: hero-3d-sheen 2.5s linear 2;
}
#hero[data-reveal-pulse-level="soft"] .hero-ctas .hero-3d {
  --pulse-ring: .4;
  --pulse-edge: .56;
  --pulse-sheen: .2;
  --pulse-fill: .04;
  --pulse-reach: 9px;
}
#hero[data-reveal-pulse-level="strong"] .hero-ctas .hero-3d {
  --pulse-ring: .72;
  --pulse-edge: .86;
  --pulse-sheen: .42;
  --pulse-fill: .1;
  --pulse-reach: 15px;
}
/* Stacked phone buttons sit 12 px apart: the ring stops halfway. */
@media (max-width: 900px) {
  #hero .hero-ctas .hero-3d,
  #hero[data-reveal-pulse-level] .hero-ctas .hero-3d {
    --pulse-reach: 6px;
  }
}

@media (hover: hover) {
  #hero .hero-ctas .hero-3d:hover {
    border-color: rgba(255, 255, 255, .7);
    background-color: rgb(219 240 255 / .06);
  }
}
#hero .hero-ctas .hero-3d:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}
#hero .hero-ctas .hero-3d:active {
  border-color: rgba(255, 255, 255, .7);
  background-color: rgb(219 240 255 / .1);
}

/* The press gets one quick pass of light. */
#hero[data-reveal="revealing"] .hero-ctas .hero-3d::after {
  animation: hero-3d-press .24s cubic-bezier(.45, 0, .55, 1);
}

/* Off screen or in a hidden tab, the button holds still where it is. */
html:is([data-nav="paper"], [data-motion="paused"]) #hero .hero-ctas .hero-3d,
html:is([data-nav="paper"], [data-motion="paused"]) #hero .hero-ctas .hero-3d::after {
  animation-play-state: paused !important;
}

@keyframes hero-3d-ring {
  0%, 50% {
    outline-width: 0;
    outline-offset: 0;
    outline-color: rgb(219 240 255 / 0);
  }
  2%, 52% {
    outline-width: 1px;
    outline-offset: .5px;
    outline-color: rgb(219 240 255 / var(--pulse-ring));
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  30%, 80%, 100% {
    outline-width: 1px;
    outline-offset: var(--pulse-reach);
    outline-color: rgb(219 240 255 / 0);
  }
}
@keyframes hero-3d-edge {
  0%, 50% {
    border-color: rgba(255, 255, 255, .34);
    background-color: rgb(219 240 255 / 0);
    animation-timing-function: cubic-bezier(.33, 0, .2, 1);
  }
  5%, 55% {
    border-color: rgb(219 240 255 / var(--pulse-edge));
    background-color: rgb(219 240 255 / var(--pulse-fill));
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  30%, 80%, 100% {
    border-color: rgba(255, 255, 255, .34);
    background-color: rgb(219 240 255 / 0);
  }
}
@keyframes hero-3d-sheen {
  0%, 4% {
    transform: translateX(-100%);
    animation-timing-function: cubic-bezier(.45, 0, .25, 1);
  }
  44%, 100% {
    transform: translateX(220%);
  }
}
@keyframes hero-3d-press {
  from { transform: translateX(-100%); }
  to { transform: translateX(200%); }
}

/* The way in when the 3D body cannot open here: the full demo, in this window, at the same width. */
#hero .hero-ctas .hero-open {
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  background-color: transparent;
}
#hero .hero-ctas .hero-open[hidden] {
  display: none;
}
@media (hover: hover) {
  #hero .hero-ctas .hero-open:hover {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
    background-color: rgb(219 240 255 / .06);
  }
}
#hero .hero-ctas .hero-open:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}

/* ---- What leaves: the eyebrow, the headline, the sub-line, the link and the proof strip ----
   Each rises 14 px and softens away as the front of the vapour reaches it, then leaves the
   accessibility tree. On Back each returns as the hero first arrived, up from 16 px over 0.9 s,
   as the condensing vapour passes it. The script writes the delays from the measured page. */
#hero :is(.kicker, .hero-title, .hero-sub, .hs-item) {
  transition: translate .9s var(--ease-settle) var(--reveal-in, 0s),
    filter .5s var(--ease-settle) var(--reveal-in, 0s),
    visibility 0s linear var(--reveal-in, 0s);
}
#hero .hero-foot > .text-link {
  transition: translate .9s var(--ease-settle) var(--reveal-in, 0s),
    filter .5s var(--ease-settle) var(--reveal-in, 0s),
    visibility 0s linear var(--reveal-in, 0s),
    border-color .18s ease, color .18s ease;
}
#hero[data-reveal-copy="out"] :is(.kicker, .hero-sub, .hero-foot > .text-link, .hs-item) {
  translate: 0 -14px;
  filter: blur(6px) opacity(0);
  visibility: hidden;
  transition: translate .42s var(--ease-settle) var(--reveal-out, 0s),
    filter .42s var(--ease-settle) var(--reveal-out, 0s),
    visibility 0s linear calc(.42s + var(--reveal-out, 0s));
}
/* The headline's large type softens with a gentler blur. */
#hero[data-reveal-copy="out"] .hero-title {
  translate: 0 -14px;
  filter: blur(4px) opacity(0);
  visibility: hidden;
  transition: translate .42s var(--ease-settle) var(--reveal-out, 0s),
    filter .42s var(--ease-settle) var(--reveal-out, 0s),
    visibility 0s linear calc(.42s + var(--reveal-out, 0s));
}
#hero[data-reveal-stats="left"][data-reveal-copy="out"] .hs-item {
  translate: -32px 0;
  filter: blur(2px) opacity(0);
}
/* Before they return, the pieces that have gone are moved just below their places while still out
   of sight, with nothing travelling. */
#hero[data-reveal-copy="rearm"] :is(.kicker, .hero-sub, .hero-foot > .text-link, .hs-item) {
  translate: 0 16px;
  filter: blur(6px) opacity(0);
  visibility: hidden;
  transition: none;
}
#hero[data-reveal-copy="rearm"] .hero-title {
  translate: 0 16px;
  filter: blur(4px) opacity(0);
  visibility: hidden;
  transition: none;
}

/* On a touch phone the white proof bar's fill fades as its items leave, and returns once the
   headline is back. */
#hero .hero-stats {
  transition: background-color .24s var(--ease-settle) var(--reveal-bar-in, 0s),
    box-shadow .24s var(--ease-settle) var(--reveal-bar-in, 0s);
}
#hero[data-reveal-copy="out"] .hero-stats {
  background-color: transparent;
  box-shadow: 0 -1px 0 rgb(18 38 48 / 0);
  transition: background-color .24s var(--ease-settle) var(--reveal-bar-out, 0s),
    box-shadow .24s var(--ease-settle) var(--reveal-bar-out, 0s);
}

/* ---- The ground ----
   The legibility wash lifts with the vapour. The glass never takes the pointer. Under reduced
   motion the aurora simply fades, once the scene is there to take its place. The lens preview knob
   shows the hero a browser without WebGL would show. */
#hero::after {
  transition: opacity .5s var(--ease-settle) var(--reveal-wash-in, 0s);
}
#hero[data-reveal-copy="out"]::after {
  opacity: 0;
  transition: opacity .5s var(--ease-settle) var(--reveal-wash-out, 0s);
}
#hero .lens-canvas {
  pointer-events: none;
}
#hero[data-reveal-path="still"] .lens-canvas {
  transition: opacity .28s linear;
}
#hero[data-reveal-path="still"][data-reveal-copy="out"]:not([data-reveal="waiting"]) .lens-canvas {
  opacity: 0;
}
/* Without the lift the scene fades in over the hero's own ground. Glass that was still starting
   at the press and comes in later steps aside the same way, so it never covers the scene. */
#hero[data-reveal-path="fade"] .lens-canvas {
  transition: opacity .5s var(--ease-settle);
}
#hero[data-reveal-path="fade"]:is([data-reveal="revealing"], [data-reveal="revealed"]) .lens-canvas {
  opacity: 0;
  transition: opacity .6s var(--ease-settle) .1s;
}
#hero[data-reveal-lens="off"] .lens-canvas {
  display: none;
}

/* ---- The scene ----
   The example's frame lies over the hero's own ground and under the glass. It is always laid out
   at full size, never hidden, only transparent and out of reach until it has said it is ready and
   the visitor has asked. It is exactly the first screen, the small viewport, which does not change
   as the browser's bars come and go, so the report never resizes while someone scrolls; below it on
   a phone the hero is the report's own ink while it shows. Without the page's own WebGL it fades
   in; under reduced motion it cross-fades with the aurora. */
#hero .hero-3d-slot {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  background: #0d222e;
}
#hero .hero-3d-slot iframe {
  position: absolute;
  inset: 0;
  bottom: auto;
  display: block;
  width: 100%;
  height: 100%;
  height: min(100%, 100svh);
  border: 0;
}
#hero:is([data-reveal="revealing"], [data-reveal="revealed"], [data-reveal="returning"])[data-reveal-frame="primed"] .hero-3d-slot {
  opacity: 1;
}
#hero[data-reveal="revealed"][data-reveal-frame="primed"] .hero-3d-slot {
  pointer-events: auto;
}
#hero[data-reveal-path="fade"] .hero-3d-slot {
  transition: opacity .6s var(--ease-settle) .1s;
}
#hero[data-reveal-path="fade"][data-reveal="returning"] .hero-3d-slot {
  opacity: 0;
  transition: opacity .5s var(--ease-settle);
}
#hero[data-reveal-path="still"] .hero-3d-slot {
  transition: opacity .28s linear;
}
#hero[data-reveal-path="still"][data-reveal="returning"] .hero-3d-slot {
  opacity: 0;
}

/* Once the body stands in the hero, the copy row lets the pointer through to it; its links and
   buttons keep theirs (a Start link that is still switched off stays inert). The proof strip has
   nothing to press and its items are gone, so whenever the hero is away from rest it never takes
   the pointer: on a phone the dock lies over its bar, and on a desktop it spans the foot of the
   scene. */
#hero[data-reveal="revealed"] > .container,
#hero:is([data-reveal="waiting"], [data-reveal="revealing"], [data-reveal="revealed"], [data-reveal="returning"]) > .hero-stats {
  pointer-events: none;
}
#hero[data-reveal="revealed"] .hero-ctas :is(a:not([aria-disabled="true"]), button) {
  pointer-events: auto;
}

/* ---- The dock's lines ----
   They take the place of "See how it works": a line about the doctors, then the example label.
   While the scene loads, the same place says it is opening. Both are laid out from the start, so
   the page can measure them, but stay out of sight and out of the accessibility tree until the
   dock has formed. */
#hero .hero-foot {
  position: relative;
  display: inline-flex;
}
@media (max-width: 900px) {
  #hero .hero-ctas .hero-foot {
    align-self: flex-start;
  }
}
#hero :is(.hero-foot__live, .hero-foot__wait) {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 2px;
  width: max-content;
  min-height: 100%;
  visibility: hidden;
  opacity: 0;
}
#hero .hero-foot__live {
  align-items: baseline;
  translate: 0 6px;
  transition: opacity .2s linear, translate 0s linear .2s, visibility 0s linear .2s;
}
#hero .hero-foot__wait {
  align-items: center;
  transition: opacity .3s var(--ease-settle), visibility 0s linear .3s;
}
#hero[data-reveal-wait="on"] .hero-foot__wait {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s var(--ease-settle), visibility 0s;
}
#hero .hero-foot__trust {
  font: 400 14px/1.5 var(--font-sans);
  color: rgba(255, 255, 255, .82);
  max-width: var(--reveal-dock-w, 500px);
}
/* In the eyebrow's register. */
#hero .hero-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239, 249, 253, .66);
}
/* Once the dock forms, the link's place is its own line, and the lines stack under the buttons as
   wide as the app's column text; they come into sight when the dock has landed. */
#hero:is([data-reveal-dock], [data-reveal-dock-motion]) .hero-foot {
  flex: 1 0 100%;
}
#hero:is([data-reveal-dock], [data-reveal-dock-motion]) .hero-foot__live {
  flex-direction: column;
  row-gap: 4px;
  width: var(--reveal-dock-w, 500px);
}
#hero[data-reveal-dock-motion="glide"] .hero-foot__live {
  top: var(--reveal-caption-y, 0px);
}
#hero[data-reveal-dock][data-reveal-captions="on"]:not([data-reveal-wait="on"]) .hero-foot__live {
  visibility: visible;
  opacity: 1;
  translate: none;
  transition: opacity .3s var(--ease-settle), visibility 0s;
}

/* ---- The dock ----
   Only Start Your Health Journey and the button stay from the page, docked at the foot of the first
   screen. Wider than 900 px the whole row glides down with translate alone. Otherwise the buttons
   fade out of sight, re-form as one row inside a block that keeps its height, so nothing above it
   moves, and fade back in. Nothing here hides the button, so it keeps the keyboard throughout. On a
   phone that row is one slim row (below), so the open example keeps the screen. */
#hero[data-reveal-ctas="out"] .hero-ctas {
  filter: opacity(0);
  pointer-events: none;
  transition: filter .14s linear;
}
#hero[data-reveal-ctas="in"] .hero-ctas {
  filter: none;
  transition: filter .3s var(--ease-settle);
}
#hero[data-reveal-dock-motion="glide"] .hero-ctas {
  transition: translate .76s var(--ease-glide) var(--reveal-dock-at, 0s);
}
/* A press while the buttons still glide home, in a window that has since narrowed, fades them out
   of sight as they go on home; neither transition cancels the other. */
#hero[data-reveal-dock-motion="glide"][data-reveal-ctas="out"] .hero-ctas {
  transition: translate .76s var(--ease-glide) var(--reveal-dock-at, 0s), filter .14s linear;
}
#hero[data-reveal-dock-motion="glide"][data-reveal-ctas="in"] .hero-ctas {
  transition: translate .76s var(--ease-glide) var(--reveal-dock-at, 0s), filter .3s var(--ease-settle);
}
#hero[data-reveal-dock="glide"] .hero-ctas {
  translate: 0 var(--reveal-dock-y, 0px);
}
#hero:is([data-reveal-dock="row"], [data-reveal-dock="phone"]) .hero-ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 12px;
  height: var(--reveal-ctas-h);
  translate: 0 var(--reveal-dock-y, 0px);
}
#hero[data-reveal-dock="row"] .hero-ctas {
  align-content: flex-start;
}
/* A phone's dock is one slim row: Back stands at the left edge and Start at the right, both 44 px
   tall, with the example label in one small line above them. The row runs to the pill's outer
   edges and rests 8 px above the first screen's foot, and the device's safe area below that: the
   bottom padding carries both, and the script reads it to place the dock. The block keeps its rest
   height above, so nothing else moves. */
#hero[data-reveal-dock="phone"] .hero-ctas {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: end;
  row-gap: 4px;
  width: auto;
  max-width: none;
  margin-inline: calc(-1 * var(--reveal-row-out, 18px));
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
/* A desktop that docks this way (while waiting, or under reduced motion) keeps the glide's row. */
@media (min-width: 901px) {
  #hero[data-reveal-dock="row"] .hero-ctas {
    column-gap: 26px;
  }
}
#hero:is([data-reveal-dock="row"], [data-reveal-dock="phone"]) .hero-ctas .btn-lg {
  width: auto;
}
#hero:is([data-reveal-dock="row"], [data-reveal-dock="phone"]) .hero-foot > .text-link {
  display: none;
}
#hero:is([data-reveal-dock="row"], [data-reveal-dock="phone"]) .hero-foot__live {
  position: static;
}
#hero[data-reveal-dock="phone"] .hero-foot {
  grid-column: 1 / -1;
  grid-row: 1;
}
#hero[data-reveal-dock="phone"] .hero-foot__live {
  width: auto;
}
#hero[data-reveal-dock="phone"] .hero-foot__trust {
  display: none;
}
/* The label is its lead words alone, in one 14 px line; the rest of the sentence stays for screen
   readers. */
#hero[data-reveal-dock="phone"] .hero-note {
  line-height: 14px;
}
#hero[data-reveal-dock="phone"] .hero-note__rest {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#hero[data-reveal-dock="phone"] .hero-ctas > :is([data-app-link], .hero-3d) {
  grid-row: 2;
  min-width: 0;
  min-height: 44px;
  padding-block: 6px;
  padding-inline: 14px;
  font-size: 14px;
  line-height: 1.2;
}
#hero[data-reveal-dock="phone"] .hero-ctas > .hero-3d {
  grid-column: 1;
  padding-inline: 12px;
}
#hero[data-reveal-dock="phone"] .hero-ctas > [data-app-link] {
  grid-column: 2;
}
/* Under 340 px Back keeps its arrow, 44 px square; its words stay for screen readers. */
@media (max-width: 339.98px) {
  #hero[data-reveal-dock] .hero-3d__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #hero[data-reveal-dock="phone"] .hero-ctas > .hero-3d {
    padding-inline: 13px;
  }
}

/* ---- The page around it ----
   On touch devices, while the example is open, the root stops pull-to-refresh and the rubber band.
   On a phone the page also holds still behind it, so there is one scroll, the report's own (the
   reveal-touch preview knob compares: free never holds, still holds every touch device), and the
   report's own bar takes the pill's place: the pill steps aside, fading out and out of reach (the
   script makes it inert), and fades back in as the page returns. The cookie question waits too: it
   would lie over the open example, so while the script says the example covers a phone's screen
   (data-reveal-cover, set with the pill's stepping aside and taken off the moment the example closes
   or the hero leaves view) it is not shown; nothing is answered or stored, and it returns as it was. */
html[data-reveal-touch] {
  overscroll-behavior-y: none;
}
html[data-reveal-hold] {
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-reveal-hold] body {
  overflow: hidden;
}
html[data-reveal-nav="aside"] #nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .24s;
}
html[data-reveal-nav="back"] #nav {
  transition: opacity .32s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
html[data-reveal-cover] .cc {
  display: none;
}

/* ---- Reduced motion: a short cross-fade ----
   Nothing travels: what leaves fades in 160 ms, the aurora and the scene cross-fade in 280 ms, the
   dock fades out of sight and back at its docked place, the copy returns on short steps, and the
   button is a still hairline. */
@media (prefers-reduced-motion: reduce) {
  #hero .hero-ctas .hero-3d,
  #hero .hero-ctas .hero-3d::after {
    animation: none !important;
  }
  #hero .hero-ctas .hero-3d {
    border-color: rgba(255, 255, 255, .6);
  }
  #hero .hero-3d__label,
  #hero .hero-3d.is-swapping .hero-3d__label {
    translate: none;
    transition: none;
  }
  #hero .hero-3d__arrow,
  #hero .hero-3d.is-back .hero-3d__arrow {
    transition: none;
    animation: none;
  }
  #hero :is(.kicker, .hero-title, .hero-sub, .hs-item) {
    transition: filter .16s linear var(--reveal-in, 0s), visibility 0s linear var(--reveal-in, 0s);
  }
  #hero .hero-foot > .text-link {
    transition: filter .16s linear var(--reveal-in, 0s), visibility 0s linear var(--reveal-in, 0s),
      border-color .18s ease, color .18s ease;
  }
  #hero[data-reveal-copy="out"] :is(.kicker, .hero-title, .hero-sub, .hero-foot > .text-link, .hs-item),
  #hero[data-reveal-stats="left"][data-reveal-copy="out"] .hs-item,
  #hero[data-reveal-wait="on"] .hero-foot > .text-link {
    translate: none;
    filter: opacity(0);
    visibility: hidden;
    transition: filter .16s linear var(--reveal-out, 0s), visibility 0s linear calc(.16s + var(--reveal-out, 0s));
  }
  #hero[data-reveal-copy="rearm"] :is(.kicker, .hero-title, .hero-sub, .hero-foot > .text-link, .hs-item) {
    translate: none;
    filter: opacity(0);
    visibility: hidden;
    transition: none;
  }
  #hero .hero-stats,
  #hero[data-reveal-copy="out"] .hero-stats {
    transition: background-color .16s linear, box-shadow .16s linear;
  }
  #hero::after,
  #hero[data-reveal-copy="out"]::after {
    transition: opacity .28s linear;
  }
  #hero[data-reveal-ctas="out"] .hero-ctas,
  #hero[data-reveal-ctas="in"] .hero-ctas,
  #hero[data-reveal-dock-motion="glide"][data-reveal-ctas] .hero-ctas {
    transition: filter .16s linear;
  }
  #hero .hero-foot__live {
    translate: none;
    transition: opacity .16s linear, visibility 0s linear .16s;
  }
  #hero[data-reveal-dock][data-reveal-captions="on"]:not([data-reveal-wait="on"]) .hero-foot__live {
    transition: opacity .16s linear, visibility 0s;
  }
  #hero .hero-foot__wait {
    transition: opacity .16s linear, visibility 0s linear .16s;
  }
  #hero[data-reveal-wait="on"] .hero-foot__wait {
    transition: opacity .16s linear, visibility 0s;
  }
  html[data-reveal-nav="aside"] #nav {
    transition: opacity .16s linear, visibility 0s linear .16s;
  }
  html[data-reveal-nav="back"] #nav {
    transition: opacity .16s linear, visibility 0s;
  }
}

/* Forced colours: the system draws the hairline; nothing moves and there is no sheen. */
@media (forced-colors: active) {
  #hero .hero-ctas .hero-3d {
    animation: none !important;
  }
  #hero .hero-ctas .hero-3d::after {
    display: none;
  }
}