/* Sunstorm Water live heroes (Claude, October 10 2026; batch C of the site wide motion plan).
 * Styles for the chip, gallery and topic cards that water-live.js builds, plus the
 * CSS only entrances for the Salt Delivery opening and the Fix My Water story column.
 * Cards sit in the hero copy column; nothing is placed over a photo.
 * Tokens follow the water hero visuals kit. Reduced motion renders everything still.
 */
:root{--wl-ink:#13243a;--wl-muted:#52657a;--wl-blue:#187fb5;--wl-sky:#eaf6ff;--wl-line:#d3e3ee;--wl-ease:cubic-bezier(.2,.7,.2,1);--wl-t:2600ms}

/* soft water light behind a live hero */
.wl-hero{position:relative;isolation:isolate}
.wl-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 60% at 82% 30%,rgba(38,186,230,.14),rgba(38,186,230,0) 70%),radial-gradient(30% 45% at 64% 80%,rgba(24,127,181,.09),rgba(24,127,181,0) 70%),radial-gradient(26% 40% at 96% 88%,rgba(255,195,76,.09),rgba(255,195,76,0) 70%);
  background-size:140% 140%;animation:wl-drift 18s ease-in-out infinite alternate}
@keyframes wl-drift{from{background-position:0% 0%}to{background-position:100% 60%}}


/* ---------- the card ---------- */
.wl-live{position:relative;z-index:2;box-sizing:border-box;width:min(100%,340px);margin:14px 0 0;padding:12px 14px 14px;border-radius:16px;
  background:rgba(255,255,255,.94);border:1px solid rgba(211,227,238,.9);box-shadow:0 10px 30px rgba(19,36,58,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--wl-ink);font-family:Montserrat,"Open Sans",Arial,sans-serif;text-align:left}
.wl-live *{box-sizing:border-box}
.wl-live.is-inline{margin:22px 0 0;width:min(100%,420px);box-shadow:0 6px 20px rgba(19,36,58,.08)}
.wl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.wl-k{font:700 11px/1.3 "Open Sans",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--wl-muted)}
.wl-ctl{flex:none;margin:0;padding:4px 9px;border:1px solid var(--wl-line);border-radius:999px;background:#fff;color:var(--wl-blue);font:700 11px/1.3 "Open Sans",Arial,sans-serif;cursor:pointer}
.wl-ctl:focus-visible,.wl-chip:focus-visible,.wl-dot:focus-visible{outline:3px solid #096caa;outline-offset:2px}
.wl-ctl[hidden]{display:none}

.wl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wl-chip{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 11px;border:1px solid var(--wl-line);border-radius:999px;background:#fff;color:var(--wl-ink);
  font:600 13px/1.25 Montserrat,"Open Sans",Arial,sans-serif;text-decoration:none;cursor:default;transition:background .35s var(--wl-ease),border-color .35s var(--wl-ease),color .35s var(--wl-ease),transform .35s var(--wl-ease)}
.wl-chip.is-link{cursor:pointer}
.wl-chip.is-link:hover{border-color:var(--wl-blue)}
.wl-chip.is-on{background:var(--wl-blue);border-color:var(--wl-blue);color:#fff;transform:translateY(-1px)}

/* the thin timing bar under the chips */
.wl-bar{display:block;height:3px;margin:10px 0 0;border-radius:999px;background:var(--wl-sky);overflow:hidden}
.wl-bar>i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--wl-blue),#26bae6)}
.wl-bar.is-run>i{animation:wl-fill var(--wl-t) linear forwards}
@keyframes wl-fill{from{width:0}to{width:100%}}
.wl-live.is-paused .wl-bar>i,.wl-live.is-paused .wl-slide,.wl-hero:has(.wl-live.is-paused)::before{animation-play-state:paused!important}

/* ---------- Our Work gallery ---------- */
.wl-gallery-fig{position:relative}
.wl-gallery-fig>img.wl-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--wl-ease)}
.wl-gallery-fig>img.wl-slide:first-of-type{position:relative;inset:auto;height:auto}
.wl-gallery-fig>img.wl-slide.is-on{opacity:1}
.wl-cap{margin:0 0 10px;font:600 13px/1.35 Montserrat,"Open Sans",Arial,sans-serif;color:var(--wl-ink);min-height:1.35em}
.wl-dotrow{display:flex;flex-wrap:wrap;gap:8px}
.wl-dot{width:12px;height:12px;margin:0;padding:0;border:2px solid var(--wl-blue);border-radius:50%;background:#fff;cursor:pointer;transition:background .3s,transform .3s}
.wl-dot.is-on{background:var(--wl-blue);transform:scale(1.15)}

/* ---------- Water library topic card ---------- */
.wl-topic{width:100%;max-width:320px;margin:0;padding:16px 16px 14px}
.wl-stack{position:relative;height:118px;margin:2px 0 12px}
.wl-stack img{position:absolute;top:0;width:150px;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:12px;border:1px solid var(--wl-line);background:#fff;box-shadow:0 6px 18px rgba(19,36,58,.12);transition:transform .6s var(--wl-ease),opacity .6s var(--wl-ease)}
.wl-stack img:nth-child(1){left:0;z-index:3}
.wl-stack img:nth-child(2){left:62px;top:14px;z-index:2;transform:rotate(3deg)}
.wl-stack img:nth-child(3){left:124px;top:30px;z-index:1;transform:rotate(6deg)}
.wl-stack img[hidden]{display:none}
.wl-stack.is-swap img{animation:wl-pop .6s var(--wl-ease) both}
.wl-stack.is-swap img:nth-child(2){animation-delay:.08s}
.wl-stack.is-swap img:nth-child(3){animation-delay:.16s}
@keyframes wl-pop{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.wl-topic-name{margin:0;font:700 18px/1.2 Montserrat,"Open Sans",Arial,sans-serif;color:var(--wl-ink)}
.wl-topic-count{margin:2px 0 10px;font:600 13px/1.3 "Open Sans",Arial,sans-serif;color:var(--wl-muted)}
@media (min-width:981px){
  .wl-lib .shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:clamp(28px,4vw,64px);align-items:center}
  .wl-lib .shell>*{grid-column:1}
  .wl-lib .shell>.wl-topic{grid-column:2;grid-row:1 / span 6;align-self:center;justify-self:end}
}
@media (max-width:980px){.wl-lib .shell>.wl-topic{margin-top:18px}}

/* ---------- CSS only entrances ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Salt Delivery opening */
  .intro.wrap:has(.salt-icon)>div>*{animation:wl-up .7s var(--wl-ease) both}
  .intro.wrap:has(.salt-icon)>div>:nth-child(2){animation-delay:.1s}
  .intro.wrap:has(.salt-icon)>div>:nth-child(3){animation-delay:.18s}
  .intro.wrap:has(.salt-icon)>div>:nth-child(4){animation-delay:.26s}
  .intro.wrap:has(.salt-icon)>.intro-note{animation:wl-up .8s var(--wl-ease) .32s both}
  .intro.wrap .salt-icon{animation:wl-carry 3.2s ease-in-out .9s infinite}
  /* Fix My Water story column (its photo already has the page motion wipe) */
  .campaign-hero .campaign-story>:not(figure){animation:wl-up .7s var(--wl-ease) both}
  .campaign-hero .campaign-story>:nth-child(2){animation-delay:.1s}
  .campaign-hero .campaign-story>:nth-child(3){animation-delay:.18s}
  .campaign-hero .campaign-story>:nth-child(5){animation-delay:.4s}
  .wl-live{animation:wl-up .7s var(--wl-ease) .5s both}
}
@keyframes wl-up{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes wl-carry{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:-2deg}}

@media (prefers-reduced-motion:reduce){
  .wl-hero::before,.wl-bar>i,.wl-stack.is-swap img,.wl-live{animation:none!important}
  .wl-bar{display:none}
  .wl-gallery-fig>img.wl-slide,.wl-chip,.wl-dot,.wl-stack img{transition:none}
}

/* phones */
@media (max-width:760px){
  .wl-live{width:100%;max-width:none}
  /* on phones the library's own topic chips sit right above, so the topic card steps aside */
  .wl-lib .shell>.wl-topic{display:none}
}