/* =========================================================================
   CARTONCINO 5 · "Il programma della giornata"  (parts/programma.html)

   Stessa carta e stessi caratteri degli altri cartoncini (foglietto.css):
   monogramma, titolo in maiuscolo spaziato, divisore; sotto, la giornata
   su una linea verticale sottilissima color inchiostro tenue, con un'icona
   disegnata a matita e velata ad acquerello per ogni momento e, fra un
   momento e l'altro, un piccolo rombo come il fregio del divisore.

   - telefono: la linea a sinistra, tutto su un lato (icona | ora, titolo,
     descrizione);
   - computer (carta >= 470px): l'ora in colonna a sinistra della linea,
     titolo e descrizione a destra, come il programma stampato di una
     cerimonia: si legge la giornata intera scorrendo gli orari.

   CARTA. Questo cartoncino è molto più lungo degli altri (sul telefono
   piccolo oltre 4 volte la larghezza): le copie della carta di
   foglietto.css non bastano a coprirlo. Qui la copia di mezzo diventa una
   fascia che si allunga quanto serve, fatta di due strati della carta in
   scala vera ripetuti in verticale e sfalsati di mezza carta: ognuno ha i
   bordi strappati sfumati via (maschera ripetuta), dove uno sfuma l'altro
   è pieno. Grana, frange e bordi restano quelli veri: niente è stirato.
   La carta è specchiata (bordi strappati diversi da quelli del 2 e del 3).

   Richiede base.css e foglietto.css (caricare questo DOPO foglietto.css).
   Animazione facoltativa: js/programma.js (aggiunge .programma--anima).
   ========================================================================= */

/* ------------------------------------------------------------------------
   La carta
   ------------------------------------------------------------------------ */
.foglietto--programma{
  --specchio: scaleX(-1);          /* cambiare qui per un altro verso della carta */
}
.foglietto--programma .foglietto__fondo::before,
.foglietto--programma .foglietto__fondo::after,
.foglietto--programma .foglietto__fondo-mezzo{
  transform: var(--specchio);
}
/* la fascia di mezzo: dal primo quarto della carta in alto a quello in basso,
   sfumata alle estremità (lì sotto ci sono le copie in alto e in basso) */
.foglietto--programma .foglietto__fondo-mezzo{
  top: 52cqw;
  bottom: 52cqw;
  height: auto;
  background: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14cqw, #000 calc(100% - 14cqw), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14cqw, #000 calc(100% - 14cqw), transparent 100%);
}
/* i due strati: la carta ripetuta (152,83cqw = altezza della carta in scala
   vera) con i bordi alto e basso di ogni copia sfumati via */
.programma__carta{
  position: absolute;
  inset: 0;
  background: url("../img/carta-foglietto.webp") 50% 0 / 100% auto repeat-y;
  -webkit-mask: linear-gradient(to bottom, transparent 4cqw, #000 16cqw, #000 136.83cqw, transparent 148.83cqw) 0 0 / 100% 152.83cqw repeat-y;
          mask: linear-gradient(to bottom, transparent 4cqw, #000 16cqw, #000 136.83cqw, transparent 148.83cqw) 0 0 / 100% 152.83cqw repeat-y;
}
.programma__carta--sfalsata{
  background-position: 50% 76.42cqw;
  -webkit-mask-position: 0 76.42cqw;
          mask-position: 0 76.42cqw;
}

/* ------------------------------------------------------------------------
   Misure (il contenitore è .foglietto: le variabili stanno sul figlio)
   ------------------------------------------------------------------------ */
.foglietto--programma .foglietto__carta{
  /* telefono */
  --icona: clamp(40px, 13.2cqw, 48px);
  --ora: clamp(22px, 7.2cqw, 27px);
  --nome: var(--t-corpo);
  --descrizione: max(14px, calc(var(--t-corpo) * 1.12));
  --fra: max(12px, 4cqw);                  /* fra la colonna dell'icona e i testi */
  --stacco-momenti: max(26px, 7.4cqw);     /* fra un momento e l'altro */
  --respiro-linea: 7px;                    /* la linea si ferma prima dell'icona */
  --x-linea: calc(var(--icona) / 2);       /* centro della colonna delle icone */
  --linea-programma: rgba(108, 100, 80, .5);
  --fregio: max(9px, 2.6cqw);        /* altezza del rombo (largo 2/3) */
}
@container foglietto (min-width: 470px){
  .foglietto--programma .foglietto__carta{
    /* computer */
    --icona: 9.6cqw;
    --ora: 5.3cqw;
    --nome: calc(var(--t-corpo) * 1.06);
    --descrizione: calc(var(--t-corpo) * 1.24);
    --fra: 3.6cqw;
    --col-ora: calc(var(--ora) * 2.7);
    --stacco-momenti: 4.4cqw;
    --x-linea: calc(var(--col-ora) + var(--fra) + var(--icona) / 2);
    --fregio: 2cqw;
  }
}

/* ------------------------------------------------------------------------
   Intestazione e chiusura
   ------------------------------------------------------------------------ */
.programma__titolo{
  max-width: 17em;                 /* "Il programma / della giornata" */
}
.programma__sezione > .programma__divisore{
  margin-top: max(.9em, calc(4cqw - .2em));
}
.programma__piede{
  margin-top: auto;
  padding-top: max(2.4em, 8cqw);
  padding-bottom: 13cqw;
  display: flex;
  justify-content: center;
  width: 100%;
}
.programma__piede .foglietto__divisore{ margin-top: 0; }

/* ------------------------------------------------------------------------
   La linea del tempo
   ------------------------------------------------------------------------ */
.programma{
  margin: max(2em, 7.5cqw) 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: left;
}

.programma__momento{
  position: relative;
  display: grid;
  grid-template-columns: var(--icona) minmax(0, 1fr);
  grid-template-areas:
    "icona ora"
    "icona testi";
  column-gap: var(--fra);
  padding-bottom: var(--stacco-momenti);
}
.programma__momento:last-child{ padding-bottom: 0; }

/* il tratto di linea sotto ogni icona, fino all'icona del momento dopo… */
.programma__momento::before{
  content: "";
  position: absolute;
  left: calc(var(--x-linea) - .5px);
  top: calc(var(--icona) + var(--respiro-linea));
  bottom: var(--respiro-linea);
  width: 1px;
  background: var(--linea-programma);
  transform-origin: 50% 0;
  pointer-events: none;
}
/* …e a metà strada un piccolo rombo, come il fregio del divisore (con il
   cuore color cipria) */
.programma__momento::after{
  content: "";
  position: absolute;
  left: var(--x-linea);
  top: calc(50% + var(--icona) / 2);      /* metà fra il fondo dell'icona e l'icona dopo */
  width: calc(var(--fregio) * 2 / 3);
  height: var(--fregio);
  margin: calc(var(--fregio) / -2) 0 0 calc(var(--fregio) / -3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 .4L7.4 6 4 11.6 .6 6Z' fill='rgb(108,100,80)' fill-opacity='.85'/%3E%3Cpath d='M4 4.3L5 6 4 7.7 3 6Z' fill='rgb(232,200,207)'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.programma__momento:last-child::before,
.programma__momento:last-child::after{ display: none; }

/* l'icona: inchiostro tenue, velature che si fondono con la carta */
.programma__icona{
  grid-area: icona;
  align-self: start;
  display: block;
  width: var(--icona);
  height: var(--icona);
  color: var(--inchiostro-tenue);
  mix-blend-mode: multiply;
}
.programma__disegno{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* l'ora: grande, cifre maiuscole, centrata sull'icona */
.programma__ora{
  grid-area: ora;
  align-self: start;
  display: flex;
  align-items: center;
  height: var(--icona);
  padding-top: .08em;                     /* le cifre senza discendenti: un pelo giù per centrarle a occhio */
  font-size: var(--ora);
  line-height: 1;
  letter-spacing: .05em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--inchiostro-dati);
  white-space: nowrap;
}

.programma__testi{
  grid-area: testi;
  min-width: 0;
  padding-top: .1em;
}
.programma__nome{
  font-size: var(--nome);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--spaziatura);
  text-transform: uppercase;
  color: var(--inchiostro-dati);
  text-wrap: balance;
}
.programma__descrizione{
  margin-top: .15em;
  font-size: var(--descrizione);
  font-style: italic;
  line-height: 1.42;
  letter-spacing: .01em;
  color: var(--inchiostro-tenue);
  text-wrap: balance;
}

/* computer: ora | icona | testi, la riga centrata sull'icona */
@container foglietto (min-width: 470px){
  .programma{
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  .programma__momento{
    grid-template-columns: var(--col-ora) var(--icona) minmax(0, 27em);
    grid-template-areas: "ora icona testi";
  }
  .programma__ora{
    justify-content: flex-end;
  }
  .programma__testi{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--icona);
    padding-top: 0;
  }
}

/* ------------------------------------------------------------------------
   Ingresso (js/programma.js): i momenti compaiono uno dopo l'altro mentre
   arrivano sullo schermo. L'icona si disegna come a matita, poi la velatura,
   l'ora e i testi affiorano, la linea scende verso il momento dopo.
   --ritardo lo scrive programma.js (i momenti entrati insieme si mettono in fila).
   ------------------------------------------------------------------------ */
.programma--anima .programma__tratti path{
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.01;
  transition: stroke-dashoffset 1.3s cubic-bezier(.45, .05, .25, 1) var(--ritardo, 0s);
}
.programma--anima .programma__tratti--fini path{
  transition-delay: calc(var(--ritardo, 0s) + .35s);
}
.programma--anima .programma__velo{
  opacity: 0;
  transition: opacity 1.1s ease calc(var(--ritardo, 0s) + .55s);
}
.programma--anima .programma__ora,
.programma--anima .programma__nome,
.programma--anima .programma__descrizione{
  opacity: 0;
  translate: 0 .45rem;
  transition:
    opacity .9s ease calc(var(--ritardo, 0s) + var(--dopo, .15s)),
    translate 1s cubic-bezier(.2, .7, .2, 1) calc(var(--ritardo, 0s) + var(--dopo, .15s));
}
.programma--anima .programma__nome{ --dopo: .28s; }
.programma--anima .programma__descrizione{ --dopo: .4s; }
.programma--anima .programma__momento::before{
  scale: 1 0;
  transition: scale 1.1s cubic-bezier(.4, 0, .2, 1) calc(var(--ritardo, 0s) + .5s);
}
.programma--anima .programma__momento::after{
  opacity: 0;
  scale: .3;
  transition:
    opacity .7s ease calc(var(--ritardo, 0s) + 1s),
    scale .9s cubic-bezier(.2, .8, .3, 1.2) calc(var(--ritardo, 0s) + 1s);
}

.programma--anima .is-visibile .programma__tratti path{ stroke-dashoffset: 0; }
.programma--anima .is-visibile .programma__velo,
.programma--anima .is-visibile .programma__ora,
.programma--anima .is-visibile .programma__nome,
.programma--anima .is-visibile .programma__descrizione{
  opacity: 1;
  translate: none;
}
.programma--anima .programma__momento.is-visibile::before{ scale: none; }
.programma--anima .programma__momento.is-visibile::after{ opacity: 1; scale: none; }

/* movimento ridotto: tutto già al suo posto (programma.js non anima, ma per sicurezza) */
@media (prefers-reduced-motion: reduce){
  .programma--anima .programma__tratti path{ stroke-dashoffset: 0; transition: none; }
  .programma--anima .programma__velo,
  .programma--anima .programma__ora,
  .programma--anima .programma__nome,
  .programma--anima .programma__descrizione,
  .programma--anima .programma__momento::before,
  .programma--anima .programma__momento::after{ opacity: 1; translate: none; scale: none; transition: none; }
}