/* Phase 6C.3 final cascade lock. Public storefront presentation only. */
.storefront .home-hero {
  min-height: max(920px, calc(100svh - 82px));
  isolation: isolate;
  padding-top: clamp(4.1rem, 6.4vw, 5.8rem);
  padding-bottom: 220px;
}

.storefront .home-hero::before {
  display: none;
}

.storefront .home-hero .hero-machine-layer {
  inset: 0 -2.5% 0 0;
  width: auto;
  transform: none;
}

.storefront .home-hero .hero-machine-layer::before {
  display: none;
}

.storefront .home-hero .hero-machine-layer img {
  object-position: 50% 52%;
  filter: contrast(1.19) saturate(1.24) brightness(1.055);
  transform: scale(1.018);
  transform-origin: 63% 54%;
}

.storefront .home-hero .hero-copy {
  z-index: 8;
  width: min(42vw, 620px);
  transform: translateY(-24px);
}

.storefront .home-hero h1 {
  max-width: 620px;
  font-size: clamp(4.4rem, 6.35vw, 6.65rem);
  line-height: .93;
  letter-spacing: -.065em;
}

.storefront .home-hero .hero-lead {
  max-width: 520px;
  color: #c2ccda;
  font-size: clamp(.92rem, 1.35vw, 1.13rem);
  line-height: 1.65;
}

.storefront .hero-neon-planet {
  top: 2.2%;
  right: 19.5%;
  width: 112px;
}

.storefront .hero-dogtag {
  top: 27.5%;
  left: 39.2%;
  width: 94px;
  height: 132px;
  border-radius: 34px 34px 15px 15px;
  transform: perspective(430px) rotateY(18deg) rotateZ(-16deg);
}

.storefront .hero-dogtag::before {
  top: -43px;
  width: 49px;
  height: 62px;
}

.storefront .hero-dogtag i {
  top: 64px;
  left: 36px;
}

.storefront .hero-stl-file {
  top: 50.5%;
  left: 40.6%;
  width: 108px;
  height: 135px;
  transform: perspective(440px) rotateY(-16deg) rotateX(7deg) rotateZ(12deg);
}

.storefront .hero-benefits {
  bottom: 110px;
  left: 3.1vw;
  width: min(50vw, 710px);
}

.storefront .hero-benefits > div {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: .65rem;
  min-height: 82px;
}

.storefront .hero-benefit-icon {
  width: 44px;
  border-radius: 50%;
}

.storefront .hero-metrics-bar {
  right: 3.1vw;
  bottom: 13px;
  left: 3.1vw;
  min-height: 84px;
}

@media (max-width: 1180px) {
  .storefront .home-hero .hero-copy { width: min(44vw, 560px); }
}

@media (max-width: 760px) {
  .storefront .home-hero {
    min-height: 1180px;
    padding: 18.8rem 1rem 312px;
  }

  .storefront .home-hero::before {
    background:
      linear-gradient(180deg, rgba(1, 4, 12, .04) 0%, rgba(1, 4, 12, .08) 27%, rgba(1, 4, 12, .7) 43%, rgba(1, 4, 12, .98) 58%, #01040c 76%),
      linear-gradient(90deg, rgba(1, 4, 12, .12), transparent 78%);
  }

  .storefront .home-hero .hero-machine-layer {
    inset: 0 -15% auto -15%;
    width: 130%;
    height: 46%;
  }

  .storefront .home-hero .hero-machine-layer img {
    object-position: 57% 50%;
    transform: scale(1.025);
  }

  .storefront .home-hero .hero-copy {
    width: 100%;
    transform: none;
  }

  .storefront .home-hero h1 { font-size: clamp(2.95rem, 14.2vw, 3.55rem); }
  .storefront .hero-neon-planet { top: 1.5%; right: 7%; width: 54px; }
  .storefront .hero-dogtag { top: 15%; left: 7%; width: 48px; height: 67px; }
  .storefront .hero-dogtag::before { top: -22px; width: 26px; height: 34px; }
  .storefront .hero-dogtag i { top: 34px; left: 17px; }
  .storefront .hero-stl-file { top: 23.3%; right: 5%; left: auto; width: 54px; height: 68px; }

  .storefront .hero-benefits {
    right: 15px;
    bottom: 143px;
    left: 15px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  }
  .storefront .hero-benefits > div { grid-template-columns: 39px minmax(0, 1fr); min-height: 67px; }
  .storefront .hero-benefit-icon { width: 35px; }
  .storefront .hero-metrics-bar { bottom: 11px; }
}

@media (max-width: 420px) {
  .storefront .home-hero { min-height: 1195px; padding-top: 18.2rem; }
}

/* Targeted hero quality fix. The complete printer scene is one raster asset;
   only five transparent reference objects remain independently animated. */
.storefront .home-hero {
  --hero-scroll-gear-y: 0px;
  --hero-scroll-cube-y: 0px;
  --hero-scroll-dogtag-y: 0px;
  --hero-scroll-stl-y: 0px;
  --hero-scroll-planet-y: 0px;
  --hero-scroll-gear-opacity: 1;
  --hero-scroll-cube-opacity: 1;
  --hero-scroll-dogtag-opacity: 1;
  --hero-scroll-stl-opacity: 1;
  --hero-scroll-planet-opacity: 1;
}

.storefront .home-hero .hero-machine-layer {
  z-index: 5;
  transform: none;
}

.storefront .home-hero .hero-machine-layer img {
  object-position: 63% 50%;
  filter: contrast(1.13) saturate(1.12) brightness(1.025);
  transform: none;
  transform-origin: 64% 52%;
}

.storefront .home-hero .hero-copy {
  opacity: 1;
  transform: translate3d(0, -24px, 0);
}

/* Premium transparent decoration assets. */
.storefront .hero-wireframe-layer,
.storefront .hero-artifacts-layer {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  opacity: 1;
  transform: none;
}

.storefront .hero-wireframe-layer { z-index: 6; }
.storefront .hero-artifacts-layer { z-index: 6; }

.storefront .hero-planet-layer {
  z-index: 6;
  opacity: var(--hero-scroll-planet-opacity);
  transform: translate3d(0, var(--hero-scroll-planet-y), 0);
}

.storefront .hero-neon-planet {
  top: 1.6%;
  right: 9%;
  width: 88px;
}

.storefront .hero-decoration {
  position: absolute;
  display: block;
  height: auto;
  border: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.storefront .hero-gear-asset {
  z-index: 4;
  top: 3.2%;
  left: 39.5%;
  width: 112px;
  opacity: var(--hero-scroll-gear-opacity);
  filter: drop-shadow(0 0 18px rgba(34, 117, 255, .25));
  transform: translate3d(0, var(--hero-scroll-gear-y), 0);
}

.storefront .hero-cube-asset {
  z-index: 4;
  top: 2.2%;
  left: 59.5%;
  width: 76px;
  opacity: var(--hero-scroll-cube-opacity);
  filter: drop-shadow(0 0 14px rgba(0, 216, 255, .24));
  transform: translate3d(0, var(--hero-scroll-cube-y), 0);
}

.storefront .hero-dogtag {
  top: 25.5%;
  left: 35.8%;
  width: clamp(128px, 9.7vw, 142px);
  height: auto;
  border: 0;
  border-radius: 0;
  opacity: var(--hero-scroll-dogtag-opacity);
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .38)) drop-shadow(0 0 18px rgba(85, 64, 255, .24));
  transform: translate3d(0, var(--hero-scroll-dogtag-y), 0);
}

.storefront .hero-stl-file {
  top: 48%;
  left: 36.4%;
  width: clamp(116px, 8.8vw, 128px);
  height: auto;
  border: 0;
  opacity: var(--hero-scroll-stl-opacity);
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .38)) drop-shadow(0 0 17px rgba(96, 68, 255, .22));
  transform: translate3d(0, var(--hero-scroll-stl-y), 0);
}

.storefront .home-hero.has-phase6c2-scroll-depth .hero-decoration,
.storefront .home-hero.has-phase6c2-scroll-depth .hero-planet-layer {
  will-change: transform, opacity;
  transition: transform 150ms linear, opacity 220ms ease-out;
}

.storefront .phase6c-reveal {
  filter: blur(5px);
  transform: translate3d(0, 28px, 0) scale(.992);
  transition:
    opacity 760ms ease var(--phase6c-reveal-delay, 0ms),
    transform 760ms cubic-bezier(.2, .72, .2, 1) var(--phase6c-reveal-delay, 0ms),
    filter 680ms ease var(--phase6c-reveal-delay, 0ms),
    border-color 280ms ease,
    box-shadow 280ms ease,
    background-color 280ms ease;
}

.storefront .phase6c-reveal.is-revealed {
  filter: none;
}

@media (max-width: 760px) {
  .storefront .home-hero {
    padding-top: 29rem;
  }

  .storefront .home-hero .hero-machine-layer {
    inset: 0 -18% auto -18%;
    width: 136%;
    height: 47%;
  }

  .storefront .home-hero .hero-machine-layer img {
    object-position: 65% 49%;
    transform: none;
  }

  .storefront .home-hero .hero-copy { transform: none; }

  .storefront .hero-gear-asset {
    top: 5%;
    left: 4%;
    width: 72px;
  }

  .storefront .hero-neon-planet {
    top: 2%;
    right: 9%;
    width: 54px;
  }

  .storefront .hero-cube-asset,
  .storefront .hero-artifacts-layer {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .storefront .home-hero {
    padding-top: 28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront .home-hero .hero-copy {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .storefront .hero-decoration,
  .storefront .hero-planet-layer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .storefront .phase6c-reveal,
  .storefront .phase6c-reveal.is-revealed {
    filter: none !important;
  }
}