/* Solo versione da hosting: caratteri senza grazie, video di sfondo, radio */
:root{
  --f-body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Red Hat Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --glow:.14; --muted:#3C4755; --vid-a:.16; --vid-f:saturate(.9);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:.14;--muted:#A7B2BF;--wine:#E27F92;--vid-a:.28;--vid-f:brightness(.38) saturate(.9)}}
:root[data-theme="dark"]{--glow:.14;--muted:#A7B2BF;--wine:#E27F92;--vid-a:.28;--vid-f:brightness(.38) saturate(.9)}

/* testi più moderni */
body{font-size:1.0625rem;line-height:1.62;letter-spacing:-.006em;font-feature-settings:"ss01"}
h1,h2,h3{letter-spacing:.005em}
.motto{font-style:normal;font-weight:500;font-size:1.3rem;line-height:1.4;max-width:34ch}
footer q{font-style:normal;font-weight:500}
.foot .fh,.tmeta,.cover-cap,.member .ch,.spec dt,.facts-list dt{letter-spacing:.02em}
.btn{font-weight:600;letter-spacing:.005em}
.lede,.legal{font-weight:400}

/* video di sfondo, sotto aloni e onde */
.bgvid{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:var(--vid-f);transition:opacity 1.6s ease}
.bgvid video.on{opacity:var(--vid-a)}
#bg{z-index:0}
@media (prefers-reduced-motion:reduce){.bgvid{display:none}}

/* radio */
.radio-box{border:1px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden}
.radio-box iframe{display:block;width:100%;height:min(80vh,820px);border:0;background:#0E141C}
.radio-off{display:flex;flex-direction:column;gap:14px;padding:28px;max-width:62ch}
.radio-off .cta{margin-top:4px}
.radio-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;align-items:center}
.onair{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.82rem;color:var(--wine)}
.onair::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wine)}

/* titoli di pagina: il testo accanto va a capo invece di finire sotto un titolo lungo */
.phead{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:flex-end}
.phead h1{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.phead .lede{flex:1 1 30ch;min-width:0}

/* ---------- lettore della pagina Musica ---------- */
.lettore{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:32px;align-items:start}
.scelta{display:flex;flex-direction:column;gap:8px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)}
.pick{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-height:44px}
.pick:hover{border-color:var(--ink)}
.pick[aria-current="true"]{border-color:var(--wine);box-shadow:inset 3px 0 0 var(--wine)}
.pick .cwrap canvas,.pick .cwrap img{width:56px;height:56px;border-radius:2px}
.pick .pt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick b{font-family:var(--f-display);font-weight:800;font-size:1.25rem;line-height:1.05}
.pick .tmeta{font-size:.74rem}
.palco{min-width:0;display:flex;flex-direction:column;gap:16px}
.slides{position:relative;overflow:hidden;display:grid;touch-action:pan-y}
.slides>.slide{grid-area:1/1;padding-block:4px 8px}
.song.slide{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:32px;padding-block:0}
.song.slide .stitle{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:.95;text-wrap:balance}
.song.slide .stitle:focus{outline:none}
.song.slide .player{margin-top:10px}
.song.slide .player iframe{height:166px}
.pnav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.pnav .pos{color:var(--muted);font-size:.9rem;text-align:center;flex:1 1 12rem}
.pnav .btn:disabled{opacity:.4;cursor:default}
@keyframes inR{from{transform:translateX(104%)}to{transform:none}}
@keyframes inL{from{transform:translateX(-104%)}to{transform:none}}
@keyframes outL{from{transform:none}to{transform:translateX(-104%)}}
@keyframes outR{from{transform:none}to{transform:translateX(104%)}}
.slide.from-right{animation:inR .6s cubic-bezier(.65,0,.25,1) both}
.slide.from-left{animation:inL .6s cubic-bezier(.65,0,.25,1) both}
.slide.to-left{animation:outL .6s cubic-bezier(.65,0,.25,1) both;pointer-events:none}
.slide.to-right{animation:outR .6s cubic-bezier(.65,0,.25,1) both;pointer-events:none}
.slides>.slide{background:transparent}
@media (max-width:900px){
  .lettore{grid-template-columns:minmax(0,1fr)}
  .scelta{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .pick{flex:0 0 15rem;scroll-snap-align:start}
  .song.slide{grid-template-columns:minmax(0,1fr)}
  .song.slide .cwrap{max-width:340px}
}

/* ---------- rivelazione all'apertura delle pagine grafiche ---------- */
@keyframes rvTitle{from{clip-path:inset(0 0 100% 0);transform:translateY(.35em)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes rvFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rvBlock{from{opacity:0;clip-path:inset(18% 6% 18% 6% round 6px);transform:scale(.97)}to{opacity:1;clip-path:inset(0 0 0 0 round 0);transform:none}}
@keyframes rvBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rvIris{from{clip-path:circle(0% at 50% 55%)}to{clip-path:circle(80% at 50% 55%)}}
main.reveal .crumb{animation:rvFade .5s ease-out both}
main.reveal .phead h1{animation:rvTitle .9s cubic-bezier(.2,.8,.2,1) .05s both}
main.reveal .phead .lede{animation:rvFade .7s ease-out .3s both}
main.reveal .gcard,main.reveal .covers>*,main.reveal .vid,main.reveal .idcard,main.reveal .ref,main.reveal .spectrum{animation:rvBlock .8s cubic-bezier(.2,.8,.2,1) both}
main.reveal .gindex>:nth-child(1),main.reveal .covers>:nth-child(1),main.reveal .vids>:nth-child(1),main.reveal .idgrid>:nth-child(1){animation-delay:.35s}
main.reveal .gindex>:nth-child(2),main.reveal .covers>:nth-child(2),main.reveal .vids>:nth-child(2),main.reveal .idgrid>:nth-child(2){animation-delay:.47s}
main.reveal .gindex>:nth-child(3),main.reveal .covers>:nth-child(3){animation-delay:.59s}
main.reveal .covers>:nth-child(4){animation-delay:.71s}
main.reveal .gindex.two>:nth-child(1){animation-delay:.7s}
main.reveal .gindex.two>:nth-child(2){animation-delay:.82s}
main.reveal .idbanner{animation:rvBlock .8s cubic-bezier(.2,.8,.2,1) .6s both}
main.reveal .ref{animation-delay:.35s}
main.reveal .strip .sw{transform-origin:50% 100%;animation:rvBar .6s cubic-bezier(.2,.8,.2,1) both}
main.reveal .strip li:nth-child(1) .sw{animation-delay:.40s} main.reveal .strip li:nth-child(2) .sw{animation-delay:.45s}
main.reveal .strip li:nth-child(3) .sw{animation-delay:.50s} main.reveal .strip li:nth-child(4) .sw{animation-delay:.55s}
main.reveal .strip li:nth-child(5) .sw{animation-delay:.60s} main.reveal .strip li:nth-child(6) .sw{animation-delay:.65s}
main.reveal .strip li:nth-child(7) .sw{animation-delay:.70s} main.reveal .strip li:nth-child(8) .sw{animation-delay:.75s}
main.reveal .strip li:nth-child(9) .sw{animation-delay:.80s} main.reveal .strip li:nth-child(10) .sw{animation-delay:.85s}
main.reveal .strip li:nth-child(11) .sw{animation-delay:.90s} main.reveal .strip li:nth-child(12) .sw{animation-delay:.95s}
main.reveal .spectrum{animation-delay:.5s}
main.reveal .stage{animation:rvIris 1.1s cubic-bezier(.3,.7,.2,1) .25s both}
main.reveal .how{animation:rvFade .6s ease-out .9s both}
@media (prefers-reduced-motion:reduce){
  main.reveal *,.slide{animation:none!important}
}

/* telefono: il pulsante dello sfondo resta in riga con il logo */
@media (max-width:520px){
  .top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:8px}
  .top nav{grid-column:1/-1;grid-row:2;gap:6px 14px}
  .bgtoggle{grid-column:2;grid-row:1;font-size:.82rem;padding:6px 10px}
}