/* Pagine progetto del Liceo Artistico — la prima è «happiness boys» (Fahrenheit 451).
   Il gesto forte è uno solo: la carta che brucia nell'apertura. Il resto segue la grammatica del sito. */

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:root{--ember:#ff7a1a;--char:#2a1408}

/* ============ 1. LA CARTA CHE BRUCIA ============ */
.burn{position:relative;height:280vh;background:var(--ink)}
.burn-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.burn-photo{position:absolute;inset:0;margin:0;z-index:0}
.burn-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);transform-origin:50% 60%;will-change:transform}
.burn-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.35),transparent 30%,transparent 62%,rgba(11,11,13,.85))}
#burnCv{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
/* il titolo vero (per lettori di schermo e fallback): in modalità canvas lo disegna la carta */
.burn-title{position:absolute;inset:0;z-index:1;padding:clamp(110px,16vh,170px) var(--gutter) clamp(80px,12vh,120px);display:flex;flex-direction:column;justify-content:center;color:var(--ink);pointer-events:none}
.burn:not(.static) .burn-title{opacity:0}
.burn-kicker{margin:0 0 var(--s1);font-family:var(--f-body);font-size:clamp(1rem,1.3vw,1.2rem)}
.burn-title h1{margin:0;font-family:var(--f-display);font-weight:760;font-stretch:125%;font-size:clamp(3.4rem,15.5vw,17rem);line-height:.84;letter-spacing:-.05em;text-transform:lowercase}
.burn-title h1 span{display:block}
.burn-title h1 span+span{padding-left:.55em}
.burn-sub{margin:var(--s2) 0 0;max-width:36ch;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.4}
.burn-hint{position:absolute;z-index:3;left:var(--gutter);bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:.7rem;color:var(--ink);margin:0;transition:opacity .4s}
.burn-hint i{display:block;width:9px;height:9px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(255,122,26,.6);animation:ember-pulse 1.6s infinite}
@keyframes ember-pulse{70%{box-shadow:0 0 0 12px rgba(255,122,26,0)}100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}
.burn-cap{position:absolute;z-index:3;right:var(--gutter);bottom:calc(22px + env(safe-area-inset-bottom,0px));margin:0;color:var(--paper);opacity:0;transition:opacity .6s;text-align:right;max-width:60vw}
.burn.done .burn-cap{opacity:.85}
.burn.lit .burn-hint{opacity:0}

/* senza animazioni: carta sopra, foto sotto */
.burn.static{height:auto;background:var(--paper)}
.burn.static .burn-pin{position:relative;height:auto;display:flex;flex-direction:column}
.burn.static #burnCv,.burn.static .burn-hint{display:none}
.burn.static .burn-title{position:relative;inset:auto;order:0}
.burn.static .burn-photo{position:relative;inset:auto;order:1;aspect-ratio:3/2}
.burn.static .burn-photo img{transform:none}
.burn.static .burn-cap{opacity:.85}

/* ============ 2. CONCEPT ============ */
.concept{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(36px,6vw,110px);align-items:end}
.brecht{margin:0}
.brecht p{margin:0;font-family:var(--f-display);font-weight:250;font-stretch:118%;font-size:clamp(2.6rem,7.6vw,7.6rem);line-height:.92;letter-spacing:-.055em;text-wrap:balance}
.brecht em{font-style:normal;font-weight:800;font-stretch:62%;letter-spacing:-.02em;text-transform:uppercase;display:inline-block;position:relative;color:var(--paper);padding:0 .12em;margin-top:.08em;background:var(--ink);rotate:-2deg}
.brecht cite{display:block;margin-top:var(--s2);font-style:normal;color:var(--mute)}
.concept-body{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.concept-body p{margin:0;color:var(--mute);max-width:46ch;line-height:1.6}
.concept-body .concept-lead{color:var(--fg);font-size:var(--s1);line-height:1.4}
.concept-body .btn{margin-top:.6rem;white-space:normal;text-align:left}
@media (max-width:900px){.concept{grid-template-columns:1fr}}

/* ============ 3. FILM ============ */
.film-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem 3rem;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,70px)}
.film-head p{margin:0;color:var(--mute);max-width:38ch;font-size:var(--s1)}
.film{margin:0}
.film-frame{position:relative;border-radius:clamp(18px,2.4vw,32px);overflow:hidden;background:#000;aspect-ratio:4/3;max-height:86svh;margin-inline:auto}
.film-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.film-play{position:absolute;inset:0;margin:auto;width:clamp(120px,15vw,190px);height:clamp(120px,15vw,190px);border-radius:50%;border:0;background:var(--yellow);color:var(--ink);cursor:pointer;display:grid;place-items:center;align-content:center;gap:.3rem;font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.06em;text-transform:uppercase;transition:transform .5s var(--ease),background .3s;box-shadow:0 0 0 0 rgba(255,197,51,.5)}
.film-play svg{width:34%;height:auto;margin-left:6%}
.film-play span{font-size:.72rem}
.film-play:hover{transform:scale(1.08);background:var(--paper)}
.film-frame.playing .film-play{opacity:0;pointer-events:none;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease)}
.film figcaption{margin-top:1rem;color:var(--mute)}

/* ============ 4. TEMI ============ */
.temi-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem 3rem;flex-wrap:wrap}
.temi-head p{margin:0;color:var(--mute);max-width:34ch;font-size:var(--s1)}
.temi{list-style:none;margin:clamp(40px,5vw,70px) 0 0;padding:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.temi li{border-bottom:1px solid var(--line);padding:clamp(20px,2.4vw,32px) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;position:relative}
.temi h3{margin:0;font-family:var(--f-display);font-weight:400;font-stretch:115%;font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1;letter-spacing:-.045em;transition:font-weight .45s var(--ease)}
.temi p{margin:0;color:var(--mute);max-width:48ch}
.temi li[data-img]{cursor:default}
.temi li[data-img] h3::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.3em;border-radius:50%;background:var(--ember);vertical-align:.18em}
.temi li[data-img]:hover h3{font-weight:700}
.temi .thumb{display:none}
.temi-peek{position:fixed;left:0;top:0;z-index:70;margin:0;width:clamp(240px,24vw,360px);aspect-ratio:3/2;border-radius:14px;overflow:hidden;pointer-events:none;opacity:0;scale:.75;rotate:-3deg;transition:opacity .25s,scale .45s var(--ease),rotate .45s var(--ease);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);background:var(--ink)}
.temi-peek.on{opacity:1;scale:1;rotate:0deg}
.temi-peek img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.temi{grid-template-columns:1fr}}
@media (hover:none),(pointer:coarse){
  .temi-peek{display:none}
  .temi li[data-img]{grid-template-columns:minmax(0,1fr) 84px;column-gap:1rem;align-items:start}
  .temi li[data-img] h3,.temi li[data-img] p{grid-column:1}
  .temi .thumb{display:block;grid-column:2;grid-row:1/3;width:84px;aspect-ratio:1;border-radius:12px;object-fit:cover}
}

/* ============ 5. GALLERIA ============ */
.gal-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem 3rem;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,70px)}
.gal-head p{margin:0;color:var(--mute)}
.hb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.hb-it{margin:0;display:flex;flex-direction:column;gap:.8rem;min-width:0}
.hb-it button{all:unset;cursor:pointer;display:block;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:var(--surface);position:relative}
.hb-it button:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.hb-it img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.hb-it button:hover img{transform:scale(1.045)}
.hb-it figcaption{display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;align-items:baseline}
.hb-it figcaption b{font-family:var(--f-display);font-weight:500;font-stretch:112%;font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:-.03em}
.hb-it figcaption span{color:var(--mute);font-size:.92rem}
.hb-it.a{grid-column:1/9}.hb-it.a button{aspect-ratio:3/2}
.hb-it.b{grid-column:9/13;grid-row:1/3}.hb-it.b button{flex:1;min-height:0}
.hb-it.c{grid-column:1/9}.hb-it.c button{aspect-ratio:3/2}
.hb-it.d{grid-column:1/7}.hb-it.d button{aspect-ratio:4/3}
.hb-it.e{grid-column:7/13}.hb-it.e button{aspect-ratio:4/3}
.hb-it.f{grid-column:1/13}.hb-it.f button{aspect-ratio:21/9}
.hb-it.f img{object-position:50% 78%}
@media (max-width:760px){
  .hb-grid{grid-template-columns:1fr}
  .hb-it.a,.hb-it.b,.hb-it.c,.hb-it.d,.hb-it.e,.hb-it.f{grid-column:1;grid-row:auto}
  .hb-it.b button{aspect-ratio:3/4;flex:none}
  .hb-it.f button{aspect-ratio:3/2}
}

/* lightbox */
.lb{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:var(--paper)}
.lb::backdrop{background:rgba(11,11,13,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb[open]{display:grid}
.lb-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);grid-template-rows:minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(64px,8vh,90px) var(--gutter) clamp(24px,4vh,48px);height:100%;box-sizing:border-box}
.lb-fig{margin:0;height:100%;min-height:0;display:grid;place-items:center}
.lb-fig img{max-width:100%;max-height:calc(100svh - 150px);object-fit:contain;border-radius:14px;display:block;animation:lb-in .5s var(--ease)}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}}
.lb-txt{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.lb-n{color:var(--yellow)}
.lb-txt h3{margin:0;font-family:var(--f-display);font-weight:300;font-stretch:120%;font-size:clamp(2rem,3.4vw,3rem);line-height:.98;letter-spacing:-.05em;text-transform:lowercase}
.lb-txt p{margin:0;color:#cfcdc7;line-height:1.55}
.lb-txt .lb-cred{color:#8d8d95;border-top:1px solid #2b2b31;padding-top:1rem;width:100%}
.lb-nav{display:flex;gap:10px}
.lb-nav .ps-btn{width:52px;height:52px;color:var(--paper)}
.lb-nav .ps-btn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.lb-close{position:fixed}
@media (max-width:860px){.lb-in{grid-template-columns:1fr;grid-template-rows:auto auto;align-items:start;overflow-y:auto}.lb-fig img{max-height:58svh}.lb-txt{gap:.7rem}}

/* ============ 6. CREDITI ============ */
.cred{margin:clamp(40px,5vw,70px) 0 0;padding:0;border-top:1px solid var(--line)}
.cred div{display:grid;grid-template-columns:minmax(120px,.35fr) minmax(0,1fr);gap:.4rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.cred dt{font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:.3rem}
.cred dd{margin:0;font-family:var(--f-display);font-weight:400;font-stretch:108%;font-size:clamp(1.15rem,1.8vw,1.6rem);letter-spacing:-.02em;line-height:1.25}
@media (max-width:600px){.cred div{grid-template-columns:1fr}}
.next{margin-top:clamp(70px,10vw,150px)}
.next-link{display:flex;flex-direction:column;gap:.6rem;text-decoration:none}
.next-link .mono{color:var(--mute)}
.next-link b{font-family:var(--f-display);font-weight:200;font-stretch:125%;font-size:clamp(2.4rem,8vw,7.4rem);line-height:.9;letter-spacing:-.06em;transition:font-weight .6s var(--ease),color .4s}
.next-link:hover b{font-weight:800;color:var(--red)}

@media (prefers-reduced-motion:reduce){.burn-hint i{animation:none}.lb-fig img{animation:none}}

/* ============ HOME: sezione progetti ============ */
.pj-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem 3rem;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,70px)}
.pj-head p{margin:0;color:var(--mute);max-width:36ch;font-size:var(--s1)}
.pj{position:relative;display:block;border-radius:clamp(20px,3vw,40px);overflow:hidden;isolation:isolate;color:var(--paper);text-decoration:none;min-height:clamp(440px,74vh,760px);background:var(--ink)}
.pj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease),filter .8s}
.pj::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,13,.1) 30%,rgba(11,11,13,.88))}
.pj:hover img{transform:scale(1.05)}
.pj-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,3.4vw,52px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 2rem;align-items:end}
.pj-t{margin:0;font-family:var(--f-display);font-weight:760;font-stretch:125%;font-size:clamp(3rem,10vw,10rem);line-height:.84;letter-spacing:-.055em;text-transform:lowercase}
.pj-t span{display:block}
.pj-t span+span{padding-left:.5em}
.pj-d{margin:.9rem 0 0;max-width:44ch;color:#d6d4ce;font-size:var(--s1);line-height:1.4}
.pj .btn{border-color:var(--paper)}
.pj:hover .btn{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
/* bordo di carta bruciata in cima alla foto: passando sopra, la carta si ritira */
.pj-burnt{position:absolute;left:0;right:0;top:0;height:26%;z-index:-1;filter:drop-shadow(0 3px 0 var(--ember)) drop-shadow(0 6px 10px rgba(255,122,26,.55));transition:transform 1.2s var(--ease);transform-origin:top;pointer-events:none}
.pj-burnt i{position:absolute;inset:0;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 48%,96% 57%,93% 51%,88% 66%,83% 55%,78% 70%,71% 56%,66% 63%,60% 52%,55% 74%,49% 61%,44% 68%,38% 54%,33% 71%,26% 58%,21% 64%,15% 50%,10% 67%,5% 55%,0 62%)}
.pj:hover .pj-burnt{transform:scaleY(.3)}
@media (max-width:760px){.pj-body{grid-template-columns:1fr}.pj-burnt{height:18%}}
.out a.row{text-decoration:none;color:inherit}
.out a.row h3::after{content:"";display:inline-block;width:.3em;height:.3em;margin-left:.35em;border-radius:50%;background:var(--ember);vertical-align:.2em}