/* Cellthcare main hero: an illuminated product stage built around the supplied renders. */
.s4-hero.s3-hero {
  background: #020817;
}

.s4-hero .s3-hero__visual {
  z-index: -1;
  background:
    radial-gradient(ellipse 53% 57% at 77% 50%, rgba(13, 83, 181, .72), transparent 74%),
    radial-gradient(ellipse 42% 54% at 98% 20%, rgba(0, 188, 255, .28), transparent 78%),
    linear-gradient(112deg, #020713 3%, #031125 45%, #071c48 78%, #06102a 100%);
}

.s4-hero__atmosphere,
.s4-hero__field,
.s4-hero__floor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.s4-hero__atmosphere {
  z-index: 0;
  background:
    linear-gradient(92deg, transparent 50%, rgba(95, 220, 255, .08) 74%, transparent 84%),
    radial-gradient(ellipse 19% 52% at 81% 43%, rgba(8, 181, 253, .31), transparent 84%),
    radial-gradient(ellipse 32% 24% at 76% 86%, rgba(19, 113, 239, .4), transparent 80%);
  animation: s4Atmosphere 8s ease-in-out infinite alternate;
}

.s4-hero__atmosphere::before {
  content: "";
  position: absolute;
  top: -18%;
  left: 64%;
  width: 18%;
  height: 122%;
  background: linear-gradient(90deg, transparent, rgba(81, 203, 255, .07) 45%, rgba(142, 235, 255, .22) 51%, transparent 56%);
  filter: blur(7px);
  transform: skewX(-12deg);
  animation: s4LightColumn 7s ease-in-out infinite alternate;
}

.s4-hero__atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 72% 27%, rgba(155, 241, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 37%, rgba(155, 241, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 61%, rgba(155, 241, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 70%, rgba(155, 241, 255, .7) 0 1px, transparent 2px);
  background-size: 147px 131px, 191px 173px, 227px 211px, 307px 263px;
  opacity: .43;
  animation: s4DustFloat 12s ease-in-out infinite alternate;
}

.s4-hero__field {
  z-index: 1;
  overflow: visible;
  mix-blend-mode: screen;
}

.s4-hero__trail-glow,
.s4-hero__trail {
  fill: none;
  stroke: url(#s4-hero-light);
  stroke-linecap: round;
}

.s4-hero__trail-glow {
  stroke-width: 28;
  opacity: .9;
  filter: url(#s4-hero-blur);
}

.s4-hero__trail {
  stroke-width: 2.6;
  opacity: .9;
}

.s4-hero__trail--main {
  stroke-width: 4;
  filter: drop-shadow(0 0 8px #43d4ff);
}

.s4-hero__trail--second { opacity: .66; }
.s4-hero__trail--third { opacity: .5; }
.s4-hero__trail--fine { stroke-width: 1.4; opacity: .4; }
.s4-hero__light-trails { animation: s4TrailBreathe 6s ease-in-out infinite alternate; }
.s4-hero__stars { fill: #c8f7ff; filter: drop-shadow(0 0 7px #71d8ff); animation: s4Stars 4s ease-in-out infinite alternate; }

.s4-hero .s4-hero-slider__slide {
  z-index: 2;
  transform-origin: 80% 58%;
  transform: translateY(14px) scale(.92);
  transition: opacity .7s ease, visibility .7s ease, transform 4s cubic-bezier(.12,.66,.22,1);
}

.s4-hero .s4-hero-slider__slide.is-active { transform: translateY(0) scale(1.02); }

.s4-hero .s4-hero-slider__slide img,
.s4-hero .s4-hero-slider__slide:nth-of-type(2) img {
  position: absolute;
  inset: auto 1% 13% auto;
  width: clamp(660px, 51vw, 1020px);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 38px 30px rgba(0, 0, 0, .62)) drop-shadow(0 0 35px rgba(40, 157, 255, .24));
}

.s4-hero .s4-hero-slider__slide:nth-of-type(2) img {
  right: 4.2%;
  bottom: 9%;
  width: clamp(610px, 49vw, 960px);
}

.s4-hero .s4-hero-slider__slide:nth-of-type(3) img {
  top: clamp(120px, 13.5svh, 150px);
  right: 4.5%;
  bottom: auto;
  width: clamp(500px, 35vw, 680px);
  /* The supplied render stays intact; the hero crops only its lower stand. */
  filter: brightness(1.08) contrast(1.05) saturate(.88)
    drop-shadow(0 36px 28px rgba(0, 0, 0, .6))
    drop-shadow(0 0 44px rgba(69, 168, 255, .3));
}

.s4-hero__floor {
  z-index: 3;
  background:
    radial-gradient(ellipse 36% 6% at 77% 85%, rgba(117, 226, 255, .49), transparent 81%),
    radial-gradient(ellipse 45% 21% at 79% 98%, rgba(10, 111, 235, .45), transparent 78%),
    linear-gradient(176deg, transparent 75%, rgba(17, 101, 208, .28) 78%, transparent 78.3%);
  mix-blend-mode: screen;
  animation: s4FloorLight 5s ease-in-out infinite alternate;
}

.s4-hero .s3-hero__visual::after {
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, #020817 1%, rgba(2, 8, 23, .97) 17%, rgba(2, 8, 23, .74) 34%, transparent 60%),
    linear-gradient(0deg, rgba(1, 7, 20, .85), transparent 30%);
}

.s4-hero .s3-hero__copy { z-index: 5; max-width: min(49vw, 920px); }
.s4-hero .s3-hero__copy > p { color: #aed9ff; }
.s4-hero .s3-hero__description { color: #d8e8f3; }
.s4-hero .s4-hero-slider__nav { z-index: 6; }

/* Replay the same short copy entrance each time the product changes. */
.s4-hero .s3-hero__copy > p,
.s4-hero .s3-hero__copy > h1,
.s4-hero .s3-hero__description {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
.s4-hero .s3-hero__copy.is-slide-entering > p,
.s4-hero .s3-hero__copy.is-slide-entering > h1,
.s4-hero .s3-hero__copy.is-slide-entering > .s3-hero__description {
  animation: s4HeroCopySync 1.05s cubic-bezier(.16, 1, .3, 1) both;
}
.s4-hero .s3-hero__copy.is-slide-entering > p { animation-delay: .12s; }
.s4-hero .s3-hero__copy.is-slide-entering > h1 { animation-delay: .28s; }
.s4-hero .s3-hero__copy.is-slide-entering > .s3-hero__description { animation-delay: .44s; }

.s4-hero .s3-hero__copy.is-slide-exiting > p,
.s4-hero .s3-hero__copy.is-slide-exiting > h1,
.s4-hero .s3-hero__copy.is-slide-exiting > .s3-hero__description {
  animation: s4HeroCopyExit .4s cubic-bezier(.4, 0, .8, 1) both;
}
.s4-hero .s3-hero__copy.is-slide-exiting > h1 { animation-delay: .07s; }
.s4-hero .s3-hero__copy.is-slide-exiting > p { animation-delay: .14s; }

@keyframes s4HeroCopySync {
  from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes s4HeroCopyExit {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-12px); filter: blur(3px); }
}

@keyframes s4Atmosphere { to { opacity: .76; transform: scale(1.06) translate(-1%, 1%); } }
@keyframes s4LightColumn { to { transform: skewX(-12deg) translateX(24%); opacity: .55; } }
@keyframes s4DustFloat { to { background-position: 12px -15px, -12px 20px, 9px -12px, -10px 13px; opacity: .68; } }
@keyframes s4TrailBreathe { to { opacity: .55; transform: translateY(-14px); } }
@keyframes s4Stars { to { opacity: .43; } }
@keyframes s4FloorLight { to { opacity: .65; } }

/* Align the visible right edges of the three differently padded product renders. */
@media (min-width: 1101px) {
  .s4-hero .s4-hero-slider__slide:nth-of-type(1) img { right: -4%; }
  .s4-hero .s4-hero-slider__slide:nth-of-type(2) img { right: -3.5%; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .s4-hero .s4-hero-slider__slide img,
  .s4-hero .s4-hero-slider__slide:nth-of-type(2) img { right: -8%; width: 76vw; }
  .s4-hero .s4-hero-slider__slide:nth-of-type(3) img {
    top: 13%;
    right: 4%;
    bottom: auto;
    width: clamp(350px, 38vw, 420px);
    /* A drop shadow around a masked image exposes its rectangular bitmap bounds. */
    filter: brightness(1.08) contrast(1.05) saturate(.88);
    mask-image: linear-gradient(to bottom, #000 0 59%, transparent 87%);
  }
  .s4-hero .s3-hero__copy { max-width: 59vw; }
}

@media (max-width: 900px) and (min-width: 761px) {
  .s4-hero .s4-hero-slider__slide img {
    top: 14%;
    right: 2%;
    bottom: auto;
    width: 64vw;
  }
  .s4-hero .s4-hero-slider__slide:nth-of-type(2) img { top: 11%; right: 4%; bottom: auto; width: 58vw; }
  .s4-hero .s4-hero-slider__slide:nth-of-type(3) img { top: 14%; right: 3%; width: clamp(305px, 39vw, 350px); }
  .s4-hero .s3-hero__visual::after {
    background: linear-gradient(0deg, #020817 8%, rgba(2, 8, 23, .91) 27%, transparent 57%);
  }
  .s4-hero .s3-hero__copy { bottom: 19%; max-width: calc(100% - 100px); }
  .s4-hero h1 { font-size: clamp(44px, 5.7vw, 52px); }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .s4-hero .s4-hero-slider__slide img { top: 12%; right: 3%; bottom: auto; width: 55vw; }
  .s4-hero .s4-hero-slider__slide:nth-of-type(2) img { top: 10%; right: 4%; bottom: auto; width: 51vw; }
  .s4-hero .s4-hero-slider__slide:nth-of-type(3) img { top: 13%; right: 4%; width: 38vw; }
  .s4-hero .s3-hero__visual::after {
    background: linear-gradient(0deg, #020817 5%, rgba(2, 8, 23, .92) 24%, transparent 55%);
  }
  .s4-hero .s3-hero__copy { bottom: 17%; max-width: calc(100% - 100px); }
  .s4-hero h1 { font-size: clamp(48px, 5.4vw, 59px); }
}

@media (max-width: 760px) {
  .s4-hero .s4-hero-slider__slide { transform-origin: 50% 42%; }
  .s4-hero .s3-hero__visual {
    background:
      radial-gradient(ellipse 85% 33% at 68% 35%, rgba(12, 101, 212, .8), transparent 84%),
      linear-gradient(145deg, #020817 5%, #041738 58%, #020817 100%);
  }
  .s4-hero__atmosphere::before { left: 52%; width: 38%; }
  .s4-hero__field { top: -5%; left: -55%; width: 190%; height: 80%; opacity: .9; }
  .s4-hero__floor { background: radial-gradient(ellipse 77% 12% at 63% 52%, rgba(65, 190, 255, .28), transparent 80%); }
  .s4-hero .s4-hero-slider__slide img,
  .s4-hero .s4-hero-slider__slide:nth-of-type(2) img {
    top: 19%;
    left: calc(50% + 8vw);
    right: auto;
    bottom: auto;
    width: 108%;
    height: auto;
    transform: translateX(-50%);
  }
  .s4-hero .s4-hero-slider__slide:nth-of-type(2) img { top: 17%; width: 100%; }
  .s4-hero .s4-hero-slider__slide:nth-of-type(3) img {
    top: 13%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(72vw, 290px);
    transform: translateX(-50%);
    filter: brightness(1.08) contrast(1.05) saturate(.88);
    mask-image: linear-gradient(to bottom, #000 0 58%, transparent 78%);
  }
  .s4-hero .s3-hero__visual::after {
    background:
      linear-gradient(0deg, #020817 8%, rgba(2, 8, 23, .95) 25%, rgba(2, 8, 23, .63) 39%, transparent 57%),
      linear-gradient(90deg, rgba(2, 8, 23, .3), transparent 50%);
  }
  .s4-hero .s3-hero__copy { left: 20px; right: 20px; bottom: 18%; max-width: none; }
  .s4-hero .s3-hero__copy > p { margin-bottom: 18px; font-size: 10px; }
  .s4-hero .s3-hero h1,
  .s4-hero h1 { font-size: clamp(36px, 10.2vw, 43px); line-height: 1.16; letter-spacing: -.055em; }
  .s4-hero .s3-hero__copy.is-product-copy h1 { font-size: clamp(30px, 8vw, 39px); }
  .s4-hero .s3-hero__description { margin-top: 19px; font-size: 12px; line-height: 1.6; }
}

@media (max-width: 380px) {
  .s4-hero .s3-hero__copy { bottom: 17%; }
  .s4-hero h1 { font-size: 35px; }
  .s4-hero .s3-hero__description { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .s4-hero__atmosphere,
  .s4-hero__atmosphere::before,
  .s4-hero__atmosphere::after,
  .s4-hero__light-trails,
  .s4-hero__stars,
  .s4-hero__floor { animation: none !important; }
  .s4-hero .s4-hero-slider__slide,
  .s4-hero .s4-hero-slider__slide.is-active { transition: none; transform: none; }
  .s4-hero .s3-hero__copy.is-slide-entering > p,
  .s4-hero .s3-hero__copy.is-slide-entering > h1,
  .s4-hero .s3-hero__copy.is-slide-entering > .s3-hero__description,
  .s4-hero .s3-hero__copy.is-slide-exiting > p,
  .s4-hero .s3-hero__copy.is-slide-exiting > h1,
  .s4-hero .s3-hero__copy.is-slide-exiting > .s3-hero__description {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}