/* ==========================================================
   PISHKEY MUSIC — DESIGN SYSTEM "LUNA PARK"
   ==========================================================
   Fonte unica dei "pezzi" visivi che rendono Pishkey un parco
   divertimenti e non un sito discografico qualsiasi. Nasce per
   allineare il sito al feed Instagram, che usa lo stesso
   vocabolario: biglietto perforato, nastro-bandierina con il
   nome dell'artista, titoli in corsivo sull'artwork.

   Va caricato PRIMA del CSS di pagina (home.css, news.css,
   pishkey.css): definisce i token che gli altri possono
   sovrascrivere.

   Indice:
     1. Token (colori, font, misure biglietto)
     2. Strappo — il divisore perforato tra sezioni
     3. Sigillo — il bollino "NEW RELEASE"
     4. Nastro — la bandierina col nome dell'artista
     5. Ticket card — la card release in stile Instagram
     6. Griglie e intestazioni di sezione
     7. Bacheca News — manifesto + avvisi (.news-lead / .news-brief)
     8. Accessibilità e motion
   ========================================================== */

/* ════════════════════════════
   1. TOKEN
════════════════════════════ */
:root {
  /* Palette base (identica a quella storica del sito) */
  --bg:          #0d0a12;
  --bg-panel:    #16111c;
  --bg-stage:    #352F55;
  --bg-shadow:   #24141b;
  --chalk:       #EFEFF2;
  --accent:      #B45A8D;
  --accent-glow: rgba(180, 90, 141, 0.35);

  /* Tipi di notizia: blu = uscita, oro = traguardo, accento = nuovo artista.
     Usati dai filtri e dalle card della sezione News. */
  --news-release:   #3395FF;
  --news-milestone: #E2B858;

  --font-display: 'Cormorant Garamond', serif;
  --font-head:    'Archivo Narrow', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Misure dello strappo perforato tra sezioni */
  --tear-dot: 9px;   /* raggio del foro */
  --tear-gap: 34px;  /* passo tra un foro e l'altro */

  --ticket-radius: 14px;
}

/* ════════════════════════════
   2. STRAPPO
   Il divisore tra sezioni: non più pallini disegnati su un fondo
   uniforme, ma fori veri ritagliati nel pannello della sezione,
   che lasciano vedere il fondo di quella precedente. Funziona solo
   se le due sezioni hanno toni diversi (--bg / --bg-panel).
   Uso:
     <section class="... sheet sheet--panel">
       <span class="sheet-tear" aria-hidden="true"></span>
       …
     </section>
════════════════════════════ */
.sheet        { position: relative; padding-top: 22px; }
.sheet--page  { background: var(--bg);       --tear-from: var(--bg-panel); }
.sheet--panel { background: var(--bg-panel); --tear-from: var(--bg); }

.sheet-tear {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  background-image: radial-gradient(
    circle at calc(var(--tear-gap) / 2) 0,
    var(--tear-from) var(--tear-dot),
    transparent calc(var(--tear-dot) + 1px)
  );
  background-size: var(--tear-gap) 100%;
  background-repeat: repeat-x;
}

/* La piega: tratteggio sottile subito sotto la linea dei fori */
.sheet-tear::after {
  content: '';
  position: absolute;
  top: 20px; left: 0; right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right, rgba(239, 239, 242, 0.22) 0 7px, transparent 7px 14px
  );
}

/* ════════════════════════════
   3. SIGILLO ("NEW RELEASE")
   Il bollino stellato in alto a sinistra, come sul feed Instagram.
   La forma è un clip-path a 22 punte: nessuna immagine, quindi
   scala senza sgranare e cambia colore con una variabile.

   Sul sito si accende SOLO nelle 4 settimane dopo l'uscita vera del
   brano (js/records.js legge la data reale da Spotify). Su Instagram
   il post è un annuncio in un feed cronologico e "new" è sempre vero
   nel momento in cui lo vedi; qui la sezione Records è un catalogo
   permanente, quindi la data è l'unica cosa che tiene onesto il
   bollino. Nei mesi senza uscite non ne compare nessuno — è previsto,
   ed è quello che gli ridà valore quando ricompare.
   Uso:  <span class="seal">New<br>Release</span>
════════════════════════════ */
.seal {
  --seal-size: 74px;
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  width: var(--seal-size);
  height: var(--seal-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--seal-clr, var(--news-release));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.58rem;
  line-height: 1.15;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Bollino a 22 punte, generato geometricamente */
  clip-path: polygon(50.0% 0.0%, 56.0% 7.9%, 64.1% 2.0%, 67.7% 11.3%, 77.0% 7.9%, 77.8% 17.9%, 87.8% 17.3%, 85.8% 27.0%, 95.5% 29.2%, 90.8% 38.0%, 99.5% 42.9%, 92.5% 50.0%, 99.5% 57.1%, 90.8% 62.0%, 95.5% 70.8%, 85.8% 73.0%, 87.8% 82.7%, 77.8% 82.1%, 77.0% 92.1%, 67.7% 88.7%, 64.1% 98.0%, 56.0% 92.1%, 50.0% 100.0%, 44.0% 92.1%, 35.9% 98.0%, 32.3% 88.7%, 23.0% 92.1%, 22.2% 82.1%, 12.2% 82.7%, 14.2% 73.0%, 4.5% 70.8%, 9.2% 62.0%, 0.5% 57.1%, 7.5% 50.0%, 0.5% 42.9%, 9.2% 38.0%, 4.5% 29.2%, 14.2% 27.0%, 12.2% 17.3%, 22.2% 17.9%, 23.0% 7.9%, 32.3% 11.3%, 35.9% 2.0%, 44.0% 7.9%);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  user-select: none;
}

/* ════════════════════════════
   4. NASTRO ARTISTA
   La bandierina col nome dell'artista, colorata con il colore
   del suo mondo. La coda a destra è tagliata in punta e una
   piccola piega scura le dà spessore, come su Instagram.
   Uso:  <span class="ribbon" style="--ribbon-clr:#3395FF">Kosta Meltemy</span>
════════════════════════════ */
.ribbon {
  position: relative;
  display: inline-block;
  padding: 4px 22px 4px 12px;
  background: var(--ribbon-clr, var(--accent));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Coda a punta sulla destra */
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Piega d'ombra sotto la coda: l'effetto "nastro ripiegato" */
.ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 11px;
  height: 6px;
  background: var(--ribbon-clr, var(--accent));
  filter: brightness(0.55);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ════════════════════════════
   5. TICKET CARD
   La card release: artwork a tutto campo, titolo in corsivo,
   nastro artista, pulsante play e — solo per le uscite recenti —
   il sigillo. È il post Instagram tradotto in
   HTML — testo vero, quindi leggibile da Google e ridimensionabile
   senza rifare le grafiche.
════════════════════════════ */
.ticket {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--ticket-radius);
  background: var(--bg-shadow);
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.ticket:hover,
.ticket:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6),
              0 0 0 1px var(--ticket-clr, var(--accent));
}
.ticket:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

.ticket-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ticket:hover .ticket-art { transform: scale(1.05); }

/* Velo scuro in basso: senza, il titolo bianco sparisce sulle
   cover chiare (vedi le cover greche, quasi tutte sole e mare). */
.ticket-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(6, 4, 10, 0.92) 0%,
    rgba(6, 4, 10, 0.55) 26%,
    rgba(6, 4, 10, 0.08) 52%,
    transparent 70%
  );
  pointer-events: none;
}

.ticket-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.ticket-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw + 0.6rem, 1.45rem);
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
  margin: 0;
}

/* Pulsante play, angolo in alto a destra come su Instagram */
.ticket-play {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(10, 8, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s;
}
.ticket-play::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ticket:hover .ticket-play {
  background: var(--ticket-clr, var(--accent));
  border-color: transparent;
}

/* ════════════════════════════
   6. GRIGLIE E INTESTAZIONI
════════════════════════════ */
/* ── La striscia di biglietti ──────────────────────────────
   Le card di un artista stanno su una riga sola che scorre in
   orizzontale, come un rullino che si srotola. Finche' ci stanno
   tutte (fino a 4 su desktop) sembra una griglia normale e non
   compare nessun comando; quando avanzano, si scorre.

   Lo scorrimento e' quello nativo del browser: funziona col dito,
   con la rotellina, con la tastiera e con i lettori di schermo
   anche se il JS delle frecce non parte. Le frecce sono un extra
   per il mouse, aggiunte da js/records.js.
──────────────────────────────────────────────────────────── */
.ticket-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 1fr);
  gap: 1.15rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* Edge datato */
  /* Spazio per l'ombra delle card: senza, l'hover viene tagliato
     dal bordo dell'area che scorre. */
  padding: 6px 2px 14px;
  margin: -6px -2px -14px;
}
.ticket-grid::-webkit-scrollbar { display: none; }

.ticket-grid > .ticket { scroll-snap-align: start; }

/* Quattro per volta: con 4 o meno riempiono la riga senza scorrere,
   oltre le 4 la quinta resta appena visibile e invita a scorrere. */
@media (min-width: 900px) {
  .ticket-grid { grid-auto-columns: calc((100% - 3 * 1.15rem) / 4); }
}

/* Il contenitore che ospita striscia e frecce */
.ticket-rail { position: relative; }

.rail-arrow {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(13, 10, 18, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--chalk);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, background 0.25s, border-color 0.25s;
}
.rail-arrow--prev { left: -14px; }
.rail-arrow--next { right: -14px; }

/* Compaiono solo se c'è davvero altro da vedere in quella direzione */
.ticket-rail.can-prev .rail-arrow--prev,
.ticket-rail.can-next .rail-arrow--next {
  opacity: 0.85;
  pointer-events: auto;
}
.rail-arrow:hover {
  opacity: 1;
  background: var(--rail-clr, var(--accent));
  border-color: transparent;
}
.rail-arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--chalk);
  outline-offset: 2px;
}

/* Sfumatura sul bordo: dice "continua di là" anche senza frecce,
   ed è l'unico segnale su mobile, dove le frecce non servono. */
.ticket-rail::after {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  width: 56px;
  height: 100%;
  pointer-events: none;
  /* --rail-fade va impostato quando la striscia sta su uno sfondo diverso
     da quello della pagina (per esempio dentro il pannello dell'artista),
     altrimenti la sfumatura si vede come una macchia. */
  background: linear-gradient(to left, var(--rail-fade, var(--bg)) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.ticket-rail.can-next::after { opacity: 0.9; }

/* Intestazione di zona: nastro dell'artista + linea che si allunga.
   Sostituisce la vecchia .zone-label testuale. */
.zone-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3.5rem 0 1.4rem;
}
.zone-head:first-child { margin-top: 0; }

.zone-head .zone-world {
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zone-clr, var(--accent));
  opacity: 0.6;
  white-space: nowrap;
}

.zone-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--zone-clr, var(--accent));
  opacity: 0.22;
}

/* Insegna di sezione: il cartello all'ingresso di un'attrazione */
.park-sign {
  text-align: center;
  margin-bottom: 3rem;
}
.park-sign .eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.park-sign h2 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

/* Bottone "biglietteria": link d'azione ricorrente */
.btn-ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--btn-clr, var(--accent));
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--btn-clr, var(--accent));
  transition: background 0.3s, color 0.3s;
}
.btn-ticket:hover {
  background: var(--btn-clr, var(--accent));
  color: #0d0a12;
}

/* ════════════════════════════
   7. BACHECA NEWS
   La sezione News come un manifesto affisso: una notizia di
   apertura grande (.news-lead) più gli avvisi minori in colonna
   (.news-brief). Base strutturale condivisa da home e da /news
   (entrambe caricano questo file); il font del titolo e le
   dimensioni cambiano per pagina — vedi css/home.css e css/news.css.
════════════════════════════ */
.news-lead {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg-shadow);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}
.news-lead:hover,
.news-lead:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6),
              0 0 0 1px var(--card-clr, var(--accent));
}
.news-lead:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

.news-lead-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-lead-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 4, 10, 0.95) 0%,
    rgba(6, 4, 10, 0.65) 34%,
    rgba(6, 4, 10, 0.12) 62%,
    transparent 78%
  );
}

.news-lead-chip {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0d0a12;
  background: var(--card-clr, var(--accent));
  padding: 6px 12px;
}

.news-lead-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 2.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.news-lead-date {
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.news-lead-title {
  font-style: italic;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
  text-wrap: pretty;
  margin: 0;
}

.news-lead-excerpt {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}

.news-lead .ribbon { margin-top: 0.3rem; }

.news-brief {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  padding: 1rem;
  background: #1d1723;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: background 0.3s, border-color 0.3s;
}
.news-brief:hover,
.news-brief:focus-visible {
  background: #241d2b;
  border-color: var(--card-clr, var(--accent));
}
.news-brief:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

.news-brief-thumb {
  width: 74px;
  height: 74px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.news-brief-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.news-brief-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.news-brief-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-clr, var(--accent));
  flex-shrink: 0;
}

.news-brief-date {
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.45;
}

.news-brief-title {
  font-style: italic;
  font-weight: 600;
  color: #EFEFF2;
  text-wrap: pretty;
  margin: 0;
}

/* Nastro più piccolo, per stare nella riga stretta dell'avviso */
.news-brief .ribbon--sm {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 3px 17px 3px 9px;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}

/* ════════════════════════════
   8. ACCESSIBILITÀ E MOTION
════════════════════════════ */
@media (max-width: 768px) {
  /* Su mobile due card e mezza in vista: la mezza card tagliata è il
     segnale che si scorre, più chiaro di qualunque freccia. */
  .ticket-grid { grid-auto-columns: 42vw; gap: 0.75rem; }
  .rail-arrow { display: none; }
  .seal { --seal-size: 56px; font-size: 0.46rem; top: 9px; left: 9px; }
  .ticket-body { padding: 0.85rem 0.85rem 0.9rem; gap: 0.45rem; }
  .ribbon { font-size: 0.55rem; padding: 3px 18px 3px 9px; letter-spacing: 0.12em; }
  .zone-head { margin: 2.5rem 0 1rem; }

  /* Strappo più discreto tra sezioni ravvicinate su schermi piccoli */
  :root { --tear-dot: 7px; --tear-gap: 26px; }
  .news-brief-thumb { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticket,
  .ticket-art,
  .ticket-play { transition: none; }
  .ticket:hover { transform: none; }
  .ticket:hover .ticket-art { transform: none; }
  /* Chi ha chiesto meno animazioni non vuole nemmeno lo scorrimento
     animato: le frecce saltano direttamente alla posizione. */
  .ticket-grid { scroll-behavior: auto; }

  .news-lead { transition: none; }
  .news-lead:hover { transform: none; }
}