/* WhipWashPro "Our Mobile Setup" -- scroll-driven four-frame van sequence.
   Everything namespaced wwp-vs-. No filter / backdrop-filter / blur anywhere in this file.
   Defaults (no JS, reduced motion) = static Frame 1 with all copy visible. */

.wwp-vs-root {
  --vs-navy: #04081a;
  --vs-blue: #1177fe;
  --vs-eyebrow: #2d8eff;
  --vs-orange: #ff7a1f;
  --vs-track: 360svh;
  --vs-hdr: 80px;               /* sticky header height */
  position: relative;
  width: 100%;
  background: var(--vs-navy);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.wwp-vs-root, .wwp-vs-root * { box-sizing: border-box; }

/* ── track / stage ── no JS: plain static block; JS: tall track + pinned stage */
#wwp-vs-track { position: relative; }
#wwp-vs-stage { position: relative; width: 100%; min-height: 100svh; background: var(--vs-navy); }
html.wwp-vs-js #wwp-vs-track { height: var(--vs-track); }
html.wwp-vs-js #wwp-vs-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* ── frames ── */
.wwp-vs-frames { position: absolute; inset: 0; background: var(--vs-navy); overflow: hidden; }
.wwp-vs-frame { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.01); transform-origin: 70% 50%; will-change: opacity, transform; }
.wwp-vs-frame[data-frame="1"] { opacity: 1; z-index: 1; }
.wwp-vs-frame[data-frame="2"] { z-index: 2; }
.wwp-vs-frame[data-frame="3"] { z-index: 3; }
.wwp-vs-frame[data-frame="4"] { z-index: 4; }
.wwp-vs-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--vs-pos, 72% 50%); }
/* without JS only Frame 1 exists visually (and for assistive tech) */
.wwp-vs-frame:not([data-frame="1"]) { display: none; }
html.wwp-vs-js .wwp-vs-frame { display: block; }

/* left-to-right navy scrim behind the copy: dark where the text sits, clear over the van */
.wwp-vs-shade {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 8, 24, 0.94) 0%, rgba(3, 8, 24, 0.80) 26%, rgba(3, 8, 24, 0.42) 50%, rgba(3, 8, 24, 0.08) 72%, rgba(3, 8, 24, 0) 88%);
}

/* ── progress (pure HTML/CSS; JS only sets --vs-p) ── */
.wwp-vs-progress { display: none; position: absolute; left: 50%; bottom: 30px; z-index: 12; width: min(240px, 50vw); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); transform: translateX(-50%); overflow: hidden; }
html.wwp-vs-js .wwp-vs-progress { display: block; }
.wwp-vs-progress i { display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--vs-p, 0)); background: linear-gradient(90deg, var(--vs-blue), var(--vs-orange)); }

/* ── copy ── */
.wwp-vs-copy {
  position: absolute; z-index: 10;
  left: clamp(24px, 6vw, 96px); top: calc(50% + var(--vs-hdr) / 2); transform: translateY(-50%);
  width: min(500px, 42vw);
}
.wwp-vs-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-eyebrow); }
.wwp-vs-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--vs-eyebrow); }
.wwp-vs-copy h2 { margin: 12px 0 0; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.04; font-size: clamp(30px, 3.4vw, 52px); color: #fff; }
.wwp-vs-support { margin: 18px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.wwp-vs-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 24px; border-radius: 8px; background: var(--vs-blue); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color 0.15s ease; }
.wwp-vs-cta:hover { background: var(--vs-orange); color: #fff; }
.wwp-vs-cta svg { width: 16px; height: 16px; }
.wwp-vs-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(17, 119, 254, 0.55); }
.wwp-vs-proof { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wwp-vs-proof li { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 100px; background: rgba(4, 8, 26, 0.72); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.92); white-space: nowrap; }
.wwp-vs-proof strong { color: #fff; font-weight: 800; }

/* ── short desktop windows ── */
@media (min-width: 1024px) and (max-height: 700px) {
  .wwp-vs-copy h2 { font-size: clamp(28px, 3vw, 40px); }
  .wwp-vs-support { margin-top: 12px; }
  .wwp-vs-proof { display: none; }
}

/* ── tablet + mobile: stacked layout (mobile-specific 1.3:1 crops are chosen by <picture>) ── */
@media (max-width: 1023px) {
  .wwp-vs-root { --vs-track: 300svh; }
  #wwp-vs-stage { display: flex; flex-direction: column; padding-top: var(--vs-hdr); }
  .wwp-vs-frames { position: relative; inset: auto; flex: none; width: 100%; height: min(76.9vw, 46svh); }
  /* fade the image bottom into the navy panel instead of a hard edge */
  .wwp-vs-shade { background: linear-gradient(180deg, rgba(4, 8, 26, 0) 68%, var(--vs-navy) 100%); }
  .wwp-vs-progress { bottom: 14px; }
  .wwp-vs-copy { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 640px; flex: 1 1 auto; padding: 18px clamp(20px, 5vw, 48px) calc(92px + env(safe-area-inset-bottom, 0px)); }
  .wwp-vs-copy h2 { font-size: clamp(26px, 7.2vw, 40px); }
  .wwp-vs-support { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .wwp-vs-cta { margin-top: 18px; }
  .wwp-vs-proof { margin-top: 18px; }
}
@media (max-width: 1023px) and (max-height: 760px) {
  .wwp-vs-frames { height: min(76.9vw, 36svh); }
  .wwp-vs-copy { padding-top: 14px; }
  .wwp-vs-copy h2 { font-size: clamp(24px, 6.6vw, 30px); }
  .wwp-vs-support { font-size: 13.5px; margin-top: 8px; }
  .wwp-vs-cta { margin-top: 12px; padding: 12px 20px; }
  .wwp-vs-proof { display: none; }
}
/* very short phones (e.g. 320x568): keep the CTA clear of the fixed bottom booking bar */
@media (max-width: 1023px) and (max-height: 620px) {
  .wwp-vs-frames { height: min(76.9vw, 30svh); }
  .wwp-vs-copy { padding-top: 12px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .wwp-vs-eyebrow { font-size: 11px; }
  .wwp-vs-copy h2 { margin-top: 8px; font-size: clamp(21px, 6.4vw, 26px); }
  .wwp-vs-support { margin-top: 8px; font-size: 13px; line-height: 1.4; }
  .wwp-vs-cta { margin-top: 10px; padding: 10px 18px; font-size: 14px; }
}
@media (max-width: 480px) {
  .wwp-vs-proof { flex-wrap: nowrap; gap: 6px; }
  .wwp-vs-proof li { font-size: 11.5px; padding: 6px 10px; }
}
@media (max-width: 380px) {
  .wwp-vs-proof li { font-size: 10.5px; padding: 6px 8px; }
}

/* ── reduced motion: static Frame 1, no pin, no crossfade/scale ── */
@media (prefers-reduced-motion: reduce) {
  html.wwp-vs-js #wwp-vs-track { height: auto; }
  html.wwp-vs-js #wwp-vs-stage { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  html.wwp-vs-js .wwp-vs-frame:not([data-frame="1"]) { display: none; }
  .wwp-vs-frame { transform: none !important; will-change: auto; }
  html.wwp-vs-js .wwp-vs-progress { display: none; }
  .wwp-vs-cta { transition: none; }
}