/* =========================================================
   MBP Productions · pagina Agenzia
   Apertura montata, Matias e Gianluca, cosa possiamo fare per te,
   dietro le quinte, manifesto col vetro che scorre via,
   metodo con l'invito, chiusura «Parliamone.». Base in mbp.css.
   Fluidità: solo transform e opacity; ogni variabile scritta
   sull'elemento che la usa; niente filtri o fusioni animati.
   ========================================================= */

/* fascio che si spegne prima del bordo della sezione: niente tagli netti tra le sezioni */
.fascio.ag-luce{-webkit-mask:radial-gradient(58% 38% at 50% var(--ly,64%),#000 0%,transparent 74%);mask:radial-gradient(58% 38% at 50% var(--ly,64%),#000 0%,transparent 74%)}

/* pulsante + link affiancati */
.ag-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
/* invito a fine sezione */
.ag-invito{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.ag-invito .testo-l{max-width:30ch}

/* ---------- 1. apertura montata ---------- */
.ag-apertura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.ag-apertura>.media-pieno{z-index:-3}
/* la valle entra lenta dopo i tagli: scala che scende, solo transform */
.ag-apertura-media>video{transform:scale(1.1);transition:transform 3.2s var(--curva-out)}
.ag-apertura.pronta .ag-apertura-media>video{transform:scale(1)}
/* i tagli: due fotogrammi impilati sopra la valle, cambio d'opacità secco (0 ms) sul battito */
.ag-taglio-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07)}
.ag-apertura.c1 .ag-taglio-1,.ag-apertura.c2 .ag-taglio-2{opacity:1;transform:scale(1);transition:transform .9s var(--curva-out)}
.ag-apertura.fatto .ag-taglio-img{visibility:hidden}
.ag-apertura-velo{z-index:-2;background:
  radial-gradient(90% 70% at 20% 85%, rgba(14,15,12,.72), rgba(14,15,12,.18) 70%),
  linear-gradient(180deg, rgba(14,15,12,.5) 0%, rgba(14,15,12,0) 26%, rgba(14,15,12,.08) 55%, rgba(14,15,12,.88) 100%)}
.ag-apertura>.fascio{z-index:-1;opacity:.75;--ly:72%}
/* il blocco sale piano mentre la pagina scorre via */
.ag-apertura-dentro{padding-block:calc(var(--menu-h) + 40px) clamp(40px,8vh,96px);
  transform:translate3d(0,calc(var(--p,.5) * -90px + 45px),0)}
.ag-apertura-titolo{line-height:.96;text-shadow:0 .04em .24em rgba(0,0,0,.28)}
.ag-apertura-piede{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-top:clamp(24px,4vh,44px)}
.ag-apertura-piede .testo-l{max-width:42ch;text-shadow:0 1px 22px rgba(0,0,0,.55)}
.ag-apertura-piede .ag-azioni{flex:none}
.ag-apertura .link-freccia{text-shadow:0 1px 16px rgba(0,0,0,.6)}

/* ---------- 2. Matias e Gianluca: loro due a tutto schermo ---------- */
.ag-noi .capitolo-media img,.ag-noi .capitolo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ag-noi-velo{background:linear-gradient(180deg,rgba(14,15,12,.45) 0%,rgba(14,15,12,0) 24%,rgba(14,15,12,0) 46%,rgba(14,15,12,.85) 100%),
  radial-gradient(70% 70% at 0% 100%,rgba(14,15,12,.6),rgba(14,15,12,0) 70%)}
.ag-noi-testo{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(48px,10vh,110px);z-index:2}
.ag-noi-testo .titolo .riga{display:block}
.ag-noi-testo .titolo{line-height:.96;text-shadow:0 .04em .24em rgba(0,0,0,.3)}
.ag-noi-testo .testo-l{margin-top:clamp(18px,3vh,30px);max-width:34ch;text-shadow:0 1px 22px rgba(0,0,0,.6)}
.ag-noi-diretto{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:var(--testo);color:var(--bianco-80);text-shadow:0 1px 16px rgba(0,0,0,.6)}
.ag-noi-diretto a{color:var(--bianco);font-weight:600;transition:color .6s var(--curva-out)}
.ag-noi-diretto a:hover{color:var(--lime)}

/* ---------- 3. cosa possiamo fare per te: la lista sopra il girato ---------- */
.ag-srv{position:relative;background:var(--nero)}
.ag-srv-corpo{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"x"}
.ag-srv-fondo,.ag-srv-dentro{grid-area:x}
.ag-srv-fondo{position:relative}
.ag-srv-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--nero-2)}
/* il fondo taglia secco sul servizio che leggi, poi si avvicina piano */
.ag-srv-pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08)}
.ag-srv-pin img.attiva{opacity:1;transform:scale(1);transition:transform 2.6s var(--curva-out)}
.ag-srv-velo{background:
  linear-gradient(90deg,rgba(14,15,12,.86) 0%,rgba(14,15,12,.68) 46%,rgba(14,15,12,.42) 100%),
  linear-gradient(180deg,rgba(14,15,12,.55),rgba(14,15,12,0) 22%,rgba(14,15,12,0) 70%,rgba(14,15,12,.7))}
.ag-srv-dentro{position:relative;z-index:1;padding-block:calc(var(--menu-h) + clamp(60px,10vh,120px)) clamp(90px,14vh,160px)}
.ag-srv-titolo{font-size:var(--t-xl);max-width:12ch;text-shadow:0 .04em .24em rgba(0,0,0,.3)}
.ag-srv-lista{margin-top:clamp(40px,7vh,80px)}
.ag-srv-voce{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;align-items:center;gap:12px clamp(24px,4vw,64px);
  padding-block:clamp(12px,2vh,22px);opacity:.42;transition:opacity .5s var(--curva-out)}
.ag-srv-voce .titolo{font-size:var(--t-l);line-height:1;text-shadow:0 .04em .24em rgba(0,0,0,.3)}
.ag-srv-pratica{font-size:var(--testo-l);line-height:1.32;max-width:34ch;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.ag-srv-pratica b{color:var(--bianco);font-weight:600}
.ag-srv-voce .freccia{font-size:clamp(22px,2vw,32px);color:var(--lime);transform:translate3d(-12px,0,0);opacity:0;transition:transform .6s var(--curva-out),opacity .6s var(--curva-out)}
.ag-srv-lista li.attiva .ag-srv-voce,.ag-srv-voce:focus-visible{opacity:1}
.ag-srv-lista li.attiva .freccia{transform:none;opacity:1}
.ag-srv .ag-invito{margin-top:clamp(56px,9vh,110px)}
.ag-srv .ag-invito .testo-l{text-shadow:0 1px 18px rgba(0,0,0,.6)}

/* ---------- 4. dietro le quinte: pellicola che scorre di lato ---------- */
.ag-quinte{position:relative;padding-block:clamp(110px,14vw,200px) clamp(80px,9vw,140px)}
.ag-quinte-testa{margin-bottom:clamp(40px,6vw,80px)}
.ag-quinte-titolo{font-size:var(--t-xl)}
.ag-quinte-testa .testo-l{margin-top:clamp(18px,2.6vw,28px);max-width:34ch}
.ag-pellicola{position:relative;overflow:hidden}
/* nastro: largo quanto il suo contenuto, spostato da agenzia.js con --x */
.ag-pellicola-nastro{display:flex;gap:2px;width:max-content;transform:translate3d(var(--x,0px),0,0);will-change:transform}
.ag-fotogramma{position:relative;height:min(76vh,760px);aspect-ratio:9/16;overflow:hidden;background:var(--nero-2)}
.ag-fotogramma video,.ag-fotogramma img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.ag-set{position:relative;min-height:78vh;min-height:78svh;margin-top:clamp(56px,7vw,110px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.ag-set>.media-pieno{z-index:-2}
.ag-set-velo{z-index:-1;background:linear-gradient(180deg,rgba(14,15,12,.75) 0%,rgba(14,15,12,.1) 30%,rgba(14,15,12,.2) 55%,rgba(14,15,12,.88) 100%)}
.ag-set-dentro{padding-block:clamp(48px,8vh,96px);align-items:flex-end}
.ag-set-titolo{font-size:var(--t-m);max-width:16ch;text-shadow:0 .03em .2em rgba(0,0,0,.35)}
@media (max-width:760px){.ag-set-dentro{padding-bottom:calc(40px + var(--barra))}.ag-srv-dentro{padding-bottom:calc(72px + var(--barra))}}

/* ---------- 5. manifesto: il vetro scanalato scorre via come una porta ---------- */
.ag-manifesto{position:relative;height:260vh;height:260svh}
/* al telefono il vetro è fermo: un tratto più corto, niente schermi solo sfocati */
@media (max-width:760px){.ag-manifesto{height:185vh;height:185svh}}
.ag-manifesto-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;padding-inline:var(--gut)}
.ag-manifesto-pin>.vetro-scena{z-index:-3}
/* sotto il vetro il girato pulito (al telefono il suo poster finché la porta non si apre) */
.ag-vetro>video{opacity:1}
@media (min-aspect-ratio:1/1){.ag-vetro>video{object-position:50% 100%}}
/* schermi verticali: la testa sta nella metà alta del girato, il testo va in basso */
@media (max-aspect-ratio:1/1){.ag-manifesto-pin{justify-content:flex-end;padding-bottom:calc(clamp(48px,8vh,96px) + var(--barra) + env(safe-area-inset-bottom))}}
.ag-porta{position:absolute;inset:0;overflow:hidden;transform:translate3d(calc(var(--apri,0) * -104%),0,0);
  box-shadow:28px 0 60px -10px rgba(0,0,0,.55)}
.ag-porta>canvas{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);filter:blur(var(--vetro-blur,7px)) saturate(1.05);transform:translateZ(0)}
.vetro-scena.statico .ag-porta>canvas{filter:none;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);animation:mbp-deriva 11s var(--curva) infinite alternate}
/* il bordo del vetro prende la luce */
.ag-porta::after{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:linear-gradient(180deg,rgba(244,246,239,.05),rgba(244,246,239,.55) 45%,rgba(244,246,239,.12))}
.ag-manifesto-velo{z-index:-2;background:
  radial-gradient(80% 70% at 30% 50%, rgba(14,15,12,.42), rgba(14,15,12,.12) 72%),
  linear-gradient(180deg, rgba(14,15,12,.5), rgba(14,15,12,0) 30%, rgba(14,15,12,0) 65%, rgba(14,15,12,.75))}
/* più buio finché il vetro è chiuso: solo opacità */
.ag-manifesto-buio{z-index:-2;background:radial-gradient(80% 70% at 30% 50%, rgba(14,15,12,.34), rgba(14,15,12,.1) 72%);opacity:var(--o,1)}
.ag-manifesto-titolo{font-size:min(9.6vw,16vh);line-height:.98;max-width:14ch;text-shadow:0 .04em .24em rgba(0,0,0,.3)}
.ag-riga{display:block;opacity:var(--v,0);transform:translate3d(0,calc((1 - var(--v,0)) * 60px),0)}
.ag-manifesto-sotto{margin-top:clamp(22px,3.4vh,40px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;
  opacity:var(--v,0);transform:translate3d(0,calc((1 - var(--v,0)) * 30px),0)}
.ag-manifesto-sotto .testo-l{max-width:32ch;text-shadow:0 1px 22px rgba(0,0,0,.6)}
.ag-manifesto-sotto .link-freccia{text-shadow:0 1px 16px rgba(0,0,0,.6)}

/* ---------- 6. metodo: girato a tutto schermo, i passi ci scorrono sopra ---------- */
.ag-metodo{position:relative;overflow:clip;background:var(--nero)}   /* clip, non hidden: se no il pin sticky non si ferma */
.ag-metodo-corpo{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"x"}
.ag-metodo-media,.ag-passi{grid-area:x}
.ag-metodo-media{position:relative}
.ag-metodo-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--nero-2)}
.ag-metodo-clip{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 1.1s var(--curva),transform 2.6s var(--curva-out)}
.ag-metodo-clip.attiva{opacity:1;transform:scale(1)}
.ag-metodo-clip video,.ag-metodo-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Kangeon: il volto resta a destra del testo (al telefono resta fuori quadro, si vede l'insegna) */
.ag-metodo-clip:first-child video{object-position:0% 50%}
.ag-metodo-velo{background:
  linear-gradient(90deg,rgba(14,15,12,.78) 0%,rgba(14,15,12,.5) 38%,rgba(14,15,12,.08) 72%),
  linear-gradient(180deg,rgba(14,15,12,.4),rgba(14,15,12,0) 26%,rgba(14,15,12,0) 70%,rgba(14,15,12,.6))}
.ag-passi{position:relative;z-index:1;min-width:0}
/* un passo alla volta: quello prima sparisce del tutto, non resta sbiadito */
.ag-passo{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--menu-h) var(--gut) 60px;
  opacity:0;transform:translate3d(0,30px,0);transition:opacity 1s var(--curva-out),transform 1.2s var(--curva-out)}
.ag-passo.attivo{opacity:1;transform:none}
.ag-passo-titolo{line-height:.96;text-shadow:0 .04em .24em rgba(0,0,0,.3)}
.ag-passo-titolo .riga{display:block}
.ag-passo .testo-l{margin-top:clamp(18px,3vh,30px);max-width:30ch;text-shadow:0 1px 22px rgba(0,0,0,.6)}
.ag-passo-esteso{margin-top:18px;max-width:44ch;color:var(--bianco);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.ag-passo-invito .ag-azioni{margin-top:clamp(26px,4vh,44px)}
.ag-passo-invito .link-freccia{text-shadow:0 1px 16px rgba(0,0,0,.6)}

/* ---------- 7. chiusura ---------- */
.ag-chiusura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.ag-chiusura>.media-pieno{z-index:-3}
.ag-chiusura>.velo{z-index:-2}
.ag-chiusura>.fascio{z-index:-1;opacity:.8}
.ag-chiusura .velo-pieno{background:rgba(14,15,12,.46)}
.ag-chiusura-dentro{padding-block:clamp(140px,20vh,220px) clamp(48px,9vh,100px)}
.ag-firma{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-80);margin-bottom:clamp(10px,2vh,22px)}
.ag-chiusura-titolo{line-height:.96;text-shadow:0 .03em .2em rgba(0,0,0,.3)}
.ag-chiusura-piede{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:end;gap:32px clamp(32px,5vw,96px);margin-top:clamp(28px,5vh,56px)}
.ag-chiusura-invito .testo-l{max-width:30ch;margin-bottom:clamp(20px,3vh,30px)}
.ag-chiusura-contatti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:22px clamp(20px,3vw,48px);font-size:var(--testo)}
.ag-chiusura-contatti li{display:grid;gap:4px;align-content:start}
.ag-chiusura-contatti b{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--grigio);margin-bottom:6px}
.ag-chiusura-contatti a{color:var(--bianco);overflow-wrap:anywhere;transition:color .6s var(--curva-out)}
.ag-chiusura-contatti a:hover{color:var(--lime)}

/* ---------- tablet e computer stretti ---------- */
@media (max-width:1100px){
  .ag-apertura-piede{flex-direction:column;align-items:flex-start}
  .ag-chiusura-piede{grid-template-columns:minmax(0,1fr)}
}
/* tablet verticale: il passo legge in basso come al telefono */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .ag-metodo-velo{background:linear-gradient(180deg,rgba(14,15,12,.62) 0%,rgba(14,15,12,.42) 30%,rgba(14,15,12,.62) 58%,rgba(14,15,12,.92) 100%)}
  .ag-passo{justify-content:flex-end;padding-bottom:clamp(90px,10vh,130px)}
}

/* ---------- telefono ---------- */
@media (max-width:760px){
  .ag-apertura-dentro{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
  .ag-apertura-piede{flex-direction:column;align-items:flex-start}
  .ag-apertura-piede .testo-l{font-size:17px}
  .ag-azioni{gap:14px 24px}

  .ag-noi-testo{bottom:calc(28px + var(--barra) + env(safe-area-inset-bottom))}
  .ag-noi-testo .testo-l{font-size:18px}

  .ag-srv-velo{background:linear-gradient(180deg,rgba(14,15,12,.7),rgba(14,15,12,.62) 50%,rgba(14,15,12,.8))}
  .ag-srv-titolo{font-size:14vw}
  .ag-srv-voce{grid-template-columns:minmax(0,1fr);gap:8px;padding-block:16px;opacity:.5}
  .ag-srv-voce .titolo{font-size:12.4vw}
  .ag-srv-pratica{font-size:17px}
  .ag-srv-voce .freccia{display:none}
  .ag-invito{flex-direction:column;align-items:flex-start}

  .ag-quinte-titolo{font-size:14vw}
  .ag-fotogramma{height:62svh}

  .ag-manifesto-titolo{font-size:12.4vw}
  .ag-manifesto-sotto .testo-l{font-size:18px}

  .ag-metodo-velo{background:
    linear-gradient(180deg,rgba(14,15,12,.62) 0%,rgba(14,15,12,.42) 30%,rgba(14,15,12,.62) 58%,rgba(14,15,12,.92) 100%)}
  .ag-passo{justify-content:flex-end;padding:var(--menu-h) var(--gut) calc(40px + var(--barra) + env(safe-area-inset-bottom))}
  .ag-passo .testo-l{font-size:19px}
  .ag-passo-esteso{font-size:16px}
  .ag-passo-invito .ag-azioni{flex-direction:column;align-items:flex-start}

  .ag-chiusura-piede{grid-template-columns:minmax(0,1fr)}
  .ag-chiusura-contatti{grid-template-columns:1fr 1fr}
  .ag-chiusura-contatti li:last-child{grid-column:1/-1}
}


/* ---------- telefono in orizzontale e schermi bassi: tutto sta in uno schermo ---------- */
@media (max-height:500px) and (orientation:landscape){
  .ag-noi-testo{bottom:76px}
  .ag-noi-testo:not(.ag-noi-nome){right:auto;max-width:42%}
  .ag-noi-titolo{font-size:clamp(36px,11vh,60px)!important}
  .ag-noi-testo .testo-l{font-size:15px;margin-top:10px}
  .ag-noi-diretto{margin-top:8px;font-size:14px}
  .ag-noi-nome .titolo{font-size:clamp(48px,24vh,110px)!important}
  .ag-srv-voce .titolo{font-size:clamp(30px,10vh,44px)}
  .ag-srv-pratica{font-size:15px}
  .ag-fotogramma{height:78vh}
  .ag-set-dentro{padding-bottom:76px}
  .ag-manifesto-titolo{font-size:min(7vw,15vh)}
  .ag-manifesto-sotto .testo-l{font-size:15px}
  .ag-passo{padding:calc(var(--menu-h) + 4px) var(--gut) 76px;justify-content:flex-end}
  .ag-passo .ag-passo-titolo{font-size:clamp(36px,15vh,64px)!important}
  .ag-passo .testo-l{font-size:16px;margin-top:10px;max-width:40ch}
  .ag-passo-esteso{font-size:14px;margin-top:8px;max-width:48ch}
  .ag-passo-invito .ag-passo-titolo{font-size:clamp(30px,12vh,52px)!important}
  .ag-passo-invito .ag-azioni{margin-top:16px}
  /* Kangeon: il volto va a destra, oltre la colonna del testo */
  .ag-metodo-clip:first-child video{transform:scale(1.7);transform-origin:0 50%}
  .ag-chiusura-dentro{padding-block:90px 76px}
  .ag-chiusura-titolo{font-size:clamp(56px,26vh,120px)!important}
}

/* ---------- movimento ridotto: tutto fermo e leggibile ---------- */
@media (prefers-reduced-motion:reduce){
  .ag-taglio-img{display:none}
  .ag-apertura-media>video,.ag-srv-pin img,.ag-metodo-clip{transition:none;transform:none}
  .ag-apertura-dentro{transform:none}
  .ag-srv-voce{opacity:1}
  .ag-srv-voce .freccia{opacity:1;transform:none}
  .ag-manifesto{height:auto}
  .ag-manifesto-pin{position:relative}
  .ag-riga,.ag-manifesto-sotto{--v:1}
  .vetro-scena.statico .ag-porta>canvas{animation:none}
  .ag-pellicola{overflow-x:auto}
  .ag-pellicola-nastro{transform:none}
  .ag-passo{opacity:1;transform:none;transition:none}
}

/* telefono e tablet: i contatti della chiusura sono toccabili (44 px), la griglia resta la stessa */
@media (max-width:1100px),(pointer:coarse){
  .ag-chiusura-contatti li{gap:0}
  .ag-chiusura-contatti a{display:flex;align-items:center;min-height:44px}
}