/* ==========================================================================
   hero.css (home page only)
   The home hero: copy, the scroll-driven zoom from the front-desk photo to the
   monitor, the power-on, the phone, and the entrance on load. hero-zoom.js
   drives it; its header maps each class to a part of the scene. Loaded last,
   after theme.css and home.css.
   ========================================================================== */
/* ==========================================================================
   Layout: copy, the stage and the spacer row
   ========================================================================== */
.hero {
  --Sw: min(114vw, 2300px);
  --k: calc(var(--Sw) / 2688);
  padding: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: block;
  background: #02080a;
}
.hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px var(--gutter) var(--sp-28);
}
.hero h1 {
  max-width: 1040px;
}
.hero .lede {
  margin: var(--sp-14) auto 0;
  max-width: 640px;
}
.hero .cta-row {
  justify-content: center;
}
/* .stage is never seen: hero-zoom.js sets its height so the copy, the stage and the spacer row reserve the room
   the zoom plays in */
.stage {
  position: relative;
  width: var(--Sw);
  margin: calc(var(--k) * -32.5) 0 0 calc((100% - var(--Sw)) / 2);
  max-width: none;
  left: 0;
  margin-bottom: calc(var(--k) * -60);
  visibility: hidden;
}
.hero .hero-spacer {
  position: relative;
  z-index: 4;
  margin-top: 0;
  background: var(--color-bg);
}
@media (max-width: 1100px) {
  .hero-copy {
    padding-top: 96px;
  }
}
@media (max-width: 640px) {
  .hero {
    --Sw: 141.4vw;
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    display: contents;
  }
  .hero h1,
  .hero .lede,
  .hero .cta-row {
    position: relative;
    z-index: 3;
  }
  .hero h1 {
    margin: var(--sp-18) var(--sp-16) 0;
    text-align: center;
    max-width: none;
  }
  .hero .lede {
    margin: var(--sp-14) var(--sp-16) 0;
    text-align: center;
    order: 2;
  }
  .stage {
    flex: none;
    margin: var(--sp-20) 0 0 calc((100% - var(--Sw)) / 2);
  }
  .hero .cta-row {
    align-items: stretch;
    width: auto;
    order: 3;
    flex-direction: row;
    gap: var(--sp-10);
    margin: var(--sp-18) var(--sp-16) 0;
  }
  .hero .hero-spacer {
    order: 6;
    margin-top: var(--sp-30);
  }
}
/* ==========================================================================
   Zoom scene: photo plates, monitor and phone
   ========================================================================== */
/* Hidden until hero-zoom.js has sized and placed the scene (.sized): the photo layers are sized from --K,
   which the script sets, so a paint before that would show them at their raw size and then jump. */
.js .zoom:not(.sized) {
  visibility: hidden;
}
.zoom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  order: 99;
  background: #02080a;
  pointer-events: none;
  contain: layout paint;
}
.zoom-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.zoom-plate {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.zoom-plate img,
.zoom-plate picture {
  display: block;
}
.plate-crop {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
}
.plate-front,
.plate-front-detail {
  position: absolute;
  max-width: none;
}
.monitor-halo {
  position: absolute;
  background: radial-gradient(
    60% 55% at 50% 45%,
    rgba(120, 232, 240, 0.5),
    rgb(var(--accent-rgb) / 0.22) 55%,
    transparent 80%
  );
}
.monitor,
.phone {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: #03060a;
}
/* The monitor and the phone are laid out at twice their size (1000 x 546.6, 480 x 1038) and scaled back by
   hero-zoom.js: browsers rasterize a perspective-transformed layer at its own CSS size, so at 1x the dashboard
   came out soft and the power icons pixelated. Their contents keep 1x coordinates through zoom: 2. */
.monitor {
  width: 2000px;
  height: 1093.2px;
}
/* no clip-path on the phone: each layer inside is rounded itself (below), and iPhone Safari draws a clip-path
   on a tilted layer with jagged edges */
.phone {
  width: 960px;
  height: 2076px;
  border-radius: 128px;
  background: transparent;
}
.phone > * {
  zoom: 2;
}
.monitor-dash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 0 0;
}
.phone-dim {
  position: absolute;
  inset: 0;
  background: #02050a;
}
.power-screen {
  position: absolute;
  inset: 0;
  zoom: 2;
}
/* Power-on: the O breathes, presses, the wordmark unmasks from the O and the logo splits open. Scrubbed by scroll. */
.screen-half {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #05090d, #03060a);
}
.screen-half--left {
  clip-path: inset(0 377.417px 0 0);
}
.screen-half--right {
  clip-path: inset(0 0 0 622.583px);
}
.half-dash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 122.583px 0;
}
.half-wordmark {
  position: absolute;
  left: 0;
  top: 0;
  width: 472.044px;
  height: 92.922px;
  transform: translate(-50%, -50%);
}
.half-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    rgb(var(--power-rgb) / 0.15),
    rgb(var(--power-rgb) / 0.85) 50%,
    rgb(var(--power-rgb) / 0.15)
  );
  box-shadow: 0 0 22px 2px rgb(var(--power-rgb) / 0.45);
}
.screen-half--left .half-edge {
  left: 619.583px;
}
.screen-half--right .half-edge {
  left: 622.583px;
}
.wordmark-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.wordmark {
  position: absolute;
  left: 0;
  top: 0;
  width: 472.044px;
  height: 92.922px;
  transform-origin: 75.97% 50%;
}
.wordmark-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.press-flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 102.214px;
  height: 102.214px;
  margin: -51.1071px 0 0 -51.1071px;
  border-radius: 50%;
  border: 2px solid rgb(var(--power-rgb) / 0.95);
  box-shadow:
    0 0 40px rgb(var(--power-rgb) / 0.8),
    inset 0 0 30px rgb(var(--power-rgb) / 0.5);
}
.screen-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 622.583px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgb(var(--power-rgb) / 0.9) 30%,
    #fff 50%,
    rgb(var(--power-rgb) / 0.9) 70%,
    transparent
  );
  box-shadow: 0 0 28px 4px rgb(var(--power-rgb) / 0.55);
}
.phone-off {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 38%, #070c11, #020407);
}
.phone-o-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(60, 214, 226, 0.5),
    rgb(var(--accent-rgb) / 0.16) 55%,
    rgb(var(--accent-rgb) / 0)
  );
  animation: power-breath 3s ease-in-out 0.7s infinite alternate;
}
.phone-o {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 57px;
  margin: -28px 0 0 -24px;
  fill: #4be0ea;
  overflow: visible;
  animation: power-breath 3s ease-in-out 0.7s infinite alternate;
  transform-origin: 50% 50%;
}
.monitor-glare,
.phone-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.monitor-glare {
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 14%);
}
.phone-glare {
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.17) 0, rgba(255, 255, 255, 0.06) 26%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 12%);
}
.zoom-scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100lvh;
  background: linear-gradient(
    180deg,
    rgba(2, 8, 10, 0.86) 0,
    rgba(2, 8, 10, 0.72) 22%,
    rgba(2, 8, 10, 0.52) 38%,
    rgba(2, 8, 10, 0.28) 50%,
    rgba(2, 8, 10, 0) 64%
  );
}
.zoom-rm .scroll-cue,
.zoom-rm .phone-o,
.zoom-rm .phone-o-glow {
  display: none;
}
/* ==========================================================================
   Scroll cue and the power button
   ========================================================================== */
.scroll-cue {
  position: absolute;
  left: 50%;
  margin-left: -22px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #e8f4f6;
  cursor: pointer;
  pointer-events: auto; /* the zoom layer around it ignores taps */
}
.scroll-cue svg {
  display: block;
}
/* the power button on the screen plays the intro too (pointer only; the arrow is the keyboard control) */
.power-hit {
  pointer-events: auto;
  cursor: pointer;
}
.js-motion .scroll-cue path {
  animation: cue-bob 1.8s ease-in-out infinite;
}
/* ==========================================================================
   Scroll track and zoom states
   ========================================================================== */
.zoom-track {
  position: relative;
}
.zoom-on .hero {
  position: sticky;
  top: 0;
}
/* Desktop plate geometry (crop origin x=150, K = css px per plate px at the end of the zoom) */
.zoom-layer--back .zoom-plate,
.zoom-layer--front .zoom-plate {
  width: calc(var(--K) * 3540px);
  height: calc(var(--K) * 1900px);
}
.plate-crop {
  width: calc(var(--K) * 3540px);
  height: calc(var(--K) * 1900px);
}
.plate-front {
  left: 0;
  top: calc(var(--K) * 735px);
  width: calc(var(--K) * 3540px);
  height: calc(var(--K) * 1165px);
}
.plate-front-detail {
  left: calc(var(--K) * 1000px);
  top: calc(var(--K) * 700px);
  width: calc(var(--K) * 1550px);
  height: calc(var(--K) * 760px);
}
.monitor-halo {
  left: calc(var(--K) * 1390px);
  top: calc(var(--K) * 735px);
  width: calc(var(--K) * 745px);
  height: calc(var(--K) * 500px);
}
@media (max-width: 640px) {
  .zoom-layer--back .zoom-plate,
  .zoom-layer--front .zoom-plate {
    width: calc(var(--K) * 1620px);
    height: calc(var(--K) * 2160px);
  }
  .plate-crop {
    width: calc(var(--K) * 1620px);
    height: calc(var(--K) * 2160px);
  }
  .plate-front {
    top: calc(var(--K) * 735px);
    width: calc(var(--K) * 1620px);
    height: calc(var(--K) * 1425px);
  }
  .monitor-halo {
    left: calc(var(--K) * 440px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion:not(.hgo) .hero .lede,
  .js-motion:not(.hgo) .hero .cta-row,
  .js-motion:not(.hgo) .zoom,
  .js-motion .hero h1:not(.rv-done) {
    opacity: 0;
    animation: hero-show 0.01s var(--hero-failsafe) forwards;
  }
  .js-motion.hgo .hero .lede {
    animation: hero-rise 0.7s var(--ease-out) 0.62s both;
  }
  .js-motion.hgo .hero .cta-row {
    animation: hero-rise 0.7s var(--ease-out) 0.8s both;
  }
  .js-motion .hero h1.is-split .li {
    animation: hero-line-up 0.85s var(--ease-out) both;
    animation-delay: calc(0.24s + var(--i) * 0.09s);
    animation-duration: var(--dur-slow);
  }
  .js-motion.hgo .zoom {
    animation: zoom-settle 1.7s var(--ease-out) both;
    transform-origin: 50% 38%;
  }
}
.scroll-cue:focus-visible {
  outline: 2px solid #c9fafd;
  outline-offset: 4px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion:not(.hgo) .hero .eyebrow {
    opacity: 0;
    animation: hero-show 0.01s var(--hero-failsafe) forwards;
  }
  .js-motion.hgo .hero .eyebrow {
    animation: hero-rise 0.7s var(--ease-out) 0.14s both;
  }
}
.hero .eyebrow {
  text-wrap: balance;
  font-size: var(--fs-body-3);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg-cerulean);
}
@media (max-width: 640px) {
  .hero .eyebrow {
    order: 2;
    position: relative;
    z-index: 3;
    margin: var(--sp-16) var(--sp-16) 0;
    text-align: center;
    font-size: 15px;
  }
}
/* ==========================================================================
   Monitor seam and phone screen layers
   ========================================================================== */
/* Seam cover behind the monitor halves */
.seam-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #05090d, #03060a);
}
/* Round every layer itself; GPU 3D layers do not clip children reliably */
.phone > .phone-dim,
.phone > .phone-off,
.phone > .phone-glare {
  border-radius: 64px;
}
/* The phone's app screen is a pre-warped flat image placed in photo space (the same path as the phone photo),
   so it matches the glass in every browser */
.zoom-layer--front .zoom-plate > picture > .phone-app,
.phone-app {
  position: absolute;
  left: calc(var(--K) * 2050px);
  top: calc(var(--K) * 1100px);
  width: calc(var(--K) * 200px);
  height: calc(var(--K) * 270px);
  max-width: none;
  opacity: 1;
}
@media (max-width: 640px) {
  .zoom-layer--front .zoom-plate > picture > .phone-app,
  .phone-app {
    left: calc(var(--K) * 1100px);
  }
}
.hero-spacer:empty {
  padding: 0;
  /* empty placeholder the hero zoom measures from */
}
@media (max-width: 640px) {
  .hero h1 {
    order: 2;
  }
  .hero .cta-row .btn,
  .hero .cta-row .btn-acc {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    --btn-pad: 0 var(--sp-10);
    /* the Figma 48px side padding wraps the labels on phones */
    font-size: 15px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }
  .hero .stage {
    order: 4;
    margin-top: var(--sp-24);
  }
  .hero h1 {
    margin-top: var(--sp-12);
  }
  .hero .lede {
    margin-top: var(--sp-10);
  }
  .hero .cta-row {
    margin-top: var(--sp-14);
  }
  .hero .cta-row .btn {
    transition: opacity var(--dur-fast) linear;
  }
}
.js-motion.hskip .hero .eyebrow,
.js-motion.hskip .hero .lede,
.js-motion.hskip .hero .cta-row,
.js-motion.hskip .zoom {
  animation: none !important;
  opacity: 1;
}
/* The spacer row under the stage stays hidden until the stage is sized and the hero starts */
.js-motion.zoom-on:not(.hgo) .hero .hero-spacer {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .phone-o-glow,
  .phone-o,
  .scroll-cue path {
    animation: none;
  }
}
/* The hero holds at least a full screen before hero-zoom.js sizes it (the zoom track is taller once it does),
   so the next section never shows on the first paint and then jumps down */
html.zoom-on:not(.zshot) .zoom-track,
html.zoom-rm:not(.zshot) .zoom-track {
  min-height: 100lvh;
}
.js-motion.zoom-rm:not(.hgo) .hero .hero-spacer {
  visibility: hidden;
}
html:not(.js) .hero .stage {
  margin: 0;
  height: 0;
}
html:not(.js) .hero .hero-spacer {
  margin-top: var(--sp-28);
}
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}
.hero .lede {
  font-size: var(--fs-body-1);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text-muted);
}
@media (max-width: 640px) {
  .pg-sections .hero .eyebrow {
    margin-top: clamp(84px, 16vh, 150px);
  }
  .pg-sections .hero {
    min-height: 100lvh; /* same height as the zoom stage: no strip of page under the photo */
  }
}
@media (min-width: 641px) {
  .pg-sections .hero-copy {
    padding-top: clamp(104px, 14vh, 160px);
  }
  .pg-sections .hero .eyebrow {
    margin-top: 0;
  }
  .pg-sections .hero h1 {
    margin-top: var(--sp-16);
  }
  .pg-sections .hero .lede {
    max-width: 720px;
    text-wrap: pretty;
    margin-top: var(--sp-18);
  }
  .pg-sections .hero .cta-row {
    margin-top: var(--sp-28);
  }
}
@supports (height: 100svh) {
  .scroll-cue {
    bottom: calc(26px + 100lvh - 100svh);
  }
}
/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes power-breath {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@keyframes cue-bob {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}
@keyframes zoom-settle {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}