.home-page {
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  --motion-fast: 250ms;
  --motion-base: 680ms;
}

.motion-ready:not(.motion-reduce) .hero .eyebrow,
.motion-ready:not(.motion-reduce) .hero h1,
.motion-ready:not(.motion-reduce) .hero-copy > p:not(.eyebrow),
.motion-ready:not(.motion-reduce) .hero-actions,
.motion-ready:not(.motion-reduce) .hero-bottom {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}

.motion-ready:not(.motion-reduce) .home-loaded .hero .eyebrow,
.motion-ready:not(.motion-reduce) .home-loaded .hero h1,
.motion-ready:not(.motion-reduce) .home-loaded .hero-copy > p:not(.eyebrow),
.motion-ready:not(.motion-reduce) .home-loaded .hero-actions,
.motion-ready:not(.motion-reduce) .home-loaded .hero-bottom {
  opacity: 1;
  transform: none;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero h1 {
  transition-delay: 90ms;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero-copy > p:not(.eyebrow) {
  transition-delay: 180ms;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero-actions {
  transition-delay: 280ms;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero-bottom {
  transition-delay: 390ms;
}

.motion-ready:not(.motion-reduce) .hero-bottom li {
  opacity: 0;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero-bottom li {
  animation: home-capability-arrive 620ms var(--motion-ease)
    calc(470ms + min(var(--motion-index, 0), 2) * 105ms) both;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero-capability-icon {
  animation: home-capability-signal 540ms var(--motion-ease)
    calc(620ms + min(var(--motion-index, 0), 2) * 105ms) both;
}

.motion-ready:not(.motion-reduce) .hero-image {
  animation: none;
  transform: scale(1.075);
  translate: var(--hero-shift-x, 0) var(--hero-shift-y, 0);
  transition: translate 720ms var(--motion-ease);
  will-change: transform, translate;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero-image {
  animation: home-hero-settle 8s var(--motion-ease) both;
}

.motion-ready:not(.motion-reduce) .home-loaded .hero-glow {
  animation: home-glow-arrive 7s var(--motion-ease) both;
}

.motion-ready:not(.motion-reduce) .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.motion-ready:not(.motion-reduce) .motion-reveal.is-in-view {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
  transition-delay: calc(min(var(--motion-index, 0), 5) * 90ms);
}

/* The product interface opens like an operational display, rather than using the generic reveal alone. */
.motion-ready:not(.motion-reduce) .home-mobile-ui-showcase.motion-reveal {
  opacity: 0;
  clip-path: inset(9% 11% 9% 11%);
  filter: blur(4px) saturate(.9);
  transform: translate3d(0, 14px, 0) scale(.985);
}

.motion-ready:not(.motion-reduce) .home-mobile-ui-showcase.motion-reveal.is-in-view {
  opacity: 1;
  clip-path: inset(0);
  filter: none;
  transform: none;
  transition:
    opacity 700ms var(--motion-ease),
    clip-path 820ms var(--motion-ease),
    filter 660ms var(--motion-ease),
    transform 760ms var(--motion-ease);
}

.motion-ready:not(.motion-reduce) .home-mobile-ui-showcase::before {
  position: absolute;
  inset: 0 auto 0 -18%;
  z-index: 2;
  width: 18%;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(74, 206, 239, .18), transparent);
  transform: skewX(-12deg);
}

.motion-ready:not(.motion-reduce) .platform-showcase.is-in-view .home-mobile-ui-showcase::before {
  animation: home-interface-scan 920ms var(--motion-ease) 260ms both;
}

.motion-ready:not(.motion-reduce) .chain-steps::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.05s var(--motion-ease) 180ms;
}

.motion-ready:not(.motion-reduce) .chain.is-in-view .chain-steps::before {
  transform: scaleY(1);
}

.motion-ready:not(.motion-reduce) .chain-steps article b {
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    background var(--motion-fast);
}

.motion-ready:not(.motion-reduce) .chain.is-in-view .chain-steps article b {
  animation: home-node-on 640ms var(--motion-ease) calc(var(--motion-index, 0) * 160ms + 240ms) both;
}

.motion-ready:not(.motion-reduce) .home-hardware-assembly::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--motion-ease) 420ms;
}

.motion-ready:not(.motion-reduce) .hardware-showcase.is-in-view .home-hardware-assembly::before {
  transform: scaleX(1);
}

.motion-ready:not(.motion-reduce) .hardware-showcase.is-in-view .home-device {
  animation: home-node-on 620ms var(--motion-ease) calc(var(--motion-index, 0) * 180ms + 180ms) both;
}

.motion-ready:not(.motion-reduce) .platform-showcase.is-in-view .node {
  animation: home-platform-pulse 760ms var(--motion-ease) calc(var(--motion-index, 0) * 220ms + 200ms) both;
}

.motion-ready:not(.motion-reduce) .platform-showcase.is-in-view.is-motion-active .orbit {
  animation: home-orbit-breathe 6s ease-in-out 1.3s infinite alternate;
  animation-play-state: running;
}

.motion-ready:not(.motion-reduce) .platform-showcase:not(.is-motion-active) .orbit,
.motion-ready:not(.motion-reduce).motion-paused .platform-showcase .orbit {
  animation-play-state: paused;
}

.motion-ready:not(.motion-reduce) .technology.is-in-view .trace-ipad {
  animation: home-ring-on 900ms var(--motion-ease) 260ms both;
}

.motion-ready:not(.motion-reduce) .trust-line i {
  transform: scaleX(0);
  transform-origin: left;
}

.motion-ready:not(.motion-reduce) .trust.is-in-view .trust-line i {
  animation: home-line-draw 760ms var(--motion-ease) 520ms both;
}

.motion-ready:not(.motion-reduce) .trust.is-in-view .trust-line i:nth-of-type(2) {
  animation-delay: 700ms;
}

.motion-ready:not(.motion-reduce) .contact.is-in-view .contact-glow {
  animation: home-contact-settle 8s var(--motion-ease) both;
}

.motion-ready:not(.motion-reduce) .scene {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}

.motion-ready:not(.motion-reduce) .scene img {
  transition: filter var(--motion-fast) ease;
}

.motion-ready:not(.motion-reduce) .scene-label {
  opacity: 0;
}

.motion-ready:not(.motion-reduce) .scene.is-in-view .scene-label {
  animation: home-scene-label-arrive 620ms var(--motion-ease)
    calc(180ms + min(var(--motion-index, 0), 3) * 80ms) both;
}

.motion-ready:not(.motion-reduce) .scene-label svg path {
  stroke-dasharray: 52;
  stroke-dashoffset: 52;
}

.motion-ready:not(.motion-reduce) .scene.is-in-view .scene-label svg path {
  animation: home-icon-trace 720ms var(--motion-ease)
    calc(330ms + min(var(--motion-index, 0), 3) * 80ms) both;
}

@media (hover: hover) and (pointer: fine) {
  .motion-ready:not(.motion-reduce) .scene.is-in-view:hover {
    transform: translateY(-5px);
  }

  .motion-ready:not(.motion-reduce) .scene:hover img {
    filter: contrast(1.04) saturate(1.04);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .home-page .needs-photo img,
    .home-page .chain-photo img,
    .home-page .service-photo img {
      animation: home-media-parallax linear both;
      animation-timeline: view();
      animation-range: entry -5% exit 105%;
      will-change: transform;
    }
  }
}

@keyframes home-hero-settle {
  from { transform: scale(1.075); }
  to { transform: scale(1.025); }
}

@keyframes home-capability-arrive {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-8px, 0, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

@keyframes home-capability-signal {
  0% { filter: brightness(.78); box-shadow: 0 0 0 rgba(94, 216, 255, 0); }
  62% { filter: brightness(1.2); box-shadow: 0 .5rem 1.4rem rgba(94, 216, 255, .24); }
  100% { filter: brightness(1); box-shadow: none; }
}

@keyframes home-interface-scan {
  0% { left: -18%; opacity: 0; }
  24% { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}

@keyframes home-scene-label-arrive {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(-12px, 0, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

@keyframes home-icon-trace {
  from { stroke-dashoffset: 52; }
  to { stroke-dashoffset: 0; }
}

@keyframes home-glow-arrive {
  from { opacity: .16; transform: translate3d(-3%, -2%, 0) scale(.94); }
  to { opacity: .3; transform: none; }
}

@keyframes home-node-on {
  0% { filter: brightness(.82); box-shadow: 0 0 0 rgba(0, 214, 255, 0); }
  55% { filter: brightness(1.14); box-shadow: 0 0 34px rgba(0, 170, 238, .3); }
  100% { filter: brightness(1); }
}

@keyframes home-platform-pulse {
  0% { transform: scale(.92); box-shadow: 0 0 0 rgba(0, 214, 255, 0); }
  55% { transform: scale(1.06); box-shadow: 0 0 34px rgba(0, 214, 255, .42); }
  100% { transform: scale(1); }
}

@keyframes home-orbit-breathe {
  from { opacity: .42; transform: translate(-50%, -50%) scale(.99); }
  to { opacity: .82; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes home-ring-on {
  0% { border-color: rgba(126, 222, 255, .35); box-shadow: 0 0 0 rgba(0, 214, 255, 0); }
  65% { border-color: rgba(135, 232, 255, .9); box-shadow: 0 0 86px rgba(0, 214, 255, .42); }
  100% { border-color: rgba(126, 222, 255, .65); box-shadow: 0 0 60px rgba(0, 214, 255, .26); }
}

@keyframes home-line-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes home-contact-settle {
  from { opacity: .16; transform: translate3d(4%, -3%, 0) scale(.95); }
  to { opacity: .3; transform: none; }
}

@keyframes home-media-parallax {
  from { transform: translate3d(0, -10px, 0) scale(1.04); }
  to { transform: translate3d(0, 10px, 0) scale(1.04); }
}

@media (max-width: 900px) {
  .home-page {
    --motion-base: 560ms;
  }

  .motion-ready:not(.motion-reduce) .hero .eyebrow,
  .motion-ready:not(.motion-reduce) .hero h1,
  .motion-ready:not(.motion-reduce) .hero-copy > p:not(.eyebrow),
  .motion-ready:not(.motion-reduce) .hero-actions,
  .motion-ready:not(.motion-reduce) .hero-bottom,
  .motion-ready:not(.motion-reduce) .motion-reveal {
    transform: translate3d(0, 10px, 0);
  }

  .motion-ready:not(.motion-reduce) .home-loaded .hero .eyebrow,
  .motion-ready:not(.motion-reduce) .home-loaded .hero h1,
  .motion-ready:not(.motion-reduce) .home-loaded .hero-copy > p:not(.eyebrow),
  .motion-ready:not(.motion-reduce) .home-loaded .hero-actions,
  .motion-ready:not(.motion-reduce) .home-loaded .hero-bottom,
  .motion-ready:not(.motion-reduce) .motion-reveal.is-in-view {
    transform: none;
  }

  .motion-ready:not(.motion-reduce) .motion-reveal.is-in-view {
    transition-delay: calc(min(var(--motion-index, 0), 3) * 70ms);
  }

  .motion-ready:not(.motion-reduce) .hero-image {
    translate: 0 0;
    will-change: transform;
  }
}

.motion-reduce {
  scroll-behavior: auto !important;
}

.motion-reduce .home-page *,
.motion-reduce .home-page *::before,
.motion-reduce .home-page *::after {
  animation: none !important;
  transition: none !important;
}

.motion-reduce .home-page .motion-reveal,
.motion-reduce .home-page .hero .eyebrow,
.motion-reduce .home-page .hero h1,
.motion-reduce .home-page .hero-copy > p:not(.eyebrow),
.motion-reduce .home-page .hero-actions,
.motion-reduce .home-page .hero-bottom {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-page *,
  .home-page *::before,
  .home-page *::after {
    animation: none !important;
    transition: none !important;
  }

  .home-page .motion-reveal,
  .home-page .hero .eyebrow,
  .home-page .hero h1,
  .home-page .hero-copy > p:not(.eyebrow),
  .home-page .hero-actions,
  .home-page .hero-bottom {
    opacity: 1 !important;
    transform: none !important;
  }
}