/* =====================================================================
   INPE Rivestimenti - fascia social (Galleria, Progetti)
   Partial: _src/partials/social-band.html   Script: assets/js/social.js

   Riposo: tessere piatte Basalto con filo 1.5px e glifo Gesso.
   Attivo (hover/focus con mouse, oppure allo scroll su touch): la faccia
   sale in verticale e scopre i fianchi estrusi in basso a destra, pieni e
   a spigolo vivo, nei colori reali del social. La faccia e il logo restano
   sull'asse del nome: l'estrusione sporge come lo zoccolo delle lastre
   del sito (10px 10px), non sposta il centro.

   Prestazioni: si animano solo transform e opacity. I fianchi sono due
   parallelogrammi pre-disegnati (skew + scala) che restano agganciati
   alla faccia in ogni fotogramma perche' condividono durata e curva.
   Il colore dei fianchi e' un livello a parte che sfuma insieme a quello
   della faccia. Lo stato e' un solo numero, --sb-on (0 o 1).

   Selettori ancorati a .social-band[data-social-band]: specificita' (0,2,0)
   sulla fascia e (0,3,0) sui discendenti, quanto basta per non essere
   scavalcati dalle regole globali del tema scritte con classi
   (es. "body.inpe-site:not(.x-brand) :focus-visible") senza usare !important.
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Slab ---------- */

.social-band[data-social-band] {
  /* Geometria (px interi: facce, fianchi e glifi restano sulla griglia) */
  --sb-tile: 80px;
  --sb-glyph: 36px;
  --sb-depth: 8px;
  --sb-lift: calc(var(--sb-depth) / 2);
  --sb-base: calc(var(--sb-depth) - var(--sb-lift));
  --sb-gap: 24px;
  /* Il link contiene tutto il blocco attivo (e quindi il filo di focus). */
  --sb-pad-x: calc(var(--sb-depth) + 4px);
  --sb-pad-top: calc(var(--sb-lift) + 4px);
  --sb-pop: 2px;
  --sb-split: 2px;

  /* Curve */
  --sb-spring: cubic-bezier(.3, 1.3, .5, 1);
  --sb-out: cubic-bezier(.2, .8, .2, 1);
  --sb-settle: cubic-bezier(.45, 0, .2, 1);

  position: relative;
  display: block;
  box-sizing: border-box;
  margin-inline: var(--slab-inset, clamp(16px, 4vw, 56px));
  margin-block: var(--slab-gap, 28px) var(--slab-gap-after, 40px);
  padding: 44px 16px 40px;
  background: #14120F;
  color: #F8F6F2;
  box-shadow: var(--slab-plinth, 10px 10px 0 0 #D8D2C7);
  border: 0;
  border-radius: 0;
  isolation: isolate;
}

/* Molla con leggero rimbalzo (smorzamento 0.72), dove linear() e' supportata. */
@supports (transition-timing-function: linear(0, 1)) {
  .social-band[data-social-band] {
    --sb-spring: linear(0, 0.198, 0.379, 0.538, 0.673, 0.784, 0.873, 0.941, 0.991, 1.027, 1.05, 1.063, 1.069, 1.069, 1.066, 1.059, 1.052, 1.044, 1.036, 1.029, 1.022, 1.016, 1.011, 1.007, 1.004, 1.002, 1, 0.999, 0.998, 0.997, 1);
  }
}

.social-band[data-social-band] *,
.social-band[data-social-band] *::before,
.social-band[data-social-band] *::after {
  box-sizing: border-box;
}

.social-band[data-social-band] .social-band__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.social-band[data-social-band] .social-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.social-band[data-social-band] .social-band__title {
  max-width: 100%;
  margin: 0 0 24px;
  padding: 0;
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
  color: #F8F6F2;
}

/* L'unico ottone della fascia: i puntini che rimandano ai social. */
.social-band[data-social-band] .social-band__ellipsis {
  color: #C9A75F;
}

/* ---------- Riga delle tessere ---------- */

.social-band[data-social-band] .social-band__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: max(0px, calc(var(--sb-gap) - 2 * var(--sb-pad-x)));
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-band[data-social-band] .social-band__item {
  --sb-stagger: 0ms;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-band[data-social-band] .social-band__item::before,
.social-band[data-social-band] .social-band__item::marker {
  content: none;
}

.social-band[data-social-band] .social-link {
  --sb-on: 0;
  --sb-ease: var(--sb-settle);
  --sb-fade-ease: var(--sb-settle);
  /* Colore: entra rapido con la tessera; in uscita resta finche' il blocco
     e' quasi a terra, poi sfuma. Stessa regola per faccia, fianchi e copia del glifo. */
  --sb-fade: opacity calc(360ms - var(--sb-on) * 130ms) var(--sb-fade-ease) calc(var(--sb-on) * var(--sb-stagger) + (1 - var(--sb-on)) * 100ms);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--sb-tile) + 2 * var(--sb-pad-x));
  padding: var(--sb-pad-top) var(--sb-pad-x) 10px;
  color: #F8F6F2;
  text-decoration: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.social-band[data-social-band] .social-link:focus-visible {
  outline: 2px solid #C9A75F;
  outline-offset: 0;
}

/* Stato attivo: un solo interruttore. Regole separate: un selettore non
   supportato (:focus-visible su browser vecchi) non deve annullare le altre. */
.social-band[data-social-band].is-lit .social-link {
  --sb-on: 1;
  --sb-ease: var(--sb-spring);
  --sb-fade-ease: var(--sb-out);
}

.social-band[data-social-band] .social-link:focus-visible {
  --sb-on: 1;
  --sb-ease: var(--sb-spring);
  --sb-fade-ease: var(--sb-out);
}

@media (hover: hover) and (pointer: fine) {
  .social-band[data-social-band] .social-link:hover {
    --sb-on: 1;
    --sb-ease: var(--sb-spring);
    --sb-fade-ease: var(--sb-out);
  }
}

/* Su touch le tessere si accendono in sequenza. */
.social-band[data-social-band].is-lit .social-band__item:nth-child(2) { --sb-stagger: 150ms; }
.social-band[data-social-band].is-lit .social-band__item:nth-child(3) { --sb-stagger: 300ms; }

/* ---------- Tessera ---------- */

/* A riposo i livelli nascosti non valgono mai 0 esatto: opacita' .002 e scala .01
   (al massimo 1 livello di colore su 255, o coperti dalla faccia). Un livello a
   opacita' 0 o scala 0 non viene rasterizzato: lo farebbe il browser nel
   fotogramma in cui parte l'animazione. Cosi' invece lo fa quando la fascia
   viene preparata (is-primed). */

.social-band[data-social-band] .social-tile {
  position: relative;
  display: block;
  width: var(--sb-tile);
  height: var(--sb-tile);
  pointer-events: none;
}

.social-band[data-social-band] .social-tile__side,
.social-band[data-social-band] .social-tile__face,
.social-band[data-social-band] .social-tile__fill,
.social-band[data-social-band] .social-tile__glyph,
.social-band[data-social-band] .social-tile__sheen {
  position: absolute;
  display: block;
}

/* Fianchi estrusi. Spessore = profondita' piena; la scala lo riduce a quella
   del fotogramma corrente e lo skew a 45 gradi li aggancia agli spigoli della
   faccia. La base scura resta, il colore (::before) sfuma con la faccia. */
.social-band[data-social-band] .social-tile__side {
  background: #0B0A08;
  transition: transform calc(460ms + var(--sb-on) * 300ms) var(--sb-ease) calc(var(--sb-on) * var(--sb-stagger));
}

.social-band[data-social-band] .social-tile__side::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  opacity: calc(var(--sb-on) * .998 + .002);
  transition: var(--sb-fade);
}

.social-band[data-social-band] .social-tile__side--right {
  top: 0;
  right: 0;
  width: var(--sb-depth);
  height: 100%;
  transform-origin: 100% 0;
  transform: translate(calc(var(--sb-on) * var(--sb-depth)), calc(var(--sb-on) * var(--sb-base))) skewY(45deg) scaleX(calc(var(--sb-on) * .99 + .01));
}

.social-band[data-social-band] .social-tile__side--right::before {
  background: var(--sb-side-r, #0B0A08);
}

.social-band[data-social-band] .social-tile__side--bottom {
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--sb-depth);
  transform-origin: 0 100%;
  transform: translate(calc(var(--sb-on) * var(--sb-depth)), calc(var(--sb-on) * var(--sb-base))) skewX(45deg) scaleY(calc(var(--sb-on) * .99 + .01));
}

.social-band[data-social-band] .social-tile__side--bottom::before {
  background: var(--sb-side-b, #0B0A08);
}

/* La faccia sale solo in verticale: resta centrata sul nome. */
.social-band[data-social-band] .social-tile__face {
  inset: 0;
  overflow: hidden;
  background: #14120F;
  box-shadow: inset 0 0 0 1.5px #3F3A33;
  transform: translate(0, calc(var(--sb-on) * var(--sb-lift) * -1));
  transition: transform calc(460ms + var(--sb-on) * 300ms) var(--sb-ease) calc(var(--sb-on) * var(--sb-stagger));
}

.social-band[data-social-band] .social-tile__fill {
  inset: 0;
  background: var(--sb-face, #14120F);
  opacity: calc(var(--sb-on) * .998 + .002);
  transition: var(--sb-fade);
}

.social-band[data-social-band] .social-tile__glyph {
  inset: 0;
  width: var(--sb-glyph);
  height: var(--sb-glyph);
  margin: auto;
  transform: translate(0, calc(var(--sb-on) * var(--sb-pop) * -1));
  transition: transform calc(420ms + var(--sb-on) * 380ms) var(--sb-ease) calc(var(--sb-on) * (var(--sb-stagger) + 60ms));
}

.social-band[data-social-band] .social-tile__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}

.social-band[data-social-band] .social-tile__icon--main {
  color: #F8F6F2;
}

/* Copia del glifo a spigolo vivo, in basso a destra (per TikTok e' il rosso). */
.social-band[data-social-band] .social-tile__icon--depth,
.social-band[data-social-band] .social-tile__icon--cyan {
  opacity: calc(var(--sb-on) * .998 + .002);
  transition:
    transform calc(300ms + var(--sb-on) * 400ms) var(--sb-ease) calc(var(--sb-on) * (var(--sb-stagger) + 130ms)),
    opacity calc(360ms - var(--sb-on) * 180ms) var(--sb-fade-ease) calc(var(--sb-on) * (var(--sb-stagger) + 130ms) + (1 - var(--sb-on)) * 100ms);
}

.social-band[data-social-band] .social-tile__icon--depth {
  color: var(--sb-glyph-depth, #0B0A08);
  transform: translate(calc(var(--sb-on) * var(--sb-split)), calc(var(--sb-on) * var(--sb-split)));
}

.social-band[data-social-band] .social-tile__icon--cyan {
  color: #25F4EE;
  transform: translate(calc(var(--sb-on) * var(--sb-split) * -1), calc(var(--sb-on) * var(--sb-split) * -1));
}

/* Riflesso: due lame nette che attraversano la faccia una volta sola. */
.social-band[data-social-band] .social-tile__sheen {
  inset: 0;
  opacity: calc(var(--sb-on) * .998 + .002);
  transform: translateX(calc((var(--sb-on) * 2 - 1) * 99%));
  transition:
    transform calc(var(--sb-on) * 900ms) var(--sb-out) calc(var(--sb-on) * (var(--sb-stagger) + 170ms) + (1 - var(--sb-on)) * 260ms),
    opacity calc(200ms - var(--sb-on) * 199ms) linear calc(var(--sb-on) * (var(--sb-stagger) + 170ms));
}

.social-band[data-social-band] .social-tile__sheen > span {
  position: absolute;
  top: -20%;
  bottom: -20%;
  display: block;
  background: #FFFFFF;
  transform: skewX(-24deg);
}

.social-band[data-social-band] .social-tile__sheen > span:first-child {
  left: 24%;
  width: 17%;
  opacity: .16;
}

.social-band[data-social-band] .social-tile__sheen > span:last-child {
  left: 48%;
  width: 6%;
  opacity: .12;
}

/* ---------- Nome ---------- */

.social-band[data-social-band] .social-link__name {
  position: relative;
  display: block;
  margin: calc(var(--sb-base) + 14px) 0 0;
  padding: 0 0 0 .12em;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #F8F6F2;
  opacity: calc(.62 + var(--sb-on) * .38);
  transition: opacity 300ms var(--sb-out) calc(var(--sb-on) * var(--sb-stagger));
}

.social-band[data-social-band] .social-link__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--sb-accent, #C9A75F);
  opacity: calc(var(--sb-on) * .998 + .002);
  transform: scaleX(calc(var(--sb-on) * .99 + .01));
  transition:
    transform calc(320ms + var(--sb-on) * 280ms) var(--sb-out) calc(var(--sb-on) * (var(--sb-stagger) + 110ms)),
    opacity 0ms linear calc(var(--sb-on) * (var(--sb-stagger) + 110ms) + (1 - var(--sb-on)) * 320ms);
}

/* ---------- Colori reali dei social (solo nello stato attivo) ---------- */

.social-band[data-social-band] .social-link--instagram {
  --sb-face: radial-gradient(circle at 16% 106%, #FEDA75 0%, #FA7E1E 24%, #D62976 50%, #962FBF 74%, #4F5BD5 100%);
  --sb-side-r: linear-gradient(180deg, #343C96 0%, #62248A 48%, #8F1C52 100%);
  --sb-side-b: linear-gradient(90deg, #B0561A 0%, #A2322F 46%, #7E194A 100%);
  --sb-glyph-depth: rgba(52, 10, 58, .42);
  --sb-accent: linear-gradient(90deg, #FA7E1E 0%, #D62976 50%, #962FBF 100%);
}

.social-band[data-social-band] .social-link--facebook {
  --sb-face: #0866FF;
  --sb-side-r: #0553D1;
  --sb-side-b: #0340A3;
  --sb-glyph-depth: #0447B8;
  --sb-accent: #0866FF;
}

/* TikTok: faccia nera, fianchi grafite (piu' chiaro a destra, come gli altri).
   Il suo segno e' lo sdoppiamento ciano/rosso del logo: ciano sugli spigoli
   in alto e a sinistra della faccia, rosso sugli spigoli esterni
   dell'estrusione. Tutti e quattro i lati della sagoma sono marcati. */
.social-band[data-social-band] .social-link--tiktok {
  --sb-face: #000000;
  --sb-side-r: #2A2A2A;
  --sb-side-b: #1E1E1E;
  --sb-glyph-depth: #FE2C55;
  --sb-accent: linear-gradient(90deg, #25F4EE 0 50%, #FE2C55 50% 100%);
}

.social-band[data-social-band] .social-link--tiktok .social-tile__fill {
  box-shadow: inset 2px 2px 0 0 #25F4EE;
}

.social-band[data-social-band] .social-link--tiktok .social-tile__side--right::before {
  box-shadow: inset -2px 0 0 0 #FE2C55;
}

.social-band[data-social-band] .social-link--tiktok .social-tile__side--bottom::before {
  box-shadow: inset 0 -2px 0 0 #FE2C55;
}

/* Livelli pronti prima che servano (li gestisce social.js): tutto cio' che
   si muove o sfuma, cosi' la GPU non deve preparare livelli nuovi nel
   fotogramma in cui parte l'animazione. */
.social-band[data-social-band].is-primed .social-tile__face,
.social-band[data-social-band].is-primed .social-tile__side,
.social-band[data-social-band].is-primed .social-tile__glyph {
  will-change: transform;
}

.social-band[data-social-band].is-primed .social-tile__side::before,
.social-band[data-social-band].is-primed .social-tile__fill,
.social-band[data-social-band].is-primed .social-link__name {
  will-change: opacity;
}

.social-band[data-social-band].is-primed .social-tile__icon--depth,
.social-band[data-social-band].is-primed .social-tile__icon--cyan,
.social-band[data-social-band].is-primed .social-tile__sheen,
.social-band[data-social-band].is-primed .social-link__name::after {
  will-change: transform, opacity;
}

/* ---------- Misure ---------- */

@media (max-width: 349.98px) {
  .social-band[data-social-band] {
    --sb-tile: 68px;
    --sb-glyph: 30px;
    --sb-depth: 6px;
    --sb-gap: 20px;
  }

  .social-band[data-social-band] .social-band__title { font-size: 24px; }
}

@media (min-width: 390px) {
  .social-band[data-social-band] {
    --sb-tile: 88px;
    --sb-glyph: 40px;
    --sb-gap: 26px;
  }

  .social-band[data-social-band] .social-band__title { font-size: 28px; }
}

@media (min-width: 560px) {
  .social-band[data-social-band] {
    --sb-tile: 104px;
    --sb-glyph: 48px;
    --sb-depth: 12px;
    --sb-gap: 44px;
    --sb-split: 3px;
    padding: 60px 32px 54px;
  }

  .social-band[data-social-band] .social-band__title {
    margin-bottom: 34px;
    font-size: 34px;
  }

  .social-band[data-social-band] .social-link__name {
    margin-top: calc(var(--sb-base) + 16px);
    font-size: 12px;
  }
}

@media (min-width: 960px) {
  .social-band[data-social-band] {
    --sb-tile: 120px;
    --sb-glyph: 56px;
    --sb-depth: 14px;
    --sb-gap: 72px;
    --sb-pop: 3px;
    padding: 72px 48px 64px;
  }

  .social-band[data-social-band] .social-band__title {
    margin-bottom: 42px;
    font-size: 42px;
  }

  .social-band[data-social-band] .social-link__name { margin-top: calc(var(--sb-base) + 18px); }
}

@media (min-width: 1280px) {
  .social-band[data-social-band] {
    --sb-tile: 128px;
    --sb-glyph: 60px;
    --sb-gap: 88px;
    --sb-depth: 16px;
    padding-block: 80px 70px;
  }

  .social-band[data-social-band] .social-band__title {
    margin-bottom: 46px;
    font-size: 46px;
  }
}

/* ---------- Movimento ridotto ---------- */

@media (prefers-reduced-motion: reduce) {
  .social-band[data-social-band] .social-link,
  .social-band[data-social-band] .social-link *,
  .social-band[data-social-band] .social-link *::before,
  .social-band[data-social-band] .social-link *::after {
    transition: none !important;
  }

  .social-band[data-social-band] .social-tile__sheen {
    display: none;
  }
}