/* ATLAS ESTATE — SEZIONI DELLA SOLA HOME
   Doppio intento, carta del territorio e press-and-hold: solo la home li usa,
   solo la home li carica. Vedi DECISIONS.md D-27. */
/* --------------------------------------------------------------------------
   02 · DOPPIO INTENTO
   Due colonne asimmetriche 62/38, separate dalla linea d'oro.
   L'asimmetria non e estetica: dichiara la priorita fra i due pubblici.
   -------------------------------------------------------------------------- */
.s-intent{ padding-block: var(--section-y); }

.s-intent__grid{
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px){
  .s-intent__grid{
    grid-template-columns: 1.62fr 1px 1fr;
    gap: var(--sp-8);
  }
}

/* Un SVG scalato in modo non uniforme spezza il tratteggio: qui basta un
   elemento che si allunga su --draw, e resta 1px netto a ogni altezza. */
.s-intent__divider{
  display: none;
  align-self: stretch;
  position: relative;
  background: var(--border);
}
.s-intent__divider::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(var(--draw, 0));
  transform-origin: top;
  transition: transform 900ms var(--ease-cine);
}
@media (min-width: 900px){
  .s-intent__divider{ display: block; }
}

.s-intent__col h2{
  font-size: var(--fs-h3);
  max-width: 18ch;
  margin-block: var(--sp-4) var(--sp-4);
}
.s-intent__col p{
  color: var(--text-secondary);
  max-width: 44ch;
  margin-block-end: var(--sp-6);
}
/* La colonna proprietari e la principale: pesa di piu anche visivamente. */
.s-intent__col--owner h2{ font-size: var(--fs-h2); max-width: 16ch; }

@media (max-width: 899px){
  .s-intent__col--guest{
    border-block-start: var(--bw) solid var(--border-gold);
    padding-block-start: var(--sp-6);
  }
}

/* 05 · IL TERRITORIO — carta a costellazione, generata dai dati in
   pages-home.mjs. Punti = zone in cui si opera, mai immobili (D-12).
   Vedi DECISIONS.md D-25. */
.s-territory{
  background: var(--canvas-alt);
  padding-block: var(--section-y-lg);
  overflow: hidden;
}

.s-territory__layout{
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px){
  .s-territory__layout{ grid-template-columns: minmax(0, 26rem) 1fr; gap: var(--sp-9); }
}

.s-territory__map{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 46rem;
  margin-inline: auto;
}
.s-territory__map svg{ width: 100%; height: 100%; overflow: visible; }

.map__ring{
  fill: none;
  stroke: var(--border-gold);
  stroke-width: 1;
  opacity: .45;
  vector-effect: non-scaling-stroke;
}
.map__ring--core{ stroke: var(--accent-muted); opacity: .7; }
.map__ring--edge{ stroke: var(--accent-muted); opacity: .55; }

.map__grid{
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  opacity: .38;   /* sotto la costellazione: e il reticolo, non il soggetto */
  vector-effect: non-scaling-stroke;
}

/* La corona graduata: Atlas e un atlante, la carta ha la sua rosa dei venti.
   Ruota cosi piano che non si vede muovere, si vede solo che e viva. */
.map__tick{
  stroke: var(--accent);
  stroke-width: 1;
  opacity: .18;
  vector-effect: non-scaling-stroke;
}
.map__tick--major   { opacity: .30; }
.map__tick--cardinal{ opacity: .62; stroke-width: 1.4; }

.map__frame{
  transform-origin: 200px 200px;
  animation: map-rosa 360s linear infinite;
}
@keyframes map-rosa{ to{ transform: rotate(360deg); } }

.map__cardinal{
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .1em;
  fill: var(--accent);
  opacity: .5;
  text-anchor: middle;
}

/* La costellazione segue le direttrici vere che escono da Milano.
   pathLength="1" rende ogni segmento lungo 1: una regola li disegna tutti. */
.map__link{
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
.s-territory.is-in .map__link{
  animation: map-traccia 1.1s var(--ease-cine) forwards;
}
@keyframes map-traccia{
  from{ opacity: 0;   stroke-dashoffset: 1; }
  to  { opacity: .26; stroke-dashoffset: 0; }
}
/* Si accendono dal centro verso fuori: le prime cinque sono i raggi
   interni, poi le direttrici. */
.s-territory.is-in .map__link:nth-child(n+6) { animation-delay: .28s; }
.s-territory.is-in .map__link:nth-child(n+11){ animation-delay: .52s; }
.s-territory.is-in .map__link:nth-child(n+16){ animation-delay: .74s; }

/* L'alone della stella: un gradiente radiale, non un'ombra, cosi non costa
   un filtro SVG su venti elementi. */
.map__glow{
  fill: url(#mapStar);
  opacity: calc(.55 * var(--mag, 1));
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
  pointer-events: none;
}

.map__zone{
  cursor: default;
  outline: none;
}
/* Quattro fasce, quattro luminosita: fra un raggio di 3,6 e uno di 3,4
   l'occhio non vede nulla, e la legenda prometterebbe a vuoto. */
.map__zone[data-livello="centro"]     { --mag: 1;    }
.map__zone[data-livello="semicentro"] { --mag: .88;  }
.map__zone[data-livello="periferia"]  { --mag: .74;  }
.map__zone[data-livello="comuni"]     { --mag: .60;  }

.map__dot{
  fill: var(--accent);
  opacity: calc(.55 * var(--mag, 1));
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
.map__halo{
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
.map__label{
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: var(--text-secondary);
  opacity: .52;
  transition: opacity var(--dur-ui) var(--ease-out),
              fill var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
.map__zone:hover .map__dot,
.map__zone:focus-visible .map__dot,
.map__zone.is-active .map__dot{ opacity: 1; transform: scale(1.35); }
.map__zone:hover .map__halo,
.map__zone:focus-visible .map__halo,
.map__zone.is-active .map__halo{ opacity: .6; transform: scale(1.5); }
.map__zone:hover .map__glow,
.map__zone:focus-visible .map__glow,
.map__zone.is-active .map__glow{ opacity: 1; transform: scale(1.5); }
.map__zone:hover .map__label,
.map__zone:focus-visible .map__label,
.map__zone.is-active .map__label{ opacity: 1; fill: var(--text-primary); }
.map__zone:focus-visible .map__halo{ opacity: 1; stroke-width: 2; }

/* Quando una stella e accesa, il resto della carta arretra. E la differenza
   fra un punto che si illumina e una carta che ti sta rispondendo. */
.s-territory__map:has(.map__zone.is-active) .map__zone:not(.is-active){
  opacity: .38;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.s-territory__map:has(.map__zone.is-active) .map__links{
  opacity: .45;
  transition: opacity var(--dur-ui) var(--ease-out);
}

/* Pulsazione sfalsata, a livello sussurro, con delay negativi cosi ogni
   ciclo e gia a meta al primo paint e nulla scatta all'avvio. */
.s-territory.is-in .map__dot{ animation: map-breathe 5.2s var(--ease-cine) infinite; }
.s-territory.is-in .map__zone:nth-child(3n)   .map__dot{ animation-delay: -1.1s; }
.s-territory.is-in .map__zone:nth-child(3n+1) .map__dot{ animation-delay: -2.7s; }
.s-territory.is-in .map__zone:nth-child(3n+2) .map__dot{ animation-delay: -3.9s; }
@keyframes map-breathe{
  0%, 100%{ opacity: calc(.42 * var(--mag, 1)); }
  50%     { opacity: calc(.72 * var(--mag, 1)); }
}

.s-territory__legend{
  margin-block-start: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);   /* era muted: 3,98:1, sotto AA */
}
.s-territory__legend b{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.s-territory__legend b::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Una carta di punti d oro somiglia troppo a un portafoglio: il disclaimer
   dice a parole che non lo e. Vedi D-12. */
/* La chiave: ogni voce col punto della sua misura. Vedi D-25. */
.s-territory__key{
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-label);
  letter-spacing: .04em;   /* piu stretto del label standard: quattro voci su una riga */
  text-transform: uppercase;
  color: var(--text-secondary);
}
.s-territory__key li{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.s-territory__key i{
  display: block;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.s-territory__key [data-livello="centro"] i    { width: 9px; height: 9px; opacity: 1;   }
.s-territory__key [data-livello="semicentro"] i{ width: 7px; height: 7px; opacity: .88; }
.s-territory__key [data-livello="periferia"] i { width: 5px; height: 5px; opacity: .74; }
.s-territory__key [data-livello="comuni"] i    { width: 4px; height: 4px; opacity: .60; }

.s-territory__disclaimer{
  margin-block-start: var(--sp-4);
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  /* --text-muted qui misurava 3,98:1, sotto la soglia AA di 4,5 per il testo
     piccolo. Su canvas-alt serve un gradino in piu. */
  color: var(--text-secondary);
  border-inline-start: 1px solid var(--border-gold);
  padding-inline-start: var(--sp-4);
}

/* La rosa dei venti gira, ma non davanti a chi ha chiesto meno movimento.
   La costellazione resta disegnata: e informazione, non animazione. */
@media (prefers-reduced-motion: reduce){
  .map__frame{ animation: none; }
  /* Il ripiego non si aggancia a .is-in: se l observer non arriva, la
     costellazione resterebbe invisibile. I collegamenti sono informazione. */
  .map__link{
    animation: none !important;
    opacity: .26;
    stroke-dashoffset: 0;
  }
  .map__dot{ animation: none !important; opacity: calc(.62 * var(--mag, 1)); }
}

/* --------------------------------------------------------------------------
   08 · IL MOMENTO INTERATTIVO
   Press-and-hold. Il visitatore non legge l'idea del brand: la esegue.
   Vedi MOTION.md §7.4.
   -------------------------------------------------------------------------- */
.s-hold{
  padding-block: var(--section-y-lg);
  position: relative;
  overflow: hidden;
}

.s-hold__panel{
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  text-align: center;
  overflow: hidden;
  /* Il pannello si scalda mentre il sistema si arma: non un colore diverso,
     lo stesso oro che sale di un soffio. */
  box-shadow: 0 0 calc(60px * var(--hold, 0)) rgba(197, 161, 90, calc(.10 * var(--hold, 0)));
  transition: box-shadow 240ms linear;
}

/* Il tracciato perimetrale: la linea d oro del brand che si chiude su se
   stessa. Dice "si sta armando un sistema", non "una barra si riempie". */
.s-hold__trace{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.s-hold__trace-path{
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--hold, 0));
  opacity: calc(.35 + .65 * var(--hold, 0));
}

/* La spazzata di accensione, una volta sola al completamento. */
.s-hold__sweep{
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    rgba(197,161,90,0) 0%,
    rgba(197,161,90,.16) 45%,
    rgba(244,240,232,.10) 55%,
    rgba(197,161,90,0) 100%);
  transform: translateX(-120%);
}
.s-hold__panel.is-done .s-hold__sweep{
  animation: hold-sweep 1150ms var(--ease-cine) 90ms 1 both;
}
@keyframes hold-sweep{
  0%  { opacity: 0; transform: translateX(-120%); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100%{ opacity: 0; transform: translateX(340%); }
}

/* L arco: uno solo per schermata. Al completamento fiorisce e resta acceso. */
.s-hold__panel::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 62%;
  border-radius: var(--r-arch);
  border: 1px solid var(--accent);
  opacity: calc(.10 + .38 * var(--hold, 0));
  pointer-events: none;
  transition: opacity 240ms linear;
}
.s-hold__panel.is-done::before{
  animation: hold-arco 1400ms var(--ease-cine) 1 both;
}
@keyframes hold-arco{
  0%  { opacity: .48; box-shadow: none; }
  35% { opacity: 1;   box-shadow: 0 0 34px rgba(197,161,90,.30); }
  100%{ opacity: .62; box-shadow: 0 0 14px rgba(197,161,90,.12); }
}

.s-hold__states{
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin-block: var(--sp-6);
  text-align: left;
}
@media (min-width: 760px){
  .s-hold__states{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --hold-p: quanto e acceso QUESTO pilastro, 0..1. Un numero solo, invece
   della stessa formula ripetuta in cinque proprieta. */
.s-hold__pillar{
  --hold-p: clamp(0, (var(--hold, 0) - var(--th, 0)) * 3, 1);
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-sm);
  opacity: calc(.34 + .66 * var(--hold-p));
  border-color: color-mix(in srgb,
    var(--accent) calc(var(--hold-p) * 62%), var(--border));
  background: color-mix(in srgb,
    var(--accent) calc(var(--hold-p) * 5%), transparent);
  transition: opacity 160ms linear, border-color 160ms linear,
              background-color 160ms linear;
}
/* Il montante d oro cresce dal basso: e il pilastro del marchio. */
.s-hold__pillar::before{
  content: "";
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-start: 0;
  width: 2px;
  height: calc((100% - var(--sp-4) * 2) * var(--hold-p));
  background: var(--accent);
  border-radius: 2px;
  transition: height 200ms var(--ease-out);
}

/* La spia: si accende col suo pilastro, poi respira. Il sistema non e
   "finito", e "in funzione". */
.s-hold__led{
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: var(--hold-p);
  transform: scale(calc(.6 + .4 * var(--hold-p)));
  box-shadow: 0 0 calc(10px * var(--hold-p)) rgba(197,161,90,.65);
  transition: opacity 200ms linear, transform 200ms var(--ease-out),
              box-shadow 200ms linear;
}
.s-hold__panel.is-done .s-hold__led{
  animation: hold-spia 3.4s var(--ease-cine) infinite;
  animation-delay: calc(var(--th, 0) * 1.4s);
}
@keyframes hold-spia{
  0%, 100%{ opacity: .55; box-shadow: 0 0 6px  rgba(197,161,90,.35); }
  50%     { opacity: 1;   box-shadow: 0 0 12px rgba(197,161,90,.70); }
}

.s-hold__pillar strong{
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  margin-block-end: var(--sp-1);
  color: color-mix(in srgb,
    var(--text-primary) calc(60% + var(--hold-p) * 40%), transparent);
  transition: color 200ms linear;
}
.s-hold__pillar span{ font-size: var(--fs-label); color: var(--text-secondary); }

.s-hold__btn{
  position: relative;
  z-index: 3;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Prima che qualcuno tocchi: un respiro sul bordo, appena percepibile. */
.s-hold__btn::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: hold-invito 3.6s var(--ease-cine) infinite;
}
.s-hold__panel.is-done .s-hold__btn::before{ animation: none; opacity: .5; }
@keyframes hold-invito{
  0%, 100%{ opacity: 0;   transform: scale(1); }
  40%     { opacity: .38; transform: scale(1.035); }
  70%     { opacity: 0;   transform: scale(1.06); }
}
.s-hold__btn::after{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  background: var(--accent);
  opacity: .18;
  transform: scaleX(var(--hold, 0));
  transform-origin: left;
  pointer-events: none;
}
/* Il bottone smette di essere un bottone e diventa una targa di stato. */
.s-hold__btn-led{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: calc(.25 + .75 * var(--hold, 0));
  box-shadow: 0 0 calc(12px * var(--hold, 0)) rgba(197,161,90,.7);
  flex: 0 0 auto;
  transition: opacity 200ms linear, box-shadow 200ms linear;
}
.s-hold__panel.is-done .s-hold__btn{
  cursor: default;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.s-hold__panel.is-done .s-hold__btn-led{
  animation: hold-spia 3.4s var(--ease-cine) infinite;
}

.s-hold__done{
  position: relative;
  z-index: 3;
  margin-block-start: var(--sp-5);
  opacity: var(--hold-done, 0);
  color: var(--accent-text);
  font-size: var(--fs-small);
  transform: translateY(calc(10px * (1 - var(--hold-done, 0))));
  transition: opacity 520ms var(--ease-out) 260ms,
              transform 520ms var(--ease-cine) 260ms;
}

@media (prefers-reduced-motion: reduce){
  .s-hold__panel{ --hold: 1; --hold-done: 1; }
  .s-hold__pillar{ opacity: 1; }
  .s-hold__btn{ display: none; }
  /* Lo stato finale resta, il movimento no: chi ha chiesto meno movimento
     vede il sistema gia acceso, non un sistema che si accende. */
  .s-hold__panel.is-done .s-hold__sweep,
  .s-hold__panel.is-done::before,
  .s-hold__panel.is-done .s-hold__led,
  .s-hold__panel.is-done .s-hold__btn-led,
  .s-hold__btn::before{ animation: none; }
  .s-hold__panel.is-done .s-hold__led{ opacity: 1; }
  .s-hold__done{ transition: none; transform: none; }
}