/* The source JPEG and its mask remain intact inside the animated wrapper. */
.product-campaign {
  --campaign-rise: -15px;
  isolation: isolate;
  min-width: 0;
  color: #141448;
  background: #9edbf0;
}

.campaign-eyebrow {
  position: absolute;
  z-index: 2;
  top: 31px;
  left: 32px;
  right: 32px;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}

.campaign-eyebrow::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.campaign-product-float {
  position: absolute;
  z-index: 1;
  inset: 65px 8% 112px;
  pointer-events: none;
  animation: campaign-float 8s cubic-bezier(.45, 0, .25, 1) infinite paused;
  transform-origin: center 65%;
}

.campaign-product-float .product-media-stage {
  --media-space-width: 92cqw;
  --media-space-height: 94cqh;
}

.campaign-bubbles {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.campaign-bubbles i {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border: 1px solid #f4fcffd9;
  border-radius: 50%;
  background: linear-gradient(145deg, #f3fcff52, #d5f4ff0a 56%);
  box-shadow: inset 5px 7px 22px #f5fcff25;
  animation: campaign-bubble 8s cubic-bezier(.45, 0, .25, 1) infinite paused;
}

.campaign-bubbles i:nth-child(1) { width: 56%; top: 24%; left: -25%; }
.campaign-bubbles i:nth-child(2) { width: 27%; top: 10%; right: 7%; animation-delay: -2s; }
.campaign-bubbles i:nth-child(3) { width: 18%; right: 10%; bottom: 24%; animation-delay: -4s; }
.campaign-bubbles i:nth-child(4) { width: 8%; left: 18%; bottom: 21%; animation-delay: -6s; }

.product-campaign.is-running :is(.campaign-product-float, .campaign-bubbles i) {
  animation-play-state: running;
}

.campaign-bottom {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 28px;
  left: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.campaign-caption {
  display: flex;
  min-width: 0;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}

.campaign-caption > span {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .02em;
}

.campaign-caption strong {
  font-size: clamp(20px, 1.85vw, 28px);
  font-weight: 550;
  line-height: 1.13;
  letter-spacing: -.04em;
}

.campaign-motion {
  display: flex;
  min-width: 104px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid #1414485c;
  border-radius: 30px;
  color: inherit;
  background: #e9faff52;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.campaign-motion[hidden] { display: none; }
.campaign-motion:hover { background: #e9faffb3; }
.campaign-motion [data-campaign-motion-icon] { width: 12px; font-size: 11px; }
.product-campaign :is(a, button):focus-visible { outline: 2px solid #141448; outline-offset: 5px; }

@keyframes campaign-float {
  0%, 18%, 80%, 100% { transform: translate(0, 0) rotate(0deg); }
  42% { transform: translate(3px, var(--campaign-rise)) rotate(-1.4deg); }
  63% { transform: translate(-2px, -3px) rotate(1.2deg); }
}

@keyframes campaign-bubble {
  0%, 100% { transform: translate(0, 0); }
  46% { transform: translate(5px, -18px); }
  76% { transform: translate(-2px, -4px); }
}

@media (max-width: 1100px) {
  .campaign-bottom { gap: 14px; }
  .campaign-caption strong { font-size: 23px; }
}

@media (max-width: 780px) {
  .feature-photo.product-campaign { height: 480px; --campaign-rise: -10px; }
  .campaign-eyebrow { top: 25px; left: 24px; right: 24px; font-size: 10px; }
  .campaign-product-float { inset: 58px 8% 115px; }
  .campaign-bottom { left: 24px; right: 24px; bottom: 24px; gap: 14px; }
  .campaign-caption strong { font-size: 23px; }
}

@media (max-width: 360px) {
  .campaign-bottom { left: 20px; right: 20px; gap: 12px; }
  .campaign-caption strong { font-size: 21px; }
  .campaign-caption > span { font-size: 10px; }
  .campaign-motion { min-width: 100px; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-campaign :is(.campaign-product-float, .campaign-bubbles i) {
    animation: none !important;
    transform: none !important;
  }
  .campaign-motion { transition: none; }
}

@media print {
  .product-campaign :is(.campaign-product-float, .campaign-bubbles i) { animation: none !important; transform: none !important; }
  .campaign-motion { display: none; }
}