/* ============================================================
   COLLAGE — strato di composizione sopra il foglio base.
   Approvato da Marco il 27-08-2026 sulla proposta modello Paloma Wool.
   ⭐ Sta in un file suo: si toglie il <link> e il sito torna com'era.
   ⛔ Non tocca contenuto, lingue, dati strutturati o il player.
   ============================================================ */

:root{
  --rot:0deg;
  --carta:0 1px 2px rgba(32,36,44,.07), 0 22px 48px -26px rgba(32,36,44,.34);
  --carta-alta:0 2px 4px rgba(32,36,44,.09), 0 34px 66px -28px rgba(32,36,44,.42);
}

/* --- le schede entrano ruotando: la rotazione vive in una variabile, se no
       litiga col translateY della classe .reveal --- */
.js .reveal{transform:translateY(26px) rotate(0deg)}
/* --py lo muove il parallasse: se il movimento vivesse in uno style inline
   cancellerebbe la rotazione, quindi passa da una variabile. */
.js .reveal.in{transform:translateY(var(--py,0px)) rotate(var(--rot,0deg))}

/* ============================ HERO ============================ */
/* Non piu' a tutto schermo: diventa una scheda appoggiata sulla carta. */
@media(min-width:900px){
  .hero{
    min-height:0;height:auto;padding:132px 0 40px;background:transparent;
    display:grid;grid-template-columns:1fr 1fr;align-items:center;
    gap:0 clamp(24px,4vw,64px);max-width:1240px;margin:0 auto;
    padding-left:clamp(20px,4vw,44px);padding-right:clamp(20px,4vw,44px);
  }
  .hero__photo{
    position:relative;inset:auto;grid-column:2;grid-row:1;
    height:min(66vh,540px);border-radius:8px;box-shadow:var(--carta);
    transform:rotate(1.5deg) scale(1);animation:none;opacity:1;
    transition:transform .8s var(--ease-out),box-shadow .8s var(--ease-out);
  }
  .hero__photo:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--carta-alta)}
  .hero__grade{display:none}
  .hero__inner{grid-column:1;grid-row:1;padding:0;max-width:none;width:auto}
  .hero h1 .ln,.hero__tag,.cta-row{color:var(--ink)}
  .scrollcue{display:none}
}
.hero h1 .ln{color:var(--ink)}
.hero__tag{color:var(--text-soft)}
.cta-row .btn{color:var(--ink);border-color:rgba(42,46,54,.24);--bg-btn:rgba(255,255,255,.5)}
.cta-row .btn:hover{--bg-btn:rgba(253,175,231,.34)}

@media(max-width:899px){
  /* su telefono la foto resta grande ma diventa comunque una scheda */
  .hero{min-height:0;padding-bottom:26px}
  .hero__photo{border-radius:8px;inset:64px 16px auto;height:56vh;box-shadow:var(--carta)}
  .hero__grade{inset:64px 16px auto;height:56vh;border-radius:8px}
  .hero__inner{padding-top:calc(56vh + 84px)}
  .hero h1 .ln,.hero__tag{color:var(--ink);text-shadow:none}
}

/* ==================== intestazioni di sezione ==================== */
/* Sparse invece che centrate: e' meta' dell'effetto collage. */
.sec-head{text-align:left}
.sec-head .sec-num{margin-bottom:6px}
.sec-title{text-align:left;margin-left:0}
@media(min-width:900px){
  .sec-head{max-width:none;display:grid;grid-template-columns:auto 1fr;
    align-items:baseline;gap:0 20px}
  .sec-head .sec-num{grid-column:1}
  .sec-title{grid-column:2}
  .sec-head::after{content:"";grid-column:1 / -1;height:1px;background:rgba(42,46,54,.14);margin-top:14px}
}

/* ========================== LISTEN ========================== */
.track,.sc-card{box-shadow:var(--carta);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.track:hover,.sc-card:hover{box-shadow:var(--carta-alta)}
@media(min-width:900px){
  .tracks{display:grid;grid-template-columns:repeat(12,1fr);gap:0;margin-bottom:0}
  .track:nth-of-type(1){--rot:-2.1deg;grid-column:1 / span 6;z-index:3;margin-top:12px}
  .track:nth-of-type(2){--rot:1.7deg;grid-column:6 / span 6;z-index:2;margin-top:96px;margin-left:26px}
  .track:hover{transform:rotate(0deg) translateY(-8px) !important;z-index:9}
  .sc-card{--rot:-.9deg;max-width:620px;margin:-52px 0 0 auto;position:relative;z-index:4}
  .sc-card:hover{transform:rotate(0deg) translateY(-6px) !important}
}
@media(max-width:899px){
  .track:nth-of-type(1){--rot:-1.3deg}
  .track:nth-of-type(2){--rot:1.2deg}
  .sc-card{--rot:-.7deg}
}

/* =========================== ABOUT =========================== */
/* Il testo dentro una finestra tipo blocco note: e' il pezzo che fa
   "collage" e non "sito", ed e' quello che gli e' piaciuto di piu'. */
@media(min-width:900px){
  .about__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:0 clamp(24px,4vw,56px)}
  .about__figure{--rot:2deg;margin-top:34px}
  .about__body{--rot:-1deg}
}
.about__figure .about__imgwrap{box-shadow:var(--carta);border-radius:8px;overflow:hidden}
.about__body{
  background:var(--cream-2,#fbf5ea);border:1px solid rgba(42,46,54,.13);
  border-radius:9px;padding:46px 30px 30px;position:relative;box-shadow:var(--carta);
}
/* la barra della finestra, coi tre pallini */
.about__body::before{
  content:"";position:absolute;left:0;right:0;top:0;height:32px;
  background:linear-gradient(#f3efe7,#e8e2d6);border-bottom:1px solid rgba(42,46,54,.1);
  border-radius:8px 8px 0 0;
}
.about__body::after{
  content:"";position:absolute;left:13px;top:11px;width:9px;height:9px;border-radius:50%;
  background:#f2a2a2;box-shadow:15px 0 0 #f2d3a2, 30px 0 0 #b6d9a8;
}
@media(max-width:899px){
  .about__figure{--rot:-1deg}
  .about__body{--rot:.8deg;padding:44px 20px 24px}
}

/* ========================== CONNECT ========================== */
.social{box-shadow:var(--carta);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.social:hover{transform:rotate(0deg) translateY(-5px) !important;box-shadow:var(--carta-alta)}
@media(min-width:900px){
  .socials{max-width:920px;margin-inline:auto}
  .social:nth-of-type(1){--rot:-1.4deg}
  .social:nth-of-type(2){--rot:1.1deg;margin-top:22px}
  .social:nth-of-type(3){--rot:1.3deg;margin-top:-10px}
  .social:nth-of-type(4){--rot:-.9deg;margin-top:12px}
}
@media(max-width:899px){
  .social:nth-of-type(odd){--rot:-.8deg}
  .social:nth-of-type(even){--rot:.9deg}
}

/* ===================== movimento discreto ===================== */
/* Ogni scheda scorre di poco a velocita' diversa: e' quello che rende
   la pagina "viva" senza aggiungere effetti addosso a niente. */
.parallasse{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.in{transform:rotate(var(--rot,0deg))}
  .track,.sc-card,.social,.hero__photo,.about__body,.about__figure{transition:none}
  .parallasse{transform:none !important}
}