@property --sint {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Lettore a sintonizzatore.
   Si apre dal pulsante play di una copertina, si riduce a barra in fondo e
   continua a suonare. Il video sta dentro la copertina: e' lui il protagonista,
   percio' nessun velo e nessuna sfocatura sopra l'immagine.
   Il disturbo che compare trascinando la scala non e' un effetto a tempo: misura
   quanto sei lontano dalla stazione piu' vicina. */

.pl {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(440px, calc(100% - 22px));
  bottom: -110%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition:
    bottom 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    width 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='aperto'] {
  /* sempre 16px dal bordo, di piu' solo dove il telefono lo impone */
  bottom: max(16px, env(safe-area-inset-bottom));
  max-height: calc(100dvh - 32px);
}
.pl[data-stato='mini'] {
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 16px));
  cursor: pointer;
}

.pl__telaio {
  position: relative;
  touch-action: none;
  background: var(--lp-card-bg, #0a1016);
  border: 1px solid var(--lp-line, rgba(160, 224, 255, 0.16));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  transition:
    border-radius 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    padding 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    box-shadow 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='aperto'] .pl__telaio {
  border-radius: 22px;
  padding: 0.9rem 1.05rem 1.45rem;
}
.pl[data-stato='mini'] .pl__telaio {
  border-radius: 999px;
  padding: 0.5rem 0.6rem;
}

.pl__maniglia {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  margin: 0 auto 0.95rem;
  max-height: 4px;
  opacity: 1;
  transition:
    max-height 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.3s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    margin 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='mini'] .pl__maniglia {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

.pl__corpo {
  display: flex;
  flex-direction: column;
}
.pl[data-stato='mini'] .pl__corpo {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}

/* ---- la copertina, con il video dentro ---- */
.pl__palco {
  --sint: 0;
  --scarto: 0px;
  position: relative;
  overflow: hidden;
  background: #0b1014;
  aspect-ratio: 1;
  transition:
    width 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    height 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    border-radius 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    flex-basis 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    --sint 0.42s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl__palco.is-tocco {
  transition:
    width 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    height 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    border-radius 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    flex-basis 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='aperto'] .pl__palco {
  width: min(100%, calc(100dvh - var(--pl-resto, 300px)));
  margin-inline: auto;
  border-radius: 13px;
}
.pl[data-stato='mini'] .pl__palco {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 10px;
}

.pl__vid,
.pl__fermo,
.pl__lastra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(calc(1 - 0.72 * var(--sint))) brightness(calc(1 - 0.14 * var(--sint)))
    contrast(calc(1 + 0.3 * var(--sint))) blur(calc(var(--sint) * 1.7px));
  transform: translateX(var(--scarto));
}
.pl__vid {
  z-index: 1;
  background: #0b1014;
}
.pl__lastra {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl__palco.is-tocco .pl__lastra {
  transition: none;
}

/* ---- il disturbo di sintonia: bande verticali, come l'asse della scala ---- */
.pl__grana {
  position: absolute;
  inset: -20%;
  z-index: 3;
  pointer-events: none;
  opacity: calc(var(--sint) * 0.62);
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 96px 96px;
}
.pl__righe {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: calc(var(--sint) * 0.72);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0 1px, transparent 1px 3px);
}
.pl__onda {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  z-index: 5;
  pointer-events: none;
  opacity: calc(var(--sint) * 0.72);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14) 45%,
    rgba(255, 255, 255, 0.26) 52%,
    transparent
  );
  animation: pl-scorre 1.5s linear infinite;
}
@keyframes pl-scorre {
  from {
    left: -24%;
  }
  to {
    left: 104%;
  }
}
/* trascini a sinistra, la banda scivola a sinistra: sembra causata dal dito */
.pl__palco[data-verso='indietro'] .pl__onda {
  animation-direction: reverse;
}

/* ---- testo, scala, tempi, comandi ---- */
.pl__sotto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.15rem;
}
.pl[data-stato='mini'] .pl__sotto {
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0;
}

.pl__testo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pl[data-stato='mini'] .pl__testo {
  flex: 1;
}
.pl__titolo {
  font-family: var(--lp-display, system-ui, sans-serif);
  font-size: 1.05rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl[data-stato='mini'] .pl__titolo {
  font-size: 0.86rem;
}
.pl__meta {
  font-size: 0.78rem;
  color: var(--lp-ink-dim, #aac3cf);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl[data-stato='mini'] .pl__meta {
  font-size: 0.7rem;
}

.pl__dialbox {
  position: relative;
  overflow: hidden;
  max-height: 80px;
  margin: 0.15rem 0;
  opacity: 1;
  transition:
    max-height 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.3s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    margin 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='mini'] .pl__dialbox {
  max-height: 0;
  opacity: 0;
  margin: 0;
}
.pl__dial {
  position: relative;
  height: 50px;
  cursor: grab;
  touch-action: pan-y;
  border-top: 1px solid var(--lp-line, rgba(160, 224, 255, 0.16));
  border-bottom: 1px solid var(--lp-line, rgba(160, 224, 255, 0.16));
  overflow: hidden;
}
.pl__dial:active {
  cursor: grabbing;
}
.pl__nastro {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  will-change: transform;
}
.pl__staz {
  position: relative;
  width: 88px;
  flex: 0 0 88px;
  text-align: center;
  font-family: var(--lp-mono, ui-monospace, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--lp-ink-dim, #aac3cf);
  opacity: 0.75;
  padding-top: 0.5rem;
  line-height: 1.25;
}
.pl__staz::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.42);
}
.pl__staz.is-on {
  color: var(--c-via, var(--lp-cyan, #4de3e8));
  opacity: 1;
}
.pl__ago {
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--c-via, var(--lp-cyan, #4de3e8));
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--lp-cyan, #4de3e8) 55%, transparent);
  z-index: 3;
}

.pl__barra {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  max-height: 4px;
  opacity: 1;
  transition:
    max-height 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.3s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='mini'] .pl__barra {
  max-height: 0;
  opacity: 0;
}
.pl__barra i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-via, var(--lp-cyan, #4de3e8));
  border-radius: 999px;
}

.pl__tempi {
  display: flex;
  justify-content: space-between;
  font-family: var(--lp-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  color: var(--lp-ink-dim, #aac3cf);
  font-variant-numeric: tabular-nums;
  max-height: 20px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.28s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='mini'] .pl__tempi {
  max-height: 0;
  opacity: 0;
}

/* l'invito: qui si sente un estratto, di là il pezzo intero sulle piattaforme */
.pl__vai {
  display: grid;
  grid-template-areas:
    'testo freccia'
    'dove dove';
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  gap: 0.2rem 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid color-mix(in srgb, var(--c-via, var(--lp-cyan, #4de3e8)) 55%, transparent);
  border-radius: 999px;
  text-decoration: none;
  color: var(--c-via, var(--lp-cyan, #4de3e8));
  background: color-mix(in srgb, var(--c-via, var(--lp-cyan, #4de3e8)) 7%, transparent);
  /* due righe piu' il margine: sotto i 62px la seconda riga viene tagliata */
  max-height: 64px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.3s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    padding 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    background 0.24s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl__vai:hover {
  background: color-mix(in srgb, var(--c-via, var(--lp-cyan, #4de3e8)) 16%, transparent);
}
.pl__vai-testo {
  grid-area: testo;
  font-family: var(--lp-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.pl__vai-dove {
  grid-area: dove;
  text-align: center;
  font-size: 0.63rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--lp-ink-dim, #aac3cf);
}
.pl__vai-freccia {
  grid-area: freccia;
  align-self: center;
  fill: currentColor;
}
/* nella barra gli elementi nascosti devono cedere anche la larghezza:
   in riga continuerebbero a occupare spazio e a schiacciare il titolo */
.pl[data-stato='mini'] .pl__vai,
.pl[data-stato='mini'] .pl__tempi,
.pl[data-stato='mini'] .pl__dialbox,
.pl[data-stato='mini'] .pl__barra {
  max-width: 0;
  flex: 0 0 0;
  margin-inline: 0;
}
.pl[data-stato='mini'] .pl__vai {
  max-height: 0;
  opacity: 0;
  padding: 0;
  border-width: 0;
}
/* con poco spazio in altezza resta solo la prima riga */
@media (max-height: 680px) {
  .pl__vai-dove {
    display: none;
  }
  .pl__vai {
    padding: 0.5rem 0.9rem;
    max-height: 42px;
  }
}

.pl__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
  padding-top: 0.2rem;
}
.pl[data-stato='mini'] .pl__ctrl {
  gap: 0.6rem;
  padding-top: 0;
}
.pl__ctrl button {
  touch-action: manipulation;
  background: transparent;
  border: 0;
  color: var(--lp-ink, #eef6f9);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0.3rem;
}
.pl__ctrl svg {
  fill: currentColor;
  display: block;
}
/* qui il cerchio resta: è il comando principale del lettore */
.pl__ctrl .pl__grande {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 2px solid var(--c-via, var(--lp-cyan, #4de3e8));
  color: var(--c-via, var(--lp-cyan, #4de3e8));
  transition:
    background 0.24s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    box-shadow 0.28s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform 0.18s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl__ctrl .pl__grande:hover {
  background: color-mix(in srgb, var(--c-via, var(--lp-cyan, #4de3e8)) 12%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-via, var(--lp-cyan, #4de3e8)) 8%, transparent);
}
.pl__ctrl .pl__grande:active {
  transform: scale(0.93);
}
.pl[data-stato='mini'] .pl__ctrl .pl__grande {
  width: 34px;
  height: 34px;
  border-width: 1.5px;
}
.pl__ctrl .pl__lato {
  color: var(--lp-ink-dim, #aac3cf);
  max-width: 44px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-width 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    opacity 0.3s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    padding 0.46s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    color 0.18s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl__ctrl .pl__lato:hover {
  color: var(--lp-ink, #eef6f9);
}
.pl[data-stato='mini'] .pl__ctrl .pl__lato {
  max-width: 0;
  opacity: 0;
  padding: 0;
}

.pl__x {
  position: absolute;
  top: calc(0.9rem + 2px);
  right: 1.05rem;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  color: var(--lp-ink-dim, #aac3cf);
  display: grid;
  place-items: center;
  z-index: 7;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  transition:
    opacity 0.24s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
    color 0.2s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl__x:hover {
  color: var(--lp-ink, #eef6f9);
}
.pl[data-stato='mini'] .pl__x {
  opacity: 0;
  pointer-events: none;
}

/* il velo separa il lettore dalla pagina senza coprire la copertina */
body.pl-bloccato {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.pl-velo {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--lp-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.pl[data-stato='aperto'] ~ .pl-velo,
body.pl-aperto .pl-velo {
  opacity: 1;
  pointer-events: auto;
}

/* ---- schermi piccoli ---- */
@media (max-height: 680px) {
  .pl {
    --pl-resto: 268px;
  }
  .pl[data-stato='aperto'] .pl__telaio {
    padding: 0.7rem 0.8rem 1.05rem;
  }
  .pl__sotto {
    gap: 0.7rem;
    padding-top: 0.8rem;
  }
  .pl__dial {
    height: 42px;
  }
  .pl__dialbox {
    max-height: 60px;
  }
  .pl__ctrl {
    gap: 1.5rem;
  }
  .pl__ctrl .pl__grande {
    width: 44px;
    height: 44px;
  }
  .pl__titolo {
    font-size: 0.95rem;
  }
}
/* schermi molto bassi: si rinuncia ai tempi, non ai comandi */
@media (max-height: 560px) {
  .pl {
    --pl-resto: 232px;
  }
  .pl__tempi {
    display: none;
  }
  .pl__sotto {
    gap: 0.55rem;
  }
}
@media (max-width: 360px) {
  .pl[data-stato='aperto'] .pl__telaio {
    padding: 0.7rem 0.7rem 1.1rem;
  }
  .pl__ctrl {
    gap: 1.3rem;
  }
  .pl__x {
    right: 0.7rem;
  }
}
/* poco spazio in orizzontale, tipico dello schermo ruotato: si affiancano */
@media (max-height: 460px) and (orientation: landscape) {
  .pl[data-stato='aperto'] .pl__corpo {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
  }
  .pl[data-stato='aperto'] .pl__palco {
    width: min(42%, calc(100dvh - 96px));
    flex: 0 0 auto;
  }
  .pl__sotto {
    flex: 1;
    min-width: 0;
    padding-top: 0;
  }
  .pl__dialbox {
    max-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl,
  .pl__telaio,
  .pl__palco,
  .pl__lastra {
    transition-duration: 0.01ms !important;
  }
  .pl__onda {
    animation: none;
    opacity: 0;
  }
}