/* Veste "Estasi e veleno" — colori e caratteri della copertina del singolo.
   Per la prossima uscita basta sostituire questo file (o toglierlo). */
:root{
  --fucsia:#E8409F;
  --fucsia-chiaro:#FF7CC8;
  --cielo:#4CB6EE;
  --cielo-chiaro:#8FD4FF;
  --ambra:var(--fucsia);
  --ambra-chiaro:var(--fucsia-chiaro);
  --blu-chiaro:var(--cielo-chiaro);
  --blu:#123A6E;
  --serif:'Bebas Neue','Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --condensato:'Barlow Condensed','Arial Narrow',sans-serif;
}
h1,h2,h3{font-weight:400;letter-spacing:.01em;line-height:.92;text-transform:uppercase}
.titolo-sezione{font-size:clamp(56px,7.5vw,104px)}
.logo{font-family:var(--condensato);font-weight:600;font-size:22px;letter-spacing:.22em;text-transform:uppercase}
.etichetta{font-family:var(--condensato);font-weight:600;font-size:15px;letter-spacing:.28em}
.btn{font-family:var(--condensato);font-weight:700;font-size:15px;letter-spacing:.16em}
.btn.piccolo{font-size:14px}
.menu{font-family:var(--condensato);font-size:15px;font-weight:600;letter-spacing:.2em}
.striscia .citazione{font-family:var(--serif);font-style:normal;font-size:clamp(40px,5vw,72px);color:var(--avorio)}
.striscia .testate a{font-family:var(--condensato);font-weight:500;font-size:20px;letter-spacing:.12em;text-transform:uppercase}
.voce .nome,.disco h3{font-size:30px}
.uscita h3{font-size:clamp(46px,5vw,64px)}
.dittico h2{font-size:clamp(80px,9vw,128px)}
.dittico h2.corsivo{font-style:normal;color:var(--cielo-chiaro)}
.dittico figure:nth-child(1) h2{color:var(--fucsia)}
.dittico video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dittico figure:nth-child(2) img,.dittico figure:nth-child(2) video{filter:hue-rotate(-80deg) saturate(1.25)}
@media (prefers-reduced-motion:reduce){.dittico video{display:none}}
.piede{background:linear-gradient(180deg,var(--notte) 0%,#2A0A22 100%)}
.piede h2{font-size:clamp(72px,10vw,150px)}
.scheda.blu{background:linear-gradient(155deg,#123A6E 0%,#0C0F1E 72%)}
.tracce li.bonus::before{color:var(--fucsia)}

/* effetto timbro consumato, come i titoli della copertina */
.timbro{-webkit-mask-image:url(../img/timbro.png);mask-image:url(../img/timbro.png);-webkit-mask-size:520px auto;mask-size:520px auto;-webkit-mask-repeat:repeat;mask-repeat:repeat}

/* apertura in stile copertina */
.apertura.copertina{background:var(--cielo);align-items:center;min-height:min(94vh,920px)}
.apertura.copertina .sfondo{object-position:62% 30%}
.apertura.copertina .velo-cielo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,90,150,.42) 0%,rgba(28,90,150,0) 52%),linear-gradient(180deg,rgba(7,8,13,0) 62%,rgba(7,8,13,.75) 100%)}
.apertura.copertina .dentro{padding-top:60px;gap:0}
.apertura.copertina .artista{font-family:var(--condensato);font-weight:600;font-size:clamp(18px,1.8vw,26px);letter-spacing:.28em;color:#fff;margin-bottom:18px;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.apertura.copertina .dentro>*{max-width:min(46%,620px)}
.apertura.copertina h1{font-size:clamp(96px,12.5vw,210px);line-height:.84;letter-spacing:.005em;display:flex;flex-direction:column;align-items:flex-start}
.apertura.copertina h1 .estasi{color:var(--fucsia);text-shadow:0 3px 24px rgba(120,0,70,.25)}
.apertura.copertina h1 .e{color:#fff;font-size:.55em;line-height:1;margin:.04em 0 .02em .06em}
.apertura.copertina h1 .veleno{color:var(--cielo-chiaro);text-shadow:0 3px 26px rgba(10,30,70,.55)}
.apertura.copertina .sotto{color:#fff;margin-top:26px;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.apertura.copertina .bottoni{margin-top:26px}
.apertura.copertina .btn:not(.pieno){background:rgba(7,8,13,.35);border-color:rgba(255,255,255,.7);color:#fff}
@media (max-width:700px){
  .apertura.copertina{align-items:flex-end;min-height:92vh}
  .apertura.copertina .dentro{padding-bottom:48px}
  .apertura.copertina .dentro>*{max-width:100%}
  .apertura.copertina h1{font-size:23vw;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:.18em}
  .apertura.copertina h1 .e{font-size:.6em;margin:0}
  .apertura.copertina .sfondo{object-position:66% 20%}
  .apertura.copertina .velo-cielo{background:linear-gradient(180deg,rgba(7,8,13,.15) 0%,rgba(7,8,13,0) 30%,rgba(7,8,13,.7) 100%)}
}