.hero-section { position: relative; }
.cleaning-intro[hidden] { display: none; }
.cleaning-intro {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  isolation: isolate;
  color: #102a2c;
}
.cleaning-intro__scene,
.cleaning-intro__glass,
.cleaning-intro__foam,
.cleaning-intro__mist { position: absolute; inset: 0; width: 100%; height: 100%; }
.cleaning-intro__scene { pointer-events: none; }
.cleaning-intro__glass {
  background: rgba(224, 243, 236, .76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cleaning-intro__foam { opacity: 0; }
.cleaning-intro__caption {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
}
.cleaning-intro__caption span { font-size: 11px; font-weight: 800; letter-spacing: .26em; color: #397963; }
.cleaning-intro__caption p { margin: 15px 0 20px; font-size: clamp(30px, 4.5vw, 64px); line-height: 1.06; font-weight: 800; letter-spacing: -.045em; }
.cleaning-intro__caption i { display: block; margin: auto; width: 38px; height: 4px; border-radius: 4px; background: #f2b441; }
.cleaning-intro__bottle {
  position: absolute;
  left: 78%;
  top: 12%;
  width: clamp(90px, 12vw, 165px);
  opacity: 0;
  transform-origin: 50% 70%;
  filter: drop-shadow(8px 14px 12px #102a2c35);
  will-change: transform;
}
.cleaning-intro__bottle svg { display: block; width: 100%; height: auto; }
.cleaning-intro__wiper {
  --handle-length: clamp(90px, 12vw, 180px);
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 40%;
  opacity: 0;
  transform-origin: 6px 50%;
  will-change: transform;
  filter: drop-shadow(8px 5px 7px #102a2c40);
}
.cleaning-intro__rubber { position: absolute; left: 0; top: 0; width: 12px; height: 100%; background: #102a2c; border-radius: 7px; }
.cleaning-intro__rail { position: absolute; left: 9px; top: 0; width: 15px; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #819c99, #f2fcf9 40%, #a2bcb7 65%, #597b74); }
.cleaning-intro__joint { position: absolute; top: 47%; left: 14px; width: 64px; height: 44px; border-radius: 8px 18px 18px 8px; background: linear-gradient(#e3efeb, #89aaa0); }
.cleaning-intro__handle { position: absolute; top: calc(47% + 7px); left: 62px; width: var(--handle-length); height: 30px; border-radius: 6px 16px 16px 6px; background: repeating-linear-gradient(90deg, transparent 0 9px, #ffffff0d 9px 12px), linear-gradient(#358c73, #15513f); border-right: 12px solid #f2b441; }
.cleaning-intro__hand { position: absolute; top: calc(47% + 22px); left: calc(var(--handle-length) - 4px); width: clamp(155px, 16vw, 220px); height: auto; overflow: visible; transform: translateY(-50%); }
.cleaning-intro__water { position: absolute; left: 26px; top: 0; width: 12px; height: 100%; border-radius: 50%; background: linear-gradient(90deg, #ffffffc9, #d2f5ea00); }
.cleaning-intro__shine { position: absolute; inset: 0; opacity: 0; background: linear-gradient(112deg, transparent 25%, #ffffff18 45%, #ffffff50 50%, #ffffff18 55%, transparent 75%); transform: translateX(-100%); }
.cleaning-intro__skip {
  position: absolute;
  top: 18px;
  right: 20px;
  border: 1px solid #102a2c30;
  border-radius: 30px;
  padding: 9px 14px;
  background: #fffffff0;
  color: #102a2c;
  font: 600 12px/1.4 Arial, sans-serif;
  cursor: pointer;
}
.cleaning-intro__skip span { margin-left: 8px; }
.cleaning-intro__skip:hover { background: #dff3ed; }
.cleaning-intro__skip:focus-visible { outline: 3px solid #f2b441; outline-offset: 3px; }
.hero-intro-ready [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (max-width: 575px) {
  .cleaning-intro__bottle { left: 72%; top: 10%; }
  .cleaning-intro__caption { top: 34%; }
  .cleaning-intro__skip { right: 12px; top: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cleaning-intro { display: none !important; }
}