/* =========================================================
   Elgin County Plumbing – "We Fear No Flush!" billboard section
   Built from A061088-ElginCountyPlumbing_CONT_SSP_1B.psd
   Canvas 8535 x 4285 – all positions are % of that canvas.
   ========================================================= */

.ecp-bb {
  --ecp-lime: #b0cf38;
  --ecp-slime: #aaca39;
  --ecp-ink: #0b0f10;
  --ecp-dark: #0d1315;
  --ecp-font: "Gotham", "Montserrat", system-ui, sans-serif;
  --ecp-m-top: 0px;          /* extra top space on phones, e.g. to clear an overhanging logo */

  position: relative;
  container-type: inline-size;
  background: var(--ecp-dark);
  color: #fff;
  font-family: var(--ecp-font);
  overflow: hidden;
  isolation: isolate;
}
.ecp-bb *,
.ecp-bb *::before,
.ecp-bb *::after { box-sizing: border-box; }
.ecp-bb img { display: block; max-width: none; }

/* Guard against framework/theme layout rules (e.g. Automatic.css makes
   section/div children flex columns, which collapses the stage to 0 width). */
.ecp-bb { display: block !important; width: 100%; max-width: none; margin: 0; padding: 0; gap: 0; }
.ecp-bb .ecp-stage,
.ecp-bb .ecp-info { display: block; gap: 0; }
.ecp-bb .ecp-stage { width: 100%; }
.ecp-bb .ecp-headline,
.ecp-bb .ecp-name { max-width: none; text-wrap: initial; }

/* ---------- Stage + canvas (desktop: canvas == stage) ---------- */
.ecp-stage {
  position: relative;
  aspect-ratio: 8535 / 4285;
  overflow: hidden;
}
.ecp-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 8535 / 4285;
}
.ecp-layer { position: absolute; }

.ecp-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ecp-slime { top: 0; left: 0; width: 100%; z-index: 2; }
.ecp-slime img { width: 100%; height: auto; }
/* solid lime above the drips – only visible on mobile where the canvas is pushed down */
.ecp-slime::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 99%;
  height: 100%;
  background: var(--ecp-slime);
}

.ecp-crew { left: 49.35%; top: 39.49%; width: 37.88%; height: auto; z-index: 3; }

.ecp-ghost { z-index: 4; }
.ecp-ghost img { width: 100%; height: auto; }
.ecp-ghost--1 { left: 82.93%; top: 34.82%; width: 12.74%; z-index: 6; }
.ecp-ghost--2 { left: 2.43%;  top: 39.46%; width: 15.56%; }
.ecp-ghost--3 { left: 75.57%; top: 58.42%; width: 27.44%; z-index: 6; }
.ecp-ghost--1 img { opacity: .9; }
.ecp-ghost--2 img { opacity: .9; }
.ecp-ghost--3 img { opacity: .95; }

/* slime drops falling from the drip tips */
.ecp-drop {
  z-index: 2;
  width: .55%;
  aspect-ratio: 1 / 1.5;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #e9f7a0 0 18%, var(--ecp-slime) 45%, #6f8f1f 100%);
  opacity: 0;
}
.ecp-drop--a { left: 18.6%; top: 37.5%; }
.ecp-drop--b { left: 60.2%; top: 37%; }
.ecp-drop--c { left: 93%;   top: 36%; }

/* ---------- Headline ---------- */
.ecp-headline {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  top: 7.4%;
  margin: 0;
  text-align: center;
  font-family: var(--ecp-font);
  font-weight: 900;
  font-size: 8.55cqw;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ecp-ink);
  /* stands in for the PSD's lime drop-shadow / inner glow */
  text-shadow:
    0 0 .06em rgba(235, 255, 120, .85),
    0 0 .16em rgba(196, 228, 40, .9),
    0 .03em .02em rgba(60, 80, 10, .35);
}
.ecp-headline span { display: inline-block; }

/* ---------- Name + phone ---------- */
.ecp-info {
  position: absolute;
  z-index: 5;
  left: 30.38%;
  top: 43.5%;
  transform: translateX(-50%);
  text-align: center;
}
.ecp-name {
  margin: 0;
  font-weight: 900;
  font-size: 7.05cqw;
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 .04em .2em rgba(0, 0, 0, .45);
}
.ecp-name > span { display: block; overflow: hidden; padding: .02em .04em; }
.ecp-name > span > span { display: block; }
.ecp-phone {
  display: inline-block;
  margin-top: .32em;
  font-weight: 900;
  font-size: 4.95cqw;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ecp-lime);
  text-decoration: none;
  white-space: nowrap;
  border-radius: .2em;
}
.ecp-phone { position: relative; isolation: isolate; }
.ecp-phone::before {
  content: "";
  position: absolute;
  inset: -.35em -.5em;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(176, 207, 56, .45), rgba(176, 207, 56, 0));
  opacity: 0;
  pointer-events: none;
}
.ecp-phone:hover { color: #d4ee5c; }
.ecp-phone:focus-visible { outline: 3px solid var(--ecp-lime); outline-offset: .15em; }
.ecp-cta { display: none; }

/* =========================================================
   Mobile: crop the billboard around the crew, move copy below
   ========================================================= */
@media (max-width: 719px) {
  .ecp-stage { aspect-ratio: auto; height: calc(113cqw + var(--ecp-m-top)); }
  .ecp-canvas {
    top: calc(9cqw + var(--ecp-m-top)); /* lime band for the headline */
    width: 210%;
    left: -93.4%;             /* centres the crew (x≈68.3% of canvas) */
  }
  .ecp-ghost--2 { left: 44.8%; top: 34%; width: 10%; }
  .ecp-ghost--1 { left: 79%; top: 37%; width: 9.5%; }
  .ecp-ghost--3 { left: 75%; top: 64%; width: 18%; }
  .ecp-drop { width: .9%; }
  .ecp-drop--a { left: 46.5%; }

  .ecp-headline {
    top: calc(3.2cqw + var(--ecp-m-top));
    font-size: 13.4cqw;
    line-height: .9;
  }
  .ecp-headline span { display: block; }

  .ecp-info {
    position: relative;
    left: auto; top: auto;
    transform: none;
    margin-top: -14cqw;
    padding: 18cqw 5cqw 9cqw;
    background: linear-gradient(to bottom, rgba(13, 19, 21, 0), var(--ecp-dark) 14cqw);
  }
  .ecp-name { font-size: 10.6cqw; line-height: .9; }
  .ecp-name > span:first-child { display: inline-block; }
  .ecp-name > span:nth-child(2) { display: inline-block; }
  .ecp-phone {
    margin-top: 5cqw;
    font-size: 9.4cqw;
    padding: .28em .6em;
    border: 3px solid var(--ecp-lime);
    border-radius: 999px;
    box-shadow: 0 0 1.4em rgba(176, 207, 56, .25);
  }
  .ecp-cta {
    display: block;
    margin-top: 2.6cqw;
    font-size: 3.6cqw;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
  }
}

/* =========================================================
   Animation – JS adds .is-armed (hidden start state) on load,
   then .is-live when the section scrolls into view.
   Without JS (or with reduced motion) the final state shows.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .ecp-bb.is-armed .ecp-bg,
  .ecp-bb.is-armed .ecp-slime,
  .ecp-bb.is-armed .ecp-crew,
  .ecp-bb.is-armed .ecp-ghost,
  .ecp-bb.is-armed .ecp-headline,
  .ecp-bb.is-armed .ecp-name > span > span,
  .ecp-bb.is-armed .ecp-phone,
  .ecp-bb.is-armed .ecp-cta { opacity: 0; }

  .ecp-bb.is-armed .ecp-bg,
  .ecp-bb.is-armed .ecp-slime,
  .ecp-bb.is-armed .ecp-crew,
  .ecp-bb.is-armed .ecp-ghost,
  .ecp-bb.is-armed .ecp-ghost img,
  .ecp-bb.is-armed .ecp-headline,
  .ecp-bb.is-armed .ecp-drop { will-change: transform, opacity; backface-visibility: hidden; }

  /* 1. lights flicker on in the sewer */
  .ecp-bb.is-live .ecp-bg {
    animation: ecp-flicker 1.5s steps(1, end) .1s both, ecp-zoom 2.6s cubic-bezier(.2, .7, .2, 1) .1s both;
  }
  /* 2. slime oozes down from the top */
  .ecp-bb.is-live .ecp-slime {
    transform-origin: 50% 0;
    animation: ecp-ooze 1.3s cubic-bezier(.3, 1.35, .45, 1) .35s both, ecp-wobble 5s ease-in-out 2.2s infinite;
  }
  /* 3. headline splats in */
  .ecp-bb.is-live .ecp-headline { animation: ecp-splat .75s cubic-bezier(.2, 1.4, .4, 1) .95s both; }
  /* 4. crew charges out of the dark */
  .ecp-bb.is-live .ecp-crew {
    transform-origin: 50% 90%;
    animation: ecp-charge 1.1s cubic-bezier(.16, 1, .3, 1) .55s both;
  }
  /* 5. ghosts swoop in, then haunt */
  .ecp-bb.is-live .ecp-ghost--2 { animation: ecp-swoop-l 1.1s cubic-bezier(.2, .9, .3, 1) 1.45s both; }
  .ecp-bb.is-live .ecp-ghost--1 { animation: ecp-swoop-r 1.1s cubic-bezier(.2, .9, .3, 1) 1.65s both; }
  .ecp-bb.is-live .ecp-ghost--3 { animation: ecp-swoop-r 1.2s cubic-bezier(.2, .9, .3, 1) 1.85s both; }
  .ecp-bb.is-live .ecp-ghost--2 img { animation: ecp-haunt 4.6s ease-in-out 2.6s infinite; }
  .ecp-bb.is-live .ecp-ghost--1 img { animation: ecp-haunt 3.8s ease-in-out 2.8s infinite reverse; }
  .ecp-bb.is-live .ecp-ghost--3 img { animation: ecp-haunt 5.2s ease-in-out 3s infinite; }
  /* 6. name rises, phone lands and glows */
  .ecp-bb.is-live .ecp-name > span > span { animation: ecp-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .ecp-bb.is-live .ecp-name > span:nth-child(1) > span { animation-delay: 1.5s; }
  .ecp-bb.is-live .ecp-name > span:nth-child(2) > span { animation-delay: 1.62s; }
  .ecp-bb.is-live .ecp-name > span:nth-child(3) > span { animation-delay: 1.74s; }
  .ecp-bb.is-live .ecp-phone { animation: ecp-pop .6s cubic-bezier(.2, 1.5, .4, 1) 2.1s both; }
  .ecp-bb.is-live .ecp-phone::before { animation: ecp-glow 3s ease-in-out 3.2s infinite; }
  .ecp-bb.is-live .ecp-cta { animation: ecp-fade .6s ease 2.4s both; }
  /* drips */
  .ecp-bb.is-live .ecp-drop--a { animation: ecp-drip 3.4s ease-in 2.4s infinite; }
  .ecp-bb.is-live .ecp-drop--b { animation: ecp-drip 4.1s ease-in 3.3s infinite; }
  .ecp-bb.is-live .ecp-drop--c { animation: ecp-drip 3.7s ease-in 4.1s infinite; }

  /* pause loops when off-screen to save battery */
  .ecp-bb.is-paused * { animation-play-state: paused !important; }
}

@keyframes ecp-flicker {
  0%   { opacity: 0; }
  12%  { opacity: .55; }
  18%  { opacity: .08; }
  30%  { opacity: .8; }
  36%  { opacity: .25; }
  48%  { opacity: 1; }
  54%  { opacity: .6; }
  62%, 100% { opacity: 1; }
}
@keyframes ecp-zoom   { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ecp-ooze {
  0%   { opacity: 1; transform: translateY(-100%) scaleY(1.25); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes ecp-wobble {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.035); }
}
@keyframes ecp-splat {
  0%   { opacity: 0; transform: translateY(-40%) scale(1.35); }
  60%  { opacity: 1; transform: translateY(2%) scale(.96, 1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes ecp-charge {
  0%   { opacity: 0; transform: scale(1.18); }
  100% { opacity: 1; transform: none; }
}
@keyframes ecp-swoop-l {
  0%   { opacity: 0; transform: translate(-90%, 35%) rotate(-25deg) scale(.6); }
  100% { opacity: 1; transform: none; }
}
@keyframes ecp-swoop-r {
  0%   { opacity: 0; transform: translate(90%, -30%) rotate(25deg) scale(.6); }
  100% { opacity: 1; transform: none; }
}
@keyframes ecp-haunt {
  0%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
  25%      { transform: translate(3%, -6%) rotate(2deg); opacity: .8; }
  50%      { transform: translate(-2%, -10%) rotate(-1.5deg); opacity: 1; }
  75%      { transform: translate(-4%, -4%) rotate(1deg); opacity: .7; }
}
@keyframes ecp-rise {
  0%   { opacity: 0; transform: translateY(105%); }
  100% { opacity: 1; transform: none; }
}
@keyframes ecp-pop {
  0%   { opacity: 0; transform: scale(.5); }
  100% { opacity: 1; transform: none; }
}
@keyframes ecp-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes ecp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ecp-drip {
  0%   { opacity: 0; transform: translateY(0) scale(.3); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  22%  { opacity: 1; transform: translateY(0) scale(1, 1.2); }
  70%  { opacity: 1; transform: translateY(2400%) scale(.85, 1.25); }
  71%, 100% { opacity: 0; transform: translateY(2400%); }
}