/*
 * Styles for the single full-screen page.
 * - Background colour is driven by body[data-state] (set in js/view.js).
 * - SVG animations (rays, float, rain, tear, blink) live here, keyed on the
 *   class names emitted by js/illustrations/*.
 */

:root {
  --bg-top: #b9c6d6;
  --bg-bottom: #e6ecf3;
  --text: #33415c;
}

/* Sunny: bright blue sky. */
body[data-state="sole"] {
  --bg-top: #6ec1ff;
  --bg-bottom: #dff3ff;
}
/* Cloudy: soft grey-blue. */
body[data-state="nuvolo"] {
  --bg-top: #9fb0c4;
  --bg-bottom: #dfe6ef;
}
/* Changeable: in-between greyish blue. */
body[data-state="mix"] {
  --bg-top: #8da3bd;
  --bg-bottom: #d3dce7;
}
/* Rain: dark, heavy sky. */
body[data-state="pioggia"] {
  --bg-top: #2b3b57;
  --bg-bottom: #5b6c86;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(var(--bg-top), var(--bg-bottom)) fixed;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Rain has a dark background, so the text turns light. */
body[data-state="pioggia"] {
  --text: #f1f5fb;
}

/* Full-page stage: the SVG scales to fit while keeping its aspect ratio. */
#stage {
  position: fixed;
  inset: 0;
  display: grid;
  /* Single cell: the illustration and the overlay (badge + caption) share it,
     so the illustration stays centred full-bleed while the overlay places the
     badge at the top and the caption at the bottom on top of it. */
  grid-template: 1fr / 1fr;
  place-items: center;
  padding: max(3vmin, env(safe-area-inset-top)) max(3vmin, env(safe-area-inset-right))
    max(3vmin, env(safe-area-inset-bottom)) max(3vmin, env(safe-area-inset-left));
  box-sizing: border-box;
}

/* The screen (illustration, loader or message) and the overlay stack in the
   same grid cell. */
#stage > * {
  grid-area: 1 / 1;
}

/* Portrait / narrow: the overlay fills the stage as three equal rows. The
   badge is centred in the top band, the middle band is left to the
   illustration behind, and the caption is centred in the bottom band. This
   centres the badge between the top of the window and the artwork. */
.overlay {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none; /* clicks pass through to nothing; buttons re-enable below */
}
.overlay .badge {
  grid-row: 1;
  align-self: center;
}
.overlay .caption {
  grid-row: 3;
  align-self: center;
}
.overlay .badge,
.overlay .caption {
  pointer-events: auto;
}

/* Only the illustration: the caption/badge hold icon SVGs too. */
#stage > svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

/* Wide, landscape screens (desktop): the illustration fills a large left
   column, and the overlay becomes a right column with the badge and caption
   grouped and centred vertically. */
@media (min-width: 48rem) and (min-aspect-ratio: 1 / 1) {
  #stage {
    /* The right column is wide enough for the caption to keep its centred
       3-column layout (spacer | text | action) without wrapping too early. */
    grid-template: "art info" 1fr / 1fr 1fr;
    column-gap: 2vw;
  }
  #stage > svg,
  #stage > .loader,
  #stage > .message {
    grid-area: art;
  }
  #stage > .overlay {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    width: auto;
    height: auto;
  }
  /* On desktop the badge sits with the caption, so keep it caption-sized. */
  #stage > .overlay .badge {
    font-size: clamp(1rem, 2vw, 1.4rem);
  }
}

/* Temperature badge (top on portrait, grouped with the caption on desktop). */
.badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.25rem 1rem;
  color: var(--text);
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  animation: fade-in 0.6s ease both;
}
.badge__icon {
  display: inline-flex;
  opacity: 0.8;
}
.badge__min {
  color: #2f6fd0;
}
.badge__max {
  color: #d83a2f;
}
body[data-state="pioggia"] .badge__min {
  color: #8bc4ff; /* lighter blue, legible on the dark rainy background */
}
body[data-state="pioggia"] .badge__max {
  color: #ff9a8f;
}

/* Name of the tested location (bottom on portrait, grouped with the badge on
   desktop), with its action button. */
.caption {
  /* Three columns: a spacer the width of the action, the centred text, then
     the action. The spacer and the action are the same width, so the text is
     centred on the caption regardless of the magnifier. */
  display: grid;
  grid-template-columns: var(--caption-action-size) auto var(--caption-action-size);
  align-items: center;
  gap: 0.25rem;
  --caption-action-size: 2.75rem;
  max-width: min(42rem, 92vw);
  margin: 0;
  padding: 0.25rem 1rem 0;
  color: var(--text);
  font-size: clamp(0.95rem, 2.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0.85;
  animation: fade-in 0.6s ease both;
}
/* Left spacer mirroring the action column, so the text stays centred. */
.caption::before {
  content: "";
}
/* When there is no action button, the text still occupies the middle column. */
.caption__text {
  grid-column: 2;
}

/* One line per entry; emphasised segments (date range, place name) stand out. */
.caption__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  overflow-wrap: break-word;
}
.caption__line {
  display: block;
}
.caption__em {
  font-size: 1.3em;
  font-weight: 700;
}

.caption__action {
  display: inline-grid;
  place-items: center;
  grid-column: 3;
  justify-self: start;
  min-width: var(--caption-action-size); /* comfortable touch target */
  min-height: var(--caption-action-size);
  margin: 0;
  padding: 0.6rem;
  font: inherit; /* buttons do not inherit the font size by default */
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.caption__action:hover {
  background: rgba(255, 255, 255, 0.3);
}
.caption__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Loading and error messages. `.message` is a column: the text, then an
   optional action button. */
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 26ch;
  margin: 0;
  padding: 1rem;
  text-align: center;
}

/* The text is a <button> when it retries on tap, a <p> otherwise. */
.message__text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: clamp(1.15rem, 4.2vw, 1.8rem);
  line-height: 1.35;
  text-align: center;
}
button.message__text {
  cursor: pointer;
}

/* Prominent action, e.g. "Scegli un comune". */
.message__action {
  padding: 0.7rem 1.4rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 600;
  cursor: pointer;
}
.message__action:hover {
  background: rgba(255, 255, 255, 0.25);
}
.message__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.loader {
  width: min(28vmin, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd23f;
  box-shadow: 0 0 0 12px rgba(255, 210, 63, 0.35);
  animation: pulse 1.4s ease-in-out infinite;
}

/* SVG animations. CSS transform overrides the SVG attribute, so animated
   elements carry no transform attribute (see illustrations/face.js). */
.sun-rays {
  transform-origin: 0 0;
  animation: spin 40s linear infinite;
}

.float {
  animation: float 4s ease-in-out infinite;
}
.float--a {
  animation-delay: -1s;
}
.float--b {
  animation-delay: -3s;
}

.eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5s infinite;
}

.drop {
  opacity: 0;
  animation: fall 1.6s ease-in infinite;
}

.tear {
  opacity: 0;
  animation: tear 2.4s ease-in infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
}
@keyframes blink {
  0%,
  94%,
  100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.1);
  }
}
@keyframes fall {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(70px);
    opacity: 0;
  }
}
@keyframes tear {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(22px);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    transform: scale(1.12);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.85;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* Location picker modal (js/picker.js). Colours are explicit: the dialog does
   not follow the page theme, which changes with the answer. */
.picker {
  width: min(92vw, 28rem);
  max-height: 84dvh;
  margin: 8vh auto auto;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: #fff;
  color: #1f2a3d;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}
.picker[open] {
  display: flex;
  animation: pop-in 0.18s ease both;
}
.picker::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.picker__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 1rem 1.1rem 1.1rem;
  box-sizing: border-box;
}

.picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.picker__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.picker__close {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.picker__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border: 2px solid #cbd5e1;
  border-radius: 0.75rem;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 1rem; /* 16px: avoids the automatic zoom on iOS */
}
.picker__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.picker__status {
  margin: 0;
  color: #5b6b82;
  font-size: 0.9rem;
}
/* Stays in the accessibility tree (it is a live region) but takes no space
   while empty: the negative margin cancels the extra flex gap it would add. */
.picker__status:empty {
  margin-block: -0.375rem;
}

.picker__results {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}
.picker__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.picker__secondary {
  color: #5b6b82;
  font-variant-numeric: tabular-nums;
}
.picker__close:hover,
.picker__close:focus-visible,
.picker__item:hover,
.picker__item:focus-visible {
  background: #eef2f7;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
  .drop,
  .tear {
    opacity: 1;
  }
}