/* ==========================================================================
   Marana Tech — chi-siamo.html («Chi siamo»)
   Oggetto dell'hero: la M di Maranatha (un albero con le foglie) forgiata nella M di
   Marana Tech (piste di circuito, una chiave inglese al posto del tronco). Un fronte di
   tempra sale dalle radici alla chioma, poi i LED si accendono partendo dal cuore, ambra.
   Sotto: la storia in quattro passaggi (una radice che diventa pista), due targhe per
   ruolo unite allo stesso banco (alluminio), i principi innestati sulle radici.
   Stato base = stato finale: gli stati di partenza esistono solo sotto html.js-motion.
   ========================================================================== */

/* ---------- Hero ---------- */
/* il titolo usa .page-hero__title del core (--fs-hero) */
.cs-hero__aside { max-width: 34em; color: var(--fg-3); font-size: var(--fs-small); }

.cs-forge { margin: 0; display: grid; gap: 14px; align-content: center; }
.cs-forge__stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 314 / 256;
}
/* alone del banco dietro al marchio */
.cs-forge__stage::before {
  content: "";
  position: absolute;
  inset: 4% 2% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 50%, rgba(140, 192, 230, .09), transparent 72%),
    radial-gradient(60% 18% at 50% 96%, rgba(0, 0, 0, .35), transparent 70%);
}
/* lampada da banco: un alone già disegnato (.light-spot del core) che segue il puntatore in
   transform, sopra il marchio. Alfa normale, niente fusione: si ridisegna solo il livello. */
.cs-forge__stage > .light-spot {
  --lx: .5;
  --ly: .28;
  --spot-w: .5;
  --spot-h: .47;
  --spot-color: rgba(255, 255, 255, .07);
  z-index: 2;
}
.cs-forge__svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
/* niente will-change sul disegno durante la forgiatura: con il rendering software (SwiftShader)
   il livello a parte blocca i fotogrammi per secondi; senza, il costo resta accettabile */

/* il respiro del marchio finito: l'alone del cuore pulsa, ogni tanto l'ingranaggio fa uno scatto.
   Gira su livelli propri sopra il disegno (opacità e transform): il disegno grande resta fermo e
   non si ridisegna. Mentre respira, alone, LED del cuore e ingranaggio del disegno si nascondono
   sotto le loro copie. La classe is-breathing la mette lo script solo con il palco in vista
   (MT.whileVisible: mai con movimento ridotto, modalità leggera o scheda nascosta).
   Ciclo di 6,1 s: 2,6 s di luce che respira, lo scatto (0,7 s), poi quiete. */
.cs-forge__fx { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.cs-forge__stage.is-breathing[data-state="mark"] .cs-forge__fx { display: block; }
.cs-forge__stage.is-breathing[data-state="mark"] .cs-gear,
.cs-forge__stage.is-breathing[data-state="mark"] .cs-led--heart { visibility: hidden; }
/* posizioni in percentuale del palco (stesso rapporto del viewBox 314 × 256) */
.cs-forge__pulse,
.cs-forge__heart { position: absolute; left: 41.656%; top: 46.68%; width: 7.643%; height: 9.375%; }
.cs-forge__pulse {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 227, 179, .95), rgba(224, 160, 80, .75) 22%, rgba(224, 160, 80, 0));
  opacity: .95;
  will-change: opacity;
  animation: cs-heart 6.1s linear infinite;
}
.cs-forge__heart { display: block; fill: #FFD49A; overflow: visible; }
.cs-forge__cog {
  position: absolute;
  left: 80.557%;
  top: 45.141%;
  width: 16.561%;
  height: 20.3125%;
  display: block;
  overflow: visible;
  will-change: transform;
  animation: cs-clack 6.1s linear infinite;
}
@keyframes cs-heart {
  0% { opacity: .95; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  21.31% { opacity: .4; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  42.62%, 100% { opacity: .95; }
}
/* sei denti ogni 60°: alla ripartenza del ciclo il salto da 60° a 0° non si vede */
@keyframes cs-clack {
  0%, 49.18% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  60.66%, 100% { transform: rotate(60deg); }
}

/* stati del palco: roots (l'albero) · morph (la forgiatura) · swap (dissolvenza) · mark (finale) */
.cs-forge__roots,
.cs-forge__morph { display: none; }
.cs-forge__stage[data-state="roots"] .cs-forge__roots { display: inline; }
.cs-forge__stage[data-state="morph"] .cs-forge__morph,
.cs-forge__stage[data-state="swap"] .cs-forge__morph { display: inline; }
.cs-forge__stage[data-state="roots"] .cs-forge__mark,
.cs-forge__stage[data-state="roots"] .cs-forge__leds,
.cs-forge__stage[data-state="morph"] .cs-forge__mark,
.cs-forge__stage[data-state="morph"] .cs-forge__leds { display: none; }
/* prima che parta lo script (solo con movimento): si vede l'albero, il marchio aspetta */
.js-motion .cs-forge__stage[data-intro="pending"] .cs-forge__roots { display: inline; }
.js-motion .cs-forge__stage[data-intro="pending"] .cs-forge__mark,
.js-motion .cs-forge__stage[data-intro="pending"] .cs-forge__leds { display: none; }

.cs-forge__floor { opacity: .85; }
/* l'albero di Maranatha: corteccia e foglie */
.cs-bark { fill: url(#cs-bark); }
.cs-leaf { fill: url(#cs-leaf); }

/* LED: nello stato finale sono accesi; il cuore è ambra (l'ambra di Maranatha) */
.cs-led__core { fill: #D6EBFA; }
.cs-led--heart .cs-led__core { fill: #FFD49A; }
.cs-led__glow { opacity: .95; }
/* il fronte di tempra: solo durante la forgiatura */
.cs-forge__bloom { opacity: .9; }
.mt-lite .cs-forge__bloom { display: none; }

/* comando «dalle radici ai circuiti» */
.cs-forge__control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.cs-forge__control[data-ready="no"] { visibility: hidden; }
html:not(.js) .cs-forge__control { display: none; }
.cs-forge__end {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cs-forge__end--roots { color: #BDB3A9; }
.cs-forge__end--circuits { color: var(--fg-2); }
.cs-forge__range {
  --track: linear-gradient(90deg, #8C8279 0%, #8D9976 24%, #E6C27A 44%, #C98A4B 56%, #8A5FA8 70%, #4F7FBF 84%, #C3CAD0 100%);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
  border-radius: 8px;
}
.cs-forge__range:active { cursor: grabbing; }
.cs-forge__range:focus { outline: none; }
.cs-forge__range:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.cs-forge__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .06);
}
.cs-forge__range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .06);
}
.cs-forge__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #3A4247 0 2.5px, transparent 3px),
    radial-gradient(circle at 38% 30%, #FFFFFF, #C3CAD0 46%, #6E787F 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 -1px 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform var(--t-micro) var(--ease-out);
}
.cs-forge__range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #3A4247 0 2.5px, transparent 3px),
    radial-gradient(circle at 38% 30%, #FFFFFF, #C3CAD0 46%, #6E787F 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 -1px 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.cs-forge__range:active::-webkit-slider-thumb { transform: scale(1.08); }

.cs-forge__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: var(--fg-3);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ---------- La storia: quattro passaggi ---------- */
.cs-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.cs-story__head { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0; }

.cs-beats { list-style: none; margin: 0; padding: 0; }
.cs-beat {
  position: relative;
  padding: 0 0 clamp(44px, 5vw, 68px) 84px;
}
.cs-beat:last-child { padding-bottom: 0; }
.cs-beat__node {
  position: absolute;
  left: 0;
  top: -12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.cs-beat__node--leaf {
  background: radial-gradient(circle at 40% 30%, #2B2A27, #161514 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(166, 156, 147, .35);
}
.cs-beat__node--leaf svg { width: 28px; height: 28px; }
.cs-beat__node--leaf path { fill: #AEBA91; }
.cs-beat__node--leaf .cs-beat__vein { fill: none; stroke: #1B1A18; stroke-width: 1.3; stroke-linecap: round; }
.cs-beat__node--pad {
  background:
    radial-gradient(circle at 50% 50%, #15181A 0 11px, transparent 11.5px),
    radial-gradient(circle at 38% 30%, #F4F6F7, #A9B2B8 52%, #5C666D 100%);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
}
.cs-beat__node--pad .led { width: 12px; height: 12px; }
/* il passaggio «in corso»: LED ambra acceso che respira piano (loop CSS in opacità, fermo fuori
   vista e spento in modalità leggera: è un [data-loop]) */
.cs-beat__node--amber .led {
  --led-lit: 1;
  --led-color: var(--scintilla);
  --led-ring: rgba(224, 160, 80, .16);
  --led-halo: rgba(224, 160, 80, .85);
}
.js-motion .cs-beat__node--amber .led { animation: cs-breathe 4.6s cubic-bezier(.37, 0, .63, 1) infinite; }
@keyframes cs-breathe {
  0%, 60.87%, 100% { opacity: 1; }
  30.43% { opacity: .45; }
}
.cs-beat__stem {
  position: absolute;
  left: 14px;
  top: 40px;
  width: 24px;
  height: calc(100% - 40px);
  overflow: visible;
}
.cs-beat__line { fill: none; stroke: #9A9087; stroke-width: 3; stroke-linecap: round; }
.cs-beat--circuit .cs-beat__line { stroke: var(--blu); stroke-width: 2.5; stroke-linecap: butt; }
.cs-beat__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cs-beat__state {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--scintilla);
  box-shadow: inset 0 0 0 1px rgba(224, 160, 80, .45);
}
.cs-beat__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cs-beat__text { margin-top: 12px; max-width: 36em; color: var(--fg-2); line-height: 1.6; }
.cs-beat__link { margin-top: 14px; }

/* partenza (solo con JS e movimento): nodi chiusi, steli da disegnare */
.js-motion .cs-beats[data-intro="pending"] .cs-beat__node { opacity: 0; transform: scale(.55); }
.js-motion .cs-beats[data-intro="pending"] .cs-beat__stem { clip-path: inset(0 0 100% 0); }
/* Safari: lo stelo cresce in scaleY dall'alto (solo transform), niente clip-path animato */
html.is-webkit.js-motion .cs-beats[data-intro="pending"] .cs-beat__stem { clip-path: none; transform: scaleY(0); transform-origin: 50% 0; }

/* ---------- Chi c'è in officina (alluminio) ---------- */
.cs-crew__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr);
  align-items: stretch;
}
.cs-crew__joint { align-self: center; display: grid; place-items: center; }
.cs-crew__joint svg { display: block; width: 150px; height: 60px; overflow: visible; }
.cs-joint__shadow { fill: rgba(21, 24, 26, .16); }
.cs-joint__bar { stroke: rgba(21, 24, 26, .2); stroke-width: .8; }
.cs-joint__trace { fill: none; stroke: var(--blu-scuro); stroke-width: 2.4; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.cs-joint__pad { fill: #E9EDEF; stroke: #7A848B; stroke-width: 1.4; }
.cs-joint__led { fill: var(--blu-scuro); }
.cs-joint__slot { fill: none; stroke: #3A4247; stroke-width: 1.8; stroke-linecap: round; }

.cs-role { display: grid; align-content: start; }
.cs-role__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cs-role__head .plate__code { margin: 0; }
.cs-role__emblem {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #E4E8EA, #F7F8F9);
  box-shadow: inset 0 1px 2px rgba(21, 24, 26, .22), 0 1px 0 #fff;
}
.cs-role__emblem svg { width: 24px; height: 24px; overflow: visible; }
.cs-role--roots .cs-role__emblem path { fill: #6F7B58; }
.cs-role--roots .cs-role__vein { fill: none; stroke: #F3F5F6; stroke-width: 1.3; stroke-linecap: round; }
.cs-role__trace { fill: none; stroke: #5B656C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-role__ring { fill: none; stroke: #5B656C; stroke-width: 2; }
.cs-role__dot { fill: var(--blu-scuro); }
.cs-role .plate__title { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.cs-role__tags { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-role__tags li {
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* partenza (solo con JS e movimento): viti allentate, pista spenta */
.js-motion .cs-crew__pair[data-intro="pending"] .cs-joint__screw { transform: rotate(-80deg); transform-box: fill-box; transform-origin: center; }
.js-motion .cs-crew__pair[data-intro="pending"] .cs-joint__trace { stroke-dashoffset: 1.02; }
.js-motion .cs-crew__pair[data-intro="pending"] .cs-joint__led { fill: #AEB6BB; }

/* ---------- Principi: la radice e la regola ---------- */
.cs-graft__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cs-graft__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) 156px minmax(0, 6fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding-block: clamp(30px, 3.6vw, 48px);
  border-bottom: 1px solid var(--line);
}
.cs-graft__root { margin: 0; }
.cs-graft__root p {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.35;
  color: #D6CEC5;
  text-wrap: balance;
}
.cs-graft__root footer {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #AEB891;
}
.cs-graft__link { display: block; width: 156px; height: 52px; overflow: visible; }
.cs-graft__vine { fill: none; stroke: #9DA985; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.cs-graft__trace { fill: none; stroke: #A9B2B8; stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.cs-graft__pad { fill: #1E2327; stroke: #C3CAD0; stroke-width: 1.8; }
.cs-graft__led { fill: var(--blu); }
.cs-graft__rule h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cs-graft__rule p { margin-top: 10px; max-width: 34em; color: var(--fg-2); line-height: 1.6; }

/* partenza (solo con JS e movimento): innesto da disegnare, LED spento */
.js-motion .cs-graft__row[data-intro="pending"] .cs-graft__vine,
.js-motion .cs-graft__row[data-intro="pending"] .cs-graft__trace { stroke-dashoffset: 1.02; }
.js-motion .cs-graft__row[data-intro="pending"] .cs-graft__led { fill: #2A3136; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* una colonna: il palco sotto il testo, senza occupare tutta la larghezza del tablet */
  .cs-forge { max-width: 560px; }
  .cs-story__grid { grid-template-columns: 1fr; }
  .cs-story__head { position: static; }
}
@media (max-width: 860px) {
  .cs-crew__pair { grid-template-columns: 1fr; }
  /* il giunto diventa verticale fra le due targhe */
  .cs-crew__joint { justify-self: center; margin-block: 45px; }
  .cs-crew__joint svg { transform: rotate(90deg); }
  .cs-graft__row { grid-template-columns: 1fr; gap: 0; }
  /* l'innesto scende dalla radice alla regola */
  .cs-graft__link { width: 108px; height: 36px; margin: 40px 0 48px -24px; transform: rotate(90deg); }
}
@media (max-width: 480px) {
  .cs-beat { padding-left: 64px; }
  .cs-beat__node { width: 44px; height: 44px; top: -8px; }
  .cs-beat__node--leaf svg { width: 24px; height: 24px; }
  .cs-beat__stem { left: 10px; top: 36px; height: calc(100% - 36px); }
  .cs-forge__control { gap: 10px; }
}

/* ---------- Stampa: tutto nello stato finale, marchio a inchiostro ---------- */
@media print {
  .cs-forge__stage::before, .cs-forge__fx { display: none !important; }
  .cs-gear { visibility: visible !important; }
  .cs-forge__control { display: none !important; }
  .cs-forge__roots, .cs-forge__morph, .cs-forge__leds, .cs-forge__floor { display: none !important; }
  .cs-forge__mark { display: inline !important; opacity: 1 !important; fill: #2B3237 !important; }
  .cs-beat__node, .cs-beat__stem { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .cs-beat__node--leaf, .cs-beat__node--pad { background: #fff !important; border: 1px solid #999; }
  .cs-beat__line { stroke: #555 !important; }
  .cs-graft__root p { color: #111 !important; }
  .cs-graft__root footer { color: #555 !important; }
  .cs-graft__vine, .cs-graft__trace, .cs-joint__trace { stroke-dashoffset: 0 !important; stroke: #555 !important; }
  .cs-graft__row, .cs-beat { break-inside: avoid; }
}