/* ============================================================================
   Beplano — Costellazione EMBEDDATA (Airport home page)
   Porting scoped di Landing/home_style.css: TUTTI gli stili vivono sotto
   .constellation, nessun selettore globale (html/body/:root/*), zero impatto
   sul resto della pagina Airport che la ospita.

   Markup atteso: .constellation > .cst-stage > (elementi: .el .node .circle
   .line .city .flyer .central-lines .mark .top-mask ...)

   Fonte: Landing/home_style.css (NON modificato)
   - token  :root                → righe 15-66
   - stage/fit .map-stage        → righe 109-116
   - elementi stage .el..flyer   → righe 119-355
   ========================================================================== */

/* ============================ 1) Token + box ============================ */

.constellation {
  /* — Colori (dal Figma) — copiati verbatim da :root, home_style.css righe 16-26 — */
  --bg:            #1e1e1c;            /* sfondo near-black caldo */
  --gold:          #d2b467;            /* nodo Academy */
  --taupe:         #908a7e;            /* nodo House of Brands (Neutro/Primary) */
  --blue:          #5c89a6;            /* nodo Airport */
  --gold-dark:     #6c571b;            /* Yellow/Dark — linee mondo Academy */
  --blue-dark:     #304c5a;            /* Blue/Dark — linee mondo Airport */
  --neutro-dark:   #4f4b43;            /* Neutro/Dark — linee neutre */
  --ring:          #393939;            /* anello sottile cerchi decorativi */
  --orange:        #ec6435;            /* pin città */
  --node-text:     #1e1e1c;            /* testo dentro i nodi colorati */

  /* — Tipografia — home_style.css righe 28-36 — */
  --font: "Mona Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-titlone:  clamp(46px, 24.09px + 6.09vw, 102px); /* TITOLONE  */
  --fs-display:  clamp(44px, 35.78px + 2.28vw, 65px);  /* TITOLI    */
  --fs-heading:  clamp(28px, 24.87px + 0.87vw, 36px);  /* TITOLETTO */
  --fs-subtitle: clamp(20px, 20px + 1.09vw, 30px);     /* Sottotitolo */
  --fs-body:     clamp(16px, 14.43px + 0.43vw, 18px);  /* Paragrafo */
  --fs-ui:       clamp(16px, 14.43px + 0.43vw, 20px);  /* Bottoni/Nav */
  --w-regular: 400; --w-medium: 500; --w-bold: 700; --w-extrabold: 800;

  /* — Spaziatura (scala 8) + layout — home_style.css righe 38-42 — */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --gutter: 24px;
  --container: 1280px;

  /* — Stage di design — home_style.css righe 44-47 — */
  --stage-w: 1728;
  --stage-h: 1080;
  --fit: 1;                            /* scala calcolata in JS (Task 3) */

  /* — Interazione: "raggio" del cursore (in px stage) — home_style.css righe 49-51 — */
  --r0: 70;                            /* entro r0 = piena accensione */
  --r1: 340;                           /* oltre r1 = spento */

  /* — Opacità di riposo (stato "spento") — home_style.css righe 53-58 — */
  --rest-line:   0.55;
  --rest-circle: 0.5;
  --rest-dash:   0.45;
  --rest-city:   0.35;
  --rest-plane:  0.4;

  /* — Separatore tratteggiato (non usato dagli elementi porati, innocuo tenerlo) —
       home_style.css righe 60-65 — */
  --dash-len:   10px;
  --dash-gap:   10px;
  --dash-thick: 2px;
  --dash-color: rgba(255, 255, 255, .30);

  /* --- layout box (sostituisce .map-viewport/.map-sizer/.map-stage full-page) --- */
  position: relative;
  width: 100%;
  aspect-ratio: 1728 / 1080;
  max-height: 70vh;
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg);
}

/* ============================ 2) Stage scalato ============================ */
/* sostituisce .map-stage (home_style.css righe 109-116), che nel sorgente è
   position:fixed + translate(-50%,-50%) al centro pagina; qui il box è ancorato
   in alto a sinistra dentro .constellation. */

.constellation .cst-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--stage-w) * 1px);   /* 1728 */
  height: calc(var(--stage-h) * 1px);  /* 1080 */
  transform: scale(var(--fit));
  transform-origin: top left;
}

/* ===================== 3) Elementi dello stage (rescoped) ===================== */
/* Porting 1:1 da home_style.css righe 119-355, ogni selettore prefissato con
   ".constellation ". var(--...) invariate: risolvono contro i token qui sopra. */

/* elemento generico posizionato sullo stage — home_style.css righe 120-133 */
.constellation .el {
  position: absolute;
  transform: rotate(var(--rot, 0deg));
  transform-origin: center center;
}

.constellation .el img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* maschera scura in cima (copre le linee dietro il wordmark) — home_style.css
   righe 208-215. Innocua anche qui: se non usata dal markup embeddato, non
   produce alcun effetto visibile. */
.constellation .top-mask {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--stage-w) * 1px);
  height: 157.5px;
  background: var(--bg);
  z-index: 50;
}

/* — marchio centrale Æ — home_style.css riga 220 */
.constellation .mark { z-index: 40; }

/* — linee bianche forti centro→nodi (sempre visibili) — home_style.css riga 223 */
.constellation .central-lines { z-index: 20; }

/* — nodi attivi (link) — home_style.css righe 226-271 */
.constellation .node {
  z-index: 45;
  text-decoration: none;
  color: var(--node-text);
  display: block;
  border-radius: 50%;
  transition: transform .25s ease;
}
.constellation .node .n-ring,
.constellation .node .n-disc { position: absolute; }
.constellation .node .n-ring img,
.constellation .node .n-disc img { display: block; width: 100%; height: 100%; }
.constellation .node .n-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6%;
  gap: 2px;
}
.constellation .node .n-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: pre-line;
}
.constellation .node .n-sub {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
.constellation .node:hover,
.constellation .node:focus-visible { transform: rotate(var(--rot,0deg)) scale(1.04); z-index: 55; }
.constellation .node:focus-visible { outline: none; }
.constellation .node:focus-visible .n-ring::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

/* — cerchi decorativi (anello + tratteggio + label nascosta) — home_style.css
   righe 274-294 */
.constellation .circle { z-index: 30; }
.constellation .circle .c-ring,
.constellation .circle .c-dash { position: absolute; }
.constellation .circle .c-ring img { opacity: calc(var(--rest-circle) + (1 - var(--rest-circle)) * var(--k, 0)); }
.constellation .circle .c-dash img {
  opacity: calc(var(--rest-dash) + (1 - var(--rest-dash)) * var(--k, 0));
  filter: brightness(calc(1 + 0.9 * var(--k, 0)));
}
.constellation .circle .c-label {
  position: absolute;
  inset: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  opacity: var(--k, 0);
  white-space: pre-line;
}

/* — linee decorative (con parola opzionale) — home_style.css righe 297-322 */
.constellation .line { z-index: 25; }
.constellation .line .l-img { position: absolute; }
.constellation .line .l-img img {
  opacity: calc(var(--rest-line) + (1 - var(--rest-line)) * var(--k, 0));
  filter: brightness(calc(1 + 1.7 * var(--k, 0))) saturate(calc(1 + 0.6 * var(--k, 0)));
}
/* variante "hover" (crossfade) per le linee che ce l'hanno */
.constellation .line.has-hover .l-img:not(.is-hover) img {
  opacity: calc(var(--rest-line) * (1 - var(--k, 0)));
  filter: none;
}
.constellation .line .l-img.is-hover img { opacity: var(--k, 0); filter: none; }
.constellation .line .l-word {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--word-rot, 0deg));
  white-space: nowrap;
  color: #fff;
  font-size: 11.6px;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: var(--k, 0);
  pointer-events: none;
  background: var(--bg);
  padding: 0 6px;
}

/* — città (pin + nome) — home_style.css righe 325-344 */
.constellation .city { z-index: 35; width: 0; height: 0; }
.constellation .city .ci-dot {
  position: absolute;
  left: -4px; top: -4px;
  width: 8px; height: 8px;
}
.constellation .city .ci-dot img {
  display: block; width: 100%; height: 100%;
  opacity: calc(var(--rest-city) + (1 - var(--rest-city)) * var(--k, 0));
}
.constellation .city .ci-name {
  position: absolute;
  left: 50%; top: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--orange);
  font-size: 11.6px;
  font-weight: 500;
  opacity: var(--k, 0);
}

/* — aerei: glifo in volo lungo le linee di collegamento — home_style.css
   righe 347-355 */
.constellation .flyer {
  position: absolute;
  left: 0; top: 0;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 1;
}
.constellation .flyer img { display: block; width: 100%; height: 100%; }

/* ===================== 4) Stato "statico" (mobile/reduced) ===================== */
/* Nel sorgente la prossimità è pilotata da --k (0→1) per elemento via JS.
   Lo stato statico è ottenuto dal JS (Task 3) settando --k:1 su tutti i
   lightable quando applica .is-static a .constellation: nessuna regola CSS
   è necessaria qui. No-op documentale, non nasconde alcun elemento. */
.constellation.is-static .el { /* nulla di speciale: --k lo forza il JS a 1 */ }

/* Fallback accessibile/SEO: i 3 link testuali restano nel DOM ma vengono
   nascosti visivamente (la costellazione la disegna il JS). Pattern sr-only,
   come .nojs-links della landing. */
.constellation .cst-nojs {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------- MOBILE: versione semplificata ----------------------------- */
/* Su mobile la costellazione ricca è illeggibile in un box stretto: il JS
   (renderMobile) rende solo marchio + 3 nodi grandi in una triade e applica
   .is-mobile. Qui il box diventa quadrato e lo stage non è più scalato via --fit. */
.constellation.is-mobile {
  aspect-ratio: 1 / 1;
  max-height: 78vh;
}
.constellation.is-mobile .cst-stage {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
}

/* linee di collegamento marchio → nodi (SVG stirato sul box, tratto costante) */
.constellation .cm-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}
.constellation .cm-lines line {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* marchio centrale */
.constellation .cm-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22%;
  z-index: 3;
}
.constellation .cm-mark img { display: block; width: 100%; height: auto; }

/* nodi: disco colorato + anello + testo, dimensione reale leggibile */
.constellation .cm-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1 / 1;
  text-decoration: none;
  color: var(--node-text);
  z-index: 4;
}
.constellation .cm-ring,
.constellation .cm-disc { position: absolute; }
.constellation .cm-ring img,
.constellation .cm-disc img { display: block; width: 100%; height: 100%; }
.constellation .cm-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6%;
  gap: 2px;
}
.constellation .cm-title {
  font-size: clamp(11px, 3.6vw, 15px);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: pre-line;
}
.constellation .cm-sub {
  font-size: clamp(9px, 2.7vw, 12px);
  font-weight: 400;
  line-height: 1.3;
}