.hero {
  overflow-x: clip;
  overflow-y: visible;
}

.hero-devices {
  transform: none;
  will-change: auto;
}

.hero::after {
  z-index: 1;
}

.hero-glow {
  width: clamp(420px, 55vw, 700px);
  height: auto;
  aspect-ratio: 1;
  filter: none;
}

.hero-glow-one {
  background: radial-gradient(circle, rgba(75,145,255,.65), rgba(75,145,255,.22) 35%, transparent 70%);
}

.hero-glow-two {
  background: radial-gradient(circle, rgba(123,200,255,.65), rgba(123,200,255,.22) 35%, transparent 70%);
}

.hero-device {
  filter: drop-shadow(0 24px 30px rgba(28,45,77,.18));
}

.hero-device .device-template {
  filter: none;
}

.hero-device .device-halo {
  display: none;
}

.hero-device.is-hero-visible .hero-motion-pose,
.hero-device.is-hero-visible .hero-motion-entry {
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero-device-mobile:not(.hero-home-ready):not(.hero-home-complete) .device-screen-slot {
    background: linear-gradient(#eef7ff, #d9efff 27%, #edf6ff 65%, #eaf5ff);
  }
  .js .hero-device-mobile:not(.hero-home-ready):not(.hero-home-complete) .device-screen-slot > picture > img,
  .js .hero-device-mobile:not(.hero-home-ready):not(.hero-home-complete) .device-screen-slot > img {
    -webkit-mask-image: linear-gradient(#000 23.25%, transparent 27%);
    mask-image: linear-gradient(#000 23.25%, transparent 27%);
  }
}

.hero-collection-preparation {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
  transform: translateZ(0);
}
.hero-collection-preparation > svg,
.hero-collection-tile > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-collection-preparation > svg,
.hero-collection-tile {
  position: absolute;
  inset: 0;
}
.hero-collection-tile {
  inset: auto;
  z-index: 1;
  will-change: transform, opacity;
}
.hero-controls-layer { z-index: 2; }
.hero-greeting-layer { z-index: 3; }
.hero-arriving-collection,
.hero-captain-greeting {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-captain-bubble {
  filter: drop-shadow(0 10px 18px rgba(46,94,143,.10));
}

.hero-devices::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% -8% 12%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(150,205,255,.8), rgba(88,148,255,.22) 36%, transparent 68%);
  opacity: 0;
  transform: scale(.65);
}

.hero-devices.is-hero-revealed::before {
  animation: hero-opening-light 2000ms ease-out both;
}

.hero-device {
  --hero-float: -8px;
  --hero-sway: 0.7deg;
  --hero-duration: 10s;
  --hero-phase: 1840ms;
  --hero-entry-x: 0px;
  --hero-entry-y: 64px;
  --hero-entry-turn: 0deg;
  --hero-entry-roll: 0deg;
  --hero-entry-scale: .9;
  --hero-entry-duration: 1740ms;
  --hero-exit-x: 0px;
  --hero-entry-delay: 0s;
  animation: hero-device-drift var(--hero-duration) ease-in-out var(--hero-phase) infinite;
  animation-play-state: paused;
  translate: calc(var(--hero-spread-x, 0px) + var(--hero-pointer-x, 0px)) calc(var(--hero-depth-y, 0px) + var(--hero-pointer-y, 0px));
  transition: none;
}

.hero-device-mac-left {
  --hero-float: -10px;
  --hero-duration: 10.8s;
  --hero-phase: 1940ms;
  --hero-entry-x: 0px;
  --hero-entry-y: 32px;
  --hero-entry-turn: -8deg;
  --hero-entry-roll: -5deg;
  --hero-exit-x: -18px;
  --hero-entry-scale: .72;
  --hero-entry-delay: 80ms;
}

.hero-device-mobile {
  --hero-float: -6px;
  --hero-sway: 0deg;
  --hero-duration: 9.2s;
}

.hero-device-mac-right {
  --hero-float: -5px;
  --hero-sway: -0.45deg;
  --hero-duration: 12s;
  --hero-phase: 2040ms;
  --hero-entry-x: 0px;
  --hero-entry-y: 26px;
  --hero-entry-turn: 8deg;
  --hero-entry-roll: 5deg;
  --hero-exit-x: 18px;
  --hero-entry-scale: .74;
  --hero-entry-delay: 160ms;
}

.hero-motion-pose {
  width: 100%;
  transform: perspective(1400px) rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg)) rotateZ(var(--hero-open-angle, 0deg));
  transition: none;
}

.hero-motion-entry {
  width: 100%;
  opacity: 1;
  transform: perspective(1400px) translate3d(var(--hero-entry-x), var(--hero-entry-y), 0) rotateY(var(--hero-entry-turn)) rotateZ(var(--hero-entry-roll)) scale(var(--hero-entry-scale));
}

.hero-device.has-entered .hero-motion-entry {
  animation: hero-device-arrive var(--hero-entry-duration) cubic-bezier(.22,.8,.24,1) var(--hero-entry-delay) both;
  animation-play-state: paused;
}

.hero-device.is-hero-visible,
.hero-device.is-hero-visible .hero-motion-entry {
  animation-play-state: running;
}

.hero.is-hero-motion-paused .hero-device,
.hero.is-hero-motion-paused .hero-motion-entry,
.hero.is-hero-motion-paused .hero-glow,
.hero.is-hero-motion-paused .hero-glass-shape {
  animation-play-state: paused;
}

.hero.is-hero-motion-paused .hero-devices::before {
  animation-play-state: paused;
}

@keyframes hero-device-arrive {
  0% {
    opacity: 1;
    transform: perspective(1400px) translate3d(var(--hero-entry-x), var(--hero-entry-y), 0) rotateY(var(--hero-entry-turn)) rotateZ(var(--hero-entry-roll)) scale(var(--hero-entry-scale));
  }
  72.4% {
    opacity: 1;
    transform: perspective(1400px) translate3d(var(--hero-exit-x), -10px, 0) rotateY(0deg) rotateZ(var(--device-rotate)) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: perspective(1400px) translate3d(0,0,0) rotateY(0deg) rotateZ(var(--device-rotate)) scale(1);
  }
}

@keyframes hero-opening-light {
  0% { opacity: 0; transform: scale(.65); }
  40% { opacity: .8; }
  100% { opacity: .18; transform: scale(1.08); }
}

@keyframes hero-device-drift {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,var(--hero-float),0) rotate(var(--hero-sway)); }
}

@media (min-width: 641px) and (max-width: 980px) {
  .hero-device-mac-left { --hero-float: -7px; }
  .hero-device-mac-right { --hero-float: -4px; }
}

@media (max-width: 640px) {
  .hero-device {
    --hero-entry-x: 0px;
    --hero-entry-y: 40px;
    --hero-entry-turn: 0deg;
    --hero-entry-roll: 0deg;
    --hero-entry-scale: .94;
    --hero-entry-duration: 1740ms;
    --hero-entry-delay: 0s;
    --hero-sway: 0deg;
    --hero-float: -4px;
  }
  .hero-device-mac-left {
    --hero-float: -6px;
    --hero-entry-x: 30px;
    --hero-entry-turn: -6deg;
    --hero-entry-roll: -5deg;
    --hero-exit-x: -8px;
  }
  .hero-device-mac-right {
    --hero-entry-x: -30px;
    --hero-entry-turn: 6deg;
    --hero-entry-roll: 5deg;
    --hero-exit-x: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-device {
    animation: none;
    translate: none;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .hero .hero-device .hero-motion-entry {
    animation: none;
    opacity: 1;
    transform: rotate(var(--device-rotate));
  }
  .hero-motion-pose { transform: none; transition: none; }
  .hero-devices.is-hero-revealed::before {
    animation: none;
    opacity: .18;
    transform: none;
  }
  .hero-glow, .hero-glass-shape { animation: none; }
}