/* ============================================================================
   CLESSIO LAB — Design System v2 · "Monako-luxury"
   Doto (display dotted) + Space Mono · panna/antracite alternato · accento salvia
   Scroll cinematografico, headline giganti, motion lento.
   ============================================================================ */

:root{
  --c-panna:#F3EFE6; --c-panna-2:#EBE6D9;
  --c-ink:#16150F; --c-ink-2:#1E1C16; --c-ink-soft:#5A574C; --c-ink-faint:#8C887A;
  --c-bone:#F3EFE6; --c-bone-soft:#B6B1A2; --c-bone-faint:#736F62;
  --c-sage:#7C8A6A; --c-sage-bright:#9DAA86; --c-sage-deep:#5A6650;

  --line-d:rgba(22,21,15,0.14); --line-d-soft:rgba(22,21,15,0.07);
  --line-b:rgba(243,239,230,0.16); --line-b-soft:rgba(243,239,230,0.07);

  --font-display:"Doto","Space Mono",monospace;
  --font-mono:"Space Mono","JetBrains Mono","SF Mono",ui-monospace,monospace;
  --font-body:"Space Mono","JetBrains Mono",monospace;

  --t-giant:clamp(3.2rem, 13vw, 11rem);
  --t-display:clamp(2.4rem, 8.5vw, 7rem);
  --t-h1:clamp(2rem, 6vw, 4.5rem);
  --t-h2:clamp(1.5rem, 4vw, 2.6rem);
  --t-body:clamp(0.92rem, 1.3vw, 1.05rem);
  --t-sm:0.82rem; --t-label:0.7rem;

  --lh-tight:0.96; --lh-snug:1.12; --lh-body:1.7;
  --tr-display:-0.04em; --tr-wide:0.2em; --tr-kicker:0.34em;

  --gutter:clamp(22px, 6vw, 110px);
  --section-y:clamp(90px, 16vh, 220px);
  --maxw:1500px;

  --ease-luxe:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mask:cubic-bezier(0.77, 0, 0.175, 1);
  --dur:1.1s;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--c-panna); color:var(--c-ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
img,canvas,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
h1,h2,h3,h4,p{margin:0;}

html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important;}}

.display{font-family:var(--font-display); font-weight:400; font-size:var(--t-display); line-height:var(--lh-tight); letter-spacing:var(--tr-display);}
.giant{font-family:var(--font-display); font-weight:400; font-size:var(--t-giant); line-height:0.9; letter-spacing:var(--tr-display);}
.h1{font-family:var(--font-display); font-weight:400; font-size:var(--t-h1); line-height:var(--lh-snug); letter-spacing:-0.03em;}
.h2{font-family:var(--font-mono); font-weight:700; font-size:var(--t-h2); line-height:1.0; letter-spacing:-0.01em;}
.lead{font-family:var(--font-body); font-size:var(--t-body); line-height:var(--lh-body); color:var(--c-ink-soft); max-width:46ch;}
.kicker{font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--tr-kicker); text-transform:uppercase; color:var(--c-ink-faint); display:inline-flex; align-items:center; gap:11px;}
.kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c-sage); flex:0 0 auto;}
.label{font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--tr-wide); text-transform:uppercase; color:var(--c-ink-faint);}
.accent{color:var(--c-sage);}
.hl{background:var(--c-sage); color:var(--c-panna); padding:0 0.12em; box-decoration-break:clone; -webkit-box-decoration-break:clone;}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.section{padding-top:var(--section-y); padding-bottom:var(--section-y); position:relative;}
.section--dark{background:var(--c-ink); color:var(--c-bone);}
.section--dark .lead{color:var(--c-bone-soft);}
.section--dark .label,.section--dark .kicker{color:var(--c-bone-faint);}
.section--dark .h2{color:var(--c-bone);}

.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:var(--t-label); font-weight:700; letter-spacing:var(--tr-wide); text-transform:uppercase; padding:17px 30px; border:1px solid var(--c-ink); color:var(--c-ink); border-radius:100px; transition:background .5s var(--ease-luxe), color .5s var(--ease-luxe);}
.btn:hover{background:var(--c-ink); color:var(--c-panna);}
.btn--sage{border-color:var(--c-sage); color:var(--c-sage);}
.btn--sage:hover{background:var(--c-sage); color:var(--c-panna);}
.section--dark .btn{border-color:var(--c-bone); color:var(--c-bone);}
.section--dark .btn:hover{background:var(--c-bone); color:var(--c-ink);}

.card{background:var(--c-panna-2); border:1px solid var(--line-d-soft); border-radius:0; position:relative;}
.section--dark .card{background:var(--c-ink-2); border-color:var(--line-b-soft);}

.ph{display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
  background:radial-gradient(circle, rgba(22,21,15,0.10) 1px, transparent 1.4px) 0 0/14px 14px, var(--c-panna-2);
  color:var(--c-ink-faint); font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--tr-wide); text-transform:uppercase; border:1px solid var(--line-d);}
.section--dark .ph{background:radial-gradient(circle, rgba(243,239,230,0.10) 1px, transparent 1.4px) 0 0/14px 14px, var(--c-ink-2); color:var(--c-bone-faint); border-color:var(--line-b);}

/* =================== MOTION =================== */
.reveal{opacity:0; transform:translateY(40px); transition:opacity var(--dur) var(--ease-luxe), transform var(--dur) var(--ease-luxe);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.10s;} .reveal.d2{transition-delay:.20s;} .reveal.d3{transition-delay:.30s;} .reveal.d4{transition-delay:.40s;}

/* mask reveal headline: la riga sale da sotto una maschera */
.mask{display:block; overflow:hidden; padding-bottom:0.06em;}
.mask > *{display:block; transform:translateY(110%); transition:transform 1.2s var(--ease-mask);}
.mask.in > *{transform:none;}
.mask.in.d1 > *{transition-delay:.08s;} .mask.in.d2 > *{transition-delay:.18s;} .mask.in.d3 > *{transition-delay:.28s;}

.line-draw{height:1px; background:var(--line-d); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-luxe);}
.line-draw.in{transform:scaleX(1);}
.section--dark .line-draw{background:var(--line-b);}

@media (prefers-reduced-motion:reduce){.reveal,.mask>*,.line-draw{opacity:1 !important; transform:none !important;}}