/* ---------- Ottimizzazione mobile finale ---------- */
@media (max-width: 480px) {

  /* Titolo */
  .intro-title,
  .site-title {
    font-size: clamp(28px, 7vw, 36px);
    letter-spacing: 0.09em;
  }

  /* Bio Section */
  .bio-section {
    padding: 160px 0 100px;
  }

  .bio-card {
    max-width: 90%;
    padding: 22px 18px;
    line-height: 0,6;
    font-size: 0.96rem;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(5px) saturate(100%);
  }

  /* Sezione musica */
  .music-section {
    padding-top: 80px;
    padding-bottom: 60px;
  }

  .section-title {
    font-size: clamp(18px, 4.5vw, 24px);
    margin-bottom: 12px;
  }

  .music-embed {
    transform: scale(0.92);
    max-width: 92%;
    margin: 0 auto 12px;
  }

  /* Contatti */
  .contacts {
    margin-top: 10px;
    padding-bottom: 12px;
  }

  .contact-link {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 1rem;
  }
}
:root{
  --bg: #0b0b0c;
  --fg: #e8e8ea;
  --muted: #b6b6bb;
  --glass: rgba(15,15,15,0.65);
  --border: rgba(255,255,255,0.08);
  --maxw: 980px;
  --pad: clamp(16px, 3vw, 32px);
  --accent: rgba(255, 255, 255, 0.1);
  --glass-strong: rgba(15, 15, 15, 0.8);
  --shadow-deep: 0 10px 40px rgba(0, 0, 0, 0.6);
  --header-height: 140px;
  --header-offset: 14px;
  --title-size: clamp(42px, 7vw, 80px);
  --final-title-size: clamp(48px, 6.5vw, 82px);
}

@import url('https://fonts.cdnfonts.com/css/franciscus');

*{ box-sizing: border-box; }
* {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html, body{ height: 100%; margin:0; }

body{ background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, sans-serif; line-height:1.5; 
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

/* Blocca lo scroll finché la bio non è visibile */
body.no-scroll {
  overflow: hidden !important;
  height: 100vh;
  overscroll-behavior: none;
  touch-action: none;
}

/* ---------- Video background ---------- */
.video-wrapper{ position:fixed; inset:0; overflow:hidden; z-index:-2; background:#000; }
.bg-video{ position:absolute; min-width:100%; min-height:100%; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; }
.video-overlay{ position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%); }

/* ---------- Header Title ---------- */
.site-header {
  position: fixed !important; /* sempre ancorata allo schermo */
  top: var(--header-offset);
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* evita blocchi visivi */
  z-index: 99999; /* aumenta rispetto agli altri elementi */
  pointer-events: none; /* non blocca clic o scroll sotto */
}
.site-title {
  font-family: 'Didot', serif;
  letter-spacing: .12em;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: center;
  font-size: var(--final-title-size);
  opacity: 0;
  transition: opacity 0.12s ease;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 0 1px rgba(0,0,0,0.25);
}
.site-title.show{ opacity:1; }
.site-title,
.intro-title {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

  will-change: transform, font-size;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Intro Title (centrale) ---------- */
.intro{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,0.35);
  transition:opacity .6s ease, visibility .6s ease;
}
.intro.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-title{
  font-family:'Didot', serif;
  letter-spacing:.18em;
  font-weight:700;
  font-size:clamp(60px, 10vw, 100px);
  color:#fff;
  margin:0;
  text-align:center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s ease-in-out;
}
/* Migliorato allineamento del titolo animato durante la transizione */


/* ---------- Bio Section (Rebuilt) ---------- */
.bio-section {
  display: flex;
  justify-content: center;
  align-items: center; /* centrato verticalmente per stabilità */
  padding: 280px 0 200px; /* aumentato padding per maggiore respiro */
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden; /* evita spostamenti verticali indesiderati */
}

.bio-card {
  background: rgba(20, 20, 20, 0.25);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 28px 38px;
  max-width: clamp(400px, 45%, 540px);
  color: rgba(240, 240, 240, 0.95);
  font-family: 'Franciscus', serif;
  line-height: 2;
  letter-spacing: 0.03em;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease 2s, transform 1.2s ease 2s;
  margin: 0 auto;
}

#bio.show .bio-card {
  opacity: 1;
  transform: translateY(0);
}

.bio-card,
.music-embed,
.spotify-embed {
  will-change: transform, opacity, backdrop-filter;
}

.bio-title {
  font-family: 'Franciscus', serif;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  margin-bottom: 18px;
  color: #fff;
  text-align: center;
  opacity: 0.85;
}

@keyframes fadeInBio {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Button ---------- */
.home-nav{ margin-top:28px; }
.btn{ display:inline-block; padding:12px 22px; border-radius:999px; text-decoration:none; color:var(--fg); border:1px solid var(--border); background:rgba(255,255,255,0.03); transition:transform .2s, background .2s, border-color .2s; font-weight:600; letter-spacing:.04em; }
.btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,0.18); }
.btn:active{ transform:translateY(0); }

/* ---------- Music page (invariato) ---------- */
.page-music{ min-height:100svh; overflow-x:hidden; }
.image-bg{ position:fixed; inset:0; z-index:-2; background:#000 url('assets/bg-music.jpg') center/cover no-repeat; }
.site-header--secondary{ justify-content:flex-start; }
.site-header--secondary .brand{ padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(0,0,0,0.25); }

.music-main{ min-height:100svh; display:grid; grid-template-rows:1fr auto; align-items:center; padding:calc(80px + var(--pad)) var(--pad) var(--pad); }
.spotify-wrap{ width:min(100%,var(--maxw)); margin:0 auto; }
.spotify-embed{ width:100%; border-radius:16px; padding:clamp(10px,2vw,14px); background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(6px); }

/* ---------- Latest Releases Section & Music Embed ---------- */
.section-title {
  font-family: 'Didot', serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
  color: var(--fg);
}

.music-embed {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
}

/* ---------- Contacts footer ---------- */
.contacts{ width:100%; margin-top:1px; padding:18px var(--pad); display:flex; justify-content:center; }
.contact-list{ list-style:none; display:flex; gap:clamp(14px,3vw,28px); padding:0; margin:0; align-items:center; flex-wrap:wrap; }
.contact-link{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:rgba(0,0,0,0.25); border:1px solid var(--border); color:var(--fg); text-decoration:none; font-weight:600; }
.contact-link:hover{ background:rgba(255,255,255,0.05); }
.icon{ width:22px; height:22px; display:block; }


/* ---------- Scroll Container Structure ---------- */
html, body {
  height: 100%;
  overflow: hidden; /* evita che l'intero documento scorra */
}

.scroll-container {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.scroll-container > section {
  height: 100vh;
  scroll-snap-align: start;
}

#music {
  display: grid;
  place-items: center;
  background: url('assets/bg-music.jpg') center/cover no-repeat;
  position: relative;
}

#music::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 0;
}

#music > * {
  position: relative;
  z-index: 1;
}

/* --- Extra spazio invisibile in fondo per evitare taglio dei contatti --- */
#music::after {
  content: "";
  display: block;
  height: calc(env(safe-area-inset-bottom) + 120px);
}

/* Nascondi il titolo quando si entra nella sezione musica (versione corretta) */
body.music-visible .site-title {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Ottimizzazione mobile (fino a 768px) ---------- */
@media (max-width: 768px) {

  /* Layout generale */
  .bio-section {
    padding: 80px 0 60px;
  }

  .bio-card {
    max-width: 90%;
    padding: 25px 20px;
    font-size: 1rem;
    line-height: 1.7;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }

  /* Titoli */
  .intro-title,
  .site-title {
    font-size: clamp(24px, 6vw, 32px);
    letter-spacing: 0.05em;
  }

  .section-title {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }

  /* Pulsanti contatto */
  .contact-list {
    display: flex;
    flex-direction: row; /* mantieni orizzontali anche su mobile */
    flex-wrap: wrap; /* consenti eventuale adattamento senza impilamento verticale */
    justify-content: center;
    align-items: center;
    gap: 14px;
  }

  .contact-link {
    font-size: 1.1rem;
    padding: 10px 16px;
    margin-bottom: 6px;
  }

  /* Video background */
  .video-wrapper video {
    object-fit: cover;
    opacity: 0.6;
  }

  /* Sezione musica */
  .music-section {
    padding-top: 80px;
  }
}

@media (max-width: 390px) {
  .intro-title {
    font-size: clamp(22px, 7vw, 28px);
  }
  .bio-card {
    padding: 18px 16px;
    line-height: 1.6;
  }
}

/* ---------- Responsive Smart Adjustments ---------- */

/* Titolo finale: stabilità e coerenza cross-device */
/*
@media (max-width: 1024px) {
  
}
*/

/*
@media (max-width: 768px) {
  

  .bio-section {
    padding: 100px 0 60px;
  }

  .bio-card {
    max-width: 90%;
    padding: 20px 18px;
    font-size: 0.95rem;
    line-height: 1.7;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }

  .site-title {
    font-size: clamp(26px, 6vw, 32px);
  }
}
*/

/*
@media (max-width: 480px) {
  .intro-title {
    font-size: clamp(22px, 7vw, 28px);
    letter-spacing: 0.05em;
  
  .music-embed iframe {
    height: 280px !important;
  }

}

  

  .bio-card {
    padding: 18px 16px;
    line-height: 1.6;
  }

  .contacts {
    margin-top: 6px;
    padding-top: 4px;
  }
}
*/

@media (max-width: 768px) {
  :root {
    --title-size: clamp(34px, 7.5vw, 56px);
    --header-height: 120px;
    --header-offset: 10px;
  }
}

@media (max-width: 480px) {
  :root {
    --title-size: clamp(30px, 8.5vw, 48px);
    --header-height: 110px;
    --header-offset: 8px;
  }
}

/* Fix per viewport mobile eccessiva altezza */
:root {
  --vh: 1vh;
}

@media (max-width: 768px) {
  :root {
    --vh: 1dvh; /* supportato dai browser moderni (iOS 15+) */
  }

  .music-section {
  padding-top: 30px;
  padding-bottom: 20px;
}

  .section-title {
    margin-top: 0;
    margin-bottom: 16px; /* più compatto sopra al player */
  }

  .music-embed {
  transform: scale(0.88);
  max-width: 90%;
  margin: 0 auto 6px;
  padding: 12px;
}

  .contacts {
    position: relative;
    bottom: 0;
    margin-top: 6px; /* spazio più compatto tra player e bottoni */
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Safari fix - prevenire shifting dovuto a barra dinamica */
@supports (-webkit-touch-callout: none) {
  .scroll-container {
    height: -webkit-fill-available;
  }
}
/* Allineamento visivo tra titolo animato e titolo fisso */
.site-title {
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.site-title.show {
  opacity: 1;
  transform: translateY(0);
}


/* --- Sezioni aggiuntive mobile fix --- */
@media (max-width: 480px) {
  /* Riduci lo spazio tra i paragrafi della bio e la loro altezza di riga */
  .bio-card p {
    margin: 6px 0;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  /* Fix per mantenere visibili i contatti sopra la barra inferiore iOS */
  .contacts {
    margin-bottom: calc(env(safe-area-inset-bottom) + 12px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
  }
}
.intro-title.shrink {
  font-size: var(--final-title-size);
  letter-spacing: .12em;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.02);
  transition: font-size 0.5s ease-in-out, transform 0.9s ease-in-out;
}