/* ==========================================================================
   Radar Bandi Digitali — Hero
   L'Italia di notte vista dall'orbita: ogni luce è un bando.
   Classi con prefisso hx- per non toccare gli stili del Radar.
   ========================================================================== */

.hx {
  --hx-notte:   #081120;
  --hx-notte-2: #0F1C31;
  --hx-testo:   #E9EEF6;
  --hx-testo-2: #9AABC2;
  --hx-linea:   rgba(156, 199, 255, .14);
  --hx-sodio:   #FFB45E;   /* bandi aperti */
  --hx-alba:    #9CC7FF;   /* bandi in apertura o annunciati */
  --hx-brace:   #7A6656;   /* bandi chiusi o esauriti */
  --hx-display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --hx-font:    "Hanken Grotesk", system-ui, sans-serif;
  --hx-gap:     clamp(1.5rem, 4vw, 3.5rem);
  --hx-ease:    cubic-bezier(.2, .7, .1, 1);

  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "copy copy copy copy copy copy map map map map map map"
    "legend legend legend legend legend legend legend legend legend legend legend legend";
  column-gap: var(--hx-gap);
  align-items: center;
  min-height: calc(100svh - 150px);
  padding: clamp(2rem, 6vh, 4.5rem) 0 clamp(1.5rem, 3vh, 2.5rem);
  color: var(--hx-testo);
  font: 400 1.0625rem/1.6 var(--hx-font);
  -webkit-font-smoothing: antialiased;
}

/* La testata del Radar diventa la notte della scena */
.topbar {
  background:
    radial-gradient(55% 60% at 74% 48%, rgba(255, 180, 94, .07), transparent 70%),
    radial-gradient(80% 50% at 15% 0%, rgba(156, 199, 255, .07), transparent 70%),
    #081120;
  border-bottom-color: rgba(156, 199, 255, .1);
}
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar > .wrap { position: relative; z-index: 1; }

.hx :focus-visible {
  outline: 2px solid var(--hx-alba);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Testo
   -------------------------------------------------------------------------- */

.hx__copy { grid-area: copy; }

.hx__title {
  margin: 0;
  color: var(--hx-testo);
  font-family: var(--hx-display);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: clamp(2.75rem, .9rem + 4.1vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}

/* Ogni riga entra da sotto una maschera */
.hx__line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;   /* spazio per i discendenti */
  margin-bottom: -.08em;
}
.hx__line > span {
  display: inline-block;
  transition: transform 1.3s var(--hx-ease);
}
.hx__line:nth-child(2) > span { transition-delay: .12s; }
.hx__line:nth-child(3) > span { transition-delay: .24s; }

.hx__lead {
  max-width: 44ch;
  margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
  color: var(--hx-testo-2);
  font-size: clamp(1.0625rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.65;
}

.hx__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 5vh, 3rem);
}

.hx__lead,
.hx__actions {
  transition: opacity 1s var(--hx-ease), transform 1s var(--hx-ease);
}
.hx__lead    { transition-delay: .55s; }
.hx__actions { transition-delay: .7s; }

.hx-btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.hx-btn--primary {
  padding: 1rem 1.625rem;
  border-radius: 999px;
  background: var(--hx-sodio);
  color: var(--hx-notte);
  font-weight: 600;
  transition: box-shadow .35s var(--hx-ease), transform .35s var(--hx-ease);
}
.hx-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 40px -8px rgba(255, 180, 94, .55);
}

.hx-btn--quiet {
  padding: .25rem 0;
  color: var(--hx-testo);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .35s var(--hx-ease), color .2s;
}
.hx-btn--quiet:hover {
  color: var(--hx-alba);
  background-size: 0% 1px;
  background-position: 100% 100%;
}

/* --------------------------------------------------------------------------
   Mappa
   -------------------------------------------------------------------------- */

.hx__map {
  grid-area: map;
  position: relative;
  justify-self: center;
  width: min(100%, calc(66svh / var(--hx-ratio, 1.18)));
  margin: 0;
}

.hx-map {
  position: relative;
  aspect-ratio: 1 / var(--hx-ratio, 1.18);
  transition: opacity 1.6s ease, transform 2.6s var(--hx-ease), filter 1.8s ease;
}

.hx-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hx-map__braci {
  opacity: 0;
  transition: opacity 1.4s ease .9s;
}

.hx-map__lights {
  position: absolute;
  inset: 0;
}

/* Una luce = un bando attivo */
.hx-light {
  --c: var(--hx-sodio);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1.75rem;
  height: 1.75rem;
  margin: -.875rem 0 0 -.875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.hx-light--arrivo { --c: var(--hx-alba); }

.hx-light::before,
.hx-light::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}

/* nucleo */
.hx-light::before {
  width: 6px;
  height: 6px;
  background: var(--c);
  box-shadow:
    0 0 6px 1px var(--c),
    0 0 18px 4px color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0;
  transform: scale(3);
  transition: opacity .5s ease var(--d), transform 1.1s var(--hx-ease) var(--d);
}

/* alone che respira */
.hx-light::after {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 65%);
  opacity: 0;
}

.hx-light.is-selected::after,
.hx-light:hover::after,
.hx-light:focus-visible::after {
  opacity: 1;
  animation: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent);
}

/* Scheda del bando */
.hx-card {
  position: absolute;
  left: var(--cx, 0);
  top: var(--cy, 0);
  z-index: 2;
  width: min(17.5rem, 80vw);
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--hx-linea);
  border-radius: 14px;
  background: color-mix(in srgb, var(--hx-notte-2) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  font-size: .875rem;
  line-height: 1.45;
  transition: opacity .35s ease, transform .45s var(--hx-ease);
}
.hx-card[hidden] {
  display: block !important;   /* il Radar nasconde [hidden] con display:none */
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.hx-card__when {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .625rem;
  color: var(--c, var(--hx-sodio));
  font-weight: 500;
}
.hx-card__when::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.hx-card__title {
  margin: 0;
  color: var(--hx-testo);
  font-family: var(--hx-display);
  font-variation-settings: "opsz" 28;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.15;
}

.hx-card__sub {
  margin: .25rem 0 0;
  color: var(--hx-testo-2);
}

.hx-card__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .375rem 1rem;
  margin: 1rem 0 0;
  padding-top: .875rem;
  border-top: 1px solid var(--hx-linea);
}
.hx-card__facts dt { color: var(--hx-testo-2); }
.hx-card__facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.hx-card__link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--hx-testo);
  font-weight: 500;
  text-underline-offset: 3px;
  text-decoration-color: var(--hx-linea);
  transition: text-decoration-color .2s, color .2s;
}
.hx-card__link:hover { color: var(--hx-alba); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Legenda
   -------------------------------------------------------------------------- */

.hx-legend {
  grid-area: legend;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2.5rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hx-linea);
  color: var(--hx-testo-2);
  font-size: .9375rem;
  transition: opacity 1.2s ease 1.6s;
}

.hx-legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-legend__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.hx-legend__item strong {
  color: var(--hx-testo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hx-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
}
.hx-legend__item--aperti { --c: var(--hx-sodio); }
.hx-legend__item--arrivo { --c: var(--hx-alba); }
.hx-legend__item--spenti { --c: var(--hx-brace); }
.hx-legend__item--spenti .hx-dot { box-shadow: none; }

.hx-legend__note {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin: 0;
  font-size: .875rem;
}
.hx-legend__note .ds { color: inherit; }

/* --------------------------------------------------------------------------
   Sequenza d'ingresso (una sola, orchestrata)
   Lo stato iniziale vale solo se JavaScript è attivo.
   -------------------------------------------------------------------------- */

.hx-js .hx__line > span { transform: translateY(105%); }
.hx-js .hx__lead,
.hx-js .hx__actions { opacity: 0; transform: translateY(12px); }
.hx-js .hx-map { opacity: 0; transform: scale(1.06); filter: blur(6px); }
.hx-js .hx-legend { opacity: 0; }

.hx-ready .hx__line > span { transform: none; }
.hx-ready .hx__lead,
.hx-ready .hx__actions { opacity: 1; transform: none; }
.hx-ready .hx-map { opacity: 1; transform: none; filter: none; }
.hx-ready .hx-legend { opacity: 1; }

/* Le luci si accendono quando arrivano i dati, da nord a sud */
.hx-map.is-on .hx-map__braci { opacity: 1; }
.hx-map.is-on .hx-light::before { opacity: 1; transform: none; }

/* Dopo l'accensione, i bandi aperti respirano piano */
.hx-map.is-lit .hx-light--aperti::after {
  animation: hx-respiro 4.2s ease-in-out var(--b) infinite;
}
@keyframes hx-respiro {
  0%, 100% { opacity: 0;  transform: scale(.6); }
  50%      { opacity: .9; transform: scale(1.15); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  .hx {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "map" "legend";
    row-gap: clamp(2.5rem, 8vw, 3.5rem);
    min-height: 0;
  }
  .hx__map { width: min(100%, 34rem); }
  .hx-legend { margin-top: 0; }
}

@media (max-width: 560px) {
  .hx__actions { flex-direction: column; align-items: flex-start; }

  /* La scheda si appoggia sotto la mappa */
  .hx-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx *,
  .hx *::before,
  .hx *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}