/* DiSolito — componenti. Colori, spazi, raggi e ombre arrivano da tokens.json (tokens.css).
   Qui vivono solo il movimento e la composizione dei pezzi. */

:root {
  --ds-ease-pop: cubic-bezier(.34, 1.56, .64, 1); /* rimbalzo breve: link che si solleva */
  --ds-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ds-dur-fast: 160ms;
  --ds-dur-base: 280ms;
}

.ds-root { background: var(--surface); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.ds-root *, .ds-root *::before, .ds-root *::after { box-sizing: border-box; }

/* ---------- Icona (SVG inline, eredita il colore) ---------- */
.ds-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Chip ---------- */
.ds-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 6px 12px; border: var(--border-2) solid var(--line); border-radius: var(--radius-pill);
  background: var(--tint); color: var(--ink);
  font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.ds-chip--corallo { background: var(--corallo); color: var(--on-corallo); }
.ds-chip--arancio { background: var(--arancio); color: var(--on-arancio); }
.ds-chip--sole    { background: var(--sole);    color: var(--on-sole); }
.ds-chip--mare    { background: var(--mare);    color: var(--on-mare); }

/* ---------- Etichetta di sezione ---------- */
.ds-section-label {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0; color: var(--ink);
  font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.ds-section-label::after { content: ""; flex: 1; height: var(--border-2); background: var(--line); border-radius: var(--radius-pill); }
.ds-section-label__num { color: var(--ink-muted); }

/* ---------- Pulsante-link ---------- */
.ds-link {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  width: 100%; min-height: 64px; padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  border: var(--border-2) solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-pop);
  transition: transform var(--ds-dur-base) var(--ds-ease-pop), box-shadow var(--ds-dur-base) var(--ds-ease-pop), background-color var(--ds-dur-fast) linear;
}
.ds-link:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-pop-lg); }
.ds-link:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 transparent; transition-duration: 80ms; }
.ds-link:focus-visible { outline: var(--border-3) solid var(--focus-ring); outline-offset: 3px; }
.ds-link__badge {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-pill); background: var(--tint); color: var(--ink);
}
.ds-link__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ds-link__title { font: 650 17px/24px var(--font-sans); }
.ds-link__sub { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-link__arrow { transition: transform var(--ds-dur-base) var(--ds-ease-pop); }
.ds-link:hover .ds-link__arrow { transform: translate(3px, -3px); }

/* varianti piene: il testo secondario prende il colore "on-" pieno, perché ink-muted non regge sui colori */
.ds-link--corallo { background: var(--corallo); color: var(--on-corallo); }
.ds-link--arancio { background: var(--arancio); color: var(--on-arancio); }
.ds-link--sole    { background: var(--sole);    color: var(--on-sole); }
.ds-link--mare    { background: var(--mare);    color: var(--on-mare); }
.ds-link--corallo .ds-link__sub, .ds-link--arancio .ds-link__sub,
.ds-link--sole .ds-link__sub, .ds-link--mare .ds-link__sub { color: inherit; opacity: 1; }
.ds-link--corallo .ds-link__badge, .ds-link--arancio .ds-link__badge,
.ds-link--sole .ds-link__badge, .ds-link--mare .ds-link__badge { background: transparent; color: inherit; border: var(--border-2) solid currentColor; }

/* in evidenza: il link più importante del momento, più alto e con il titolo grande */
.ds-link--hero { min-height: 96px; padding-top: var(--space-4); padding-bottom: var(--space-4); }
.ds-link--hero .ds-link__title { font: 700 22px/1.15 var(--font-display); letter-spacing: -.01em; }
.ds-link--hero .ds-link__badge { width: 56px; height: 56px; }

/* ---------- Equalizzatore ---------- */
.ds-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.ds-eq span { width: 4px; height: 100%; border-radius: var(--radius-pill); background: currentColor; transform-origin: bottom; animation: ds-eq 1.1s var(--ds-ease-out) infinite alternate; }
.ds-eq span:nth-child(2) { animation-delay: -.35s; animation-duration: .9s; }
.ds-eq span:nth-child(3) { animation-delay: -.7s;  animation-duration: 1.3s; }
.ds-eq span:nth-child(4) { animation-delay: -.2s;  animation-duration: 1s; }
.ds-eq--lg { height: 48px; gap: 6px; }
.ds-eq--lg span { width: 8px; }
@keyframes ds-eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }

/* ---------- Nastro scorrevole ---------- */
.ds-marquee { overflow: hidden; border-block: var(--border-2) solid var(--line); background: var(--sole); color: var(--on-sole); }
.ds-marquee__track { display: flex; width: max-content; animation: ds-marquee 28s linear infinite; }
.ds-marquee__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-2) 0; font: 500 14px/20px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ds-marquee__item::after { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--corallo); }
@keyframes ds-marquee { to { transform: translateX(-50%); } }

/* ---------- Intestazione profilo ---------- */
.ds-profile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-16) var(--space-4) var(--space-8); }
.ds-profile__avatar { position: relative; width: 112px; height: 112px; border-radius: var(--radius-pill); border: var(--border-2) solid var(--line); overflow: hidden; background: var(--sole); box-shadow: var(--shadow-pop); }
.ds-profile__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-profile__name { margin: 0; font: 800 56px/.95 var(--font-display); letter-spacing: -.035em; }
.ds-profile__name em { font-style: normal; color: var(--corallo); }
.ds-profile__real { margin: calc(var(--space-2) * -1) 0 0; font: 400 14px/20px var(--font-mono); letter-spacing: .02em; color: var(--ink-muted); }
.ds-profile__bio { margin: 0; max-width: 34ch; font: 400 17px/26px var(--font-sans); }
.ds-profile__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ds-profile__wordmark { width: min(300px, 80%); height: auto; }

/* ---------- Pagina dei link ---------- */
.ds-page { position: relative; overflow: hidden; min-height: 100%; }
.ds-page__sun { position: absolute; top: -120px; right: -90px; width: 280px; height: 280px; border-radius: var(--radius-pill); background: var(--corallo); animation: ds-breathe 9s var(--ds-ease-out) infinite alternate; }
.ds-page__sun::after { content: ""; position: absolute; left: -150px; bottom: 40px; width: 120px; height: 120px; border-radius: var(--radius-pill); background: var(--sole); }
.ds-page__inner { position: relative; max-width: 480px; margin: 0 auto; padding: 0 var(--space-4) var(--space-12); }
.ds-page__inner--head { padding-bottom: var(--space-4); }
.ds-page__group { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }
.ds-page__group .ds-section-label { margin-bottom: var(--space-1); }
.ds-page__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-12); font: 400 14px/20px var(--font-mono); color: var(--ink-muted); text-align: center; }
.ds-page__foot img { width: 40px; height: 40px; }
@keyframes ds-breathe { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(10px); } }

/* ---------- Grafiche social (sempre tema Giorno: avvolgere in data-theme="light") ---------- */
.ds-art { position: relative; overflow: hidden; isolation: isolate; font-family: var(--font-sans); }
.ds-art__label { font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.ds-art__meta  { font: 400 14px/20px var(--font-mono); letter-spacing: .02em; }
.ds-art__title { margin: 0; font: 800 56px/.92 var(--font-display); letter-spacing: -.035em; }

/* Storia Instagram 9:16 — disegnata a 360×640, si esporta a 3× (1080×1920) */
.ds-story { width: 360px; height: 640px; border-radius: var(--radius-md); display: flex; flex-direction: column; justify-content: space-between; padding: 92px var(--space-6) 120px; }
.ds-story .ds-art__title { font-size: 56px; }
.ds-art .ds-chip { align-self: flex-start; justify-self: start; }
.ds-story__foot { position: absolute; left: var(--space-6); right: var(--space-6); bottom: 72px; display: flex; justify-content: space-between; align-items: center; }
.ds-story__foot img { height: 18px; width: auto; }
.ds-story--dj    { background: var(--corallo); color: var(--on-corallo); }
.ds-story--radio { background: var(--mare);    color: var(--on-mare); }
.ds-story--viaggio { background: var(--sole);  color: var(--on-sole); }
.ds-story__disc { position: absolute; z-index: -1; border-radius: var(--radius-pill); }

/* Copertina mix / puntata 1:1 — disegnata a 320×320, si esporta a 3000×3000 */
.ds-cover { width: 320px; height: 320px; border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; }
.ds-cover .ds-art__title { font-size: 44px; }
.ds-cover--chill { background: var(--surface); color: var(--ink); border: var(--border-2) solid var(--line); }
.ds-cover--lofi  { background: var(--ink); color: var(--surface); }
.ds-cover--radio { background: var(--mare); color: var(--on-mare); }

/* ---------- Movimento ridotto: tutto fermo, i link cambiano solo l'ombra ---------- */
@media (prefers-reduced-motion: reduce) {
  .ds-eq span, .ds-marquee__track, .ds-page__sun { animation: none; }
  .ds-link, .ds-link__arrow { transition: box-shadow var(--ds-dur-fast) linear; }
  .ds-link:hover, .ds-link:hover .ds-link__arrow { transform: none; }
}