/*
  WEATHER DEMO (projects/2026/live-weather-api.md, js/weather.js)
  The weather panel, the request/response inspector, the icon gallery, and the icons' motion.
  The icons (_includes/partials/weather-icon.njk) always sit on navy, whatever the theme, so
  their colours are fixed attributes in the SVG: sand and off-white clouds, a gold sun, green
  rain, a pink moon and lightning. Reduced motion stops the animation (base layer).
*/

.wx-icon {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Clouds read better with a soft navy shadow where they overlap the sun or moon */
.wx-icon-partly-day .wx-drift,
.wx-icon-partly-night .wx-drift,
.wx-icon-showers .wx-drift,
.wx-icon-cloudy .wx-drift:last-of-type { filter: drop-shadow(-1.5px 2px 0 rgb(15 20 25 / 0.35)); }

/* ---- Motion: only icons inside .wx-moving move (the big one, the gallery icon that's showing
   now, and gallery icons on hover). The pause button stops it all (WCAG 2.2.2). ---- */
.wx-rays, .wx-flake, .wx-moon, .wx-night { transform-box: fill-box; transform-origin: center; }

.wx-moving .wx-rays { animation: wx-spin 30s linear infinite; }
.wx-moving .wx-core { animation: wx-glow 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wx-moving .wx-night { animation: wx-rock 7s ease-in-out infinite; }
.wx-moving .wx-star { animation: wx-twinkle 3s ease-in-out infinite; }
.wx-moving .wx-star-2 { animation-delay: -1s; }
.wx-moving .wx-star-3 { animation-delay: -2s; }
.wx-moving .wx-drift > * { animation: wx-drift 6s ease-in-out infinite alternate; }
.wx-moving .wx-drift-slow > * { animation-duration: 9s; animation-direction: alternate-reverse; }
.wx-moving .wx-drop { animation: wx-fall 1.1s linear infinite; }
.wx-moving .wx-rain-light .wx-drop { animation-duration: 1.6s; }
.wx-moving .wx-flake { animation: wx-flutter 3.2s linear infinite; }
.wx-moving .wx-bolt { animation: wx-flash 3.6s ease-in-out infinite; }
.wx-moving .wx-fog path { animation: wx-drift 4s ease-in-out infinite alternate; }
.wx-moving .wx-fog-2 { animation-delay: -1.3s !important; animation-direction: alternate-reverse !important; }
.wx-moving .wx-fog-3 { animation-delay: -2.6s !important; }

/* Stagger the drops and flakes so they don't fall in step */
.wx-moving .wx-d2 { animation-delay: -0.35s; }
.wx-moving .wx-d3 { animation-delay: -0.7s; }
.wx-moving .wx-d4 { animation-delay: -0.2s; }
.wx-moving .wx-d5 { animation-delay: -0.55s; }
.wx-moving .wx-d6 { animation-delay: -0.9s; }
.wx-moving .wx-flake.wx-d2 { animation-delay: -1.1s; }
.wx-moving .wx-flake.wx-d3 { animation-delay: -2.2s; }
.wx-moving .wx-flake.wx-d4 { animation-delay: -0.6s; }
.wx-moving .wx-flake.wx-d5 { animation-delay: -1.7s; }
.wx-moving .wx-flake.wx-d6 { animation-delay: -2.6s; }

@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-glow { 50% { transform: scale(1.06); } }
@keyframes wx-rock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes wx-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes wx-drift { from { transform: translateX(-1.5px); } to { transform: translateX(2px); } }
@keyframes wx-fall {
  0% { transform: translate(1px, -4px); opacity: 0; }
  25% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-1.5px, 5px); opacity: 0; }
}
@keyframes wx-flutter {
  0% { translate: 0 -4px; rotate: 0deg; opacity: 0; }
  25% { opacity: 1; }
  80% { opacity: 1; }
  100% { translate: 0 5px; rotate: 120deg; opacity: 0; }
}
@keyframes wx-flash {
  0%, 40%, 52%, 100% { opacity: 1; }
  44%, 48% { opacity: 0.2; }
}

[data-weather].is-paused * { animation-play-state: paused !important; }

/* ============ LAYOUT ============ */

/* The weather itself: a navy panel in both themes, white text */
.wx-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background: var(--navy);
  color: #fff;
  padding: clamp(1.25rem, 4vw, 2.75rem);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
}

.wx-panel-glow {
  position: absolute;
  z-index: -1;
  inset: -30% -10% auto auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--secondary-color-rgb), 0.35), transparent 65%);
  pointer-events: none;
}

.wx-panel::after {
  /* a faint green glow bottom left, like the hero glows */
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -40% -15%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.22), transparent 65%);
  pointer-events: none;
}

.wx-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.wx-eyebrow, .wx-picker-label, .wx-forecast-title, .wx-stats dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}
.wx-place {
  margin: 0.25rem 0 0;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.wx-updated { margin: 0.35rem 0 0; font-size: 0.9rem; color: rgb(255 255 255 / 0.72); }

.wx-picker { display: grid; gap: 0.4rem; min-width: min(100%, 260px); }
.wx-select.input {
  appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2326cf81'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.25rem;
}

.wx-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 0.5rem 2.5rem;
  margin-top: 1.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  .wx-now { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); justify-items: start; text-align: left; }
}
.wx-now-icon { width: min(68vw, 300px); filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.25)); }
.wx-now[aria-busy="true"] .wx-now-icon { opacity: 0.35; }
.wx-temp {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: inherit;
  color: #fff;
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.wx-now .wx-temp { justify-content: center; }
@media (min-width: 640px) { .wx-now .wx-temp { justify-content: flex-start; } }
.wx-temp-unit { margin: 0.35em 0 0 0.08em; font-size: 0.32em; letter-spacing: 0; color: rgb(255 255 255 / 0.72); }
.wx-condition { margin: 0.5rem 0 0; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; color: #fff; }

.wx-stats { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 0.75rem; margin: 1.25rem 0 0; }
.wx-now .wx-stats { justify-content: center; }
@media (min-width: 640px) { .wx-now .wx-stats { justify-content: flex-start; } }
.wx-stats > div {
  padding: 0.6rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.06);
}
.wx-stats dd { margin: 0.15rem 0 0; font-size: 1.05rem; font-weight: 800; color: #fff; }

.wx-error {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-left: 4px solid var(--secondary-color);
  border-radius: 12px;
  background: rgb(15 20 25 / 0.35);
}

.wx-forecast-title { margin-top: 2.25rem; }
.wx-forecast {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
}
.wx-day {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.9rem 0.4rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.06);
  text-align: center;
}
.wx-day.is-today { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.12); }
.wx-day-name { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; }
.wx-day-icon { display: block; width: min(100%, 64px); aspect-ratio: 1; }
.wx-day-temps { font-size: 0.95rem; font-weight: 800; color: #fff; white-space: nowrap; }
.wx-day-temps .wx-low { font-weight: 400; color: rgb(255 255 255 / 0.72); }
.wx-day-rain { font-size: 0.75rem; font-weight: 600; color: #7ff0bb; }
.wx-day.is-loading .wx-day-icon { border-radius: 50%; background: rgb(255 255 255 / 0.08); }
@media (max-width: 479px) {
  .wx-forecast { gap: 0.35rem; }
  .wx-day { padding: 0.7rem 0.15rem; border-radius: 12px; }
  .wx-day-name { font-size: 0.7rem; letter-spacing: 0.04em; }
  .wx-day-temps { font-size: 0.8rem; }
}

.wx-pause {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(15 20 25 / 0.35);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.wx-pause:hover { border-color: var(--primary-color); }
.wx-panel { padding-bottom: calc(clamp(1.25rem, 4vw, 2.75rem) + 2.25rem); }

/* ---- Behind the scenes: request, response, lookup ---- */
.wx-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
}
.wx-url {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.55rem;
  border: 1px solid var(--image-border-color);
  border-radius: 12px;
  background: var(--card-solid);
  color: var(--font-color);
}
.wx-url li { display: grid; gap: 0.1rem; }
.wx-url-base { padding-bottom: 0.45rem; border-bottom: 1px dashed var(--image-border-color); color: var(--title-color); font-weight: 700; overflow-wrap: anywhere; }
.wx-url code { font: inherit; color: var(--title-color); overflow-wrap: anywhere; }
.wx-url code b { font-weight: 700; color: var(--text-link); }
.wx-url .wx-q { margin-right: 0.15rem; color: var(--secondary-color); font-weight: 800; }
:root[data-theme="light"] .wx-url .wx-q { color: #b0249f; }
.wx-note { padding-left: 0.9rem; font-family: var(--font-family-inter); font-size: 0.8rem; color: var(--muted); }

.wx-status { margin: 1rem 0 0; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.wx-status .wx-ok { color: var(--text-link); }
.wx-json {
  margin: 0.6rem 0 0;
  max-height: 340px;
  overflow: auto;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--image-border-color);
  border-radius: 12px;
  background: var(--card-solid);
  color: var(--font-color);
}
.wx-key { color: var(--title-color); font-weight: 700; }
.wx-num { color: var(--text-link); font-weight: 700; }
.wx-str { color: var(--muted); }
.wx-hl { display: inline-block; margin: 0 -0.3rem; padding: 0 0.3rem; border-radius: 4px; background: rgba(var(--secondary-color-rgb), 0.22); }

.wx-lookup {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--image-border-color);
  border-radius: 12px;
  background: var(--card-solid);
}
.wx-lookup-result { display: flex; align-items: center; gap: 0.9rem; }

/* A navy square for an icon: the gallery, the lookup and the project card */
.wx-tile {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 14%;
  border-radius: 16px;
  background: var(--navy);
}
.wx-tile-sm { flex-shrink: 0; width: 72px; padding: 10px; border-radius: 12px; }

/* ---- The icon set ---- */
.wx-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) { .wx-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wx-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wx-gallery-item {
  position: relative;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.6rem 0.9rem;
  border: 1px solid var(--image-border-color);
  border-radius: 20px;
  background: var(--card);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.wx-gallery-item:hover { transform: translateY(-4px); border-color: var(--primary-color); }
.wx-gallery-item .wx-tile { margin-bottom: 0.5rem; }
.wx-gallery-item.is-now { border-color: var(--primary-color); }
.wx-gallery-name { font-weight: 800; color: var(--title-color); line-height: 1.2; }
.wx-gallery-codes { font-size: 0.75rem; color: var(--muted); }
.wx-now-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--primary-color);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wx-pause[aria-pressed="true"] { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.2); }

/* Phones: a smaller icon, and the three stats on one row */
@media (max-width: 639px) {
  .wx-now-icon { width: min(46vw, 220px); }
  .wx-now .wx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .wx-stats > div { padding: 0.5rem 0.4rem; }
  .wx-stats dt { font-size: 0.65rem; letter-spacing: 0.06em; }
}