/* WhipWashPro — Services & Coverage (cinematic redesign). Namespaced wwp-coverage-*, no global selectors. */

#wwp-coverage-root {
  --wwp-coverage-navy: #060e1c;
  --wwp-coverage-navy-alt: #0a1830;
  --wwp-coverage-accent: #1177fe;
  --wwp-coverage-accent-soft: rgba(17, 119, 254, 0.35);
  --wwp-coverage-orange: #ff7a1f;
  --wwp-coverage-text: #ffffff;
  --wwp-coverage-text-muted: #9fb0cc;
  --wwp-coverage-border: rgba(90, 148, 255, 0.24);
  --wwp-coverage-header-offset: var(--wwp-header-offset, 64px);
  --wwp-coverage-bottom-bar: var(--wwp-mobile-bottom-bar-height, 0px);
  --wwp-coverage-focal-opening: 62% 42%;
  --wwp-coverage-focal-interior: 50% 40%;
  --wwp-coverage-focal-washvs: 50% 45%;
  --wwp-coverage-focal-ev: 60% 45%;
  --wwp-coverage-focal-multivehicle: 50% 45%;

  position: relative;
  background: var(--wwp-coverage-navy);
  color: var(--wwp-coverage-text);
  overflow: hidden;
  isolation: isolate;
}
#wwp-coverage-root * { box-sizing: border-box; }
#wwp-coverage-root .wwp-coverage-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------- Progress rail ---------------- */

#wwp-coverage-root .wwp-coverage-progress-rail {
  position: sticky;
  top: var(--wwp-coverage-header-offset);
  z-index: 4;
  height: 3px;
  background: rgba(255,255,255,.08);
  max-width: 1600px;
  margin: 0 auto;
}
#wwp-coverage-root .wwp-coverage-progress-rail i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--wwp-coverage-accent), var(--wwp-coverage-orange));
  transition: width .15s linear;
}

/* ---------------- Opening stage ---------------- */

#wwp-coverage-root .wwp-coverage-opening {
  position: relative;
  padding: 90px clamp(20px, 5vw, 64px) 70px;
  max-width: 1600px;
  margin: 0 auto;
}
#wwp-coverage-root .wwp-coverage-opening-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#wwp-coverage-root .wwp-coverage-opening-media picture { display: contents; }
#wwp-coverage-root .wwp-coverage-opening-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wwp-coverage-focal-opening);
  display: block;
  transform: scale(1.04);
  transition: transform 1.1s ease, opacity 1.1s ease;
  opacity: .5;
}
#wwp-coverage-root.wwp-coverage-in-view .wwp-coverage-opening-media img { transform: scale(1); opacity: .78; }
#wwp-coverage-root .wwp-coverage-opening-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,14,28,.92) 0%, rgba(6,14,28,.55) 45%, rgba(6,14,28,.2) 75%),
    linear-gradient(180deg, rgba(6,14,28,.5) 0%, rgba(6,14,28,.3) 40%, rgba(6,14,28,.85) 100%);
}
#wwp-coverage-root .wwp-coverage-opening-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
#wwp-coverage-root .wwp-coverage-eyebrow {
  display: inline-block;
  color: var(--wwp-coverage-accent);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}
#wwp-coverage-root .wwp-coverage-title {
  margin: 14px 0 18px;
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 900;
  line-height: 1.12;
  color: var(--wwp-coverage-text);
}
#wwp-coverage-root.wwp-coverage-js .wwp-coverage-eyebrow,
#wwp-coverage-root.wwp-coverage-js .wwp-coverage-title {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
#wwp-coverage-root.wwp-coverage-js .wwp-coverage-title { transition-delay: .08s; }
#wwp-coverage-root.wwp-coverage-in-view .wwp-coverage-eyebrow,
#wwp-coverage-root.wwp-coverage-in-view .wwp-coverage-title {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative route map */
#wwp-coverage-root .wwp-coverage-map {
  margin-top: 26px;
  max-width: 460px;
}
#wwp-coverage-root .wwp-coverage-map svg { width: 100%; height: auto; display: block; }
#wwp-coverage-root .wwp-coverage-map-route {
  fill: none;
  stroke: var(--wwp-coverage-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .75;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
#wwp-coverage-root.wwp-coverage-in-view .wwp-coverage-map-route {
  transition: stroke-dashoffset 1.6s ease .3s;
  stroke-dashoffset: 0;
}
#wwp-coverage-root .wwp-coverage-map-dot { fill: var(--wwp-coverage-orange); opacity: 0; transform-origin: center; }
#wwp-coverage-root.wwp-coverage-js .wwp-coverage-map-dot {
  transition: opacity .4s ease, transform .4s ease;
  transform: scale(.4);
}
#wwp-coverage-root.wwp-coverage-in-view .wwp-coverage-map-dot { opacity: 1; transform: scale(1); }
#wwp-coverage-root .wwp-coverage-map-label {
  font-size: 8.5px;
  font-weight: 700;
  fill: var(--wwp-coverage-text-muted);
  letter-spacing: .02em;
}

/* ---------------- Story chapters ---------------- */

#wwp-coverage-root .wwp-coverage-story {
  display: flex;
  flex-direction: column;
  gap: 24vh;
  max-width: 1600px;
  margin: 0 auto;
  padding: 6vh clamp(20px, 5vw, 64px) 18vh;
}

#wwp-coverage-root .wwp-coverage-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
#wwp-coverage-root .wwp-coverage-chapter[data-layout="image-right"] .wwp-coverage-chapter-media { order: 2; }
#wwp-coverage-root .wwp-coverage-chapter[data-layout="image-right"] .wwp-coverage-chapter-copy { order: 1; }
#wwp-coverage-root .wwp-coverage-chapter[data-layout="wide-closing"] {
  grid-template-columns: 1.1fr .9fr;
}

#wwp-coverage-root .wwp-coverage-chapter-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--wwp-coverage-border);
  box-shadow: 0 24px 60px rgba(2,8,20,.5);
  aspect-ratio: 4 / 3;
}
#wwp-coverage-root .wwp-coverage-chapter-media picture { display: contents; }
#wwp-coverage-root .wwp-coverage-chapter-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#wwp-coverage-root [data-chapter="interior"] .wwp-coverage-chapter-media img { object-position: var(--wwp-coverage-focal-interior); }
#wwp-coverage-root [data-chapter="washvs"] .wwp-coverage-chapter-media img { object-position: var(--wwp-coverage-focal-washvs); }
#wwp-coverage-root [data-chapter="ev"] .wwp-coverage-chapter-media img { object-position: var(--wwp-coverage-focal-ev); }
#wwp-coverage-root [data-chapter="coverage"] .wwp-coverage-chapter-media img { object-position: var(--wwp-coverage-focal-multivehicle); }
#wwp-coverage-root [data-chapter="coverage"] .wwp-coverage-chapter-media { aspect-ratio: 16 / 9; }

#wwp-coverage-root.wwp-coverage-js .wwp-coverage-chapter-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s ease;
}
#wwp-coverage-root .wwp-coverage-chapter.is-active .wwp-coverage-chapter-media {
  clip-path: inset(0 0 0% 0);
}

#wwp-coverage-root .wwp-coverage-ev-pulse {
  position: absolute;
  top: 58%;
  left: 62%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--wwp-coverage-accent);
  transform: translate(-50%,-50%) scale(.6);
  opacity: 0;
  pointer-events: none;
}
#wwp-coverage-root .wwp-coverage-chapter.is-active .wwp-coverage-ev-pulse {
  animation: wwp-coverage-pulse 1.8s ease-out 1;
}
@keyframes wwp-coverage-pulse {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  40% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}

#wwp-coverage-root .wwp-coverage-chapter-copy { max-width: 560px; }
#wwp-coverage-root .wwp-coverage-chapter-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--wwp-coverage-text);
}
#wwp-coverage-root .wwp-coverage-chapter-copy p,
#wwp-coverage-root .wwp-coverage-chapter-copy .seo-content p {
  color: var(--wwp-coverage-text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}
#wwp-coverage-root .wwp-coverage-chapter-copy a { color: var(--wwp-coverage-accent); }

#wwp-coverage-root.wwp-coverage-js .wwp-coverage-chapter-copy > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
#wwp-coverage-root .wwp-coverage-chapter.is-active .wwp-coverage-chapter-copy > * {
  opacity: 1;
  transform: translateY(0);
}

/* Wash-vs-detailing divider accent */
#wwp-coverage-root [data-chapter="washvs"] .wwp-coverage-chapter-media::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 14px rgba(17,119,254,.6);
  transform: scaleY(0);
  transform-origin: top;
}
#wwp-coverage-root.wwp-coverage-js [data-chapter="washvs"] .wwp-coverage-chapter-media::after { transition: transform .9s ease .2s; }
#wwp-coverage-root [data-chapter="washvs"].is-active .wwp-coverage-chapter-media::after { transform: scaleY(1); }

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  #wwp-coverage-root .wwp-coverage-eyebrow,
  #wwp-coverage-root .wwp-coverage-title,
  #wwp-coverage-root .wwp-coverage-chapter-media,
  #wwp-coverage-root .wwp-coverage-chapter-copy > *,
  #wwp-coverage-root .wwp-coverage-map-dot {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  #wwp-coverage-root .wwp-coverage-opening-media img { opacity: .78 !important; transform: none !important; transition: none !important; }
  #wwp-coverage-root .wwp-coverage-map-route { stroke-dashoffset: 0 !important; transition: none !important; }
  #wwp-coverage-root .wwp-coverage-ev-pulse { display: none; }
  #wwp-coverage-root .wwp-coverage-progress-rail { display: none; }
  #wwp-coverage-root .wwp-coverage-story { gap: 40px; }
}

/* ---------------- Tablet ---------------- */

@media (max-width: 1024px) {
  #wwp-coverage-root .wwp-coverage-opening { padding: 70px 24px 50px; min-height: 70vh; display: flex; align-items: flex-end; }
  #wwp-coverage-root .wwp-coverage-story { gap: 12vh; padding: 4vh 24px 12vh; }
  #wwp-coverage-root .wwp-coverage-chapter { grid-template-columns: 1fr; }
  #wwp-coverage-root .wwp-coverage-chapter[data-layout="image-right"] .wwp-coverage-chapter-media,
  #wwp-coverage-root .wwp-coverage-chapter[data-layout="image-right"] .wwp-coverage-chapter-copy { order: initial; }
  #wwp-coverage-root .wwp-coverage-chapter-copy { max-width: none; }
}

/* ---------------- Mobile ---------------- */

@media (max-width: 767px) {
  #wwp-coverage-root .wwp-coverage-opening { padding: 48px 16px 36px; min-height: 56vh; }
  #wwp-coverage-root .wwp-coverage-opening-content { max-width: none; }
  #wwp-coverage-root .wwp-coverage-map { max-width: 320px; }
  #wwp-coverage-root .wwp-coverage-story { gap: 34px; padding: 24px 16px 40px; }
  #wwp-coverage-root .wwp-coverage-chapter { gap: 18px; }
  #wwp-coverage-root .wwp-coverage-chapter-media { aspect-ratio: 4 / 3; }
  #wwp-coverage-root [data-chapter="coverage"] .wwp-coverage-chapter-media { aspect-ratio: 4 / 3; }
  #wwp-coverage-root .wwp-coverage-chapter-copy h3 { font-size: 20px; }
  #wwp-coverage-root .wwp-coverage-chapter-copy p { font-size: 14.5px; }
  #wwp-coverage-root .wwp-coverage-progress-rail { top: var(--wwp-coverage-header-offset); }
}