/* North Snow Removal – additions (2026-10-03)
   1) Snow alert under the hero buttons (shows only when the forecast has snow)
   2) Before/after slider demo
   To remove: delete the two nsr-additions lines from index.html. */

.nsr-snow-alert {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 12px 16px;
  border: 1px solid rgba(255, 178, 56, .45); border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 178, 56, .14), rgba(255, 178, 56, .04));
  color: var(--text, #f4f8fc); font-size: .93rem; font-weight: 600; max-width: 640px;
  text-decoration: none;
  animation: nsr-alert-in .7s cubic-bezier(.2, .7, .2, 1) both;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1);
}
a.nsr-snow-alert:hover { border-color: var(--amber, #ffb238); transform: translateX(3px); }
.nsr-snow-alert b { color: var(--amber, #ffb238); }
.nsr-snow-alert i {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--amber, #ffb238);
  animation: nsr-alert-ping 1.8s ease-out infinite;
}
.hero-copy .nsr-snow-alert + .trust-row { margin-top: 22px; }
@keyframes nsr-alert-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes nsr-alert-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 56, .6); } 100% { box-shadow: 0 0 0 11px rgba(255, 178, 56, 0); } }

/* Calm variant: shown when the forecast has no snow */
.nsr-snow-alert.is-clear { border-color: rgba(143, 227, 255, .38); background: linear-gradient(90deg, rgba(143, 227, 255, .12), rgba(143, 227, 255, .03)); }
.nsr-snow-alert.is-clear b { color: var(--ice, #8fe3ff); }
.nsr-snow-alert.is-clear i { background: var(--ice, #8fe3ff); animation-name: nsr-alert-ping-ice; }
@keyframes nsr-alert-ping-ice { 0% { box-shadow: 0 0 0 0 rgba(143, 227, 255, .55); } 100% { box-shadow: 0 0 0 11px rgba(143, 227, 255, 0); } }

.compare { transition: border-color .3s ease; }
.compare:hover { border-color: rgba(143, 227, 255, .4); }
.compare-handle { transition: box-shadow .3s ease; }
.compare:hover .compare-handle { box-shadow: 0 0 0 8px rgba(255, 255, 255, .18), 0 8px 28px rgba(0, 0, 0, .32); }

@media (prefers-reduced-motion: reduce) {
  .nsr-snow-alert, .nsr-snow-alert i { animation: none; }
}

/* ====================================================================
   v3 – Forecast section + scroll animations
   ==================================================================== */

/* ---------- Forecast cards ---------- */
.forecast-grid .fday {
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, background-color .3s ease, box-shadow .35s ease;
  animation: nsr-card-up .7s cubic-bezier(.2, .7, .2, 1) both;
}
.forecast-grid .fday:nth-child(2) { animation-delay: .07s; }
.forecast-grid .fday:nth-child(3) { animation-delay: .14s; }
.forecast-grid .fday:nth-child(4) { animation-delay: .21s; }
.forecast-grid .fday:nth-child(5) { animation-delay: .28s; }
.forecast-grid .fday:nth-child(6) { animation-delay: .35s; }
.forecast-grid .fday:nth-child(7) { animation-delay: .42s; }
@keyframes nsr-card-up { from { opacity: 0; transform: translateY(22px); } }
.forecast-grid .fday::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), rgba(143, 227, 255, .18), transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.forecast-grid .fday:hover { transform: translateY(-6px); border-color: rgba(143, 227, 255, .5); box-shadow: 0 22px 50px -26px rgba(0, 0, 0, .9); }
.forecast-grid .fday:hover::after { opacity: 1; }
.forecast-grid .fday .icon { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.forecast-grid .fday:hover .icon { transform: translateY(-3px) scale(1.15); }

/* Today */
.forecast-grid .fday.nsr-today { border-color: rgba(143, 227, 255, .45); background: linear-gradient(180deg, rgba(143, 227, 255, .1), rgba(143, 227, 255, .02)); }
.forecast-grid .fday.nsr-today .dow { color: var(--ice, #8fe3ff); }

/* Snow day */
.forecast-grid .fday.nsr-snowday { border-color: rgba(255, 178, 56, .55); background: linear-gradient(180deg, rgba(255, 178, 56, .1), rgba(255, 178, 56, .02)); }
.forecast-grid .fday.nsr-snowday .snow { color: var(--amber, #ffb238); font-size: .86rem; font-weight: 800; }
.forecast-grid .fday .bar { transform-origin: bottom; animation: nsr-bar-grow 1s cubic-bezier(.2, .7, .2, 1) .45s both; }
@keyframes nsr-bar-grow { from { transform: scaleY(0); } }

/* Temperature range: replaces the empty snow bar on days without snow */
.fday.nsr-dry .bar-wrap, .fday.nsr-dry .snow { display: none; }
.nsr-trange {
  position: relative; flex: 1; width: 8px; min-height: 70px; margin: 14px 0 12px;
  border-radius: 99px; background: rgba(255, 255, 255, .07);
}
.nsr-trange span {
  position: absolute; left: 0; right: 0; bottom: var(--lo, 0%); height: var(--len, 40%); min-height: 10px;
  border-radius: 99px; background: linear-gradient(180deg, #ffb238, #8fe3ff);
  transform-origin: bottom; animation: nsr-bar-grow 1.1s cubic-bezier(.2, .7, .2, 1) .5s both;
  box-shadow: 0 0 14px rgba(143, 227, 255, .35);
}
.fday .temp { font-variant-numeric: tabular-nums; }

/* Stats row above the cards */
.forecast-stats > div { transition: background-color .3s ease; position: relative; }
.forecast-stats > div:hover { background: var(--panel, #122641); }
.forecast-stats b { font-variant-numeric: tabular-nums; }

/* ---------- Scroll animations ---------- */
.site-header { transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.nsr-scrolled { background: rgba(9, 20, 38, .95); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.nsr-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, #ffb238, #ffd58a);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

.motion-ready .reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .2s; }
.motion-ready .reveal.in .eyebrow::before { transform: scaleX(1); }

.motion-ready .reveal.in.cards > *,
.motion-ready .reveal.in.pricing > *,
.motion-ready .reveal.in.process-grid > *,
.motion-ready .reveal.in.forecast-stats > *,
.motion-ready .reveal.in .benefit-item,
.motion-ready .reveal.in .feature,
.motion-ready .reveal.in .faq-item {
  animation: nsr-card-up .75s cubic-bezier(.2, .7, .2, 1) both;
}
.motion-ready .reveal.in > :nth-child(2), .motion-ready .reveal.in .benefit-item:nth-child(2), .motion-ready .reveal.in .feature:nth-child(2), .motion-ready .reveal.in .faq-item:nth-child(2) { animation-delay: .09s; }
.motion-ready .reveal.in > :nth-child(3), .motion-ready .reveal.in .benefit-item:nth-child(3), .motion-ready .reveal.in .feature:nth-child(3), .motion-ready .reveal.in .faq-item:nth-child(3) { animation-delay: .18s; }
.motion-ready .reveal.in > :nth-child(4), .motion-ready .reveal.in .benefit-item:nth-child(4), .motion-ready .reveal.in .faq-item:nth-child(4) { animation-delay: .27s; }
.motion-ready .reveal.in .benefit-item:nth-child(5), .motion-ready .reveal.in .faq-item:nth-child(5) { animation-delay: .36s; }
.motion-ready .reveal.in .benefit-item:nth-child(6), .motion-ready .reveal.in .faq-item:nth-child(6) { animation-delay: .45s; }
.motion-ready .reveal.in .benefit-item:nth-child(7) { animation-delay: .54s; }
.motion-ready .reveal.in .benefit-item:nth-child(8) { animation-delay: .63s; }

@media (min-width: 901px) {
  .process-grid { position: relative; }
  .process-grid::before {
    content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, #ffb238, #8fe3ff);
    transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1) .25s;
  }
  .process-grid.in::before { transform: scaleX(1); }
}
.process-step span { transition: color .5s ease; }
.process-grid.in .process-step span { color: rgba(143, 227, 255, .9); }
.process-grid.in .process-step:nth-child(1) span { transition-delay: .3s; }
.process-grid.in .process-step:nth-child(2) span { transition-delay: .7s; }
.process-grid.in .process-step:nth-child(3) span { transition-delay: 1.1s; }
.process-grid.in .process-step:nth-child(4) span { transition-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .forecast-grid .fday, .forecast-grid .fday .bar, .nsr-trange span,
  .motion-ready .reveal.in.cards > *, .motion-ready .reveal.in.pricing > *, .motion-ready .reveal.in.process-grid > *,
  .motion-ready .reveal.in.forecast-stats > *, .motion-ready .reveal.in .benefit-item, .motion-ready .reveal.in .feature,
  .motion-ready .reveal.in .faq-item { animation: none; }
  .motion-ready .reveal .eyebrow::before { transform: none; }
  .process-grid::before { transform: scaleX(1); transition: none; }
}

/* v4 – snow thrown off the plow (canvas drawn by nsr-additions.js) */
.nsr-plow-snow { position: absolute; pointer-events: none; z-index: 3; }

/* ====================================================================
   v10 – forecast as a 7-day list: one shared temperature scale
   ==================================================================== */
.forecast-stats { border-radius: 16px; overflow: hidden; }
.forecast-grid.nsr-rows { display: block; overflow: visible; padding-bottom: 0; }
.forecast-grid.nsr-rows > .fday { display: none; }
.nsr-list {
  border: 1px solid var(--line, rgba(143, 227, 255, .16)); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
}
.nsr-lhead, .nsr-row {
  display: grid; align-items: center; column-gap: 16px; padding: 0 12px 0 26px;
  grid-template-columns: 124px 36px 128px minmax(0, 1fr);
}
.nsr-lhead {
  height: 44px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, #9db2c9); border-bottom: 1px solid var(--line, rgba(143, 227, 255, .16)); background: rgba(255, 255, 255, .025);
}
.nsr-axis, .nsr-chart { align-self: stretch; }
.nsr-in { position: relative; display: block; height: 100%; margin: 0 58px; }
.nsr-axis i {
  position: absolute; top: 50%; transform: translate(-50%, -50%); font-style: normal; white-space: nowrap;
  letter-spacing: .04em; font-variant-numeric: tabular-nums; opacity: .8;
}
.nsr-axis i.is-zero { color: var(--ice, #8fe3ff); opacity: 1; }
.nsr-row {
  position: relative; min-height: 58px; border-top: 1px solid rgba(143, 227, 255, .09);
  transition: background-color .25s ease;
  opacity: 0; transform: translateY(14px);
}
.nsr-lhead + .nsr-row { border-top: 0; }
.nsr-go .nsr-row { animation: nsr-row-in .6s cubic-bezier(.2, .7, .2, 1) calc(var(--n) * 70ms) forwards; }
@keyframes nsr-row-in { to { opacity: 1; transform: none; } }
.nsr-row:hover { background-color: rgba(143, 227, 255, .055); }
.nsr-row.is-today { background-color: rgba(143, 227, 255, .07); }
.nsr-row.is-today::before, .nsr-row.is-snow::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ice, #8fe3ff); }
.nsr-row.is-snow::before { background: var(--amber, #ffb238); }
.nsr-row.is-snow { background-image: linear-gradient(90deg, rgba(255, 178, 56, .1), rgba(255, 178, 56, 0) 46%); }

.nsr-day b { display: block; font-size: 1rem; font-weight: 800; line-height: 1.2; }
.nsr-row.is-today .nsr-day b { color: var(--ice, #8fe3ff); }
.nsr-day small { display: block; font-size: .74rem; color: var(--muted, #9db2c9); }
.nsr-ic { font-size: 1.45rem; line-height: 1; text-align: center; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.nsr-row:hover .nsr-ic { transform: scale(1.18) rotate(-6deg); }
.nsr-sn { font-size: .88rem; }
.nsr-sn em { font-style: normal; color: var(--muted, #9db2c9); opacity: .45; }
.nsr-sn b { display: block; color: var(--amber, #ffb238); font-weight: 800; font-variant-numeric: tabular-nums; }
.nsr-sn i { display: block; height: 4px; margin-top: 5px; border-radius: 99px; background: rgba(255, 178, 56, .16); overflow: hidden; }
.nsr-sn u { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb238, #fff); transform: scaleX(0); transform-origin: left; }
.nsr-go .nsr-sn u { animation: nsr-grow-x 1s cubic-bezier(.2, .7, .2, 1) calc(var(--n) * 70ms + .4s) forwards; }

.nsr-g { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(255, 255, 255, .055); }
.nsr-g.is-zero { border-left: 1px dashed rgba(143, 227, 255, .5); }
.nsr-track { position: absolute; left: -10px; right: -10px; top: 50%; height: 8px; margin-top: -4px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.nsr-cap {
  position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 99px; overflow: hidden;
  transform: scaleX(0); transform-origin: left; transition: height .25s ease, margin-top .25s ease, box-shadow .25s ease;
}
.nsr-cap > span { position: absolute; top: 0; bottom: 0; }
.nsr-go .nsr-cap { animation: nsr-grow-x 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--n) * 70ms + .25s) forwards; }
@keyframes nsr-grow-x { to { transform: scaleX(1); } }
.nsr-cap::after {                                             /* light sweeping along the bar */
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: nsr-sheen 4.5s ease-in-out calc(var(--n) * .35s + 2s) infinite;
}
@keyframes nsr-sheen { 0% { left: -40%; } 35%, 100% { left: 110%; } }
.nsr-row:hover .nsr-cap { height: 12px; margin-top: -6px; box-shadow: 0 0 18px rgba(143, 227, 255, .45); }
.nsr-t {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: .95rem; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; opacity: 0;
}
.nsr-go .nsr-t { opacity: 1; transition: opacity .5s ease calc(var(--n) * 70ms + .5s); }
.nsr-lo { padding-right: 10px; font-weight: 700; color: var(--muted, #9db2c9); }
.nsr-hi { padding-left: 10px; font-weight: 800; color: var(--text, #f4f8fc); }
.nsr-row.is-today .nsr-lo { padding-right: 18px; }
.nsr-now {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; border: 3px solid #0b1a30; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
  opacity: 0; animation: nsr-now 2s ease-out infinite;
}
.nsr-go .nsr-now { opacity: 1; transition: opacity .4s ease 1.3s, left .6s ease; }
@keyframes nsr-now { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }

@media (max-width: 760px) {
  .nsr-lhead, .nsr-row { grid-template-columns: 70px 28px minmax(0, 1fr); column-gap: 8px; padding: 0 4px 0 14px; }
  .nsr-lhead span:nth-child(3) { display: none; }
  .nsr-row { min-height: 62px; }
  .nsr-in { margin: 0 40px; }
  .nsr-chart { grid-column: 3; grid-row: 1 / span 2; }
  .nsr-sn { grid-column: 1 / 3; grid-row: 2; font-size: .74rem; margin: -10px 0 8px; }
  .nsr-row:not(.is-snow) .nsr-sn { display: none; }
  .nsr-sn i { display: none; }
  .nsr-day b { font-size: .92rem; }
  .nsr-t { font-size: .84rem; }
  .nsr-lo { padding-right: 7px; } .nsr-hi { padding-left: 7px; }
  .nsr-row.is-today .nsr-lo { padding-right: 16px; }
  .nsr-axis i { font-size: .6rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nsr-row { opacity: 1; transform: none; animation: none !important; }
  .nsr-cap, .nsr-sn u { transform: none; animation: none !important; }
  .nsr-cap::after, .nsr-now { animation: none; }
  .nsr-now, .nsr-t { opacity: 1; }
}

/* ====================================================================
   v12 – high / low written next to the weather icon, labels kept on the bars
   ==================================================================== */
.nsr-lhead, .nsr-row { grid-template-columns: 124px 132px 124px minmax(0, 1fr); }
.nsr-wx { display: flex; align-items: center; gap: 10px; }
.nsr-wx .nsr-ic { flex: none; width: 34px; }
.nsr-wt { font-size: .88rem; color: var(--muted, #9db2c9); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nsr-wt b { color: var(--text, #f4f8fc); font-weight: 800; font-size: 1rem; }
@media (max-width: 760px) {
  .nsr-lhead, .nsr-row { grid-template-columns: 60px 68px minmax(0, 1fr); column-gap: 6px; }
  .nsr-lhead { letter-spacing: .06em; }
  .nsr-row { min-height: 70px; }
  .nsr-in { margin: 0 34px 0 40px; }
  .nsr-wx { flex-direction: column; gap: 3px; }
  .nsr-wx .nsr-ic { width: auto; font-size: 1.3rem; }
  .nsr-wt { font-size: .7rem; }
  .nsr-wt b { font-size: .78rem; }
}