/* Hot Tub Shine — South Sound spa weather */
.weather-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5.2rem, 8vw, 8.4rem);
  color: #edf9ff;
  background:
    linear-gradient(112deg, rgba(2, 10, 22, .97), rgba(4, 30, 55, .9) 48%, rgba(7, 52, 78, .84)),
    url('/assets/img/ambient/nightlake-2200.jpg') center 58% / cover no-repeat;
}
.weather-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35% -10%;
  background:
    radial-gradient(ellipse at 79% 37%, rgba(77, 215, 246, .23), transparent 26%),
    radial-gradient(ellipse at 18% 64%, rgba(38, 123, 214, .24), transparent 31%);
  filter: blur(18px);
  animation: weather-aurora 12s ease-in-out infinite alternate;
}
.weather-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -10% -80px;
  height: 42%;
  opacity: .42;
  background: repeating-radial-gradient(ellipse at 50% 100%, rgba(103, 224, 255, .18) 0 1px, transparent 2px 31px);
  transform: perspective(380px) rotateX(58deg) scale(1.18);
  transform-origin: bottom;
}
@keyframes weather-aurora {
  to { transform: translate3d(-2.5%, 3%, 0) scale(1.06); filter: blur(25px) hue-rotate(8deg); }
}
.weather-stage__layout {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.72fr);
  gap: clamp(2.2rem, 5vw, 5.8rem);
  align-items: center;
}
.weather-stage__copy { position: relative; z-index: 2; }
.weather-stage__kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.2rem;
  color: #8ce7fb;
  font: 700 .76rem/1 Outfit, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.weather-stage__kicker::before {
  content: "";
  width: 9px;
  height: 13px;
  border-radius: 65% 35% 64% 36% / 70% 40% 60% 30%;
  rotate: 42deg;
  background: linear-gradient(145deg, #eefeff, #4bd8f5 64%, #247fd6);
  box-shadow: 0 0 17px rgba(100, 229, 255, .78);
}
.weather-stage h2 {
  max-width: 8ch;
  margin-bottom: 1.15rem;
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 520;
  letter-spacing: -.045em;
}
.weather-stage h2 em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(95deg, #72ddf6, #fff 44%, #b9edf8 72%, #6dbce9);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 19px rgba(94, 218, 245, .22));
}
.weather-stage__intro { max-width: 35ch; color: #b9d2e3; font-size: 1.02rem; }
.weather-stage__location {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 1.65rem 0 0;
  color: #e9faff;
  font: 650 .88rem/1.4 Outfit, sans-serif;
}
.weather-stage__location i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ce0f8;
  box-shadow: 0 0 0 5px rgba(92, 224, 248, .12), 0 0 18px rgba(92, 224, 248, .75);
}
.weather-stage__forecast { min-width: 0; }
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.2rem);
  min-height: 376px;
}
.forecast-card {
  --card-light: 100, 222, 247;
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.15rem, 2vw, 1.55rem);
  border: 1px solid rgba(166, 231, 245, .18);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.025) 46%),
    rgba(4, 19, 36, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 25px 60px rgba(0, 6, 17, .29);
  backdrop-filter: blur(17px) saturate(1.2);
  -webkit-backdrop-filter: blur(17px) saturate(1.2);
  transform: translateY(20px);
  opacity: 0;
}
.weather-stage.is-ready .forecast-card {
  animation: forecast-card-in .72s calc(var(--forecast-index) * 90ms) cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes forecast-card-in { to { opacity: 1; transform: translateY(0); } }
.forecast-card::before {
  content: "";
  position: absolute;
  inset: -28% -38% auto;
  height: 55%;
  background: radial-gradient(ellipse, rgba(var(--card-light), .22), transparent 67%);
  pointer-events: none;
}
.forecast-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.09) 43%, transparent 59%);
  translate: -130% 0;
  pointer-events: none;
}
.forecast-card:hover::after { animation: forecast-sheen .9s ease-out; }
@keyframes forecast-sheen { to { translate: 130% 0; } }
.forecast-card.is-rain { --card-light: 62, 155, 235; }
.forecast-card.is-storm { --card-light: 130, 112, 244; }
.forecast-card.is-sun { --card-light: 255, 196, 105; }
.forecast-card.is-snow { --card-light: 204, 242, 255; }
.forecast-card__top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.forecast-card__day { margin: 0; color: #fff; font: 680 1rem/1 Outfit, sans-serif; letter-spacing: .01em; }
.forecast-card time { color: #90afc3; font: 600 .72rem/1 Outfit, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.forecast-card__visual { display: grid; place-items: center; height: 118px; }
.weather-glyph { position: relative; display: block; width: 94px; height: 70px; filter: drop-shadow(0 15px 16px rgba(0, 8, 20, .34)); }
.weather-glyph i { position: absolute; display: block; }
.weather-glyph__sun {
  width: 43px; height: 43px; left: 38px; top: 2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7cf, #ffc66c 48%, #f38d4a);
  box-shadow: 0 0 26px rgba(255, 189, 88, .52);
}
.weather-glyph__cloud {
  width: 76px; height: 30px; left: 5px; top: 33px; border-radius: 25px;
  background: linear-gradient(160deg, #f5fdff, #9fc8d9 72%);
  box-shadow: inset -9px -6px 12px rgba(31, 94, 126, .18);
}
.weather-glyph__cloud::before,
.weather-glyph__cloud::after { content: ""; position: absolute; bottom: 12px; border-radius: 50%; background: inherit; }
.weather-glyph__cloud::before { width: 39px; height: 39px; left: 13px; }
.weather-glyph__cloud::after { width: 27px; height: 27px; right: 7px; }
.weather-glyph__rain { left: 22px; top: 64px; width: 5px; height: 12px; border-radius: 4px; rotate: 18deg; background: #58dcfa; box-shadow: 19px 3px #58dcfa, 38px 0 #58dcfa; opacity: 0; }
.weather-glyph__flash { left: 44px; top: 57px; width: 12px; height: 22px; background: #ffe27c; clip-path: polygon(50% 0, 100% 0, 64% 42%, 95% 42%, 24% 100%, 42% 54%, 11% 54%); opacity: 0; }
.weather-glyph__snow { left: 22px; top: 66px; width: 6px; height: 6px; border-radius: 50%; background: #e8fbff; box-shadow: 19px 2px #e8fbff, 38px -1px #e8fbff; opacity: 0; }
.weather-glyph.is-rain .weather-glyph__rain { opacity: 1; animation: forecast-rain .9s linear infinite; }
.weather-glyph.is-storm .weather-glyph__rain,
.weather-glyph.is-storm .weather-glyph__flash { opacity: 1; }
.weather-glyph.is-storm .weather-glyph__flash { animation: forecast-flash 2.8s steps(1) infinite; }
.weather-glyph.is-snow .weather-glyph__snow { opacity: 1; animation: forecast-snow 1.8s ease-in-out infinite alternate; }
.weather-glyph.is-cloud .weather-glyph__sun,
.weather-glyph.is-rain .weather-glyph__sun,
.weather-glyph.is-storm .weather-glyph__sun,
.weather-glyph.is-snow .weather-glyph__sun { opacity: .2; filter: saturate(.35); }
.weather-glyph.is-sun .weather-glyph__cloud { opacity: .72; transform: translate(-8px, 4px) scale(.78); }
@keyframes forecast-rain { to { translate: -3px 8px; opacity: 0; } }
@keyframes forecast-flash { 0%, 89%, 94%, 100% { opacity: 0; } 90%, 93% { opacity: 1; } }
@keyframes forecast-snow { to { translate: 4px 5px; } }
.forecast-card__temperature { display: flex; align-items: baseline; gap: .55rem; margin: 0; }
.forecast-card__temperature strong { color: #fff; font: 520 clamp(2.6rem, 4vw, 3.55rem)/.92 Outfit, sans-serif; letter-spacing: -.055em; }
.forecast-card__temperature span { color: #9eb7c8; font: 540 1.2rem/1 Outfit, sans-serif; }
.forecast-card__condition { min-height: 2.7em; margin: .65rem 0 .9rem; color: #d9eff8; font: 620 .9rem/1.35 Outfit, sans-serif; }
.forecast-card__detail { display: grid; gap: .42rem; padding-top: .9rem; border-top: 1px solid rgba(178, 231, 242, .13); color: #8faec1; font-size: .74rem; line-height: 1.4; }
.forecast-card__detail b { color: #8ee6f8; font-weight: 700; }
.weather-stage__meta { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem .25rem 0; color: #82a0b6; font-size: .72rem; }
.weather-stage__meta p { margin: 0; }
.weather-stage__meta span + span::before { content: " · "; }
.weather-retry {
  margin-top: 1.25rem; padding: .72rem 1.1rem; color: #eafaff; font: 650 .84rem/1 Outfit, sans-serif;
  border: 1px solid rgba(128, 223, 244, .35); border-radius: 999px; background: rgba(10, 55, 83, .45); cursor: pointer;
}
.weather-retry:hover { border-color: rgba(128, 223, 244, .75); background: rgba(13, 77, 112, .55); }
.weather-stage.has-error .forecast-grid { min-height: 0; }
.weather-stage.has-error .forecast-card { display: none; }
.weather-stage.is-loading .forecast-card { opacity: 1; transform: none; }
.weather-stage.is-loading .forecast-card > * { opacity: 0; }
.weather-stage.is-loading .forecast-card::before { inset: 0; height: 100%; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 45%, transparent 70%); animation: weather-skeleton 1.5s ease-in-out infinite; }
@keyframes weather-skeleton { from { translate: -100% 0; } to { translate: 100% 0; } }
@media (max-width: 880px) {
  .weather-stage__layout { grid-template-columns: 1fr; gap: 2.3rem; }
  .weather-stage h2 { max-width: 12ch; }
  .weather-stage__intro { max-width: 55ch; }
}
@media (max-width: 620px) {
  .weather-stage { padding-block: 4.8rem; }
  .forecast-grid { grid-template-columns: 1fr; min-height: 0; }
  .forecast-card { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; min-height: 210px; border-radius: 24px; }
  .forecast-card__top, .forecast-card__temperature, .forecast-card__condition, .forecast-card__detail { grid-column: 1; }
  .forecast-card__visual { grid-column: 2; grid-row: 1 / span 4; width: 92px; height: 100%; }
  .forecast-card__condition { min-height: 0; }
  .weather-stage__meta { flex-direction: column; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .weather-stage::before, .forecast-card, .weather-glyph i, .weather-stage.is-ready .forecast-card { animation: none !important; }
  .forecast-card { opacity: 1; transform: none; }
}