/* ====================================================================
   Andrea Alice — Fase 2 (design, moodboard applicata)
   --------------------------------------------------------------------
   Direzione moodboard: modernismo onirico / tramonto · palette calda
   (crema + corallo/sunset, magenta, teal, verde, oro, charcoal) ·
   layout modulare pulito · footer scuro strutturato · texture ASCII/codice ·
   freccia angolata come motivo · tipografia Jost (geometrico, prova per Faricy New).

   Tutta l'estetica vive qui in :root come custom properties.
   ==================================================================== */

:root {
  /* ---- Palette moodboard ---- */
  --color-cream:         #ECE5D7;   /* crema caldo — sfondo */
  --color-surface:       #F3EEE2;   /* card / player (più chiara del bg) */
  --color-surface-alt:   #E4DBC9;
  --color-ink:           #1C1B19;   /* charcoal — testo e footer */

  --color-coral:         #EE7E4F;   /* corallo / tramonto — accento primario */
  --color-coral-deep:    #D9663A;   /* hover */
  --color-magenta:       #8E2A62;   /* plum — accento secondario */
  --color-teal:          #1E6B82;
  --color-green:         #33A065;
  --color-gold:          #CE9A22;

  /* ---- Ruoli semantici (usati dal layout) ---- */
  --color-bg:             var(--color-cream);
  --color-text:           var(--color-ink);
  --color-text-muted:     #625849;   /* grigio caldo, AA su crema */
  --color-border:         #D6CCB8;
  --color-accent:         var(--color-coral);
  --color-accent-hover:   var(--color-coral-deep);
  --color-accent-contrast:#1C1B19;   /* charcoal su corallo — contrasto AA */
  --color-focus:          var(--color-teal);

  /* ---- Tipografia ---- */
  /* Faricy New (commerciale, moretye) come primaria; fallback grotesque pulito.
     Vedi lo scaffold @font-face più sotto per self-hostarla in ./fonts/. */
  --font-display: "Faricy New", "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --font-weight-normal: 400;
  --font-weight-bold:   500;   /* Faricy è pulita: enfasi con Medium, non un grassetto pesante */

  --fs-hero:  clamp(2.75rem, 9vw, 5.5rem);
  --fs-h2:    clamp(1.6rem, 4vw, 2.4rem);
  --fs-h3:    clamp(1.15rem, 3vw, 1.5rem);
  --fs-body:  clamp(1rem, 2.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --line-body: 1.6;
  --measure:  62ch;

  /* ---- Spaziature ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --wrap-max:  72rem;
  --wrap-pad:  1.25rem;

  /* ---- Forma (layout modulare pulito) ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-1: 0 1px 2px rgba(28, 27, 25, 0.05);

  /* ---- Movimento ---- */
  --transition-fast: 120ms ease;
  --transition-med:  240ms ease;

  /* ---- Layout / sticky nav ---- */
  --header-h: 3.5rem;

  /* Gradiente di grigio dell'hero — versione in scala di grigi del sunset
     coral/gold originale (luminanza preservata: 0.299R+0.587G+0.114B su
     rgb(238,126,79) e rgb(243,199,155)), stessa forma/alpha (0.55 / 0.42). */
  --gradient-hero: radial-gradient(88% 120% at 88% 10%, rgba(154,154,154,0.55) 0%, rgba(207,207,207,0.42) 28%, rgba(236,229,215,0) 62%), var(--color-cream);
}

/* ---- @font-face — Faricy New -------------------------------------------
   DA ATTIVARE in Fase 2 una volta acquistata la licenza (moretye) e messi
   i file in ./fonts/. Togli il commento e allinea nomi/pesi ai file reali.

@font-face {
  font-family: "Faricy New";
  font-weight: 300;                 // Light
  font-style: normal;
  src: url("fonts/FaricyNew-Light.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Faricy New";
  font-weight: 500;                 // Medium (enfasi/UI)
  font-style: normal;
  src: url("fonts/FaricyNew-Medium.woff2") format("woff2");
  font-display: swap;
}
------------------------------------------------------------------------- */

/* ---- Jost (Google Fonts, self-hosted in ./fonts/) — provata come alternativa
   ad Ableton-simile, poi scartata (2026-09-05): troppo simile al sito
   ableton.com stesso. File .woff2 lasciati in ./fonts/ per un eventuale
   riuso futuro, ma il font non è più referenziato in --font-display.
@font-face {
  font-family: "Jost";
  font-weight: 300;
  font-style: normal;
  src: url("fonts/Jost-Light.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Jost-Medium.woff2") format("woff2");
  font-display: swap;
}
------------------------------------------------------------------------- */

/* ============================ RESET LEGGERO ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--line-body);
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, pre { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img, iframe { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* l'attributo [hidden] deve sempre vincere sulle regole display delle classi */
[hidden] { display: none !important; }

:target { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }

/* Freccia angolata ↗ come motivo per i link in uscita (moodboard).
   Colore agganciato al link stesso (non all'accento corallo): segue lo
   stesso crema translucido/hover del testo invece di spiccare arancione
   fisso sullo sfondo scuro del footer. */
.social a::after {
  content: " \2197";   /* ↗ */
  font-style: normal;
  color: inherit;
}

/* Link di rientro (pagine release, Bio) — nessuna freccia, è navigazione interna */
.back-link { display: inline-block; margin-bottom: var(--space-sm); color: var(--color-text-muted); font-size: var(--fs-small); }
.back-link:hover { color: var(--color-accent); }

/* ---- Accessibilità: focus visibile ---- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Contenitore centrato ---- */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

/* ============================== HEADER / NAV ============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-cream) 85%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: var(--border-width) solid var(--color-border);
}
.nav {
  max-width: var(--wrap-max);
  margin-inline: auto;
  min-height: var(--header-h);
  padding-inline: var(--wrap-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
}
.nav__menu {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--fs-small);
}
.nav__menu a { color: var(--color-text-muted); transition: color var(--transition-fast); }
.nav__menu a:hover { color: var(--color-accent); }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}
.nav__toggle-bar {
  display: block;
  width: 1.1rem;
  height: 2px;
  margin-inline: auto;
  background: var(--color-text);
}

@media (max-width: 767px) {
  .nav__menu {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-cream);
    border-bottom: var(--border-width) solid var(--color-border);
    display: none;
  }
  .nav.is-open .nav__menu { display: flex; }
  .nav__menu li { border-top: var(--border-width) solid var(--color-border); }
  .nav__menu a { display: block; padding: var(--space-md) var(--wrap-pad); }
}
@media (min-width: 768px) {
  .nav__toggle { display: none; }
}

/* ================================= HERO ================================= */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(76vh, 680px);
  display: flex;
  align-items: center;
  background: var(--gradient-hero);
  border-bottom: var(--border-width) solid var(--color-border);
}
/* Oscilloscopio in alto a dx — una linea che si muove come il playhead di un
   sequencer/DAW. Canvas 2D, disegna un solo frame statico con
   prefers-reduced-motion. */
.hero__scope {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 1;
  width: 220px;
  height: 90px;
  opacity: 0.85;
}
@media (max-width: 640px) {
  .hero__scope { width: 140px; height: 60px; top: var(--space-md); right: var(--space-md); }
}
/* Video Remotion (visual-tools/remotion-hero/): canale alpha, si compone
   sopra il gradiente sunset senza sostituirlo. Assente finché non viene
   renderizzato e copiato qui — l'hero regge già solo col gradiente CSS. */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding-block: var(--space-2xl); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--font-weight-normal);   /* Faricy Light: titolo arioso */
  line-height: 1.0;
  letter-spacing: -0.02em;
  opacity: 0;
  animation: hero-reveal 700ms ease-out 80ms forwards;
}
.hero__tagline {
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  max-width: var(--measure);
  opacity: 0;
  animation: hero-reveal 700ms ease-out 220ms forwards;
}
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Tagline binaria: ogni tanto un bit "cambia" per un istante con un lampo
   corallo, poi torna al valore originale (il messaggio resta leggibile).
   Puramente decorativo; logica in initBinaryTagline(), salta con reduced-motion. */
.hero__tagline .bit { transition: color var(--transition-med); }
.hero__tagline .bit--flip { color: var(--color-ink); }

/* =============================== SECTIONS =============================== */
.section { padding-block: var(--space-2xl); border-bottom: var(--border-width) solid var(--color-border); }
.section__head { margin-bottom: var(--space-lg); }
.section__head--sub { margin-top: var(--space-2xl); }
.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}
.section__title--sub { font-size: var(--fs-h3); }
.section__lead { margin-top: var(--space-sm); color: var(--color-text-muted); max-width: var(--measure); }

/* ================================ PLAYER ================================ */
.player {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  max-width: 44rem;
}
.player__status { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.player__dot {
  width: 0.6rem; height: 0.6rem; border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background var(--transition-med);
}
.player.is-live .player__dot { background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.player.is-live .player__state { color: var(--color-accent); }
.player__media:empty { display: none; }
.player__media iframe,
.player__media audio { width: 100%; }

.player__controls { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.player__btn {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  font-weight: var(--font-weight-bold);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.player__btn:hover { background: var(--color-accent-hover); }
.player__btn:active { transform: translateY(1px); }

.player__volume { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-small); color: var(--color-text-muted); }
.player__volume-input { accent-color: var(--color-accent); }
.player__note { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ============================= RELEASE GRID ============================= */
/* Variante A — griglia di copertine. La copertina Spotify è protagonista;
   titolo e anno sotto. L'intera card linka la pagina di dettaglio (dove sta
   il pulsante "Listen on Spotify"). 2 col mobile → 3 → 4. */
.release-grid {
  display: grid;
  gap: var(--space-lg) var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .release-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .release-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.release__card { display: block; }
.release__cover {
  width: 100%;
  height: auto;                 /* neutralizza width/height="640" → resta quadrata */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  background: var(--color-surface);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.release__card:hover .release__cover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(28, 27, 25, 0.12);
}
.release__title { margin-top: var(--space-sm); font-weight: var(--font-weight-bold); line-height: 1.2; overflow-wrap: break-word; }
.release__meta { margin-top: var(--space-2xs); color: var(--color-text-muted); font-size: var(--fs-small); font-family: var(--font-mono); }

/* ===================== RELEASE DETAIL (pagina singola) ===================== */
/* Intestazione editoriale: copertina Spotify + titolo/meta/ascolto.
   Colonna singola su mobile, due colonne (cover | info) da 720px in su. */
.release-hero {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-2xl);
}
@media (min-width: 720px) {
  .release-hero {
    grid-template-columns: minmax(0, 20rem) 1fr;
    gap: var(--space-xl);
  }
}
.release-hero__cover {
  width: 100%;
  max-width: 20rem;
  height: auto;              /* neutralizza l'attributo height="640" → resta quadrata */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  background: var(--color-surface);
}
.release-hero__info { display: grid; gap: var(--space-md); justify-items: start; }
.release-hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.release-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  font-weight: var(--font-weight-normal);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

/* Player Spotify a fondo pagina (sostituisce il pulsante "Listen on Spotify"
   nell'hero): più grande, con tracklist visibile. */
.release-embed {
  margin-top: var(--space-2xl);
}
.release-embed iframe { display: block; width: 100%; }

/* Bottone primario riutilizzabile (freccia ↗ = link in uscita, come da moodboard) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  font-weight: var(--font-weight-bold);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn--accent { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn--accent:hover { background: var(--color-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn--accent::after { content: " \2197"; color: var(--color-accent-contrast); }

/* Blocchi di contenuto (Making of, Gear): ora placeholder, contenuti da fornire */
.release-block + .release-block { margin-top: var(--space-xl); }
.release-block .section__title--sub { margin-bottom: var(--space-sm); }
.placeholder-note {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.gear-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
.gear-list li {
  padding-block: var(--space-2xs);
  border-bottom: var(--border-width) solid var(--color-border);
}
.gear-list li:first-child { border-top: var(--border-width) solid var(--color-border); }
.gear-list a:hover { color: var(--color-accent); }

/* ============================ GALLERY (Photos) ============================ */
/* Griglia di miniature nelle pagine release → lightbox a tutto schermo.
   Le foto vivono in releases/media/<slug>/ (full) e /thumb/ (miniature).
   Progressive enhancement: senza JS ogni miniatura è già un link al file. */
.gallery {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-sm);
}
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__item { display: block; }
.gallery__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  background: var(--color-surface);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.gallery__item:hover .gallery__thumb {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(28, 27, 25, 0.12);
}

/* ---- Lightbox: overlay costruito on-interaction da initGallery() ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: color-mix(in srgb, var(--color-ink) 92%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med), visibility var(--transition-med);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__btn {
  position: absolute;
  background: color-mix(in srgb, var(--color-cream) 12%, transparent);
  color: var(--color-cream);
  border: var(--border-width) solid color-mix(in srgb, var(--color-cream) 30%, transparent);
  border-radius: var(--radius-pill);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  transition: background var(--transition-fast);
}
.lightbox__btn:hover { background: color-mix(in srgb, var(--color-cream) 24%, transparent); }
.lightbox__btn--close { top: var(--space-md); right: var(--space-md); }
.lightbox__btn--prev { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__counter {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  color: color-mix(in srgb, var(--color-cream) 70%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}
@media (max-width: 480px) {
  .lightbox__btn--prev { left: var(--space-xs); }
  .lightbox__btn--next { right: var(--space-xs); }
}

/* ================================ PROSE ================================ */
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-md); }

/* ============================ BIO — layout ============================ */
/* Testo a colonna singola su mobile; da 720px, testo a sinistra e foto a
   destra (stessa logica a due colonne di .release-hero, invertita). */
.bio-layout {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 720px) {
  .bio-layout {
    grid-template-columns: 1fr minmax(0, 18rem);
    gap: var(--space-xl);
  }
}
.bio-photo {
  width: 100%;
  max-width: 18rem;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  background: var(--color-surface);
}

/* ================================ FOOTER ================================ */
/* Footer scuro strutturato (moodboard, riferimento Ableton) */
.site-footer {
  padding-block: var(--space-2xl);
  background: var(--color-ink);
  color: var(--color-cream);
}
.site-footer .section__title { color: var(--color-cream); }
.footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-block: var(--space-lg);
}
.footer__contact {
  color: color-mix(in srgb, var(--color-cream) 72%, transparent);
  font-size: var(--fs-small);
  line-height: var(--line-body);
}
.footer__contact a { color: var(--color-cream); }
.footer__contact a:hover { color: var(--color-accent); }
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-lg);
  font-size: var(--fs-small);
}
.social a { color: color-mix(in srgb, var(--color-cream) 72%, transparent); transition: color var(--transition-fast); }
.social a:hover { color: var(--color-cream); }
.footer__credit { color: color-mix(in srgb, var(--color-cream) 55%, transparent); font-size: var(--fs-small); font-family: var(--font-mono); }

/* ========================= REDUCED MOTION ========================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Video hero è decorativo (audio-reattivo, loop continuo): il gradiente
     CSS sottostante basta da solo, niente da mostrare in sua vece. */
  .hero__bg-video { display: none; }
  .hero__title, .hero__tagline { animation: none; opacity: 1; transform: none; }
}