/* ============================================================
   EXPÌ — pagina /8/ del Readymag
   ============================================================

   Si carica DOPO replica.css. Tela 1024 x 6014, fondo bianco.
   Rilevata il 15 settembre 2026: 26 widget, modello in
   rilievi/readymag/rm-expi.json.

   Il fondo e bianco, ma due immagini lunghe coprono la pagina fino a
   5408: sotto resta una fascia bianca di 600 px, come sull'originale.
   La testata e quella di Huddler in negativo: testi e tratteggi
   bianchi su un velo nero al 65%.
   ============================================================ */

body[data-pagina="expi"] {
  --tratto: #ffffff;
  background: var(--bianco);
}

.tela--expi .el,
.tela--expi .linea { z-index: var(--z, auto); }

.tela--expi .linea { --mezza: 8px; }

.tela--expi {
  height: 6014px;
  background: var(--bianco);
}

/* ---------- Immagini -------------------------------------- */

.e-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- La testata ------------------------------------ */

.e-velo { background: rgb(0 0 0 / 65%); }

/* Courier New 9 px, interlinea 13, spaziatura 2, bianco. */
.e-descrizione {
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 2px;
  color: var(--bianco);
  margin: 0;
}

/* Team e programmi: righe da 18. La prima e vuota (nel modello un
   blocco con dentro solo un carattere invisibile), poi il titolo in
   grassetto da 11 e le voci da 9, spaziatura 1. */
.e-elenco {
  margin: 0;
  padding-top: 18px;
  color: var(--bianco);
  letter-spacing: 1px;
}

.e-voce {
  display: block;
  font-size: 9px;
  line-height: 18px;
}

.e-voce--capo {
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Il logo che entra rimbalzando ------------------
   I tre passi del modello, dopo 1 s:
     0,5 s  da −880 a 0, curva «ease-both-back»
     0,1 s  da 0 a +29, cubic-bezier(.75,.25,.21,.67)
     0,2 s  da +29 a 0,  cubic-bezier(.62,-.25,.3,1.25)
   Su 0,8 s i passi cadono a 62,5% e 75%. */
.e-logo {
  animation: e-logo-entra 0.8s 1s both;
}

@keyframes e-logo-entra {
  0%    { translate: -880px 0; animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  62.5% { translate: 0 0;      animation-timing-function: cubic-bezier(0.75, 0.25, 0.21, 0.67); }
  75%   { translate: 29px 0;   animation-timing-function: cubic-bezier(0.62, -0.25, 0.3, 1.25); }
  100%  { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .e-logo { animation: none; }
}

/* ---------- La freccia indietro ---------------------------
   Passa sul nero, sul blu, sul giallo e sul bianco: con la
   differenza resta sempre leggibile. */
.e-indietro { color: var(--bianco); mix-blend-mode: difference; }
.e-indietro:hover { color: var(--verde); mix-blend-mode: normal; }

/* ============================================================
   TELEFONO
   ============================================================ */

@media (max-width: 899px) {

  body[data-pagina="expi"] { background: var(--nero); }

  .tela--expi { height: auto; overflow: visible; background: var(--nero); }

  /* Il velo e le orizzontali della testata sono impaginazione da
     tela. Il primo fondo e quasi tutto nero e vuoto (il bagliore e il
     pannello chiaro su cui poggia il telefono): in colonna non dice
     niente. Il secondo resta, dopo le spille. */
  .e-velo, .tela--expi .linea--oriz, .e-sfondo--primo { display: none; }

  .e-img, .e-descrizione, .e-elenco {
    position: static;
    width: auto;
    height: auto;
  }

  .e-img { aspect-ratio: var(--w) / var(--h); margin-bottom: 12px; }

  .e-logo { animation: none; margin: 24px 0; }

  .e-descrizione { font-size: 13px; line-height: 1.6; letter-spacing: 1px; margin: 24px 0 12px; }
  .e-elenco { padding-top: 12px; }
  .e-voce { font-size: 13px; line-height: 1.7; }
  .e-voce--capo { font-size: 15px; }
}