/* Refine the first hero artwork: slightly larger and closer to the copy. */
.hero-slide-roomy #hero-title {
  line-height: 1.18;
}

.hero-slide-roomy .hero-shade {
  background-image:
    linear-gradient(rgba(72, 151, 168, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 151, 168, .07) 1px, transparent 1px),
    radial-gradient(circle at 86% 38%, rgba(0, 179, 161, .2), transparent 38%),
    linear-gradient(90deg, rgba(4, 18, 37, .97) 0%, rgba(4, 18, 37, .82) 31%, rgba(4, 25, 43, .3) 58%, rgba(3, 44, 53, .12) 100%);
  background-size: 78px 78px, 78px 78px, auto, auto;
}

/* A restrained bubble trail links the mascot back toward the headline. */
.hero-slide-roomy::before,
.hero-slide-roomy::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.96) 0 9%, rgba(71,220,255,.9) 21%, rgba(20,129,241,.7) 56%, rgba(4,60,150,.16) 74%);
  border: 1px solid rgba(135,235,255,.5);
  box-shadow: inset 0 0 10px rgba(255,255,255,.2), 0 0 18px rgba(34,192,255,.38);
}

.hero-slide-roomy::before {
  left: 54%;
  top: 24%;
  width: 18px;
  height: 18px;
  box-shadow:
    -34px 28px 0 -3px rgba(66,211,255,.74),
    -72px 65px 0 -5px rgba(63,200,255,.62),
    -112px 106px 0 -6px rgba(80,224,242,.52),
    -150px 151px 0 -7px rgba(90,230,221,.42),
    inset 0 0 10px rgba(255,255,255,.24),
    0 0 22px rgba(34,192,255,.42);
  animation: heroBubbleDrift 5.2s ease-in-out infinite;
}

.hero-slide-roomy::after {
  left: 49%;
  top: 34%;
  width: 10px;
  height: 10px;
  opacity: .76;
  box-shadow:
    -28px 48px 0 -2px rgba(80,221,255,.58),
    -60px 91px 0 -3px rgba(73,199,246,.46),
    -94px 137px 0 -3px rgba(84,224,220,.36),
    inset 0 0 8px rgba(255,255,255,.24),
    0 0 16px rgba(34,192,255,.34);
  animation: heroBubbleDriftSmall 4.4s ease-in-out .7s infinite;
}

@keyframes heroBubbleDrift {
  0%, 100% { transform: translate3d(0, 7px, 0) scale(.96); opacity: .62; }
  50% { transform: translate3d(-8px, -9px, 0) scale(1.06); opacity: .92; }
}

@keyframes heroBubbleDriftSmall {
  0%, 100% { transform: translate3d(0, 4px, 0); opacity: .44; }
  50% { transform: translate3d(-6px, -10px, 0); opacity: .8; }
}

.hero-slide-roomy .hero-slide-image,
.hero-slide-roomy.active .hero-slide-image {
  inset: 9% 4% auto auto;
  width: 96%;
  height: 84%;
  object-fit: contain;
  object-position: right center;
  transform: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
}

@media (max-width: 820px) {
  .hero-slide-roomy .hero-slide-image,
  .hero-slide-roomy.active .hero-slide-image {
    inset: 13% -3% auto auto;
    width: 185%;
    height: 39%;
  }

  .hero-slide-roomy .hero-shade {
    background-image:
      linear-gradient(rgba(72, 151, 168, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(72, 151, 168, .055) 1px, transparent 1px),
      linear-gradient(to top, rgba(7, 23, 47, .98) 0%, rgba(7, 23, 47, .9) 38%, rgba(7, 23, 47, .08) 66%, rgba(7, 23, 47, .12) 100%);
    background-size: 54px 54px, 54px 54px, auto;
  }

  .hero-slide-roomy::before,
  .hero-slide-roomy::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-roomy::before,
  .hero-slide-roomy::after {
    animation: none;
  }
}