/* ============================================================
   PROGETTO — pagina singolo progetto portfolio (/progetti/{slug}).
   Scoped alla pagina, prefisso "pg-". Consuma solo i token/classi
   di css/cobalto.css. La card correlata (.pcard) è quella condivisa,
   definita in css/progetti-selezionati.css: qui non viene ridefinita.
   ============================================================ */

body{ padding-top:clamp(6rem, 3rem + 11vw, 10rem); }

/* Header sempre visibile in questa pagina: niente hide-on-scroll
   (a differenza del resto del sito), resta ancorato in alto. */
.site-header[data-hidden="true"]{ transform:none; }

/* ============ HERO ============ */
.pg-hero{ padding-bottom:clamp(3rem, 1rem + 6vw, 5rem); }

.pg-back{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-body); font-size:var(--fs-small); font-weight:500;
  color:var(--n-600); text-decoration:none;
}
.pg-back i{ font-style:normal; transition:transform var(--dur-base) var(--ease-out); }
.pg-back:hover{ color:var(--blu-600); }
.pg-back:hover i{ transform:translateX(-4px); }

.pg-hero h1{
  margin:var(--sp-8) 0 0;
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-h2); line-height:1.05; letter-spacing:-.03em;
  color:var(--n-950); max-width:22ch; text-wrap:balance;
}

.pg-desc{
  margin:var(--sp-10) 0 0;
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-h1); line-height:1.04; letter-spacing:-.035em;
  color:var(--n-950); max-width:34ch; text-wrap:balance;
}
.pg-desc b{ font-weight:500; color:var(--blu-600); }

/* ============ SCHEDA META ============ */
.meta{
  list-style:none;
  margin:clamp(3rem, 1rem + 6vw, 5rem) 0 0;
  padding:var(--sp-8) 0 0;
  border-top:1px solid var(--n-200);
  display:flex; flex-wrap:wrap; gap:var(--sp-8) var(--sp-24);
}
.meta > li{ flex:0 0 auto; }
.meta__k{
  display:block;
  font-family:var(--font-mono); font-size:var(--fs-eyebrow); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--n-500);
}
.meta__v{
  display:block; margin-top:var(--sp-4);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.5;
  font-weight:500; color:var(--n-950);
}
.meta__v span{ display:block; font-weight:500; color:var(--n-950); }

/* ============ IMMAGINE A TUTTA LARGHEZZA ============ */
.bleed{
  width:100%;
  margin:clamp(3rem, 1rem + 6vw, 5rem) 0 0;
  background:var(--n-100); overflow:hidden;
}
.bleed figure{ margin:0; }
.bleed img{ display:block; width:100%; height:clamp(320px, 58vw, 760px); object-fit:cover; }

/* ============ BLOCCHI EDITORIALI ============ */
.split{
  display:grid; grid-template-columns:5fr 1fr 6fr;
  padding-top:clamp(4rem, 2rem + 8vw, 8rem);
}
.split__h{
  grid-column:1; position:sticky; top:120px; align-self:start; max-width:11ch;
  margin:0;
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2);
  line-height:1.05; letter-spacing:-.03em; color:var(--n-950); text-wrap:balance;
}
.split__body{ grid-column:3; }
.split__body p{
  margin:0 0 var(--sp-5);
  font-family:var(--font-body); font-size:var(--fs-lead); line-height:1.6;
  max-width:62ch; color:var(--n-600);
}
.split__body p:first-child{ color:var(--n-900); }

@media (max-width:1023px){
  .split{ display:block; }
  .split__h{ position:static; max-width:none; margin-bottom:var(--sp-6); }
}

/* ============ GRIGLIE DI IMMAGINI ============ */
.duo, .trio{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6);
  width:100%; margin:clamp(3rem, 1.5rem + 6vw, 5rem) 0 0;
}
.shot{ margin:0; overflow:hidden; background:var(--n-100); }
.shot img, .shot video{ display:block; width:100%; height:100%; object-fit:cover; }
.shot iframe{ display:block; width:100%; height:100%; border:0; }
.shot--video iframe{ pointer-events:none; user-select:none; }

.duo .shot{ aspect-ratio:4/3; }
.trio .shot{ aspect-ratio:4/3; }
.trio .shot:first-child{ grid-column:1 / -1; aspect-ratio:21/9; }

@media (max-width:640px){
  .duo, .trio{ grid-template-columns:1fr; }
  .trio .shot:first-child{ aspect-ratio:16/9; }
}

/* ============ RISULTATI ============ */
.risultati{
  position:relative; overflow:hidden;
  background:var(--gradient-deep); color:var(--n-0);
  margin-top:clamp(4rem, 2rem + 8vw, 8rem);
  padding-block:clamp(4rem, 2rem + 8vw, 8rem);
}
.risultati::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%, rgba(51,197,255,.28) 0%, rgba(51,197,255,0) 70%);
}
.risultati > *{ position:relative; z-index:1; }
.risultati .eyebrow{ color:var(--azz-300); }
.risultati h2{
  margin:0; max-width:16ch;
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2);
  line-height:1.05; letter-spacing:-.03em; color:var(--n-0);
}

.risultati-stats{
  list-style:none; margin:clamp(3rem, 1rem + 6vw, 5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-8);
}
@media (max-width:900px){
  .risultati-stats{ grid-template-columns:repeat(2,1fr); }
}
.rstat__num{
  display:block;
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-h1); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--azz-300);
}
.rstat__label{
  display:block; margin-top:var(--sp-4);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.5;
  color:var(--n-300); max-width:24ch;
}
@media (max-width:640px){
  .risultati-stats{ grid-template-columns:1fr; gap:var(--sp-10); }
}

/* ============ SLOT FORM CONTATTI ============ */
.formslot{ padding-block:clamp(4rem, 2rem + 8vw, 8rem); }
.formslot__box{
  border:1px dashed var(--n-300); border-radius:var(--r-xl); background:var(--n-50);
  text-align:center; padding:var(--sp-16) var(--sp-8);
}
.formslot__title{
  margin:0;
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-h3); color:var(--n-950);
}
.formslot__hint{ margin:var(--sp-3) 0 0; font-family:var(--font-body); font-size:var(--fs-body); color:var(--n-500); }

/* ============ PROGETTI CORRELATI ============ */
.correlati{ padding-top:clamp(4rem, 2rem + 8vw, 8rem); padding-bottom:clamp(4rem, 2rem + 8vw, 8rem); }
.correlati__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-top:var(--sp-8); border-top:1px solid var(--n-200);
}
.correlati__head h2{
  margin:var(--sp-3) 0 0;
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2);
  line-height:1.05; letter-spacing:-.03em; color:var(--n-950);
}
.correlati__link{
  display:inline-flex; align-items:center; gap:var(--sp-2); flex:none;
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-body);
  color:var(--blu-600); text-decoration:none; white-space:nowrap;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--dur-base) var(--ease-out);
}
.correlati__link:hover{ background-size:100% 1px; }
.correlati__link i{ font-style:normal; transition:transform var(--dur-base) var(--ease-out); }
.correlati__link:hover i{ transform:translateX(4px); }
@media (max-width:1023px){ .correlati__link{ display:none; } }

.correlati__grid{
  list-style:none; margin:var(--sp-12) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:var(--sp-8); row-gap:var(--sp-16);
}
@media (max-width:1023px){ .correlati__grid{ grid-template-columns:1fr; } }
@media (min-width:1024px){ .correlati__grid > li:nth-child(even){ margin-top:var(--sp-10); } }


/* ============================================================
   MOCKUP iPHONE ANIMATO — slot 06-affiancata4 delle pagine progetto.
   Componente autonomo: i token che usa (--n-950, --r-xl, --sh-lg)
   hanno comunque un fallback inline. Markup iniettato da
   embed_mockup.py. Sorgente originale: iphonecarousel.html.
   ============================================================ */

.ip-mockup{
  /* ---- i numeri da toccare -------------------------------------------- */
  --ip-bg: #0A0D12;         /* fondo del riquadro (--n-950, il nero del brand) */
  --ip-radius: 0;           /* riquadro esterno con angoli vivi, come le figure .shot accanto */
  --ip-hold: 1.05s;         /* pausa su ogni schermata */
  --ip-move: .95s;          /* durata dello scorrimento */
  /* ---------------------------------------------------------------------- */

  --ip-step: calc(var(--ip-hold) + var(--ip-move));   /* 2s  */
  --ip-cycle: calc(var(--ip-step) * 5);               /* 10s */
  --ip-ease: cubic-bezier(.285,.159,.251,.954);

  position:relative;
  width:100%;
  aspect-ratio:1200/900;
  background:var(--ip-bg);
  border-radius:var(--ip-radius);
  overflow:hidden;
  container-type:inline-size;
  box-shadow:0 16px 48px rgba(10,20,40,.10), 0 4px 12px rgba(10,20,40,.05); /* --sh-lg */
}

/* 1 unità = 1px del disegno a 1200px di larghezza */
.ip-mockup__stage{
  --u: .0833333cqw;
  --scr-w: calc(330 * var(--u));   /* schermo  330 × 716  (393×852 in scala) */
  --scr-h: calc(716 * var(--u));
  --bez:   calc(11 * var(--u));    /* scocca → telefono 352 × 738           */
  --cx:    calc(600 * var(--u));   /* centro orizzontale della scena        */
  --cy:    calc(472 * var(--u));   /* centro del telefono, leggermente alto */
  --R:     calc(2114 * var(--u));  /* raggio del compasso                   */
  --pivot: calc(var(--cy) + var(--R));

  position:absolute; inset:0;
}
@supports not (container-type:inline-size){
  .ip-mockup{max-width:1200px}
  .ip-mockup__stage{--u:1px}
}

/* --- il braccio del compasso -------------------------------------------
   L'elemento è un punto di dimensione zero piazzato sul perno: non dipinge
   nulla, quindi il browser non gli alloca un layer di composizione. Il
   telefono è appeso `--R` più in alto. (Un braccio grande quanto la scena
   costringerebbe Chrome a un layer enorme per ciascuno dei 5: era la causa
   degli scatti nei primi secondi.)
   ----------------------------------------------------------------------- */
.ip-arm{
  position:absolute;
  left:var(--cx); top:var(--pivot);
  width:0; height:0;
  transform-origin:0 0;
  animation: ip-arm var(--ip-cycle) infinite var(--ip-ease);
  animation-delay: calc(var(--i) * var(--ip-step) * -1);
}
.ip-arm:nth-child(1){--i:0}
.ip-arm:nth-child(2){--i:1}
.ip-arm:nth-child(3){--i:2}
.ip-arm:nth-child(4){--i:3}
.ip-arm:nth-child(5){--i:4}

@keyframes ip-arm{
  0%,  10.5% { transform:rotate(-30.6deg) }   /* fuori scena a sinistra */
  20%, 30.5% { transform:rotate(-15.3deg) }   /* sinistra, mezzo tagliato */
  40%, 50.5% { transform:rotate(0deg)     }   /* centro */
  60%, 70.5% { transform:rotate(15.3deg)  }   /* destra, mezzo tagliato */
  80%, 90.5% { transform:rotate(30.6deg)  }   /* fuori scena a destra */
  100%       { transform:rotate(-30.6deg) }   /* rientro, invisibile */
}

/* --- il telefono, che scala attorno al proprio centro ------------------- */
.ip-phone{
  position:absolute;
  left:0; top:calc(-1 * var(--R));
  width: calc(var(--scr-w) + var(--bez) * 2);
  height:calc(var(--scr-h) + var(--bez) * 2);
  margin-left:calc((var(--scr-w) + var(--bez) * 2) / -2);
  margin-top: calc((var(--scr-h) + var(--bez) * 2) / -2);

  border-radius: calc(51 * var(--u));
  padding: var(--bez);
  box-sizing:border-box;
  background:#0B0C10;
  /* Ombra volutamente stretta: su fondo nero un blur largo non si vede ma
     gonfia del 96% l'area che il browser deve rasterizzare, e si paga tutta
     al primo paint. Niente `will-change`: Chrome promuove da solo gli
     elementi con transform/opacity in animazione, e senza la dichiarazione
     può liberare il layer quando il carosello è fermo o fuori schermo. */
  box-shadow:
    inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.16),
    0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.45);

  animation: ip-scale var(--ip-cycle) infinite var(--ip-ease);
  animation-delay: calc(var(--i) * var(--ip-step) * -1);
}

@keyframes ip-scale{
  0%,  10.5% { transform:scale(.661);  opacity:1 }
  20%, 30.5% { transform:scale(.8305); opacity:1 }
  40%, 50.5% { transform:scale(1);     opacity:1 }
  60%, 70.5% { transform:scale(.8305); opacity:1 }
  80%, 90.5% { transform:scale(.661);  opacity:1 }
  90.6%      {                         opacity:0 }
  100%       { transform:scale(.661);  opacity:0 }
}

/* --- scocca ------------------------------------------------------------ */
.ip-phone__screen{
  position:relative;
  width:100%; height:100%;
  border-radius: calc(40 * var(--u));
  overflow:hidden;
  background:#12141a;
}
.ip-phone__screen img,
.ip-phone__screen video{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:top center;
}

.ip-phone__island{                       /* dynamic island */
  position:absolute; z-index:2;
  top: calc(12 * var(--u));
  left:50%; transform:translateX(-50%);
  width: calc(105 * var(--u));
  height:calc(30 * var(--u));
  border-radius:999px;
  background:#000;
}

.ip-phone__glare{                        /* riflesso obliquo sul vetro */
  position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius: calc(40 * var(--u));
  background:linear-gradient(107deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.04) 22%,
    rgba(255,255,255,0)   42%);
}

.ip-phone__btn{                          /* tasti laterali */
  position:absolute; z-index:1;
  width: calc(2.5 * var(--u));
  border-radius: calc(2 * var(--u));
  background:linear-gradient(180deg,#33363d,#0e1014);
}
.ip-phone__btn--action{left:calc(-1.5 * var(--u)); top:19%;  height:4.2%}
.ip-phone__btn--volup {left:calc(-1.5 * var(--u)); top:27%;  height:7.5%}
.ip-phone__btn--voldn {left:calc(-1.5 * var(--u)); top:36.5%;height:7.5%}
.ip-phone__btn--power {right:calc(-1.5 * var(--u));top:28%;  height:11%}

/* --- pausa ------------------------------------------------------------- */
.ip-mockup:hover .ip-arm,   .ip-mockup:hover .ip-phone,
.ip-mockup:focus-within .ip-arm, .ip-mockup:focus-within .ip-phone{
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce){
  .ip-arm, .ip-phone{ animation-play-state:paused }
}