/* =========================================================
   HARMONÌA — style.css
   Sound design · identità visiva 01 · 2026
   Ordine: token → reset → utility → header → hero →
           sezioni → servizi → lavori → player → studio →
           contatti → footer → animazioni → media query
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKEN
--------------------------------------------------------- */
:root{
  /* colore */
  --abisso:#08222B;
  --abisso-fondo:#061A21;
  --profondo:#0F3A46;
  --verdemare:#7FB2AA;
  --schiuma:#F1F6F4;
  --ottone:#C6A468;

  /* colore derivato */
  --linea:rgba(127,178,170,.18);
  --linea-tenue:rgba(127,178,170,.14);
  --testo-70:rgba(241,246,244,.70);
  --testo-55:rgba(241,246,244,.55);
  --testo-40:rgba(241,246,244,.40);

  /* tipografia */
  --serif:'Cormorant Garamond',Didot,Garamond,'Times New Roman',serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;

  /* scala */
  --t-display:clamp(46px,8.4vw,104px);
  --t-h2:clamp(32px,4.6vw,56px);
  --t-h3:27px;
  --t-body:16px;
  --t-small:14.5px;

  /* spazio */
  --gut:clamp(20px,5vw,64px);
  --sez:clamp(80px,11vw,150px);

  /* movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.25s;
  --t-slow:.6s;
}

/* ---------------------------------------------------------
   2. RESET E BASE
--------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--abisso);
  color:var(--schiuma);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--t-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:1px solid var(--ottone);outline-offset:4px}

::selection{background:var(--ottone);color:var(--abisso)}

/* ---------------------------------------------------------
   3. UTILITY
--------------------------------------------------------- */
.mono{
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.eyebrow{display:block;color:var(--verdemare);margin-bottom:20px}

.lede{max-width:52ch;color:var(--testo-70);font-size:16.5px;margin:0}

.hair{height:1px;background:var(--linea);border:0;margin:0 var(--gut)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.01em}

h2{font-size:var(--t-h2);line-height:1.12;margin:0 0 22px;max-width:16ch}

/* ---------------------------------------------------------
   4. HEADER
--------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--gut);
  background:rgba(8,34,43,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(127,178,170,.16);
  transition:padding var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.site-header.is-scrolled{padding-top:11px;padding-bottom:11px;background:rgba(8,34,43,.9)}

.brand{display:flex;align-items:center;gap:14px}
.brand__mark{flex:none}
.brand__name{
  font-family:var(--serif);font-weight:400;font-size:23px;line-height:1;
  letter-spacing:.16em;padding-left:14px;
  border-left:1px solid rgba(241,246,244,.22);
}

.nav{display:flex;gap:34px}
.nav a{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--testo-70);transition:color var(--t-fast) var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--ottone)}

/* pulsante menu — visibile solo su mobile */
.nav-toggle{
  display:none;width:34px;height:24px;position:relative;z-index:70;
}
.nav-toggle span{
  position:absolute;left:4px;right:4px;height:1px;background:var(--schiuma);
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.nav-toggle span:nth-child(1){top:7px}
.nav-toggle span:nth-child(2){top:15px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------------------------------------------------------
   5. HERO
--------------------------------------------------------- */
.hero{
  position:relative;min-height:88vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut);overflow:hidden;
  background:radial-gradient(130% 100% at 62% 14%,
    #22697A 0%,#12495A 34%,#0B2C37 66%,var(--abisso) 100%);
}

/* texture pittorica: sostituibile con la fotografia definitiva */
.hero__grain{position:absolute;inset:-10%;opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(8,34,43,.86) 0%,rgba(8,34,43,.55) 46%,rgba(8,34,43,.12) 100%);
}
.hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(transparent,var(--abisso));
}

.hero__inner{position:relative;z-index:3;max-width:900px}
.hero__inner .mono{color:var(--verdemare);margin-bottom:26px;display:block}

.hero h1{
  font-size:var(--t-display);line-height:.98;letter-spacing:-.005em;margin:0 0 26px;
}
.hero h1 em{font-style:italic;color:var(--verdemare)}

.hero p{max-width:40ch;font-size:16.5px;color:var(--testo-70);margin:0 0 42px}

/* onde animate di fondo */
.waves{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;z-index:1}
.wave{position:absolute;bottom:0;left:0;width:200%;height:100%;will-change:transform}
.wave svg{width:50%;height:100%;float:left}
.wave--1{animation:drift 30s linear infinite;opacity:.26}
.wave--2{animation:drift 44s linear infinite reverse;opacity:.5;height:76%}
.wave--3{animation:drift 62s linear infinite;opacity:.5;height:56%}

@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   6. PULSANTE
--------------------------------------------------------- */
.cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 30px;border-radius:100px;
  border:1px solid rgba(241,246,244,.34);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.cta:hover,.cta:focus-visible{border-color:var(--ottone);color:var(--ottone)}
.cta svg{transition:transform var(--t-fast) var(--ease)}
.cta:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------
   7. SEZIONI
--------------------------------------------------------- */
.section{padding:var(--sez) var(--gut)}

/* ---------------------------------------------------------
   8. SERVIZI
--------------------------------------------------------- */
.servizi{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:76px;border-top:1px solid var(--linea);
}
.servizio{padding:38px 34px 44px 0;border-right:1px solid var(--linea)}
.servizio:last-child{border-right:0}
.servizio:not(:first-child){padding-left:34px}
.servizio__glyph{color:var(--verdemare);opacity:.85}
.servizio h3{font-weight:400;font-size:var(--t-h3);margin:22px 0 14px}
.servizio p{font-size:var(--t-small);line-height:1.72;color:rgba(241,246,244,.62);margin:0}

/* ---------------------------------------------------------
   9. LAVORI
--------------------------------------------------------- */
.work{border-top:1px solid var(--linea);margin-top:70px}

.work__row{
  display:grid;grid-template-columns:1.6fr 1fr 150px 64px;
  align-items:center;gap:24px;padding:26px 0;
  border-bottom:1px solid var(--linea-tenue);
  transition:padding-left var(--t-slow) var(--ease),
             background var(--t-fast) var(--ease);
}
.work__row:hover{padding-left:16px;background:rgba(127,178,170,.05)}

.work__titolo{font-family:var(--serif);font-weight:400;font-size:26px}
.work__tipo{font-size:13px;color:var(--testo-55)}
.work__dur{font-family:var(--mono);font-size:11px;color:rgba(241,246,244,.5);text-align:right}

/* forma d'onda in miniatura — le barre le crea script.js */
.bars{display:flex;align-items:center;gap:2.5px;height:26px}
.bars i{
  display:block;width:2px;border-radius:2px;background:var(--verdemare);opacity:.55;
  transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.work__row:hover .bars i{opacity:1;background:var(--ottone)}

/* ---------------------------------------------------------
   10. PLAYER
--------------------------------------------------------- */
.player{
  margin-top:60px;padding:38px clamp(22px,4vw,46px);
  border:1px solid rgba(127,178,170,.22);border-radius:3px;
  background:linear-gradient(180deg,rgba(15,58,70,.55),rgba(8,34,43,.2));
}
.player__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin-bottom:28px;flex-wrap:wrap;
}
.player__titolo{
  display:block;margin-top:6px;
  font-family:var(--serif);font-weight:400;font-size:22px;
}
.player__btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 24px;border-radius:100px;
  border:1px solid rgba(241,246,244,.34);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.player__btn:hover,.player__btn:focus-visible{border-color:var(--ottone);color:var(--ottone)}

.viz{display:flex;align-items:center;gap:3px;height:80px}
.viz i{
  flex:1;border-radius:2px;background:var(--verdemare);opacity:.42;
  transition:height .18s var(--ease),opacity .18s var(--ease);
}
.viz.is-playing i{opacity:.9}

.player__meta{display:flex;justify-content:space-between;margin-top:18px;color:var(--testo-40)}

/* ---------------------------------------------------------
   11. STUDIO
--------------------------------------------------------- */
.studio{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(30px,6vw,84px);align-items:center;
}
.studio__ritratto{
  aspect-ratio:4/5;padding:22px;
  border:1px solid rgba(127,178,170,.22);
  background:linear-gradient(150deg,#14495A,#0B2A34);
  display:flex;align-items:flex-end;color:rgba(241,246,244,.34);
}
.studio blockquote{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(22px,2.7vw,31px);line-height:1.42;margin:0 0 26px;
}
.studio__firma{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ottone)}

/* ---------------------------------------------------------
   12. CONTATTI
--------------------------------------------------------- */
.contatti{text-align:center;background:linear-gradient(180deg,var(--abisso),var(--abisso-fondo))}
.contatti h2{max-width:none;margin-left:auto;margin-right:auto}

.contatti__mail{
  display:inline-block;margin:12px 0 34px;padding-bottom:8px;
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,6vw,68px);
  border-bottom:1px solid rgba(198,164,104,.4);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.contatti__mail:hover,.contatti__mail:focus-visible{color:var(--ottone);border-color:var(--ottone)}

.social{display:flex;gap:30px;justify-content:center;color:var(--testo-55)}
.social a{transition:color var(--t-fast) var(--ease)}
.social a:hover,.social a:focus-visible{color:var(--ottone)}

/* ---------------------------------------------------------
   13. FOOTER
--------------------------------------------------------- */
.site-footer{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
  padding:30px var(--gut);
  border-top:1px solid rgba(127,178,170,.16);
  color:var(--testo-40);
}

/* ---------------------------------------------------------
   14. RIVELAZIONE ALLO SCROLL
   Attiva solo se il JS è presente: senza JS il contenuto
   resta visibile.
--------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ---------------------------------------------------------
   15. MEDIA QUERY
--------------------------------------------------------- */
@media(max-width:860px){
  .servizi{grid-template-columns:1fr}
  .servizio{
    border-right:0;border-bottom:1px solid var(--linea);
    padding:34px 0 38px;
  }
  .servizio:not(:first-child){padding-left:0}
  .servizio:last-child{border-bottom:0}
  .studio{grid-template-columns:1fr}
}

@media(max-width:760px){
  .nav-toggle{display:block}

  .nav{
    position:fixed;inset:0;z-index:65;
    flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:rgba(8,34,43,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;
    transition:opacity var(--t-fast) var(--ease),visibility var(--t-fast);
  }
  .nav.is-open{opacity:1;visibility:visible}
  .nav a{font-family:var(--serif);font-size:34px;letter-spacing:.06em;text-transform:none}

  .hero{min-height:82vh}

  .work__row{grid-template-columns:1fr 64px;gap:6px 16px}
  .work__row .bars{display:none}
  .work__tipo{grid-column:1}
  .work__dur{grid-row:1;grid-column:2}

  .social{flex-wrap:wrap;gap:18px 26px}
}

@media(max-width:420px){
  .brand__name{font-size:19px;padding-left:11px}
}

/* ---------------------------------------------------------
   16. MOVIMENTO RIDOTTO
--------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wave--1,.wave--2,.wave--3{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}

/* ---------------------------------------------------------
   17. STAMPA
--------------------------------------------------------- */
@media print{
  .site-header,.waves,.player,.nav-toggle{display:none}
  body{background:#fff;color:#000}
  .hero{min-height:auto;background:none}
}