.splash-toolbar {
  position: absolute;
  z-index: 3;
  top: 25px;
  inset-inline: var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.splash-toolbar > .splash-picker {
  flex: none;
  pointer-events: auto;
}
.weather-badge {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 13px;
  border: 1px solid #d8b773a8;
  border-radius: 30px;
  background: #061e32ed;
  color: #fffaf0;
  font-size: 13px;
  font-weight: 500;
  pointer-events: auto;
}
.weather-badge:hover { background: #133650; border-color: #efcf88; }
.weather-badge-icon, .weather-badge-arrow { flex: none; color: #efcf88; font-size: 16px; }
.weather-badge-reading { max-width: 25ch; line-height: 1.2; overflow-wrap: anywhere; }
.weather-badge-temperature { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.weather-badge-temperature::after {
  content: "·";
  margin-inline: 5px 2px;
  color: #efcf88;
}

.hero-weather { background: #071a2b; }
.hero-weather .hero-copy {
  width: min(100%, 690px);
  padding-top: 76px;
  padding-bottom: 90px;
}
.hero-weather h2 {
  max-width: 16ch;
  margin: 0;
  color: inherit;
  font-size: clamp(56px, 6.8vw, 100px);
  line-height: .96;
}
.hero-weather .gold-rule { margin: 22px 0 18px; }
.hero-weather .hero-description { max-width: 38ch; margin-bottom: 24px; }
.weather-area { margin: 0 0 10px; color: #f1d399; font-size: 14px; }
.weather-safety {
  margin: -5px 0 24px;
  max-width: 44ch;
  font-size: 14px;
  color: #f6e9d0;
}
.weather-safety strong { color: #efcf88; }
.hero-weather .weather-service-button {
  border-color: #e7cb95;
  background: #071e34bd;
  color: #fffaf0;
  white-space: normal;
}
.hero-weather .weather-service-button:hover { background: #163952; }

.weather-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse at 72% 33%, #173753, #071a2b 69%);
}
.weather-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #071a2b 15%, #071a2bf2 28%, #071a2b85 44%, transparent 66%),
    linear-gradient(0deg, #071a2bc9, transparent 32%);
}
.weather-stage {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 817 / 726;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 17%);
}
/* Frame the clean bridge portion of the approved artwork. The overlay uses
   this same coordinate system so its wheels track the deck at every width. */
.weather-skyline {
  position: absolute;
  left: -104.65%;
  top: -29.61%;
  width: 204.65%;
  height: 129.61%;
  max-width: none;
}
.weather-skyline:not([src]), .weather-vehicle img:not([src]) { visibility: hidden; }

.weather-vehicle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  animation-duration: 22s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
}
.weather-vehicle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -96%) rotate(-9deg);
  transform-origin: 50% 100%;
  filter: brightness(.87) saturate(.89) drop-shadow(0 2px 2px #07131ac9);
}
.weather-west img {
  width: 11.8%;
  transform: translate(-50%, -96%) rotate(-11deg);
  filter: brightness(.81) saturate(.84) drop-shadow(0 2px 2px #07131ac9);
}
.hero-weather[data-weather="cold"] .weather-vehicle img {
  filter: brightness(.95) saturate(.88) drop-shadow(0 2px 2px #14253ab3);
}
.weather-east { animation-name: weather-cross-east; }
.weather-west { animation-name: weather-cross-west; }

@keyframes weather-cross-east {
  0% { transform: translate(-11%, 54%); }
  42%, 100% { transform: translate(111%, 28.2%); }
}
@keyframes weather-cross-west {
  0%, 51% { transform: translate(111%, 27.1%); }
  93%, 100% { transform: translate(-11%, 52.9%); }
}

.weather-precipitation {
  position: absolute;
  inset: 0 0 26% 30%;
  pointer-events: none;
  opacity: 0;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #0009 60%, transparent);
  animation-play-state: paused;
}
.hero-weather:is([data-weather="rain"], [data-weather="flood"], [data-weather="tropical"]) .weather-precipitation {
  opacity: .24;
  background-image:
    repeating-linear-gradient(110deg, transparent 0 46px, #a6c8e58c 47px, transparent 48px 100px),
    repeating-linear-gradient(110deg, transparent 0 101px, #d3e6f29c 102px, transparent 103px 151px);
  background-size: 170px 188px, 241px 216px;
  animation-name: weather-rain;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.hero-weather[data-weather="tropical"] .weather-precipitation {
  opacity: .38;
  animation-duration: .6s;
}
.hero-weather[data-weather="snow"] .weather-precipitation {
  opacity: .56;
  background-image:
    radial-gradient(circle at 34px 29px, #e5f3ff 0 1px, transparent 2px),
    radial-gradient(circle at 17px 57px, #e5f3ff 0 1.2px, transparent 2.2px);
  background-size: 71px 94px, 117px 146px;
  animation-name: weather-snow;
  animation-timing-function: linear;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}
.home-splashes.is-weather-current:not(.is-motion-paused) :is(.weather-vehicle, .weather-precipitation) {
  animation-play-state: running;
}
@keyframes weather-rain {
  to { background-position: -170px 188px, -241px 216px; }
}
@keyframes weather-snow {
  to { background-position: -71px 94px, -117px 146px; }
}

@media (max-width: 720px) {
  .splash-toolbar { top: 19px; inset-inline: 24px 16px; }
  .weather-badge { padding-inline: 9px; font-size: 11px; }
  .weather-badge-icon, .weather-badge-arrow { font-size: 14px; }
  .hero-weather .hero-copy {
    padding: clamp(155px, 25svh, 245px) 24px 86px;
  }
  .hero-weather h2 { font-size: clamp(44px, 10vw, 70px); }
  .hero-weather .gold-rule { margin: 16px 0 13px; }
  .hero-weather .hero-description { font-size: 17px; margin-bottom: 17px; }
  .weather-safety { margin-bottom: 18px; }
  .weather-stage { width: min(100%, 560px); height: auto; mask-image: none; }
  .weather-art::after {
    background: linear-gradient(180deg, transparent 12%, #071a2b28 23%, #071a2bde 52%, #071a2b 70%);
  }
}
@media (max-width: 420px) {
  .splash-toolbar { inset-inline: 16px; }
  .weather-badge { gap: 6px; }
  .weather-badge-temperature { display: block; }
  .weather-badge-temperature::after { content: none; }
}
@media (max-width: 360px) {
  .weather-badge-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .weather-east { transform: translate(72%, 36%); }
  .weather-west, .weather-precipitation { display: none; }
}