/* ════════════════════════════════════════════════════════════════════
   Mantra Social · apertura, proposta C: "ci voli dentro"
   Da caricare DOPO assets/social-nuovo.css. Cambia SOLO quello che
   succede alla prima schermata quando si scorre; l'entrata al caricamento
   (muro che si posa, tessere in diagonale, titolo a taglio, sottotitolo e
   pulsanti a scalare) resta quella di social-nuovo.css.

   Cosa succede scorrendo (palco fermo per 70vh, poi la pagina riparte):
   - la camera vola dentro il muro: dal primo pixel ogni tessera stacca dal
     muro e viene verso chi guarda con un suo piccolo ritardo e una sua
     velocità. Passano accanto prima quelle ai bordi, per ultima quella
     vicina al centro: il passaggio è a onde. Mentre si avvicinano scivolano verso l'esterno e si girano verso
     il centro come pareti di un corridoio (prospettiva vera, non una scala);
     nell'ultimo tratto, quando sono quasi addosso, si sfocano e svaniscono;
   - titolo, sottotitolo e pulsanti restano fermi per la prima metà, poi
     passano anche loro sopra la camera come un solo blocco, per ultimi;
   - il velo che rendeva leggibile il titolo se ne va con lui;
   - in fondo si accende una luce ambra (--aura) che si avvicina: si è
     arrivati dall'altra parte, e la sezione dopo entra subito.

   Motore: linea del tempo --hero (già dichiarata su .sx-hero), intervallo
   "contain": con l'apertura alta 170vh e in cima alla pagina vale
   "scorrimento da 0 a 70vh", quindi il volo parte dal primo pixel.
   Ogni tessera ha il suo tratto (--sxc-s → --sxc-e, in % di quella corsa).
   Dove il browser non conosce animation-timeline, il velo lo guida già
   social-nuovo.js; tessere, testi e luce li guida assets/social-scroll-C.js.
   Si muovono solo transform, opacity e un filter blur piccolo.
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. Il fondo della tessera passa al video ──
   Così, quando il video svanisce, non resta un riquadro scuro sospeso
   davanti alle tessere più lontane. A riposo non cambia nulla: il video
   copre tutta la tessera, con gli stessi angoli, fondo e filo chiaro. */
.sx-hero .sx-tile{ overflow:visible; background:transparent; box-shadow:none; }
.sx-hero .sx-tile video{ border-radius:inherit; background:#16141b; box-shadow:inset 0 0 0 1px rgba(247,247,248,.08); }

@media (prefers-reduced-motion:no-preference){

  /* ── 1. Palco fermo corto: 70vh di volo, poi la pagina riparte ── */
  .sx-hero{ height:170vh; }

  /* ── 2. Le vecchie animazioni dello scorrimento si spengono (muro che
         si raddrizza, colonne a feed, testi che salgono e sfumano): a
         scorrimento zero erano già allo stato iniziale, l'apertura resta
         identica. Il "Scorri" se ne va come prima. ── */
  .sx-hero .sx-wall-wrap,
  .sx-hero .sx-hero__sign-in,
  .sx-hero .sx-hl__in,
  .sx-hero .sx-hero__foot{ animation-name:none; }

  /* ── 3. Lo spazio del volo ──
     La prospettiva sta sul muro (non sul suo contenitore, che ha già la sua
     inclinazione e la maschera ai bordi): il punto di fuga è il centro del
     muro, cioè il centro dello schermo. Colonne in 3D, così ogni tessera ha
     una profondità sua e quella più vicina copre le altre. */
  .sx-hero .sx-wall{
    --sxc-P:1000px;              /* distanza della camera */
    --sxc-z:800px;               /* quanto vola verso la camera (0,8 della distanza) */
    --sxc-d:calc(var(--tw) * .5);/* deriva verso l'esterno */
    --sxc-rot:30deg;             /* si gira verso il centro, come una parete */
    --sxc-blur:6px;
    --sxc-lift:1;                /* telefono: le tessere in volo si schiariscono */
    perspective:var(--sxc-P); perspective-origin:50% 50%; transform-style:preserve-3d; }
  .sx-hero .sx-col{ transform-style:preserve-3d; animation-name:none; }

  /* Ogni tessera: direzione verso l'esterno (--sxc-ux/uy, dal centro dello
     schermo al centro della tessera) e tratto di volo (--sxc-s → --sxc-e).
     Computer e tablet: 4 colonne da 2, 3, 2, 2 tessere. */
  .sx-col:nth-child(1) > .sx-tile:nth-child(1){ --sxc-ux:-.894; --sxc-uy:-.448; --sxc-s:2;  --sxc-e:48; }
  .sx-col:nth-child(1) > .sx-tile:nth-child(2){ --sxc-ux:-.839; --sxc-uy:.545;  --sxc-s:0;  --sxc-e:42; }
  .sx-col:nth-child(2) > .sx-tile:nth-child(1){ --sxc-ux:-.266; --sxc-uy:-.964; --sxc-s:0;  --sxc-e:32; }
  .sx-col:nth-child(2) > .sx-tile:nth-child(2){ --sxc-ux:-.986; --sxc-uy:-.164; --sxc-s:10; --sxc-e:78; }  /* la centrale, per ultima */
  .sx-col:nth-child(2) > .sx-tile:nth-child(3){ --sxc-ux:-.291; --sxc-uy:.957;  --sxc-s:0;  --sxc-e:40; }
  .sx-col:nth-child(3) > .sx-tile:nth-child(1){ --sxc-ux:.6;    --sxc-uy:-.8;   --sxc-s:8;  --sxc-e:68; }
  .sx-col:nth-child(3) > .sx-tile:nth-child(2){ --sxc-ux:.428;  --sxc-uy:.904;  --sxc-s:6;  --sxc-e:60; }
  .sx-col:nth-child(4) > .sx-tile:nth-child(1){ --sxc-ux:.831;  --sxc-uy:-.555; --sxc-s:0;  --sxc-e:38; }
  .sx-col:nth-child(4) > .sx-tile:nth-child(2){ --sxc-ux:.901;  --sxc-uy:.435;  --sxc-s:4;  --sxc-e:52; }

  /* Il volo della tessera. L'inizio non è scritto: a scorrimento zero vale
     quello che c'è sotto (l'entrata sx-tile-on, poi niente), quindi
     l'apertura non cambia. Asse di rotazione = perpendicolare alla deriva:
     la tessera si apre verso il centro come una parete che ti passa
     accanto. Velocità costante in profondità: la prospettiva fa il resto
     (lontano sembra piano, vicino sfreccia). */
  @keyframes sxc-fly{
    to{ transform:
          translate3d(calc(var(--sxc-ux) * var(--sxc-d)), calc(var(--sxc-uy) * var(--sxc-d)), var(--sxc-z))
          rotate3d(var(--sxc-uy), calc(var(--sxc-ux) * -1), 0, var(--sxc-rot)); }
  }
  /* L'ultimo tratto prima della camera: sfocato e via. */
  @keyframes sxc-fade{
    0%    { opacity:1; filter:none; }
    25%,62%{ opacity:1; filter:brightness(var(--sxc-lift)); }
    100%  { opacity:0; filter:brightness(var(--sxc-lift)) blur(var(--sxc-blur)); }
  }

  html:not(.m3-still).js .sx-hero .sx-tile{
    will-change:transform;
    animation-name:sx-tile-on, sxc-fly;
    animation-duration:760ms, 1000ms;
    animation-timing-function:cubic-bezier(.23,1,.32,1), linear;
    animation-delay:calc(160ms + var(--i,0) * 55ms), 0s;
    animation-fill-mode:backwards, both;
    animation-iteration-count:1, 1;
  }
  html:not(.m3-still) .sx-hero .sx-tile video{ animation:sxc-fade 1000ms linear both; }

  /* ── 4. Titolo, sottotitolo e pulsanti: fermi per metà corsa, poi
         passano sopra la camera tutti insieme (come un cartello che ti
         sfila sopra la testa), per ultimi. ── */
  .sx-hero .sx-hero__inner{ --sxc-s:46; --sxc-e:80; transform-origin:50% 45%; }
  @keyframes sxc-text{
    0%  { transform:perspective(900px) translate3d(0,0,0); opacity:1; filter:none; }
    30% { opacity:1; filter:none; }
    85% { opacity:0; }
    100%{ transform:perspective(900px) translate3d(0,-36vh,400px); opacity:0; filter:blur(5px); }
  }
  @keyframes sxc-gone{ to{ visibility:hidden; } }
  html:not(.m3-still) .sx-hero .sx-hero__inner{ animation:sxc-text 1000ms linear both, sxc-gone 1000ms linear both; }

  /* il velo che serviva al titolo se ne va con lui (guidato anche dal
     ripiego di social-nuovo.js: è un .sd) */
  .sx-hero .sx-hero__veil{ animation-name:sxc-veil; --tl:--hero; --r:contain 24% contain 76%; --ease:linear; }
  @keyframes sxc-veil{ to{ opacity:0; } }

  /* ── 5. L'arrivo: una luce calda che si accende in fondo e si avvicina.
         Sta dietro al muro: la scoprono le ultime tessere che passano.
         Sfuma ben prima dei bordi, così il nastro sotto non la taglia. ── */
  .sx-hero__stage::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    --sxc-s:44; --sxc-e:92;
    background:
      radial-gradient(circle at 50% 50%,rgba(255,206,160,.62) 0,rgba(240,160,95,.26) 6vmin,rgba(232,137,63,0) 20vmin),
      radial-gradient(ellipse 62vmin 38vmin at 50% 50%,rgba(232,137,63,.26) 0%,var(--aura) 45%,rgba(232,137,63,0) 100%); }
  @keyframes sxc-aura{
    from{ opacity:0; transform:scale(.3); }
    to  { opacity:1; transform:scale(1.12); }
  }
  html:not(.m3-still) .sx-hero__stage::before{ animation:sxc-aura 1000ms cubic-bezier(.2,.6,.35,1) both; }

  /* ── 5b. Si atterra su un titolo vero: la testa di "Cosa facciamo"
         (etichetta, titolo, sottotitolo: lo stesso blocco della pagina,
         nessun doppione) arriva dal fondo nell'ultimo 38% del volo: parte
         piccolo, sfocato e trasparente e si ferma nitido, a grandezza vera,
         al centro dello schermo con la luce dietro. Appena atterrato scorre
         con la pagina dal suo posto vero: niente tenuta, niente salti.
         - Il posto vero: la sezione sale sotto l'ultimo tratto dell'apertura
           (margine negativo) così, quando il palco si sblocca, il blocco è
           già al centro dello schermo. Il nastro di parole nell'anteprima sta
           DOPO questa sezione, quindi niente gli passa davanti.
           Centro: metà schermo, meno il margine sopra della sezione, meno
           mezza altezza del blocco (circa 120px; 132px sotto i 1100px).
         - Durante l'arrivo "translate" lo tiene fermo (sale 1 a 1 con lo
           scorrimento: 38% della corsa di 70vh = 26,6vh) e "scale", opacity
           e filter lo portano dal fondo. Stessa linea del tempo --hero (resa
           visibile qui da timeline-scope), stesso tratto: 62% → 100%. */
  body{ timeline-scope:--hero; }
  html:not(.m3-still) .sx-what{ margin-top:calc(-50vh - var(--sec-y) - 120px); }
  /* la sezione ora copre il fondo del palco: non deve rubare i clic ai
     pulsanti dell'apertura (il blocco che arriva non ha collegamenti) */
  html:not(.m3-still) .sx-what{ pointer-events:none; }
  html:not(.m3-still) .sx-what > :not(.sx-what__grid){ pointer-events:auto; }
  html:not(.m3-still) .sx-what__grid{ position:relative; z-index:2; --sxc-s:62; --sxc-e:100; }
  html:not(.m3-still) .sx-what__grid .m3-w--rise{ animation-name:none; }   /* le parole arrivano col blocco */
  @keyframes sxc-hold{ from{ translate:0 calc(-.38 * 70vh); } to{ translate:0 0; } }
  @keyframes sxc-land{
    from{ scale:.6; opacity:0; filter:blur(12px); }
    45% { opacity:1; }
    to  { scale:1; opacity:1; filter:none; }
  }
  html:not(.m3-still) .sx-what__grid{
    animation-name:sxc-hold, sxc-land;
    animation-duration:1000ms, 1000ms;
    animation-timing-function:linear, cubic-bezier(.2,.65,.25,1);
    animation-fill-mode:both, both;
  }
  @media (max-width:1100px){
    html:not(.m3-still) .sx-what{ margin-top:calc(-50vh - var(--sec-y) - 132px); }
  }

  /* ── 6. Legato allo scorrimento dove il browser lo sa fare ── */
  @supports (animation-timeline: view()){
    html:not(.m3-still).js .sx-hero .sx-tile{
      animation-duration:760ms, auto;
      animation-timeline:auto, --hero;
      animation-range:normal, contain calc(var(--sxc-s) * 1%) contain calc(var(--sxc-e) * 1%);
    }
    html:not(.m3-still) .sx-hero .sx-tile video,
    html:not(.m3-still) .sx-hero .sx-hero__inner,
    html:not(.m3-still) .sx-hero__stage::before{
      animation-duration:auto;
      animation-timeline:--hero;
      animation-range:contain calc(var(--sxc-s) * 1%) contain calc(var(--sxc-e) * 1%);
    }
    html:not(.m3-still) .sx-what__grid{
      animation-duration:auto, auto;
      animation-timeline:--hero, --hero;
      animation-range:contain calc(var(--sxc-s) * 1%) contain calc(var(--sxc-e) * 1%);
    }
  }
  /* altrove li guida assets/social-scroll-C.js: fermi al loro inizio (che
     è lo stato a riposo) finché lo script non li porta avanti */
  @supports not (animation-timeline: view()){
    html:not(.m3-still).js .sx-hero .sx-tile{ animation-play-state:running, paused; }
    html:not(.m3-still) .sx-hero .sx-tile video,
    html:not(.m3-still) .sx-hero .sx-hero__inner,
    html:not(.m3-still) .sx-hero__stage::before,
    html:not(.m3-still) .sx-what__grid{ animation-play-state:paused; }
  }

  /* ── 7. Telefono e tablet stretto: 3 colonne da 3 ──
     Tessere piccole (34vw): camera più vicina, stessa corsa in proporzione,
     sfocatura più leggera (meno lavoro per il telefono). */
  @media (max-width:768px){
    .sx-hero{ height:170vh; }
    .sx-hero .sx-wall{ --sxc-P:700px; --sxc-z:560px; --sxc-d:calc(var(--tw) * .35); --sxc-rot:44deg; --sxc-blur:4px; --sxc-lift:1.7; }
    /* schermo stretto: le tessere di lato si girano di più (pareti di un
       corridoio) così restano in vista mentre passano; il velo si apre prima */
    .sx-hero .sx-hero__veil{ --r:contain 6% contain 64%; }
    .sx-col:nth-child(1) > .sx-tile:nth-child(1){ --sxc-ux:-.543; --sxc-uy:-.84;  --sxc-s:4;  --sxc-e:58; }
    .sx-col:nth-child(1) > .sx-tile:nth-child(2){ --sxc-ux:-.985; --sxc-uy:.172;  --sxc-s:6;  --sxc-e:62; }
    .sx-col:nth-child(1) > .sx-tile:nth-child(3){ --sxc-ux:-.467; --sxc-uy:.884;  --sxc-s:0;  --sxc-e:46; }
    .sx-col:nth-child(2) > .sx-tile:nth-child(1){ --sxc-ux:0;     --sxc-uy:-1;    --sxc-s:10; --sxc-e:70; }
    .sx-col:nth-child(2) > .sx-tile:nth-child(2){ --sxc-ux:-.6;   --sxc-uy:-.8;   --sxc-s:14; --sxc-e:78; }  /* la centrale, per ultima */
    .sx-col:nth-child(2) > .sx-tile:nth-child(3){ --sxc-ux:0;     --sxc-uy:1;     --sxc-s:12; --sxc-e:74; }
    .sx-col:nth-child(3) > .sx-tile:nth-child(1){ --sxc-ux:.53;   --sxc-uy:-.848; --sxc-s:0;  --sxc-e:50; }
    .sx-col:nth-child(3) > .sx-tile:nth-child(2){ --sxc-ux:.993;  --sxc-uy:.118;  --sxc-s:8;  --sxc-e:66; }
    .sx-col:nth-child(3) > .sx-tile:nth-child(3){ --sxc-ux:.478;  --sxc-uy:.879;  --sxc-s:2;  --sxc-e:54; }
  }
}

/* ── 7b. (come assets/productions-scroll.css) schermi bassi, es. telefono in
       orizzontale (390 px di altezza): testo e tasti non stanno in una
       schermata e il palco fermo li tagliava. Qui la hero è alta quanto il
       suo contenuto e scorre normale, il titolo parte sotto la barra; niente
       volo, niente arrivo: tutto come a riposo. ── */
@media (max-height:520px) and (orientation:landscape){
  html:not(.m3-still) .sx-hero{ height:auto; }
  html:not(.m3-still) .sx-hero__stage{ position:relative; height:auto; min-height:100vh; min-height:100svh; }
  html:not(.m3-still) .sx-hero__inner{ padding-top:calc(var(--navh) + 8px); }
  html:not(.m3-still).js .sx-hero .sx-tile{ animation-name:sx-tile-on, none; }
  html:not(.m3-still) .sx-hero .sx-tile video,
  html:not(.m3-still) .sx-hero .sx-hero__inner,
  html:not(.m3-still) .sx-hero__stage::before,
  html:not(.m3-still) .sx-hero .sx-hero__veil,
  html:not(.m3-still) .sx-what__grid{ animation-name:none; }
  html:not(.m3-still) .sx-what{ margin-top:0; pointer-events:auto; }
}

/* ── 8. Movimento ridotto: niente vola. Le tessere sfumano soltanto,
       nello stesso ordine (prima i bordi, ultima la centrale), mentre
       l'apertura esce. Versione ferma (?fermo): tutto a riposo. ── */
@media (prefers-reduced-motion:reduce){
  .sx-col:nth-child(1) > .sx-tile:nth-child(1){ --sxc-s:5;  --sxc-e:50; }
  .sx-col:nth-child(1) > .sx-tile:nth-child(2){ --sxc-s:0;  --sxc-e:44; }
  .sx-col:nth-child(1) > .sx-tile:nth-child(3){ --sxc-s:0;  --sxc-e:40; }
  .sx-col:nth-child(2) > .sx-tile:nth-child(1){ --sxc-s:0;  --sxc-e:34; }
  .sx-col:nth-child(2) > .sx-tile:nth-child(2){ --sxc-s:32; --sxc-e:82; }
  .sx-col:nth-child(2) > .sx-tile:nth-child(3){ --sxc-s:3;  --sxc-e:42; }
  .sx-col:nth-child(3) > .sx-tile:nth-child(1){ --sxc-s:24; --sxc-e:72; }
  .sx-col:nth-child(3) > .sx-tile:nth-child(2){ --sxc-s:16; --sxc-e:64; }
  .sx-col:nth-child(3) > .sx-tile:nth-child(3){ --sxc-s:3;  --sxc-e:44; }
  .sx-col:nth-child(4) > .sx-tile:nth-child(1){ --sxc-s:0;  --sxc-e:40; }
  .sx-col:nth-child(4) > .sx-tile:nth-child(2){ --sxc-s:8;  --sxc-e:54; }
  @keyframes sxc-rm-fade{ to{ opacity:0; } }
  @supports (animation-timeline: view()){
    html:not(.m3-still) .sx-hero .sx-tile video{
      animation:sxc-rm-fade linear both; animation-timeline:--hero;
      animation-range:exit calc(var(--sxc-s) * .7%) exit calc(var(--sxc-e) * .7%); }
  }
}