/* ==========================================================================
   Free Thinking — animazioni del sito (solo front end, mai nel builder)
   Stati e tempi qui; il JS si limita ad aggiungere le classi.
   ========================================================================== */

:root {
  --ft-reveal-duration: 1200ms;
  --ft-reveal-stagger: 120ms;
  --ft-reveal-delay: 400ms;   /* attesa prima che il movimento cominci */
  --ft-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Ingresso dei testi e dei blocchi: [data-reveal] ----------
   Senza data-reveal-when l'elemento si mostra al caricamento della pagina;
   con data-reveal-when="view" quando entra nello schermo.
   Il movimento usa la proprietà singola "translate" e il rilievo delle card
   la proprietà singola "scale": le due animazioni convivono senza che l'una
   cancelli il transform dell'altra. Lo scaglionamento passa da --ft-d, non da
   transition-delay, così la card può aggiungere lo scale alla stessa lista
   senza ereditarne il ritardo. */
.js [data-reveal] {
  --ft-d: var(--ft-reveal-delay);
  opacity: 0;
  translate: 0 12px;
  filter: blur(3px);
  transition:
    opacity var(--ft-reveal-duration) var(--ft-ease) var(--ft-d),
    translate var(--ft-reveal-duration) var(--ft-ease) var(--ft-d),
    filter var(--ft-reveal-duration) var(--ft-ease) var(--ft-d);
}

.js [data-reveal="2"] { --ft-d: calc(var(--ft-reveal-delay) + var(--ft-reveal-stagger)); }
.js [data-reveal="3"] { --ft-d: calc(var(--ft-reveal-delay) + var(--ft-reveal-stagger) * 2); }
.js [data-reveal="4"] { --ft-d: calc(var(--ft-reveal-delay) + var(--ft-reveal-stagger) * 3); }

/* Pagine interne (hero e card): nessuna attesa, lo scaglionamento resta.
   La home conserva i 400ms. */
body:not(.home) [data-reveal] {
  --ft-reveal-delay: 0ms;
}

.js [data-reveal].is-shown,
.reveal-fallback [data-reveal] {
  opacity: 1;
  translate: none;
  filter: none;
}

/* I tre box numerati entrano un po' più svelti degli altri blocchi. */
.ft-pillar {
  --ft-reveal-duration: 900ms;
  --ft-reveal-stagger: 90ms;
}

/* ---------- Card dei servizi: rilievo al passaggio del mouse ----------
   1,8% di ingrandimento: su una card di 628px sono 5,6px per lato, dentro i
   24px che la separano dalla vicina, quindi non la copre. */
.ft-card {
  position: relative;
  transition: scale 250ms ease;
}

.js [data-reveal].ft-card {
  transition:
    opacity var(--ft-reveal-duration) var(--ft-ease) var(--ft-d),
    translate var(--ft-reveal-duration) var(--ft-ease) var(--ft-d),
    filter var(--ft-reveal-duration) var(--ft-ease) var(--ft-d),
    scale 250ms ease;
}

.ft-card .ft-card-cta {
  display: inline-block;
  transition: transform 250ms ease;
}

/* Solo dove c'è un mouse vero: sul touch il :hover resterebbe attaccato dopo il tocco. */
@media (hover: hover) {
  .ft-card:hover {
    scale: 1.018;
    z-index: 1;
  }

  .ft-card:hover .ft-card-cta {
    transform: translateX(16px);
  }
}

/* ---------- Testo a comparsa parola per parola: [data-stream] ---------- */
.ft-stream-word {
  display: inline-block;
  opacity: 0;
  filter: blur(1px);
  transition:
    opacity 600ms var(--ft-ease),
    filter 600ms var(--ft-ease);
}

.ft-stream-word.is-in {
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].ft-card {
    transition: none;
    opacity: 1;
    translate: none;
    filter: none;
  }
  .ft-card,
  .ft-card .ft-card-cta {
    transition: none;
  }
  .ft-card:hover {
    scale: none;
  }
  .ft-card:hover .ft-card-cta {
    transform: none;
  }
  .ft-stream-word {
    transition: none;
    opacity: 1;
    filter: none;
  }
}

/* Hero della home (2026-09-29): foto generata allineata a destra e alta quanto il banner; dove la foto finisce,
   lo sfondo prosegue con lo stesso colore del suo bordo sinistro (ft-hero-home.jpg sfuma verso #F4F5F9). */
section.brxe-234dc9 > .brxe-hroban {
  background-size: auto 100%;
  background-position: right center;
  background-color: #F4F5F9;
}

/* Hero della home su tablet verticale e mobile (2026-09-29): la foto sta sopra il testo, non dietro. Il banner smette
   di mostrare lo sfondo e lo passa a un ::before a tutta larghezza (background-image: inherit). Taglio allineato a
   destra e in basso, foto al 115% dell'altezza del riquadro: si perde la parte alta, restano mani, grafici e portatile. */
@media (max-width: 991px) {
  section.brxe-234dc9 > .brxe-hroban {
    min-height: 0;
    padding-top: 0;
    justify-content: flex-start;
    background-size: 0 0;
    background-color: transparent;
  }
  section.brxe-234dc9 > .brxe-hroban::before {
    content: "";
    display: block;
    align-self: stretch;
    width: auto;
    margin: 0 calc(-1 * var(--ft-space-m)) var(--ft-space-l);
    flex: none;
    height: 62.5vw;                /* 16:10 della larghezza dello schermo: nel flex di Bricks aspect-ratio dava altezza 0 */
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: auto 115%;
    background-position: right bottom;
  }
}

/* Tablet verticale (768-991px): foto meno alta (2:1) e titolo su due righe, nascondendo il 1° e il 3° <br>
   (nel titolo c'e' uno spazio prima di ogni <br>, quindi le parole restano separate). */
@media (min-width: 768px) and (max-width: 991px) {
  section.brxe-234dc9 > .brxe-hroban::before { height: 50vw; }
  section.brxe-234dc9 .brxe-hroh1x br:nth-of-type(1),
  section.brxe-234dc9 .brxe-hroh1x br:nth-of-type(3) { display: none; }
}

/* Tablet orizzontale (992-1279px): la foto scorre a destra quanto basta perche' il gruppo (gomito della donna a righe)
   cominci dopo la fine del titolo: 595px di spostamento a 1024, 385px a 1279, lineare. Si perde la parte destra della foto. */
@media (min-width: 992px) and (max-width: 1279px) {
  section.brxe-234dc9 > .brxe-hroban { background-position: right calc(82.4vw - 1439px) center; }
}

/* Menu dell'header su tablet orizzontale (992-1279px, 2026-09-29): a 18px con 32px fra le voci andava a capo sotto
   i ~1110px; a 15px con 24px sta su una riga anche a 992 (circa 690px necessari, 727 disponibili). */
@media (min-width: 992px) and (max-width: 1279px) {
  #brxe-hdrnav #brxe-hdritm { column-gap: 24px; }
  #brxe-hdrnav #brxe-hdritm > li > a.brxe-text-link { font-size: 15px; }
}

/* Home, «Così guardiamo al futuro» (2026-09-29): dopo lo scambio con la sezione Metodologie qui c'e' la foto verticale
   ft-metodologie; stessa inquadratura che aveva nell'altra sezione (parte alta: mani e portatile). */
#brx-content .brxe-futimg:not(.tag), #brx-content .brxe-futimg img { object-position: 50% 10%; }

/* Bottoni della hero che portano a una sezione della stessa pagina (2026-10-01): scorrimento morbido e margine
   per non far finire l'inizio della sezione sotto l'header fisso. L'header e' sticky (nel flusso) e appena si scorre
   passa da 180 a 88px (sotto 767: da 120 a 76): il contenuto sale della differenza mentre lo scorrimento e' gia'
   partito, quindi il margine deve essere l'altezza dell'header ancora grande, non quella da scrollato. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#brx-content section[id] { scroll-margin-top: 180px; }
@media (max-width: 767px) { #brx-content section[id] { scroll-margin-top: 120px; } }

/* Blog in bozza (2026-10-01, Carlo): sezione blog della home (componente 01b155, usato solo in home) nascosta finché
   il blog non riparte. Per riattivarla basta togliere questa regola. */
#brx-content section.brxe-01b155 { display: none; }