/* ==========================================================================
   Schede — luce, profondita' e movimento
   Caricato dopo site.css su ogni pagina. Identico fra it/ ed en/.

   Le regole vengono dal capitolo 05 del playbook (Motion System):
   - "Breathe, don't bounce": niente rimbalzi ne' overshoot, solo l'easing
     del marchio cubic-bezier(.42, 0, .58, 1);
   - "Slow is authoritative": tempi lunghi, mai frenetici;
   - "Azure is the live signal": l'azzurro e' l'unico colore che si muove.
     La fucsia e l'inchiostro restano fermi.
   E dalla regola del 20/10/2026: nel riquadro e' cliccabile solo l'elemento
   attivo. Per questo il riquadro, al passaggio del mouse, riceve solo luce
   (che non promette un click); si solleva quando il puntatore o il focus
   stanno su uno dei suoi link.

   Tutto e' un miglioramento progressivo: senza JS le schede sono ferme e
   complete, con prefers-reduced-motion nessuna si muove.
   ========================================================================== */

:root {
  --ease-brand: cubic-bezier(.42, 0, .58, 1);
  --azure-glow: rgba(0, 174, 239, .10);
  --azure-rim:  rgba(0, 174, 239, .55);
  --shadow-rest: 0 1px 2px rgba(10, 10, 10, .04);
  --shadow-lift: 0 1px 2px rgba(10, 10, 10, .04), 0 22px 44px -18px rgba(10, 10, 10, .18), 0 8px 16px -10px rgba(0, 174, 239, .14);
}

/* --- LA SCHEDA ---------------------------------------------------------- */
.card {
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-rest);
  transition: transform .6s var(--ease-brand), box-shadow .6s var(--ease-brand), border-color .6s var(--ease-brand);
}
/* Il vecchio sollevamento al passaggio su tutto il riquadro diceva "cliccami"
   anche dove non c'e' niente da cliccare. Ora si solleva per un link. */
.module.card:hover, .pillar.card:hover { transform: none; box-shadow: var(--shadow-rest); border-color: var(--ink-10); }
.card:has(a:hover, a:focus-visible, button:hover, button:focus-visible) {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(0, 174, 239, .28);
}

/* Luce che segue il puntatore: un alone azzurro dentro la scheda (::before) e
   lo stesso alone, piu' intenso, sul solo bordo (::after, ritagliato con una
   maschera). Le coordinate --mx/--my le scrive cards.js. */
.card::before, .card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  transition: opacity .8s var(--ease-brand);
}
.card::before {
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--azure-glow), transparent 65%);
}
.card::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), var(--azure-rim), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) and (pointer: fine) {
  [data-cards]:hover .card::after { opacity: .55; }
  [data-cards] .card:hover::before, [data-cards] .card:hover::after { opacity: 1; }
}
/* Le schede attenuate (verticali previsti, braccio interno) restano spente. */
.module-planned::before, .module-planned::after, .arm-card::before, .arm-card::after { display: none; }

/* --- IL NOME E' UN LINK ------------------------------------------------- */
/* Sottolineatura solo al passaggio, mai cambio di colore (regola del
   18/10/2026). Si disegna da sinistra, invece di comparire di colpo. */
.card-title {
  color: inherit;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size .5s var(--ease-brand);
}
.card-title:hover, .card-title:focus-visible { background-size: 100% 2px; }
.module-name { font-size: 19px; margin: 0; }
.pillar-title a { color: inherit; }

/* --- LE AZIONI ---------------------------------------------------------- */
.module-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; }
.module-actions .module-link { margin-top: 0; }
.module-link, .pillar-link {
  gap: 7px;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.module-link:hover, .module-link:focus-visible, .pillar-link:hover, .pillar-link:focus-visible { gap: 7px; text-decoration: underline; }
/* Sottolineato solo il testo, mai la freccia (Jacopo 24/10/2026). In un link
   flex la sottolineatura scende su tutti i figli, freccia compresa: nei link
   (<a>) il testo ha il suo span .card-label, e la regola passa dal link allo
   span. I <button> "Presto online" non hanno freccia e restano come sopra. */
a.module-link:hover, a.module-link:focus-visible, a.pillar-link:hover, a.pillar-link:focus-visible { text-decoration: none; }
a:hover > .card-label, a:focus-visible > .card-label { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* Il secondo link pesa meno del primo: stesso colore, stessa regola, ma in
   inchiostro, cosi' a colpo d'occhio si legge quale e' l'azione principale. */
.module-link-alt { color: var(--text); }
/* La scheda "Presto online" era un <button> intero: ora lo e' solo l'azione. */
article.module-soon { cursor: auto; }
button.module-link { font: inherit; font-size: 13px; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; }
.module-link-soon { color: var(--fog); }
.module-link-soon:hover, .module-link-soon:focus-visible, .module-soon:hover .module-link-soon { color: var(--fog); }

.card-arrow { display: inline-block; transition: transform .5s var(--ease-brand); }
a:hover > .card-arrow, a:focus-visible > .card-arrow { transform: translateX(4px); }
a:hover > .card-arrow-ext, a:focus-visible > .card-arrow-ext { transform: translate(3px, -3px); }

/* --- IL SEGNALE "LIVE" -------------------------------------------------- */
/* Un punto azzurro che respira accanto agli stati attivi: il sistema e' vivo.
   Ciclo di 3,75 s, meta' del Respiro del marchio (7,5 s), con lo stesso
   easing; l'alone si espande e torna, senza rimbalzo. */
.tag-live { display: inline-flex; align-items: center; gap: 6px; }
.tag-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--azure);
  box-shadow: 0 0 0 0 rgba(0, 174, 239, .45);
  animation: live-breath 3.75s var(--ease-brand) infinite;
}
@keyframes live-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 174, 239, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(0, 174, 239, 0); }
}

/* --- ATMOSFERA ---------------------------------------------------------- */
/* Una trama di punti, quasi invisibile, dietro le griglie delle schede: da'
   profondita' allo sfondo bianco senza aggiungere colore. */
.modules { position: relative; }
.modules > .container { position: relative; z-index: 1; }
.modules::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}

/* --- INGRESSO ----------------------------------------------------------- */
/* Le schede sotto la piega entrano una dopo l'altra mentre la pagina scorre.
   cards.js marca solo quelle ancora fuori dallo schermo, quindi niente di
   quello che si vede all'apertura sparisce per poi ricomparire. */
.reveal-wait { opacity: 0; transform: translateY(22px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease-brand), transform .9s var(--ease-brand), box-shadow .6s var(--ease-brand), border-color .6s var(--ease-brand);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}

/* --- IL DIALOG "PRESTO ONLINE" ------------------------------------------ */
dialog.soon[open] { animation: soon-in .45s var(--ease-brand); }
dialog.soon[open]::backdrop { animation: soon-fade .45s var(--ease-brand); }
@keyframes soon-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes soon-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal-wait { opacity: 1; transform: none; }
  .card:has(a:hover, a:focus-visible, button:hover, button:focus-visible) { transform: none; }
  .tag-live::before { animation: none; }
}