/* =========================================================
   KTG MUSIC — player (css dedicato)
   Usato da tutte le pagine: guscio + iframe, barra compatta, pagina progetto,
   pagina brano. I colori arrivano dalle variabili CSS: quelle del sito
   (style.css) oppure quelle del tema del progetto (js/albums.js → theme),
   impostate da player.js su <main class="project"> e sulla barra.
   Si animano solo transform e opacity; niente animazioni con "riduci movimento".
   ========================================================= */

/* ---------- elementi condivisi ---------- */
.glyph-shown{ white-space:pre-wrap; }
.explicit-tag{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:16px; height:16px; border-radius:3px; background:var(--ink-dim); color:var(--bg);
  font-family:var(--font); font-size:10px; font-weight:800; line-height:1; vertical-align:middle;
}
.kp-buttons{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.kp-btn{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0;
  background:none; border:0; border-radius:50%; color:var(--ink-dim); transition:color .15s ease, transform .15s ease, background .15s ease;
}
.kp-btn:hover:not(:disabled){ color:var(--amber); }
.kp-btn:disabled{ opacity:.35; cursor:not-allowed; }
.kp-play{ width:52px; height:52px; background:var(--amber); color:var(--on-accent, #0D0D0F); }
.kp-play:hover:not(:disabled){ color:var(--on-accent, #0D0D0F); transform:scale(1.05); }
.kp-play .icon-pause, .kp-play.is-playing .icon-play,
.pj-play .icon-pause, .pj-play.is-playing .icon-play{ display:none; }
.kp-play.is-playing .icon-pause, .pj-play.is-playing .icon-pause{ display:block; }
.kp-progress{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; font-size:11.5px; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.kp-seek{
  -webkit-appearance:none; appearance:none; flex:1; min-width:0; height:6px; border-radius:3px; cursor:pointer; margin:0;
  background:linear-gradient(to right, var(--amber) var(--progress,0%), var(--line) var(--progress,0%));
}
.kp-seek::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--ink); border:0; }
.kp-seek::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--ink); border:0; }
.kp-seek:disabled{ opacity:.4; cursor:not-allowed; }
.kp-seek:focus-visible{ outline:2px solid var(--lilac); outline-offset:4px; }
.kp-notice{ font-size:12.5px; color:var(--amber); margin:10px 0 0; }
.kp-notice:empty{ display:none; }

/* ---------- guscio: la pagina diventa contenitore dell'iframe, audio e barra restano qui ---------- */
html.ktg-shell, html.ktg-shell body{ height:100%; overflow:hidden; }
html.ktg-shell body{ padding:0 !important; }
html.ktg-shell body > *:not(.ktg-frame):not(.ktg-bar){ display:none !important; }
.ktg-frame{
  position:fixed; top:0; left:0; width:100%; height:calc(100% - var(--ktg-bar-h, 0px));
  border:0; display:block; background:#0D0D0F; z-index:1;
}
html.ktg-has-bar:not(.ktg-shell) body{ padding-bottom:var(--ktg-bar-h); }

/* ---------- barra compatta ---------- */
.ktg-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--surface); color:var(--ink); font-family:var(--font);
  border-top:1px solid var(--line); box-shadow:0 -12px 30px -12px rgba(0,0,0,.55);
}
.ktg-bar[hidden]{ display:none; }
.ktg-bar-inner{
  max-width:var(--container, 1200px); margin:0 auto; padding:10px 24px; min-height:72px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; align-items:center; gap:20px;
}
.ktg-bar-info{ display:flex; align-items:center; gap:12px; min-width:0; color:var(--ink); border-radius:var(--radius, 6px); }
.ktg-bar-info:hover .ktg-bar-title{ color:var(--amber); }
.ktg-bar-art{ width:50px; height:50px; object-fit:cover; border-radius:4px; flex-shrink:0; background:var(--line); }
.ktg-bar-text{ display:flex; flex-direction:column; min-width:0; }
.ktg-bar-title{ font-family:var(--font-display, var(--font)); font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease; }
.ktg-bar-meta{ font-size:11.5px; color:var(--lilac); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ktg-bar-controls{ display:flex; align-items:center; gap:14px; min-width:0; }
.ktg-bar .kp-play{ width:42px; height:42px; }
.ktg-bar-close{
  background:none; border:1px solid var(--line); color:var(--ink-dim); border-radius:var(--radius, 6px);
  font-size:13px; padding:6px 11px; transition:border-color .2s ease, color .2s ease;
}
.ktg-bar-close:hover{ border-color:var(--lilac); color:var(--lilac); }
.ktg-bar-notice{ margin:0; padding:0 24px 8px; text-align:center; font-size:11.5px; color:var(--amber); }
.ktg-bar-notice:empty{ display:none; }

/* ---------- pagina del progetto: tema solo dentro <main> ---------- */
.page-project footer{ position:relative; z-index:1; background:#0D0D0F; }
main.project{
  --ink-faint:color-mix(in srgb, var(--ink-dim) 75%, var(--bg));
  --surface-2:color-mix(in srgb, var(--ink) 7%, var(--surface));
  position:relative; isolation:isolate; overflow:hidden; min-height:calc(100vh - 72px);
  background:var(--bg); color:var(--ink); padding-bottom:72px;
}
main.project ::selection{ background:var(--amber); color:var(--on-accent); }
.pj-wrap{ position:relative; }
main.project .breadcrumb, main.project .breadcrumb a{ color:var(--ink-dim); }
main.project .breadcrumb a:hover{ color:var(--amber); }
main.project a:focus-visible, main.project button:focus-visible{ outline-color:var(--lilac); }

/* sfondo: pattern + immagine, su un livello che può muoversi */
.pj-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.pj-bg-pattern, .pj-bg-image{ position:absolute; inset:-8%; will-change:transform; }
.pj-bg-image{ background-size:cover; background-position:center top; background-repeat:no-repeat; }
.pj-bg-image.is-inverted{ filter:invert(1); }
main[data-bg="grid"] .pj-bg-pattern{
  background-image:
    linear-gradient(color-mix(in srgb, var(--lilac) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--lilac) 22%, transparent) 1px, transparent 1px);
  background-size:26px 26px;
}
main[data-bg="neon"] .pj-bg-pattern{
  background:
    radial-gradient(ellipse 45% 55% at 15% 0%, color-mix(in srgb, var(--amber) 38%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 5%, color-mix(in srgb, var(--lilac) 32%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 110%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 70%);
}
main[data-bg="stars"] .pj-bg-pattern{
  background:
    radial-gradient(circle 160px at 82% 14%, color-mix(in srgb, var(--amber) 45%, transparent), transparent 70%),
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 160px 60px, rgba(255,255,255,.45), transparent 60%);
  background-size:auto, 190px 170px, 230px 210px, 170px 150px;
}
main[data-bg="scan"] .pj-bg-pattern{
  background:repeating-linear-gradient(0deg, color-mix(in srgb, var(--amber) 7%, transparent) 0 1px, transparent 1px 4px);
}
main[data-bg="paper"] .pj-bg-pattern{
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--lilac) 18%, transparent) 31px 32px),
    linear-gradient(90deg, transparent 0 56px, color-mix(in srgb, var(--amber) 35%, transparent) 56px 57px, transparent 57px);
}
/* sfondo in movimento (video del tema): fisso sullo schermo, sotto un velo del colore del tema */
.pj-bg-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; }
.pj-bg-video.is-idle{ opacity:0; } /* video alternati (background.segment): visibile uno alla volta */
.pj-bg-image.is-poster{ position:fixed; inset:0; background-size:cover; background-position:center; }
.pj-bg-veil{ position:fixed; inset:0; background:color-mix(in srgb, var(--bg) var(--veil, 72%), transparent); }

/* movimenti del tema */
@keyframes pj-drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-3%,-2%,0) scale(1.06); } }
@keyframes pj-float{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-14px,0); } }
@keyframes pj-flicker{ 0%,100%{ opacity:1; } 40%{ opacity:.88; } 55%{ opacity:.97; } 70%{ opacity:.9; } }
@keyframes pj-pulse{ from{ opacity:.55; } to{ opacity:1; } }
@keyframes pj-scan{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-8px,0); } }
main[data-anim="drift"] .pj-bg-pattern, main[data-anim="drift"] .pj-bg-image{ animation:pj-drift 60s ease-in-out infinite alternate; }
main[data-anim="float"] .pj-bg-pattern{ animation:pj-float 9s ease-in-out infinite alternate; }
main[data-anim="flicker"] .pj-bg-image{ animation:pj-flicker 7s ease-in-out infinite; }
main[data-anim="pulse"] .pj-bg-pattern{ animation:pj-pulse 4s ease-in-out infinite alternate; }
main[data-anim="scan"] .pj-bg-pattern{ animation:pj-scan 1.2s linear infinite; }

/* testata stile album */
.pj-hero{ display:flex; align-items:flex-end; gap:32px; padding:12px 0 36px; }
.pj-cover{ width:260px; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); flex-shrink:0; box-shadow:0 24px 50px -20px rgba(0,0,0,.6); background:var(--surface); }
main[data-mode="light"] .pj-cover{ box-shadow:0 0 0 2px var(--ink); }
.pj-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lilac); }
.pj-title{ font-family:var(--font-display); font-weight:var(--weight-title, 700); font-size:clamp(34px,6vw,68px); line-height:1.05; margin:10px 0 12px; overflow-wrap:anywhere; }
.pj-meta{ font-size:13px; color:var(--ink-dim); }
.pj-play{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:14px 28px 14px 22px;
  background:var(--amber); color:var(--on-accent); border:0; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:transform .15s ease, filter .15s ease;
}
.pj-play:hover:not(:disabled){ transform:scale(1.04); filter:brightness(1.08); }
.pj-play:disabled{ opacity:.45; cursor:not-allowed; }
.pj-play svg{ width:20px; height:20px; }

/* frase prima della tracklist (albums.js intro), nel font delle tracce del progetto */
.pj-intro{
  font-family:var(--font-track, var(--font-body, var(--font))); font-weight:var(--weight-track, 400);
  font-size:clamp(13px, 1.3vw, 15px); letter-spacing:.04em; line-height:1.5; color:var(--ink-dim); max-width:62ch; margin:22px 0 26px; text-wrap:balance;
}
.pj-intro-dot{ font-size:.7em; vertical-align:.15em; color:var(--amber); }

/* pannello player con la tracklist dentro */
.kp{
  background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--line);
  border-radius:calc(var(--radius) * 2); padding:22px 22px 12px; backdrop-filter:none;
}
main[data-mode="light"] .kp{ border:2px solid var(--ink); }
.kp-now{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:16px; }
.kp-art{ width:64px; height:64px; object-fit:cover; border-radius:var(--radius); background:var(--line); }
.kp-now-text{ display:flex; flex-direction:column; min-width:0; }
.kp-now-label{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lilac); }
.kp-now-title{ font-family:var(--font-display); font-size:clamp(17px,2.4vw,24px); font-weight:var(--weight-title, 700); line-height:1.2; overflow-wrap:anywhere; }
.kp-now-sub{ font-size:12px; color:var(--ink-dim); }
.kp-detail{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; white-space:nowrap; transition:border-color .2s ease, color .2s ease; }
.kp-detail:hover{ border-color:var(--amber); color:var(--amber); }
.kp-bar{ display:flex; align-items:center; gap:18px; margin-top:18px; }
.kp-head{
  display:grid; grid-template-columns:40px minmax(0,1fr) 56px 40px; gap:12px; margin-top:22px; padding:0 12px 10px;
  border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.kp-head span:nth-child(3){ text-align:right; }
.kp-list{ list-style:none; margin:8px 0 0; padding:0; }
.kp-item{ display:grid; grid-template-columns:minmax(0,1fr) 40px; align-items:center; gap:0; border-radius:var(--radius); }
.kp-item:hover{ background:var(--surface-2); }
.kp-row{
  display:grid; grid-template-columns:40px minmax(0,1fr) 56px; gap:12px; align-items:center; width:100%;
  padding:10px 0 10px 12px; text-align:left; color:var(--ink); background:none; border:0; border-radius:var(--radius);
}
.kp-num{ display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-faint); }
.kp-info{ display:flex; flex-direction:column; min-width:0; }
.kp-title{ font-family:var(--font-track, inherit); font-size:14px; font-weight:var(--weight-track, 600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-sub{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-faint); }
.kp-dur{ font-size:12.5px; color:var(--ink-faint); text-align:right; font-variant-numeric:tabular-nums; }
.kp-row.is-unavailable .kp-title{ color:var(--ink-dim); opacity:.7; }
.kp-row.is-current .kp-title{ color:var(--amber); }
.kp-more{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--ink-faint); font-size:15px; transition:color .15s ease, background .15s ease; }
.kp-more:hover{ color:var(--amber); background:var(--surface); }
.kp-empty{ color:var(--ink-dim); font-size:14px; margin:4px 0 10px; }
/* indicatore play/pausa sulla riga attiva */
.kp-num .eq, .kp-num .kp-paused{ display:none; }
.kp-num .eq{ height:14px; align-items:flex-end; justify-content:center; gap:2px; }
.kp-num .eq i{ width:3px; background:var(--amber); animation:kp-eq .9s ease-in-out infinite alternate; transform-origin:bottom; height:14px; }
.kp-num .eq i:nth-child(2){ animation-delay:-.3s; }
.kp-num .eq i:nth-child(3){ animation-delay:-.6s; }
.kp-row.is-current .num{ display:none; }
.kp-row.is-current.is-playing .eq{ display:flex; }
.kp-row.is-current:not(.is-playing) .kp-paused{ display:flex; color:var(--amber); }
.kp-paused svg{ width:16px; height:16px; }
@keyframes kp-eq{ from{ transform:scaleY(.2); } to{ transform:scaleY(1); } }

/* ---------- tipografia per progetto (albums.js → theme.type) ----------
   Corpo, titoli, tracce e testi prendono i font e i pesi del progetto; bottoni,
   navigazione (breadcrumb) e controlli di riproduzione restano nello stile del sito. */
main.project{ font-family:var(--font-body, var(--font)); font-weight:var(--weight-body, 400); }
main.project[data-case="upper"]{ text-transform:uppercase; }
main.project[data-case="lower"]{ text-transform:lowercase; }
main.project .breadcrumb, main.project .pj-play, main.project .kp-btn, main.project .kp-bar,
main.project .kp-detail, main.project .kp-more, main.project .pp-back{ font-family:var(--font); }
main.project .breadcrumb{ text-transform:none; font-weight:400; }
/* le righe della tracklist sono <button>: ereditano font e maiuscolo/minuscolo del progetto */
main.project .kp-row{ font-family:inherit; font-weight:inherit; text-transform:inherit; }
/* titoli più spessi senza un peso Bold nel font (theme.type.titleStroke: contorno dello stesso colore) */
main.project .pj-title, main.project .pp-title, main.project .kp-now-title, main.project .pp-album-title{
  -webkit-text-stroke:var(--title-stroke, 0) currentColor;
}
/* ? e ! con lo stesso spessore delle lettere: da un altro font (theme.type.punctFont) o con un contorno (punctStroke) */
.punct{
  font-family:var(--punct-font, inherit); font-weight:var(--punct-weight, inherit);
  -webkit-text-stroke:var(--punct-stroke, 0px) currentColor; margin-inline:calc(var(--punct-stroke, 0px) * .5);
}
/* font piccoli di natura (theme.type.large, es. VT323): corpo più grande; etichette piccole e numeri nel font del sito */
main.project[data-type="large"] .kp-now-title{ font-size:clamp(22px,3vw,30px); line-height:1.2; }
main.project[data-type="large"] .kp-title{ font-size:20px; line-height:1.25; }
main.project[data-type="large"] .pj-meta, main.project[data-type="large"] .pp-meta,
main.project[data-type="large"] .kp-now-sub, main.project[data-type="large"] .kp-sub{ font-size:18px; }
main.project[data-type="large"] .pp-credits{ font-size:20px; }
main.project[data-type="large"] .lyrics-line{ font-size:clamp(21px,2.7vw,27px); line-height:1.5; }
main.project[data-type="large"] .pj-eyebrow, main.project[data-type="large"] .kp-now-label,
main.project[data-type="large"] .kp-head, main.project[data-type="large"] .kp-num,
main.project[data-type="large"] .kp-dur{ font-family:var(--font); }

/* cielo stellato animato (background.pattern 'stars' + animation 'space'): due strati di stelle che
   scorrono lenti e brillano, la luna che pulsa piano */
main[data-anim="space"] .pj-bg-pattern{ animation:pj-moon 7s ease-in-out infinite alternate; }
main[data-bg="stars"][data-anim="space"] .pj-bg::before, main[data-bg="stars"][data-anim="space"] .pj-bg::after{
  content:''; position:absolute; inset:-10% -10% -10% -10%; pointer-events:none; will-change:transform, opacity;
  background-image:
    radial-gradient(1.6px 1.6px at 30px 40px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 140px 90px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 220px 180px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 80px 230px, color-mix(in srgb, var(--amber) 70%, white), transparent 60%);
  background-size:260px 260px;
  animation:pj-stars-move 90s linear infinite, pj-twinkle 3.2s ease-in-out infinite alternate;
}
main[data-bg="stars"][data-anim="space"] .pj-bg::after{
  background-size:400px 400px; background-position:120px 60px; opacity:.6;
  animation:pj-stars-move 150s linear infinite reverse, pj-twinkle 4.6s ease-in-out -2s infinite alternate;
}
@keyframes pj-stars-move{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-260px,-130px,0); } }
@keyframes pj-twinkle{ from{ opacity:.35; } to{ opacity:1; } }
@keyframes pj-moon{ from{ opacity:.75; transform:scale(1); } to{ opacity:1; transform:scale(1.04); } }
/* luna della copertina in movimento (background.moon): attraversa piano il cielo, ruota e pulsa;
   il bagliore fisso del pattern 'stars' viene tolto perché la segue la luna */
.pj-bg.has-moon .pj-bg-pattern{
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 160px 60px, rgba(255,255,255,.45), transparent 60%);
  background-size:190px 170px, 230px 210px, 170px 150px;
}
.pj-bg-moon{
  position:absolute; top:6%; left:72%; width:clamp(110px, 14vw, 200px); aspect-ratio:1/1; z-index:1;
  animation:pj-moon-path 70s ease-in-out infinite alternate; will-change:transform;
}
.pj-bg-moon img{
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 0 28px color-mix(in srgb, var(--amber) 70%, transparent)) drop-shadow(0 0 70px color-mix(in srgb, var(--amber) 35%, transparent));
  animation:pj-moon-spin 120s linear infinite, pj-moon-glow 6s ease-in-out infinite alternate;
}
@keyframes pj-moon-path{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-28vw, 9vh, 0); }
  100%{ transform:translate3d(-52vw, 2vh, 0); }
}
@keyframes pj-moon-spin{ to{ rotate:360deg; } }
@keyframes pj-moon-glow{ from{ opacity:.82; } to{ opacity:1; } }
/* progetti senza testi (albums.js details: false): niente "Testo e dettagli" né freccia per riga */
main[data-details="off"] .kp-detail, main[data-details="off"] .kp-more{ display:none; }
main[data-details="off"] .kp-item{ grid-template-columns:minmax(0,1fr); }

/* ---------- pagina del brano ---------- */
.pp-back{ display:inline-flex; gap:6px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:8px 13px; margin:6px 0 26px; }
.pp-back:hover{ border-color:var(--amber); color:var(--amber); }
.pp-page{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:44px; align-items:start; }
.pp-main{ min-width:0; }
.pp-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,320px); gap:36px; align-items:center; margin-bottom:30px; }
.pp-meta{ font-size:11.5px; letter-spacing:.04em; color:var(--ink-dim); }
.pp-title{ font-family:var(--font-display); font-weight:var(--weight-title, 700); font-size:clamp(28px,4.4vw,52px); line-height:1.08; margin:10px 0; overflow-wrap:anywhere; }
.pp-title:focus{ outline:none; }
.pp-title .explicit-tag{ width:20px; height:20px; font-size:12px; margin-left:4px; }
.pp-credits{ color:var(--lilac); font-size:14px; font-weight:600; }
.pp-credits .credit-role{ color:var(--ink-dim); font-weight:400; }
.pp-credits .credit-link{ color:var(--lilac); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.pp-credits .credit-link:hover{ color:var(--amber); }
.pp-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); box-shadow:0 24px 50px -20px rgba(0,0,0,.7); background:var(--surface); }
.pp-controls{ margin-top:0; }
.pp-controls .kp-play{ width:58px; height:58px; }
.pp-side{ display:flex; flex-direction:column; gap:18px; }
.pp-album{ display:block; color:var(--ink); }
.pp-album-title{ display:block; font-family:var(--font-display); font-size:16px; font-weight:var(--weight-title, 700); margin-bottom:10px; overflow-wrap:anywhere; }
.pp-album:hover .pp-album-title{ color:var(--amber); }
.pp-album-cover{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); }
.pp-zoom{ aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); }
.pp-zoom img{ width:100%; height:100%; object-fit:cover; }
/* riquadri dei dettagli in movimento (theme.zoomMotion): panoramica e zoom lenti, avanti e indietro;
   i due riquadri hanno tempi diversi così non si muovono insieme */
@keyframes pp-zoom-pan{
  0%{ transform:scale(var(--zs, 2.5)) translate3d(0,0,0); }
  50%{ transform:scale(calc(var(--zs, 2.5) * 1.08)) translate3d(-2.5%,1.5%,0); }
  100%{ transform:scale(calc(var(--zs, 2.5) * 0.94)) translate3d(1.5%,-2.5%,0); }
}
main[data-zooms="motion"] .pp-zoom img{ animation:pp-zoom-pan 26s ease-in-out infinite alternate; will-change:transform; }
main[data-zooms="motion"] .pp-zoom + .pp-zoom img{ animation-duration:34s; animation-delay:-9s; animation-direction:alternate-reverse; }
.lyrics{ padding:40px 0 0; margin-top:40px; border-top:1px solid var(--line); }
.lyrics[hidden]{ display:none; }
.lyrics-body{ margin-top:18px; }
.lyrics-line{ font-family:var(--font-lyrics, inherit); font-size:clamp(16px,2.2vw,20px); font-weight:var(--weight-lyrics, 600); line-height:1.7; color:var(--lyrics-color, var(--ink-dim)); margin:0; }
.lyrics-line:empty{ height:1.2em; }
.lyrics.is-synced .lyrics-line{ color:var(--ink-faint); transition:color .25s ease; }
/* testo "come sulla lavagna" (albums.js lyricsLayout: 'board'): tutto centrato, titolo sopra le righe */
.lyrics[data-layout="board"]{ text-align:center; }
.lyrics[data-layout="board"] > .pj-eyebrow{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.lyrics[data-layout="board"] .lyrics-body{ margin:0 auto; max-width:36em; }
.lyrics-head{ display:flex; flex-direction:column; align-items:center; gap:.2em; margin:0 0 1.6em; color:var(--ink); }
.lyrics-head-main{ font-family:var(--font-display); font-size:clamp(26px, 3.4vw, 40px); letter-spacing:.06em; line-height:1.1; -webkit-text-stroke:var(--title-stroke, 0px) currentColor; }
.lyrics-head-sub{ font-family:var(--font-display); font-size:clamp(16px, 1.8vw, 21px); letter-spacing:.04em; color:var(--ink-dim); }
.lyrics[data-layout="board"] .lyrics-line{ text-wrap:balance; }
/* testo su un quaderno a righe con i disegni appoggiati (albums.js lyricsLayout: 'notebook', lyricsDoodles):
   foglio chiaro, righe azzurre allineate alle righe del testo, margine rosso, testo centrato */
.lyrics[data-layout="notebook"]{
  --rule:34px;
  position:relative; text-align:center; border-top:0; margin-top:44px;
  padding:calc(var(--rule) * 2) clamp(40px, 7vw, 96px) calc(var(--rule) * 3) clamp(64px, 9vw, 120px);
  border-radius:4px; color:#1F2347;
  background:
    linear-gradient(90deg, transparent clamp(40px, 6vw, 72px), rgba(229,72,77,.55) clamp(40px, 6vw, 72px) calc(clamp(40px, 6vw, 72px) + 2px), transparent calc(clamp(40px, 6vw, 72px) + 2px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), rgba(86,140,210,.38) calc(var(--rule) - 1px) var(--rule)),
    #FFFEF7;
  background-position:0 0, 0 calc(var(--rule) * 2 - 6px), 0 0;
  box-shadow:0 18px 40px -22px rgba(31,35,71,.45), 0 0 0 1px rgba(31,35,71,.08);
}
.lyrics[data-layout="notebook"] > .pj-eyebrow{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.lyrics[data-layout="notebook"] .lyrics-body{ margin:0 auto; max-width:34em; position:relative; z-index:1; }
.lyrics[data-layout="notebook"] .lyrics-line{ line-height:var(--rule); font-size:clamp(16px, 1.9vw, 19px); color:var(--lyrics-color, #1F2347); text-wrap:balance; }
.lyrics[data-layout="notebook"] .lyrics-line:empty{ height:var(--rule); }
.lyrics[data-layout="notebook"] .lyrics-head{ margin:0 0 var(--rule); min-height:calc(var(--rule) * 2); justify-content:center; color:#1F2347; }
.lyrics[data-layout="notebook"] .lyrics-head-main{ line-height:calc(var(--rule) * 2); }
.nb-doodles, .pj-doodles{ position:absolute; inset:0; pointer-events:none; }
.nb-doodles .doodle, .pj-doodles .doodle{ position:absolute; height:auto; max-width:none; }
.pj-doodles{ z-index:2; }
@media (max-width:767.98px){
  .lyrics[data-layout="notebook"]{ padding-left:52px; padding-right:22px; }
  .nb-doodles .doodle, .pj-doodles .doodle{ transform:scale(.6) !important; }
}
.lyrics.is-synced .lyrics-line.is-active{ color:var(--amber); }

/* sfondo animato del brano: video, oppure Foto 1 in Ken Burns, sotto un velo del colore del tema */
.pp-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg); }
.pp-bg img{ position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; animation:pp-ken-burns 48s ease-in-out infinite alternate; will-change:transform; }
.pp-bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pp-bg img[hidden], .pp-bg video[hidden]{ display:none; }
.pp-bg::after{ content:''; position:absolute; inset:0; background:color-mix(in srgb, var(--bg) var(--track-veil, 80%), transparent); }
@keyframes pp-ken-burns{ from{ transform:scale(1) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-3%,-2%,0); } }
main.project.is-track .pj-bg{ display:none; }
/* pagina del brano essenziale (albums.js trackLayout: 'minimal'): solo titolo, controlli e testo;
   niente Foto 1, copertina e zoom; la foto del brano fa da sfondo, più visibile */
main[data-layout="minimal"] .pp-photo, main[data-layout="minimal"] .pp-side{ display:none; }
main[data-layout="minimal"] .pp-page{ grid-template-columns:minmax(0,1fr); max-width:860px; margin:0 auto; }
main[data-layout="minimal"] .pp-head{ grid-template-columns:minmax(0,1fr); }
main[data-layout="minimal"] .pp-bg::after{ background:color-mix(in srgb, var(--bg) var(--track-veil, 58%), transparent); }
main[data-layout="minimal"] .pp-main{ text-shadow:0 1px 3px var(--bg), 0 0 14px var(--bg); }
/* un titolo solo (meta, crediti e doppio titolo del testo nascosti), centrato, poi player e testo */
main[data-layout="minimal"] .pp-meta, main[data-layout="minimal"] .pp-credits{ display:none; }
main[data-layout="minimal"] .pp-head{ margin-bottom:22px; width:100%; justify-items:stretch; }
main[data-layout="minimal"] .pp-head-text{ text-align:center; width:100%; }
main[data-layout="minimal"] .pp-title{ display:flex; flex-direction:column; align-items:center; gap:.15em; margin:0; width:100%; text-align:center; }
main[data-layout="minimal"] .pp-title .lyrics-head-main{ font-size:clamp(30px, 4.6vw, 56px); }
main[data-layout="minimal"] .pp-title .lyrics-head-sub{ font-size:clamp(17px, 2vw, 24px); }
main[data-layout="minimal"] .pp-controls{ max-width:640px; margin-left:auto; margin-right:auto; justify-content:center; }
main[data-layout="minimal"] .lyrics{ border-top:0; margin-top:34px; padding-top:0; }
/* zona centrale un po' più scura sotto titolo, player e testo (bordi sfumati), per leggere meglio sul fantasma */
main[data-layout="minimal"] .pp-bg::before{ content:''; position:absolute; top:0; bottom:0; left:50%; z-index:1; width:min(980px, 100%); transform:translateX(-50%);
  background:color-mix(in srgb, var(--bg) 42%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
main[data-layout="minimal"] .pp-bg::after{ z-index:2; }
/* pagina del brano con canvas 9:16 (tracce con canvas, es. [TriPP-HoPP]): a sinistra titolo, controlli e testo,
   a destra il video verticale; niente Foto 1, copertina e zoom */
.pp-canvas{ display:none; }
main[data-layout="canvas"] .pp-page{ grid-template-columns:minmax(0,1fr) minmax(240px, 34%); align-items:start; }
main[data-layout="canvas"] .pp-head{ grid-template-columns:minmax(0,1fr); }
main[data-layout="canvas"] .pp-photo, main[data-layout="canvas"] .pp-side{ display:none; }
main[data-layout="canvas"] .pp-canvas:not([hidden]){
  display:block; position:sticky; top:96px; aspect-ratio:9/16; max-height:calc(100vh - 130px); justify-self:end; width:100%;
  border-radius:calc(var(--radius) * 2); overflow:hidden; background:var(--surface);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.8), 0 0 0 1px var(--line);
}
.pp-canvas video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:767.98px){
  main[data-layout="canvas"] .pp-page{ grid-template-columns:1fr; }
  main[data-layout="canvas"] .pp-canvas:not([hidden]){ position:relative; top:0; width:min(70vw, 320px); justify-self:center; order:-1; }
}

/* ---------- mobile ---------- */
@media (max-width:767.98px){
  .ktg-bar-inner{ grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:10px 16px; }
  .ktg-bar-controls{ grid-column:1 / -1; grid-row:2; }
  .ktg-bar-close{ grid-column:2; grid-row:1; }
  .ktg-bar-art{ width:42px; height:42px; }
  .pj-hero{ flex-direction:column; align-items:flex-start; gap:20px; }
  .pj-cover{ width:min(260px, 72vw); }
  .kp{ padding:16px 12px 8px; }
  .kp-now{ grid-template-columns:52px minmax(0,1fr); }
  .kp-art{ width:52px; height:52px; }
  .kp-detail{ grid-column:1 / -1; justify-self:start; }
  .kp-bar{ flex-wrap:wrap; gap:10px; }
  .kp-bar .kp-progress{ flex-basis:100%; }
  .kp-head{ grid-template-columns:28px minmax(0,1fr) 44px 36px; padding:0 8px 10px; gap:8px; }
  .kp-row{ grid-template-columns:28px minmax(0,1fr) 44px; gap:8px; padding-left:8px; }
  .kp-item{ grid-template-columns:minmax(0,1fr) 36px; }
  /* una colonna: meta, titolo, crediti, Foto 1, controlli, copertina + zoom in riga scorrevole, testo */
  .pp-page{ display:flex; flex-direction:column; gap:0; }
  .pp-main{ display:contents; }
  .pp-head{ order:1; grid-template-columns:1fr; gap:20px; margin-bottom:22px; }
  .pp-photo{ max-width:340px; }
  .pp-controls{ order:2; flex-wrap:wrap; }
  .pp-controls .kp-progress{ flex-basis:100%; }
  .kp-notice{ order:3; }
  .pp-side{ order:4; flex-direction:row; align-items:flex-end; overflow-x:auto; gap:12px; margin-top:26px; padding-bottom:6px; scroll-snap-type:x mandatory; }
  .pp-album, .pp-zoom{ flex:0 0 42%; scroll-snap-align:start; }
  .lyrics{ order:5; }
  /* su mobile i movimenti di sfondo sono fermi */
  .pj-bg-pattern, .pj-bg-image, .pp-bg img{ animation:none !important; }
  .pj-bg::after{ display:none; } /* su mobile un solo strato di stelle, che si muove */
  .pp-bg img{ inset:0; width:100%; height:100%; }
}

@media (prefers-reduced-motion: reduce){
  .pj-bg-pattern, .pj-bg-image, .pp-bg img, .kp-num .eq i, .pj-bg::before, .pj-bg::after, .pp-zoom img, .pj-bg-moon, .pj-bg-moon img{ animation:none !important; }
}

/* iPhone installato (PWA): l'iframe del guscio parte sotto la barra di stato e la barra del player resta sopra la barra Home */
.ktg-frame{ top:env(safe-area-inset-top, 0px); height:calc(100% - var(--ktg-bar-h, 0px) - env(safe-area-inset-top, 0px)); }
.ktg-bar{ padding-bottom:env(safe-area-inset-bottom, 0px); padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); }