/* ============ token ============ */
:root{
  --fondo:#EDF0EA;
  --fondo-caldo:#F6F2EC;
  --verde-profondo:#16332C;
  --verde-medio:#3E574F;
  --salvia:#B4C4B4;
  --maiolica:#2C6079;
  --ocra:#D08657;
  --rosa:#E7D6CB;
  --linea:rgba(22,51,44,.16);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --testo:"Karla","Helvetica Neue",Arial,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;overflow-x:clip;background:var(--fondo);color:var(--verde-profondo);
  font-family:var(--testo);font-size:17px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem);font-weight:400;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.28rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
a{color:var(--maiolica);text-underline-offset:.22em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--ocra);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.misura{max-width:64ch}
section{padding:clamp(70px,9vw,130px) 0}
.occhio{font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--verde-medio);margin:0 0 .7em}


/* ============ movimento ============ */
@media (prefers-reduced-motion:no-preference){
  .rivela{opacity:0;transform:translateY(16px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
  .rivela.visibile{opacity:1;transform:none}

  html.js-rivela .percorso .glifo circle{opacity:0;transform:scale(.72);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.3,.64,1)}
  html.js-rivela .percorso.visibile .glifo circle{opacity:1;transform:none}
  html.js-rivela .percorso.visibile .glifo circle:nth-child(1){transition-delay:.12s}
  html.js-rivela .percorso.visibile .glifo circle:nth-child(2){transition-delay:.24s}
  html.js-rivela .percorso.visibile .glifo circle:nth-child(3){transition-delay:.36s}
  html.js-rivela .percorso.visibile .glifo circle:nth-child(4){transition-delay:.48s}
  html.js-rivela .percorso.visibile .glifo circle:nth-child(5){transition-delay:.6s}

  .bottone,.bottone-chiaro,.tel-testata{transition:background .2s ease,color .2s ease,transform .2s ease}
  .bottone:hover,.bottone-chiaro:hover,.tel-testata:hover{transform:translateY(-2px)}
  .bottone:active,.bottone-chiaro:active,.tel-testata:active{transform:translateY(0)}

  header{transition:box-shadow .3s ease,background .3s ease}
  header.compatta{box-shadow:0 1px 18px rgba(22,51,44,.09)}
}

.scatto{margin:0;overflow:hidden;border:1px solid var(--linea);line-height:0}
.scatto img{border:0;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.scatto:hover img{transform:scale(1.035)}
.studio figure{overflow:hidden}
.studio figure img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.studio:hover figure img{transform:scale(1.045)}
.studio{transition:border-color .3s ease,box-shadow .3s ease}
.studio:hover{border-color:rgba(22,51,44,.34);box-shadow:0 6px 24px rgba(22,51,44,.07)}
.ente{transition:border-color .3s ease}
.ente:hover{border-color:var(--ocra)}

nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
nav a:hover{text-decoration:none}
nav a:hover::after{transform:scaleX(1)}

.percorso{transition:background .35s ease}
.percorso:hover{background:rgba(22,51,44,.025)}
.marchio .segno{transition:transform .5s cubic-bezier(.34,1.3,.64,1)}
.marchio:hover .segno{transform:rotate(-8deg)}


/* comparsa guidata dallo scorrimento, senza JavaScript */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .intestazione-sezione,.percorso,.ente,.scatto,.studio,.online,.chiusura,.richiamo,
    .approccio .griglia > div,.chi-sono .griglia > *,.contatti .griglia > *{
      animation:sali linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 46%;
    }
    @keyframes sali{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

    .percorso .glifo circle{animation:sboccia linear both;animation-timeline:view();transform-box:fill-box;transform-origin:center}
    .percorso .glifo circle:nth-child(1){animation-range:entry 8% entry 40%}
    .percorso .glifo circle:nth-child(2){animation-range:entry 14% entry 46%}
    .percorso .glifo circle:nth-child(3){animation-range:entry 20% entry 52%}
    .percorso .glifo circle:nth-child(4){animation-range:entry 26% entry 58%}
    .percorso .glifo circle:nth-child(5){animation-range:entry 32% entry 64%}
    @keyframes sboccia{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
  }
}


/* comparsa in apertura: parte da sola al caricamento */
@media (prefers-reduced-motion:no-preference){
  @keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes scendi{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes deriva{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
  @keyframes respiro{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

  header{animation:scendi .6s cubic-bezier(.22,.61,.36,1) both}
  .apertura h1{animation:entra .85s cubic-bezier(.22,.61,.36,1) .12s both}
  .apertura .sommario{animation:entra .85s cubic-bezier(.22,.61,.36,1) .28s both}
  .apertura .azioni{animation:entra .85s cubic-bezier(.22,.61,.36,1) .44s both}
  .apertura .lingue{animation:entra .85s cubic-bezier(.22,.61,.36,1) .58s both}
  .apertura .visivo{animation:entra .9s cubic-bezier(.22,.61,.36,1) .2s both}
  .costellazione{animation:deriva 13s ease-in-out 2.4s infinite alternate}
  .bottone:hover,.bottone-chiaro:hover{animation:respiro 1.6s ease-in-out infinite}
}

/* ============ testata ============ */
header{position:sticky;top:0;z-index:60;background:rgba(237,240,234,.9);backdrop-filter:blur(9px);border-bottom:1px solid var(--linea)}
.testata{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.marchio{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--verde-profondo);white-space:nowrap}
.marchio .segno{width:32px;height:32px;flex:none;color:#17563A}
.marchio .testo{font-family:var(--display);font-size:1.06rem;letter-spacing:-.01em}
.marchio .testo span{display:block;font-family:var(--testo);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#B08150;line-height:1.4;margin-top:.15em}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav a{color:var(--verde-medio);text-decoration:none;font-size:.94rem}
nav a:hover{color:var(--verde-profondo);text-decoration:underline}
.tel-testata{font-size:.94rem;color:var(--verde-profondo);text-decoration:none;border:1px solid var(--verde-profondo);padding:.42em 1em;border-radius:100px;white-space:nowrap}
.tel-testata:hover{background:var(--verde-profondo);color:var(--fondo)}
@media(max-width:940px){nav{display:none}}
@media(max-width:480px){.wrap{padding:0 20px}.marchio{gap:9px}.marchio .segno{width:28px;height:28px}.marchio .testo{font-size:.98rem}.marchio .testo span{display:none}.tel-testata{padding:.4em .85em;font-size:.88rem}}

/* ============ apertura ============ */
.apertura{padding:clamp(56px,8vw,104px) 0 clamp(60px,8vw,110px)}
.apertura .griglia{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,64px);align-items:center}
.apertura h1 em{font-style:italic;font-weight:300}
.sommario{font-size:1.16rem;color:var(--verde-medio);max-width:46ch;margin-top:1.4em}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1em}
.bottone{display:inline-block;background:var(--verde-profondo);color:var(--fondo);text-decoration:none;padding:.85em 1.6em;border-radius:100px;font-size:1rem;font-weight:500;transition:background .18s ease}
.bottone:hover{background:#0d211c}
.bottone.chiaro{background:transparent;color:var(--verde-profondo);border:1px solid var(--verde-profondo)}
.bottone.chiaro:hover{background:rgba(22,51,44,.07)}
.lingue{margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--linea);font-size:.95rem;color:var(--verde-medio)}
.lingue b{font-weight:500;color:var(--verde-profondo)}

/* costellazione */
.costellazione{width:100%;height:auto}
.costellazione .c-piena{fill:var(--salvia);fill-opacity:.5}
.costellazione .c-vuota{fill:none;stroke:var(--verde-profondo);stroke-opacity:.45;stroke-width:1.2}
.costellazione .c-ocra{fill:var(--rosa);fill-opacity:.85}
.costellazione .filo{fill:none;stroke:var(--verde-profondo);stroke-opacity:.4;stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .costellazione .filo{stroke-dasharray:420;stroke-dashoffset:420;animation:tessi 2.1s cubic-bezier(.4,0,.2,1) .25s forwards}
  .costellazione circle{opacity:0;animation:appari .9s ease forwards}
  .costellazione circle:nth-of-type(1){animation-delay:.15s}
  .costellazione circle:nth-of-type(2){animation-delay:.35s}
  .costellazione circle:nth-of-type(3){animation-delay:.55s}
  .costellazione circle:nth-of-type(4){animation-delay:.75s}
  .costellazione circle:nth-of-type(5){animation-delay:.95s}
  .costellazione circle:nth-of-type(6){animation-delay:1.15s}
  @keyframes tessi{to{stroke-dashoffset:0}}
  @keyframes appari{to{opacity:1}}
}
@media(max-width:860px){
  .apertura .griglia{grid-template-columns:1fr}
  .apertura .visivo{order:-1;max-width:340px}
}


/* richiami all'azione ricorrenti */
.richiamo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 34px;margin-top:clamp(38px,5vw,58px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--linea)}
.richiamo p{font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.25;letter-spacing:-.015em;margin:0;max-width:34ch}
.richiamo .gruppo-bottoni{display:flex;flex-wrap:wrap;gap:12px}
.richiamo.su-scuro{border-top-color:rgba(246,242,236,.2)}
.richiamo.su-scuro p{color:var(--fondo-caldo)}
.chi-sono .bottone-chiaro,.contatti .bottone-chiaro{color:var(--verde-profondo)}

/* ============ percorsi ============ */
.percorsi{background:var(--fondo-caldo);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.intestazione-sezione{max-width:60ch;margin-bottom:clamp(38px,5vw,62px)}
.elenco-percorsi{display:grid;gap:0}
.percorso{display:grid;grid-template-columns:104px minmax(0,.72fr) minmax(0,1.55fr);gap:clamp(18px,3vw,40px);align-items:start;padding:34px 0;border-top:1px solid var(--linea)}
.percorso:last-child{border-bottom:1px solid var(--linea)}
.percorso .glifo{align-self:center;width:100%;max-width:104px;height:auto}
.percorso h3{margin-bottom:.3em}
.percorso p{margin:0;color:var(--verde-medio)}
.glifo circle{fill:none;stroke:var(--verde-profondo);stroke-width:1.1;vector-effect:non-scaling-stroke}
.glifo .pieno{fill:var(--salvia);fill-opacity:.55;stroke-opacity:.75}
@media(max-width:760px){
  .percorso{grid-template-columns:64px minmax(0,1fr);gap:18px}
  .percorso p{grid-column:1/-1}
}

/* ============ approccio ============ */
.approccio .griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:start}
.citazione{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.28;font-weight:300;letter-spacing:-.02em;border-left:2px solid var(--ocra);padding-left:clamp(20px,3vw,34px);margin:0}
.citazione small{display:block;font-family:var(--testo);font-size:.9rem;letter-spacing:0;color:var(--verde-medio);margin-top:1.2em;line-height:1.6}
@media(max-width:820px){.approccio .griglia{grid-template-columns:1fr}}

/* ============ chi sono ============ */
.chi-sono{background:var(--verde-profondo);color:var(--fondo)}
.chi-sono h2,.chi-sono h3{color:var(--fondo-caldo)}
.chi-sono .occhio{color:var(--salvia)}
.chi-sono a{color:var(--rosa)}
.chi-sono .griglia{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,70px);align-items:start}
.ritratto{position:relative;margin:0}
.ritratto img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92)}
.ritratto figcaption{margin-top:.8em;font-size:.85rem;color:rgba(246,242,236,.55);line-height:1.5}
.chi-sono p{color:rgba(246,242,236,.82)}
.segnaposto{border:1px dashed rgba(246,242,236,.35);padding:22px 24px;margin-top:6px;font-size:.94rem;color:rgba(246,242,236,.65)}
@media(max-width:820px){.chi-sono .griglia{grid-template-columns:1fr}.ritratto{max-width:300px}}

/* ============ collaborazioni ============ */
.collaborazioni .elenco{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px);margin-top:clamp(30px,4vw,50px)}
.ente{border-top:2px solid var(--verde-profondo);padding-top:20px}
.ente h3{margin-bottom:.45em}
.ente .ruolo{font-size:.88rem;color:var(--ocra);margin-bottom:.8em}
.ente p{color:var(--verde-medio);margin:0}
@media(max-width:760px){.collaborazioni .elenco{grid-template-columns:1fr}}

/* ============ studi ============ */
.studi{background:var(--fondo-caldo);border-top:1px solid var(--linea)}
@media(max-width:640px){.spazi{grid-template-columns:1fr;gap:18px}.spazi img{aspect-ratio:3/4}}
.studio{display:block;background:var(--fondo);border:1px solid var(--linea);overflow:hidden;color:inherit;text-decoration:none}
.studio figure{margin:0;border-bottom:1px solid var(--linea);background:#e9eae6}
.studio figure img{width:100%;height:auto}
.studio .indicazioni{font-size:.95rem;color:#2d5477;text-decoration:underline}
.studio .corpo{padding:24px 26px 28px}
.studio h3{margin-bottom:.25em}
.studio .via{color:var(--verde-medio);margin:0 0 1em}
.studio .nota{font-size:.93rem;color:var(--verde-medio);margin:0 0 1.2em}
.studio .indicazioni{font-size:.95rem}
.online{margin-top:clamp(30px,4vw,44px);background:var(--rosa);padding:clamp(26px,4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.online p{margin:0;max-width:58ch;color:#5a4238}
.online h3{margin-bottom:.4em;color:#4a352c}
@media(max-width:820px){.studio-blocco{grid-template-columns:1fr}.online{grid-template-columns:1fr}}


/* ---- studi: foto e mappa affiancate ---- */
.studio-blocco{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,36px);align-items:start;margin-top:clamp(32px,4.5vw,56px)}
.studio-blocco .scatto{height:100%}
.studio-blocco .scatto img{aspect-ratio:3/4;height:100%}
.studio figure img{aspect-ratio:5/4;object-fit:cover;object-position:50% 50%}
@media(max-width:820px){
  .studio-blocco{grid-template-columns:1fr;gap:16px}
  .studio-blocco .scatto img{aspect-ratio:4/3}
}

/* ============ contatti ============ */
.contatti{background:var(--verde-profondo);color:var(--fondo-caldo)}
.contatti h2{color:var(--fondo-caldo);max-width:16ch}
.contatti .griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:end}
.contatti p{color:rgba(246,242,236,.82);max-width:46ch}
.recapiti{list-style:none;margin:0;padding:0;display:grid;gap:0}
.recapiti li{border-top:1px solid rgba(246,242,236,.2);padding:1.15em 0}
.recapiti li:last-child{border-bottom:1px solid rgba(246,242,236,.2)}
.recapiti a{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--fondo-caldo);text-decoration:none;letter-spacing:-.02em}
.recapiti a:hover{color:var(--rosa);text-decoration:underline}
.recapiti .etichetta{display:block;font-family:var(--testo);font-size:.82rem;color:var(--salvia);margin-bottom:.3em;letter-spacing:.02em}
.chiusura{grid-column:1/-1;margin-top:clamp(38px,5vw,60px);padding-top:clamp(26px,3vw,36px);border-top:1px solid rgba(246,242,236,.2);display:flex;flex-wrap:wrap;gap:22px 34px;align-items:center;justify-content:space-between}
.chiusura p{font-family:var(--display);font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.2;letter-spacing:-.02em;color:var(--fondo-caldo);margin:0;max-width:22ch}
.bottone-chiaro{display:inline-block;background:var(--fondo-caldo);color:var(--verde-profondo);text-decoration:none;padding:.85em 1.6em;border-radius:100px;font-size:1rem;font-weight:500;white-space:nowrap;transition:background .18s ease}
.bottone-chiaro:hover{background:var(--rosa)}
@media(max-width:820px){.contatti .griglia{grid-template-columns:1fr;gap:36px}}

/* ============ piede ============ */
footer{background:#0f2620;color:rgba(246,242,236,.6);font-size:.87rem;padding:34px 0}
footer .riga{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
footer a{color:rgba(246,242,236,.75)}

/* ============================================================
   MOVIMENTO LEGATO ALLO SCORRIMENTO
   ============================================================ */
.avanzamento{position:fixed;top:0;left:0;right:0;height:3px;background:var(--ocra);transform:scaleX(0);transform-origin:0 50%;z-index:200;pointer-events:none}

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

  @supports (animation-timeline: scroll()){
    .avanzamento{animation:cresci-x linear both;animation-timeline:scroll(root)}
    @keyframes cresci-x{to{transform:scaleX(1)}}
  }

  @supports (animation-timeline: view()){

    /* apertura: la costellazione scorre e ruota con la pagina */
    .costellazione{animation:vaga linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes vaga{from{transform:translateY(-6%) rotate(-5deg)}to{transform:translateY(12%) rotate(5deg)}}

    /* percorsi: le righe entrano alternate, il filo scende lungo la colonna */
    @keyframes cresci-y{to{transform:scaleY(1)}}

    .percorso{animation:da-sinistra cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 62%}
    .percorso:nth-of-type(even){animation-name:da-destra}
    @keyframes da-sinistra{from{opacity:0;transform:translate3d(-56px,14px,0)}to{opacity:1;transform:none}}
    @keyframes da-destra{from{opacity:0;transform:translate3d(56px,14px,0)}to{opacity:1;transform:none}}
    @media(max-width:760px){
      @keyframes da-sinistra{from{opacity:0;transform:translate3d(-22px,14px,0)}to{opacity:1;transform:none}}
      @keyframes da-destra{from{opacity:0;transform:translate3d(22px,14px,0)}to{opacity:1;transform:none}}
    }

    /* approccio: la citazione si scopre da sinistra, i paragrafi salgono sfalsati */
    .citazione{animation:scopri linear both;animation-timeline:view();animation-range:entry 6% entry 70%}
    @keyframes scopri{from{clip-path:inset(0 100% 0 0);opacity:.25}to{clip-path:inset(0 0 0 0);opacity:1}}
    .approccio .griglia > div:last-child p{animation:sali cubic-bezier(.22,.61,.36,1) both;animation-timeline:view()}
    .approccio .griglia > div:last-child p:nth-of-type(1){animation-range:entry 4% entry 46%}
    .approccio .griglia > div:last-child p:nth-of-type(2){animation-range:entry 12% entry 56%}
    .approccio .griglia > div:last-child p:nth-of-type(3){animation-range:entry 20% entry 66%}

    /* chi sono: il ritratto si muove dentro la cornice, i paragrafi entrano sfalsati */
    .ritratto{overflow:hidden}
    .ritratto img{animation:parallasse linear both;animation-timeline:view();animation-range:cover}
    @keyframes parallasse{from{transform:scale(1.1) translateY(-3%)}to{transform:scale(1.1) translateY(3%)}}
    .chi-sono .griglia > div:last-child p{animation:sali cubic-bezier(.22,.61,.36,1) both;animation-timeline:view()}
    .chi-sono .griglia > div:last-child p:nth-of-type(1){animation-range:entry 2% entry 40%}
    .chi-sono .griglia > div:last-child p:nth-of-type(2){animation-range:entry 8% entry 48%}
    .chi-sono .griglia > div:last-child p:nth-of-type(3){animation-range:entry 14% entry 56%}
    .chi-sono .griglia > div:last-child p:nth-of-type(4){animation-range:entry 20% entry 64%}
    .chi-sono .griglia > div:last-child p:nth-of-type(5){animation-range:entry 26% entry 72%}

    /* collaborazioni */
    .ente:nth-of-type(1){animation:da-sinistra cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 58%}
    .ente:nth-of-type(2){animation:da-destra cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 58%}

    /* studi: le due foto scorrono in direzioni opposte dentro la cornice */
    .scatto img{animation:parallasse-forte linear both;animation-timeline:view();animation-range:cover}
    .studio-blocco:nth-of-type(2) .scatto img{animation-direction:reverse}
    @keyframes parallasse-forte{from{transform:scale(1.07) translateY(-2.5%)}to{transform:scale(1.07) translateY(2.5%)}}
    .scatto:hover img{transform:none}
    .studio figure img{animation:parallasse linear both;animation-timeline:view();animation-range:cover}
    .studio:hover figure img{transform:none}
    .studio-blocco .scatto{animation:da-sinistra cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 56%}
    .studio-blocco .studio{animation:da-destra cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 56%}

    /* contatti: i recapiti entrano uno dopo l'altro */
    .recapiti li{animation:da-destra cubic-bezier(.22,.61,.36,1) both;animation-timeline:view()}
    .recapiti li:nth-of-type(1){animation-range:entry 4% entry 44%}
    .recapiti li:nth-of-type(2){animation-range:entry 12% entry 54%}
    .recapiti li:nth-of-type(3){animation-range:entry 20% entry 64%}
    .chiusura{animation:ingrandisci cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 6% entry 70%}
    @keyframes ingrandisci{from{opacity:0;transform:scale(.94) translateY(20px)}to{opacity:1;transform:none}}

    /* i richiami all'azione arrivano dal basso con piu escursione */
    .richiamo{animation:sali-molto cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 4% entry 66%}
    @keyframes sali-molto{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
  }
}


/* ---- apertura: movimento continuo, sempre attivo ---- */
@media (prefers-reduced-motion:no-preference){
  .costellazione circle{transform-box:fill-box;transform-origin:center}
  .costellazione circle:nth-of-type(1){animation:appari .9s ease .15s both, fluttua 7.5s ease-in-out 1.1s infinite}
  .costellazione circle:nth-of-type(2){animation:appari .9s ease .35s both, fluttua 9s ease-in-out 1.3s infinite reverse}
  .costellazione circle:nth-of-type(3){animation:appari .9s ease .55s both, fluttua 8.2s ease-in-out 1.5s infinite}
  .costellazione circle:nth-of-type(4){animation:appari .9s ease .75s both, pulsa 6.5s ease-in-out 1.7s infinite}
  .costellazione circle:nth-of-type(5){animation:appari .9s ease .95s both, fluttua 10s ease-in-out 1.9s infinite reverse}
  .costellazione circle:nth-of-type(6){animation:appari .9s ease 1.15s both, fluttua 8.8s ease-in-out 2.1s infinite}
  .costellazione .filo{animation:tessi 2.1s cubic-bezier(.4,0,.2,1) .25s both, ondeggia 11s ease-in-out 2.4s infinite}
  @keyframes fluttua{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-9px)}}
  @keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  @keyframes ondeggia{0%,100%{opacity:.85}50%{opacity:.35}}
}

/* ---- percorsi: le palline si muovono con lo scorrimento ---- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .percorso .glifo{animation:ruota-glifo linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes ruota-glifo{from{transform:rotate(-26deg) scale(.88)}50%{transform:rotate(0deg) scale(1)}to{transform:rotate(26deg) scale(.88)}}

    .percorso .glifo circle{animation:pallina linear both;animation-timeline:view();transform-box:fill-box;transform-origin:center}
    @keyframes pallina{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
    .percorso .glifo circle:nth-child(1){animation-range:entry 4% entry 34%}
    .percorso .glifo circle:nth-child(2){animation-range:entry 12% entry 42%}
    .percorso .glifo circle:nth-child(3){animation-range:entry 20% entry 50%}
    .percorso .glifo circle:nth-child(4){animation-range:entry 28% entry 58%}
    .percorso .glifo circle:nth-child(5){animation-range:entry 36% entry 66%}
  }
}