/* ============================================================
   diegocassinelli.it — home
   Stessa palette e font della landing, layout proprio.
   Arancio · verde bosco · grigio scuro
   ============================================================ */

:root{
  --ink:#1C1C1A;
  --bosco:#1F4034;
  --salvia:#8FAF9B;
  --arancio:#E85A16;
  --arancio-scuro:#C74A0D;
  --carta:#F2F0EC;
  --grigio:#5C5B57;
  --linea:#D6D3CC;
  --spine:14px;

  --f-display:'Archivo',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--carta);-webkit-font-smoothing:antialiased}

.material-symbols-outlined{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;line-height:1;user-select:none}

/* impianto */
.spine{position:fixed;top:0;left:0;width:var(--spine);height:100%;background:var(--arancio);z-index:50}
.page{margin-left:var(--spine)}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(24px,5vw,72px)}
section{padding:clamp(72px,10vw,132px) 0}

.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:12px;color:var(--arancio)}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) .1s}
.in .eyebrow::before,.eyebrow.in::before{transform:scaleX(1)}

.display{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:.92;font-size:clamp(44px,8vw,92px)}
.display--sm{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1;font-size:clamp(30px,4.6vw,56px)}
.hl{position:relative;isolation:isolate;white-space:nowrap}
.hl::before{content:"";position:absolute;z-index:-1;left:-.1em;right:-.1em;bottom:.04em;height:.4em;background:var(--arancio);opacity:.3;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) var(--d,.25s)}
.in .hl::before{transform:scaleX(1)}

/* movimento */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@keyframes passata{from{background-position:-140% 0}to{background-position:240% 0}}
.sheen{background-image:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);background-size:220% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;animation:passata 2.6s var(--ease) 1.1s 1 both}
.stag>*{opacity:0;transform:translateY(18px);animation:sali .8s var(--ease) both}
@keyframes sali{to{opacity:1;transform:none}}
.stag>*:nth-child(1){animation-delay:.15s}
.stag>*:nth-child(2){animation-delay:.30s}
.stag>*:nth-child(3){animation-delay:.45s}
.stag>*:nth-child(4){animation-delay:.60s}

/* placeholder immagini (quadrati salvo diverso) */
.ph{aspect-ratio:1;background:
  repeating-linear-gradient(135deg,rgba(232,90,22,.10) 0 14px,rgba(232,90,22,.04) 14px 28px),
  var(--linea);
  border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph span{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio)}
.ph--tall{aspect-ratio:4/5}
.ph--soft{aspect-ratio:4/5}
.ph--logo{aspect-ratio:16/9;background:#fff}

/* HERO */
.hero{background:var(--ink);color:var(--carta);min-height:100vh;display:flex;align-items:center;position:relative}
.hero{overflow:hidden}

/* ── video di sfondo ────────────────────────────────────── */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero__scrim{position:absolute;inset:0;z-index:1;background:rgba(28,28,26,.62)}
.hero__inner{z-index:2}
.hero__inner{padding-top:clamp(80px,12vh,140px);padding-bottom:clamp(80px,12vh,140px);position:relative;width:100%}
.hero .eyebrow{color:var(--arancio);margin-bottom:30px}
.hero .display{max-width:14ch}
.hero .display br{display:block}
.hero__sub{margin-top:34px;max-width:52ch;font-size:clamp(16px,1.7vw,20px);line-height:1.7;color:rgba(242,240,236,.76)}
.scrolldown{position:absolute;bottom:clamp(24px,5vh,48px);left:clamp(24px,5vw,72px);width:52px;height:52px;border:1px solid rgba(242,240,236,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--carta);text-decoration:none;transition:background .2s,border-color .2s;animation:bob 2s var(--ease) infinite}
.scrolldown:hover{background:var(--arancio);border-color:var(--arancio)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* PASSIONI */
.passioni{background:var(--carta)}
.passioni .display--sm{max-width:20ch;margin-top:20px}
.passioni__lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,72px);align-items:start;margin-top:48px}
.passioni__testo p{font-size:17px;line-height:1.7;color:var(--grigio);max-width:52ch}
.passioni__testo p + p{margin-top:18px}
.passioni__sara{color:var(--ink)!important}
.passioni__ritratto{aspect-ratio:4/5;overflow:hidden;background:var(--linea)}
.passioni__ritratto img{width:100%;height:100%;object-fit:cover;display:block}
.passioni__griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.passioni__griglia figure{aspect-ratio:1;overflow:hidden;background:var(--linea)}
.passioni__griglia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.passioni__griglia figure:hover img{transform:scale(1.05)}

/* LAVORO */
.lavoro{background:var(--ink);color:var(--carta)}
.lavoro .eyebrow{color:var(--arancio)}
.lavoro .display--sm{margin-top:20px}
.lavoro__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);margin-top:52px;border-top:1px solid rgba(242,240,236,.16);padding-top:40px}
.lavoro__col h3{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin-bottom:14px}
.lavoro__col p{font-size:16px;line-height:1.65;color:rgba(242,240,236,.7);max-width:42ch}
.lavoro__nota{margin-top:44px;font-size:17px;line-height:1.6;color:var(--salvia);max-width:48ch}

/* BENESSERE */
.benessere{background:var(--bosco);color:var(--carta)}
.benessere__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,80px);align-items:center}
.benessere .display--sm{margin-top:20px}
.benessere p{margin-top:22px;font-size:17px;line-height:1.7;color:rgba(242,240,236,.82);max-width:46ch}
.benessere .btn{margin-top:32px}
.benessere__foto{aspect-ratio:4/5;overflow:hidden;background:rgba(242,240,236,.12)}
.benessere__foto img{width:100%;height:100%;object-fit:cover;display:block}

/* RETE */
.rete{background:var(--carta)}
.rete__loghi{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,32px);margin-top:44px;align-items:start}

.marca{display:flex;flex-direction:column;align-items:center;gap:16px}
.marca__logo{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(64px,7.6vw,96px);padding:8px;transition:transform .2s var(--ease),opacity .2s}
.marca__logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.marca__logo:hover{transform:translateY(-4px)}
.marca__social{display:flex;gap:10px;align-items:center}
.marca__social a{display:flex;color:var(--grigio);transition:color .18s,transform .18s var(--ease)}
.marca__social a:hover{color:var(--arancio);transform:translateY(-2px)}
.marca__social svg{width:17px;height:17px;fill:currentColor;display:block}
.marca__social a:focus-visible,.marca__logo:focus-visible{outline:3px solid var(--arancio);outline-offset:3px}

/* Bilanciamento ottico dei loghi: con object-fit:contain e altezza fissa,
   un logo largo occupa molta più area di uno verticale. Si compensa
   riducendo l'altezza dei loghi larghi. Valori dalle proporzioni reali. */
.marca__logo img[src*="logo-bni"]{max-height:60%}
.marca__logo img[src*="logo-spremuta"]{max-height:80%}
.marca__logo img[src*="logo-gdm"]{max-height:86%}
.marca__logo img[src*="logo-coqulab"]{max-height:92%}
.marca__logo img[src*="logo-coqufood"]{max-height:100%}

.rete__nota{margin-top:44px;font-size:17px;line-height:1.65;color:var(--grigio);max-width:56ch}
.rete__nota b{color:var(--ink)}

/* bottone */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--arancio);color:#fff;font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.01em;padding:18px 34px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn .material-symbols-outlined{transition:transform .25s var(--ease)}
.btn:hover{background:var(--arancio-scuro)}
.btn:hover .material-symbols-outlined{transform:translateX(6px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

footer{background:var(--ink);color:rgba(242,240,236,.45);padding:48px 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em}
.footer__grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:28px}
.footer__social{display:flex;gap:18px;align-items:center}
.footer__social a{display:flex;width:52px;height:52px;border:1px solid rgba(242,240,236,.24);border-radius:50%;align-items:center;justify-content:center;color:var(--carta);transition:background .2s,border-color .2s,transform .2s var(--ease)}
.footer__social a:hover{background:var(--arancio);border-color:var(--arancio);transform:translateY(-3px)}
.footer__social a:focus-visible{outline:3px solid var(--arancio);outline-offset:3px}
.footer__social svg{width:24px;height:24px;fill:currentColor;display:block}
.footer__testo{display:flex;flex-direction:column;gap:8px;text-align:right}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hl::before{transform:scaleX(1);transition:none}
  .eyebrow::before{transform:scaleX(1);transition:none}
  .stag>*{opacity:1;transform:none;animation:none}
  .sheen{animation:none;background-image:none}
  .scrolldown{animation:none}

}

/* responsive */
@media (max-width:860px){
  :root{--spine:7px}
  .wrap{padding-left:32px;padding-right:26px}
  .hero{min-height:auto;padding:clamp(80px,18vh,120px) 0 90px}
  .hero__scrim{background:rgba(28,28,26,.70)}
  .passioni__lead{grid-template-columns:1fr}
  .passioni__ritratto{aspect-ratio:4/5;max-width:360px}
  .passioni__griglia{grid-template-columns:1fr 1fr;gap:10px}
  .passioni__griglia{grid-template-columns:1fr 1fr}
  .lavoro__cols,.benessere__grid{grid-template-columns:1fr}
  .benessere__grid figure{order:-1}
  .benessere__foto{aspect-ratio:4/5;max-width:360px}
  .rete__loghi{grid-template-columns:1fr 1fr;gap:28px 20px}
  .marca__logo{height:64px}
  .footer__grid{flex-direction:column;align-items:flex-start;gap:24px}
  .footer__testo{text-align:left}
  .hl{white-space:normal}
}