/* reveal generico: stesso pattern di pages.css, duplicato qui perché le
   pagine progetto non caricano pages.css */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-stagger > *.in{opacity:1;transform:translateY(0);}

/* ── PROJECT CASE STUDY ── */
.pj-hero{
  position:relative;
  width:100%;
  height:85vh;
  min-height:500px;
  overflow:hidden;
  background:rgba(236,228,195,.08);
}
.pj-hero-img{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.pj-hero.in .pj-hero-img{transform:scale(1);}
.pj-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(10,9,7,.85) 0%, transparent 50%);
  display:flex;
  align-items:flex-end;
  padding:var(--sec-y-sm) var(--pad-x);
}
.pj-hero-info .lbl{
  color:#EEE4BF;
  margin-bottom:16px;
}
.pj-title{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(48px,8vw,120px);
  line-height:.88;
  letter-spacing:-.02em;
  color:#fff;
}
.pj-title .sw-i.in{transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;}

/* Tagline — la grande headline editoriale sotto l'hero, tipo "Moving road
   trips to the electric age.", rivelata a parole come il titolo */
.pj-tagline{padding:var(--sec-y-sm) var(--pad-x) 40px;max-width:1000px;}
/* Stesso caso della citazione su About: e' una frase, non un titolo,
   e nel carattere condensato non si legge. Stessa cura. */
/* Su uno schermo largo 48px erano pochi: la frase spariva. Cresce con
   la finestra fino a 76px, ma il minimo resta 24px, quindi da telefono
   non cambia niente (a 390px comanda il minimo, non i vw). */
.pj-tagline-title{
  font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:clamp(24px,4.2vw,76px);line-height:1.24;letter-spacing:-.015em;color:var(--fg);
  max-width:22ch;
}
.pj-tagline-title .sw-i.in{transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease;}

/* Info bar */
.pj-info-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  padding:56px var(--pad-x);
  border-bottom:2px solid var(--sep);
}
.pj-info-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--fg);
  opacity:.6;
  margin-bottom:8px;
}
.pj-info-value{
  font-size:17px;
  font-weight:500;
  color:var(--fg);
}

/* Description */
.pj-description{
  padding:80px var(--pad-x);
  max-width:800px;
}
.pj-description p{
  font-size:24px;
  font-weight:400;
  line-height:1.65;
  color:var(--fg);
}

/* ── Interactive — un solo tipo alla volta, scelto dal CMS ── */
.pj-interactive{padding:0 var(--pad-x) 80px;}

/* Before / After */
.pj-ba{
  position:relative;aspect-ratio:16/9;user-select:none;cursor:ew-resize;
  border-radius:14px;overflow:hidden;background:rgba(236,228,195,.08);
}
.pj-ba-layer{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:24px;}
.pj-ba-before{background-color:rgba(236,228,195,.08);}
.pj-ba-after{background-color:rgba(236,228,195,.14);clip-path:inset(0 0 0 50%);}
.pj-ba-tag{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(10,9,7,.55);padding:6px 12px;border-radius:100px;
}
.pj-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-.5px);}
.pj-ba-handle::before{content:'';position:absolute;inset:0;width:2px;background:var(--fg);box-shadow:0 0 0 1px rgba(0,0,0,.25);}
.pj-ba-grip{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--violet, #3E168B);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Sequence — scroll-jack: il bordo/arrotondamento sta sull'elemento sticky
   (pj-seq-stage), MAI sul wrapper alto quanto tutto lo scroll — altrimenti
   si "chiude" molto più in basso di dove la card appare ferma a schermo. */
.pj-seq-wrap{height:260vh;position:relative;}
.pj-seq-stage{
  position:sticky;top:0;height:100vh;max-height:640px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:#0a0907;overflow:hidden;border-radius:14px;
}
.pj-seq-frame{position:relative;width:min(60vw,320px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:rgba(236,228,195,.1);}
.pj-seq-screen{
  position:absolute;inset:0;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;opacity:0;transition:opacity .25s ease;
}
.pj-seq-screen.on{opacity:1;}
.pj-seq-screen-lbl{
  font-size:13px;font-weight:600;color:#fff;background:linear-gradient(to top, rgba(10,9,7,.75), transparent);
  width:100%;padding:20px 16px 14px;
}
.pj-seq-track{width:min(60vw,320px);height:3px;background:var(--sep);border-radius:3px;overflow:hidden;}
.pj-seq-track i{display:block;height:100%;width:var(--sp,0%);background:#ECE4C3;}
.pj-seq-caption{font-size:12px;color:rgba(238,228,191,.55);text-transform:uppercase;letter-spacing:.1em;}

/* Cursor spotlight */
.pj-spot{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:none;background:rgba(10,9,7,.9);}
.pj-spot-base,.pj-spot-reveal{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:24px;}
.pj-spot-base{background-color:rgba(10,9,7,.9);}
.pj-spot-reveal{background-color:rgba(236,228,195,.16);clip-path:circle(120px at var(--mx,50%) var(--my,-50%));}
.pj-spot-hint{
  position:absolute;bottom:16px;left:0;right:0;text-align:center;pointer-events:none;
  font-size:12px;color:rgba(238,228,191,.6);text-transform:uppercase;letter-spacing:.1em;
}

/* Blocco immagine singola */
.pj-image-block{padding:0 var(--pad-x) 80px;}
.pj-image-block-img{width:100%;aspect-ratio:16/9;border-radius:14px;background-size:cover;background-position:center;background-color:rgba(236,228,195,.08);}
.pj-image-block-caption{margin-top:14px;font-size:14px;color:var(--fg);opacity:.6;}

/* Blocco immagine + testo affiancati */
.pj-imgtext{
  padding:0 var(--pad-x) 80px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.pj-imgtext-r{grid-template-columns:1fr 1fr;}
.pj-imgtext-r .pj-imgtext-img{order:2;}
.pj-imgtext-img{aspect-ratio:4/3;border-radius:14px;background-size:cover;background-position:center;background-color:rgba(236,228,195,.08);}
.pj-imgtext-text .lbl{margin-bottom:14px;}
.pj-imgtext-text p{font-size:19px;line-height:1.6;color:var(--fg);}

/* Marquee — stessa logica del marquee in home (drift continuo, spinta
   dallo scroll, rallenta al passaggio del mouse), colori a scelta dal CMS */
/* Marquee — come in home: bordo da 4px, banda ruotata di 1,5 gradi e
   ingrandita dell'8% cosi' gli angoli escono dallo schermo invece di
   lasciare i triangoli vuoti ai lati. Il wrap si mangia 48px sopra e
   sotto (e 20 ai lati) per dare alla rotazione lo spazio da tagliare,
   senza cambiare lo stacco fra le sezioni. */
.pj-mq-wrap{overflow:hidden;margin:calc(var(--sec-y-sm) - 48px) -20px;padding:48px 20px;}
.pj-mq{overflow:hidden;position:relative;border-top:4px solid;border-bottom:4px solid;transform:rotate(-1.5deg);scale:1.08;}
/* le bande successive si inclinano al contrario, come #mq1 e #mq2 */
.pj-mq-wrap.mq-alt .pj-mq{transform:rotate(1.5deg);}
.pj-mq-t{display:flex;white-space:nowrap;will-change:transform;}
.pj-mq-i{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(28px,4.6vw,64px);
  letter-spacing:-.01em;text-transform:uppercase;
  padding:clamp(16px,2vw,32px) clamp(20px,2.6vw,44px);
  flex-shrink:0;display:inline-flex;align-items:center;
}
.pj-mq-sep{
  display:inline-block;width:clamp(8px,.9vw,14px);height:clamp(8px,.9vw,14px);
  border-radius:50%;background:currentColor;opacity:.35;flex-shrink:0;align-self:center;
}

/* Gallery */
/* aria vera prima della gallery: senza, le immagini partivano appiccicate
   alla frase sopra */
.pj-gallery{
  padding:clamp(48px,6vw,120px) var(--pad-x) 80px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.pj-gallery-img{
  width:100%;
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  background-color:rgba(236,228,195,.08);
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
/* la tenda sostituisce la dissolvenza di .reveal — insieme farebbero
   fango — e lascia il transform libero per il parallax di blocks.js */
.pj-gallery-img.reveal{opacity:1;transform:none;}
/* La maschera sta sul figlio: un elemento con clip-path risulta non
   intersecante per IntersectionObserver, e il riquadro non verrebbe mai
   rivelato. Dentro, l'immagine si assesta anche di scala. */
/* Il parallasse vive QUI, dentro il riquadro, non sul riquadro.
   Prima blocks.js scriveva translateY(...) scale(1.08) sulla cella
   della griglia: la cella cresceva dell'8% oltre la sua casella, si
   mangiava il gap, si accavallava con le vicine e la prima finiva
   sopra la tagline. Ora la cella non si muove mai; scorre l'immagine
   dentro, e lo scostamento arriva da --par, che il JS aggiorna.
   Da fermo la scala resta 1.06 apposta: quel 3% per lato e' lo spazio
   in cui l'immagine puo' scorrere senza scoprire il bordo. */
.pj-gallery-fill{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  clip-path:inset(0 0 100% 0);
  transform:translateY(var(--par,0px)) scale(1.12);
  transition:clip-path 1s cubic-bezier(.72,0,.16,1),
             transform 1.25s cubic-bezier(.16,1,.3,1);
}
.pj-gallery-img.in .pj-gallery-fill{
  clip-path:inset(0 0 0 0);
  transform:translateY(var(--par,0px)) scale(1.06);
  transition:clip-path 1s cubic-bezier(.72,0,.16,1),
             transform .18s linear;
}
.pj-gallery-img:first-child{
  grid-column:1 / -1;
  aspect-ratio:16/9;
}
@media(prefers-reduced-motion:reduce){
  .pj-gallery-fill{clip-path:none;transform:none;transition:none;}
  .pj-gallery{transform:none!important;}
}

/* Results — nero con le scritte rosa, la stessa superficie di
   #personal-story in home: un terzo piano che si stacca di proposito,
   invece del rosa fisso che sembrava dimenticato li'. */
.pj-results{
  padding:80px var(--pad-x);
  background:#191919;
  color:#FF87C3;
}
.pj-results .sec-title{
  color:#FF87C3;
  margin-bottom:56px;
}
.pj-results-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
.pj-result-item{
  text-align:center;
}
.pj-result-value{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(88px,13vw,190px);
  line-height:1;
  color:#FF87C3;
  letter-spacing:-.02em;
}
.pj-result-label{
  font-size:16px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#FF87C3;
  margin-top:14px;
}

/* Credits — un ruolo, un nome, come nelle case-study delle agency */
.pj-credits{padding:80px var(--pad-x);}
.pj-credits .lbl{margin-bottom:32px;}
.pj-credits-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px;
}
.pj-credit-item{padding-bottom:16px;border-bottom:1px solid var(--sep);}
.pj-credit-name{
  font-family:'DM Sans',sans-serif;font-weight:700;
  font-size:clamp(16px,1.4vw,19px);color:var(--fg);margin-top:4px;
}

/* Next Project — teaser a piena pagina, non un semplice link testuale:
   immagine + nome, come chiude la maggior parte delle case-study delle
   agency di riferimento (Locomotive, Pentagram, Instrument…) */
.pj-next{
  position:relative;display:block;height:70vh;min-height:420px;overflow:hidden;
  text-decoration:none;background:rgba(236,228,195,.08);
}
.pj-next-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:rgba(236,228,195,.1);
  transform:scale(1.08);transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.pj-next:hover .pj-next-img{transform:scale(1);}
.pj-next-ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;background:linear-gradient(to top, rgba(10,9,7,.55) 0%, rgba(10,9,7,.25) 60%, rgba(10,9,7,.45) 100%);
}
.pj-next-ov .lbl{color:#ECE4C3;opacity:.8;}
.pj-next-name{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(40px,7vw,110px);line-height:.9;letter-spacing:-.02em;color:#fff;margin-bottom:20px;
}
.pj-next-cta{
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;opacity:.75;transition:opacity .2s;
}
.pj-next:hover .pj-next-cta{opacity:1;}

/* Link */
.pj-link-wrap{
  display:flex;
  justify-content:center;
  padding:56px var(--pad-x);
}

/* Navigation */
.pj-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:40px var(--pad-x);
  border-top:2px solid var(--sep);
}
.pj-nav a{
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg);
  text-decoration:none;
  transition:opacity .2s;
}
.pj-nav a:hover{opacity:.6;}

@media(max-width:768px){
  .pj-hero-overlay{padding:32px 24px;}
  .pj-info-bar{grid-template-columns:1fr 1fr;padding:32px 24px;gap:20px;}
  .pj-description{padding:48px 24px;}
  .pj-description p{font-size:19px;}
  .pj-gallery{padding:0 24px 48px;grid-template-columns:1fr;}
  .pj-image-block{padding:0 24px 48px;}
  .pj-imgtext{padding:0 24px 48px;grid-template-columns:1fr;gap:24px;}
  .pj-imgtext-r .pj-imgtext-img{order:0;}
  .pj-results{padding:48px 24px;}
  .pj-results-grid{grid-template-columns:1fr;gap:32px;}
  .pj-tagline{padding:48px 24px 24px;}
  .pj-credits{padding:48px 24px;}
  .pj-credits-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .pj-next{height:52vh;min-height:340px;}
  .pj-nav{padding:24px;flex-wrap:wrap;gap:12px;}
  .pj-interactive{padding:0 24px 48px;}
  .pj-seq-frame,.pj-seq-track{width:min(72vw,300px);}
}