/* =========================================================
   Hero: soapy window + scroll-driven squeegee wipe
   The scroll position drives --wipe (0% -> 100%).
   A single clip-path notch cuts the soap away down the middle,
   so every soapy layer stays perfectly aligned as it clears.
   ========================================================= */

.hero {
  --stripe: 26%;                               /* width of the cleaned lane  */
  --l: calc(50% - (var(--stripe) / 2));        /* lane left edge             */
  --r: calc(50% + (var(--stripe) / 2));        /* lane right edge            */
  --wipe: 0%;                                  /* how far the blade has gone */
  --copy-op: 1;
  --done: 0;
  position: relative;
  background: var(--ink);
}

.hero__track { height: 300vh; position: relative; }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  /* The header is fixed and at most 84px tall (18px + a 48px logo + 18px), so
     the copy always starts below it. "start" rather than centring, because a
     centred panel slides up under the logo as soon as it gets tall. */
  align-items: start;
  padding-top: clamp(92px, 11vh, 132px);
  padding-bottom: clamp(30px, 5vh, 64px);
}

/* ---------- 1. The view through the glass ---------- */
.glass { position: absolute; inset: 0; overflow: hidden; }

.view {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1F8FAE 0%, #67C4DA 42%, #BFE7F0 72%, #E8F7FA 100%);
}

.sun {
  position: absolute;
  top: 12%;
  right: 16%;
  width: clamp(90px, 11vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe9a8 38%, rgba(255,214,112,.55) 58%, rgba(255,214,112,0) 72%);
  filter: blur(.4px);
  animation: sunPulse 7s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1);    opacity: .95; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.cloud {
  position: absolute;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  filter: blur(12px);
  animation: drift linear infinite;
}
.cloud--1 { top: 16%; left: -20%; width: 300px; animation-duration: 78s; }
.cloud--2 { top: 28%; left: -35%; width: 210px; height: 32px; opacity: .8; animation-duration: 104s; animation-delay: -30s; }
.cloud--3 { top:  8%; left: -50%; width: 380px; height: 54px; opacity: .65; animation-duration: 130s; animation-delay: -60s; }
@keyframes drift { to { transform: translateX(190vw); } }

/* Skyline — each background layer is one building, banded to read as floors */
.skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background-repeat: no-repeat;
}
.skyline--far {
  height: 42%;
  opacity: .55;
  filter: blur(.6px);
  background-image:
    repeating-linear-gradient(180deg, #6FB3C0 0 10px, #7CBDC9 10px 15px),
    repeating-linear-gradient(180deg, #6FB3C0 0 10px, #7CBDC9 10px 15px),
    repeating-linear-gradient(180deg, #6FB3C0 0 10px, #7CBDC9 10px 15px),
    repeating-linear-gradient(180deg, #6FB3C0 0 10px, #7CBDC9 10px 15px),
    repeating-linear-gradient(180deg, #6FB3C0 0 10px, #7CBDC9 10px 15px),
    repeating-linear-gradient(180deg, #6FB3C0 0 10px, #7CBDC9 10px 15px);
  background-size: 9% 58%, 7% 78%, 12% 46%, 8% 90%, 10% 64%, 14% 52%;
  background-position: 3% 100%, 15% 100%, 29% 100%, 48% 100%, 66% 100%, 84% 100%;
}
.skyline--near {
  height: 34%;
  background-image:
    repeating-linear-gradient(180deg, #1E6B78 0 9px, #247A88 9px 13px),
    repeating-linear-gradient(180deg, #175A66 0 9px, #1E6B78 9px 13px),
    repeating-linear-gradient(180deg, #1E6B78 0 9px, #247A88 9px 13px),
    repeating-linear-gradient(180deg, #124C57 0 9px, #175A66 9px 13px),
    repeating-linear-gradient(180deg, #1E6B78 0 9px, #247A88 9px 13px),
    repeating-linear-gradient(180deg, #175A66 0 9px, #1E6B78 9px 13px),
    repeating-linear-gradient(180deg, #124C57 0 9px, #175A66 9px 13px),
    linear-gradient(180deg, #0F4450, #0A3C44);
  background-size: 13% 62%, 9% 96%, 15% 48%, 11% 78%, 8% 58%, 16% 88%, 10% 40%, 100% 9%;
  background-position: -2% 100%, 12% 100%, 24% 100%, 40% 100%, 55% 100%, 68% 100%, 90% 100%, 0 100%;
}

/* ---------- 2. Wipeable layers (grime + soap) ---------- */
/* One notch carved out of the top-middle: that is the cleaned lane. */
.wipeable {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 0,
    var(--l) 0,
    var(--l) var(--wipe),
    var(--r) var(--wipe),
    var(--r) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.grime {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 20% 18%, rgba(120,110,86,.30), transparent 70%),
    radial-gradient(45% 35% at 78% 30%, rgba(120,110,86,.26), transparent 72%),
    radial-gradient(50% 45% at 55% 82%, rgba(105,98,80,.28), transparent 70%),
    repeating-linear-gradient(74deg, rgba(126,117,94,.13) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, rgba(151,142,118,.30), rgba(122,116,99,.42));
  mix-blend-mode: multiply;
}

/* heavier film for the "before" half of the comparison slider */
.grime--heavy {
  background:
    radial-gradient(34% 30% at 22% 26%, rgba(120,110,86,.5), transparent 70%),
    radial-gradient(30% 26% at 72% 40%, rgba(120,110,86,.44), transparent 72%),
    radial-gradient(40% 34% at 48% 82%, rgba(105,98,80,.5), transparent 70%),
    radial-gradient(circle at 30% 30%, rgba(146,138,116,.5) 0 2px, transparent 3px) 0 0/37px 41px,
    radial-gradient(circle at 70% 60%, rgba(146,138,116,.4) 0 3px, transparent 4px) 0 0/89px 71px,
    repeating-linear-gradient(74deg, rgba(126,117,94,.22) 0 4px, transparent 4px 13px),
    repeating-linear-gradient(-66deg, rgba(120,112,92,.14) 0 3px, transparent 3px 17px),
    linear-gradient(180deg, rgba(151,142,118,.48), rgba(122,116,99,.6));
}
.ba__layer:not(.ba__layer--after) .view { filter: saturate(.82) contrast(.92); }

.soap {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(9px) saturate(.82) brightness(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(.82) brightness(1.1);
  background-color: rgba(226, 244, 247, .34);
  background-image:
    /* scattered bubbles, four tile scales so it never looks gridded */
    radial-gradient(circle at 30% 32%, rgba(255,255,255,.95) 0 3px, rgba(255,255,255,.22) 4px, transparent 5px),
    radial-gradient(circle at 68% 64%, rgba(255,255,255,.85) 0 6px, rgba(255,255,255,.18) 7px, transparent 9px),
    radial-gradient(circle at 22% 74%, rgba(255,255,255,.75) 0 9px, rgba(255,255,255,.15) 11px, transparent 13px),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.65) 0 14px, rgba(255,255,255,.12) 16px, transparent 19px),
    /* smeared soap streaks */
    repeating-linear-gradient(106deg,
      rgba(255,255,255,.26) 0 14px,
      rgba(255,255,255,.07) 14px 38px,
      rgba(210,236,250,.16) 38px 62px),
    linear-gradient(180deg, rgba(247,253,254,.42), rgba(198,232,239,.5));
  background-size: 54px 54px, 97px 83px, 163px 149px, 271px 233px, auto, auto;
}

/* thicker foam gathering where the blade has not reached yet */
.soap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 22% at 50% 0%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(40% 30% at 12% 46%, rgba(255,255,255,.34), transparent 72%),
    radial-gradient(38% 28% at 88% 58%, rgba(255,255,255,.3), transparent 72%);
  filter: blur(2px);
}

/* ---------- 3. Cleaned-lane extras ---------- */
/* Everything here is clipped to the part of the lane already squeegeed. */
.cleaned {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--r)) calc(100% - var(--wipe)) var(--l));
  pointer-events: none;
}

.gleam {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg,
    transparent 30%,
    rgba(255,255,255,.34) 44%,
    rgba(255,255,255,.06) 52%,
    transparent 66%);
}

.sparkle {
  position: absolute;
  width: 20px; height: 20px;
  color: #fff;
  opacity: 0;
  animation: twinkle 3.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.sparkle svg { width: 100%; height: 100%; }
.sparkle--1 { top: 22%; left: 42%; animation-delay: .2s; }
.sparkle--2 { top: 46%; left: 58%; animation-delay: 1.3s; width: 14px; height: 14px; }
.sparkle--3 { top: 68%; left: 46%; animation-delay: 2.4s; width: 26px; height: 26px; }
@keyframes twinkle {
  0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  20%           { opacity: 1; transform: scale(1) rotate(35deg); }
  40%           { opacity: .2; transform: scale(.8) rotate(60deg); }
}

/* wet rubber edges left at the sides of the lane */
.edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  filter: blur(1px);
  opacity: .8;
}
.edge--l { left: calc(var(--l) - 5px); }
.edge--r { left: calc(var(--r) - 5px); }

/* little runs of water down the fresh edges */
.drip {
  position: absolute;
  width: 5px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.85));
  filter: blur(.6px);
  animation: dripRun 4.5s var(--ease) infinite;
}
.drip--1 { left: calc(var(--l) + 8px);  animation-delay: .4s; }
.drip--2 { left: calc(var(--r) - 13px); animation-delay: 1.9s; }
.drip--3 { left: calc(50% - 2px);       animation-delay: 3.1s; height: 14px; }
@keyframes dripRun {
  0%   { top: -4%;  opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .55; }
  100% { top: 104%; opacity: 0; }
}

/* ---------- 4. The squeegee ---------- */
.squeegee {
  position: absolute;
  left: calc(var(--l) - 26px);
  width: calc(var(--stripe) + 52px);
  top: var(--wipe);
  transform: translateY(-50%) rotate(var(--tilt, 0deg));
  transition: opacity .3s linear;
  pointer-events: none;
  filter: drop-shadow(0 16px 22px rgba(10, 60, 68, .38));
  z-index: 6;
}
.squeegee__handle {
  width: 78px;
  height: 26px;
  margin: 0 auto -4px;
  border-radius: 14px 14px 8px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 8px),
    linear-gradient(180deg, #2E8C9B, #0A3C44 55%, #06282F);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.28), inset 0 2px 3px rgba(255,255,255,.55);
}
.squeegee__stem {
  width: 20px;
  height: 12px;
  margin: 0 auto;
  background: linear-gradient(90deg, #7c8794, #d7dee6 45%, #8b95a1);
  border-radius: 3px;
}
.squeegee__channel {
  height: 17px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #f2f6fa 0%, #c3ccd6 26%, #8b96a3 52%, #dfe6ec 74%, #98a3b0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(10,60,68,.35);
  position: relative;
}
.squeegee__channel::before,
.squeegee__channel::after {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px;
  width: 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e7edf3, #9aa5b2);
}
.squeegee__channel::before { left: 4px; }
.squeegee__channel::after  { right: 4px; }

.squeegee__blade {
  height: 8px;
  margin: 0 12px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #2c3540, #171d25 60%, #0c1016);
  box-shadow: 0 2px 5px rgba(10,60,68,.5);
}
/* soap being pushed along in front of the blade */
.squeegee__wave {
  height: 14px;
  margin: -3px 6px 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.25));
  filter: blur(3px);
  opacity: .95;
}

/* ---------- 5. Frame on top of the glass ---------- */
.frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: clamp(12px, 1.5vw, 22px) solid #f4f7fa;
  border-bottom-width: clamp(26px, 3.2vw, 46px);
  box-shadow:
    inset 0 0 0 1px rgba(10,60,68,.14),
    inset 0 0 70px rgba(10,60,68,.22),
    0 0 0 1px rgba(10,60,68,.06);
  z-index: 5;
}
.frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(-1 * clamp(26px, 3.2vw, 46px));
  height: clamp(26px, 3.2vw, 46px);
  background: linear-gradient(180deg, #ffffff, #dde5ed);
}
.mullion {
  position: absolute;
  background: #f4f7fa;
  box-shadow: 0 0 0 1px rgba(10,60,68,.12), 0 2px 10px rgba(10,60,68,.14);
  z-index: 5;
  pointer-events: none;
}
.mullion--v { top: 0; bottom: 0; width: clamp(7px, .8vw, 12px); }
.mullion--v.is-left  { left: 25%; }
.mullion--v.is-right { left: 75%; }
.mullion--h { left: 0; right: 0; height: clamp(7px, .8vw, 12px); top: 24%; }

/* ---------- 6. Hero copy ---------- */
.hero__copy {
  position: relative;
  z-index: 8;
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  opacity: var(--copy-op);
  transition: opacity .2s linear;
}
.hero__copy-inner {
  max-width: 470px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--radius-l);
  background: rgba(10, 60, 68, .55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  box-shadow: var(--shadow-l);
}
.hero__copy h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.hero__copy h1 em {
  font-style: normal;
  background: linear-gradient(105deg, var(--teal-light), #fff 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__copy p { color: rgba(255,255,255,.82); font-size: 1.08rem; max-width: 46ch; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 7px 14px 7px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.hero__badge b {
  background: var(--teal-light);
  color: var(--ink);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: .72rem;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero__trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .84rem;
  color: rgba(255,255,255,.75);
}
.hero__trust span { display: flex; align-items: center; gap: .45em; }
.hero__trust svg { width: 16px; height: 16px; color: var(--mint); }

/* scroll prompt */
.hero__cue {
  position: absolute;
  right: clamp(22px, 4vw, 64px);
  bottom: clamp(26px, 4vh, 48px);
  z-index: 9;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(10,60,68,.6);
  opacity: var(--copy-op);
}
.hero__cue .mouse {
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 14px;
  position: relative;
}
.hero__cue .mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px; height: 8px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
  animation: wheel 1.8s var(--ease) infinite;
}
@keyframes wheel {
  0%   { transform: translate(-50%, 0);    opacity: 1; }
  70%  { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0);    opacity: 0; }
}

/* message that lands once the lane is clear */
.clean-badge {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translate(-50%, calc(20px - (var(--done) * 20px)));
  z-index: 7;
  opacity: var(--done);
  text-align: center;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: opacity .3s linear;
}
.clean-badge small {
  display: block;
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aqua-deep);
}

@media (max-width: 820px) {
  .hero { --stripe: 48%; }
  .hero__track { height: 260vh; }
  .mullion--v { display: none; }
  .squeegee { left: calc(var(--l) - 14px); width: calc(var(--stripe) + 28px); }

  /* keep the panel compact so there is still glass to watch */
  .hero__stage { align-items: start; padding-top: clamp(84px, 13vh, 110px); }
  .hero__copy-inner { max-width: none; padding: 20px; }
  .hero__copy h1 { font-size: clamp(1.85rem, 8.2vw, 2.4rem); }
  .hero__copy p { font-size: .95rem; }
  .hero__badge { margin-bottom: 14px; }
  .hero__actions { gap: 10px; margin-top: 20px; }
  .hero__actions .btn { padding: 13px 18px; font-size: .92rem; }
  .hero__trust {
    gap: 6px 16px;
    margin-top: 18px;
    padding-top: 14px;
    font-size: .78rem;
  }
  .hero__cue { right: 50%; transform: translateX(50%); bottom: 18px; }
}

/* Laptop-height windows: the panel has to fit between the header and the fold,
   so the display type comes down a notch. */
@media (max-height: 860px) and (min-width: 821px) {
  .hero__copy h1 { font-size: clamp(1.75rem, 3.2vw, 2.7rem); }
  .hero__copy p { font-size: 1rem; }
  .hero__copy-inner { padding: 22px 24px; }
  .hero__badge { margin-bottom: 12px; }
  .hero__actions { margin-top: 18px; }
  .hero__trust { margin-top: 16px; padding-top: 13px; gap: 6px 16px; font-size: .8rem; }
}
@media (max-height: 700px) and (min-width: 821px) {
  .hero__copy h1 { font-size: clamp(1.6rem, 2.9vw, 2.2rem); }
  .hero__copy .script { display: none; }
  .hero__trust { display: none; }
  .hero__cue { display: none; }
}

/* Static, fully legible version when motion is not wanted */
@media (prefers-reduced-motion: reduce) {
  .hero__track { height: 100vh; }
  .hero { --wipe: 62%; --done: 1; }
  .hero__stage { position: relative; }
  .hero__cue { display: none; }
}