/* ============================================================
   BRANDING DYELIT — pagina /2/ del Readymag
   ============================================================

   Si carica DOPO replica.css. Tela 1024 x 2282, fondo nero.
   51 elementi, 24 immagini, 1 video.

   E la pagina del nero materico: fondo nero con la grana, titoli
   in grottesco condensato pesante, corpo in monospazio bianco,
   e i personaggi illustrati che sbordano dai lati.

   DUE COSE DIVERSE DALLE ALTRE PAGINE
   -----------------------------------
   1. La grana qui sta al **20%**, non al 15% di Street art e
      Il Mostro. Stessa foto di muro, opacita diversa.
   2. I titoli sono in **Anton**, non in Courier: e l'unica pagina
      con un grottesco. Anton e libero (OFL) ed e gia nei font
      del sito, scaricato per l'indice.

   LE CORNICI SONO BIANCHE
   -----------------------
   Sul Readymag sono SVG con una maschera: un rettangolo bianco
   pieno meno un rettangolo nero interno, che risulta in un filo
   bianco. Qui e un normale bordo.
   ============================================================ */

@font-face {
  font-family: 'Anton';
  src: url('../font/anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

.tela--dyelit {
  height: 2282px;
  background: var(--nero);
}

/* ---------- Fondo ----------------------------------------- */

/* La stessa foto di muro delle altre pagine, qui al 20%. */
.d-grana img { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }

/* I riquadri: un filo bianco, niente fondo.

   Stanno SOPRA alla grana (z 311-314, la grana e a 308-310): sotto,
   la foto del muro al 20% ci passava sopra e il bianco diventava
   grigio, semitrasparente. Restano sotto ai testi (316 in su). */
/* Filo piu sottile su richiesta di Leonardo: 0,75 invece di 1. Dove
   lo schermo non ha mezzi pixel resta di un pixel, non sparisce. */
.d-cornice { border: 0.75px solid var(--bianco); pointer-events: none; }

/* Il riquadro di «Dyelit e un brand…»: nero al 50%, cosi il testo si
   legge e dietro si vede ancora il graffito verde che scorre. */
.d-cornice--velo { background: rgb(0 0 0 / 50%); }

/* Tranne quella attorno al paragrafo, che e piena: sta sopra al
   graffito e gli fa da fondo, se no il testo bianco ci finisce
   sopra e non si legge. */
.d-cornice--piena { background: var(--nero); }

/* ---------- Il graffito non passa sotto alla fascia ----------
   Mentre sale da y 285 a 62 il suo fondo arriva fino a 629 e spuntava
   sotto alla fascia di «I punti di riferimento…». Lo taglio a
   `--taglio` (472, il fondo della fascia nera) con un poligono in
   coordinate dell-elemento: il taglio si sposta insieme al graffito,
   in senso opposto, cosi il bordo resta fermo sulla pagina. Il fondo
   del poligono va da (taglio − partenza) a (taglio − arrivo): stessi
   passi e stessa accelerazione dello spostamento.
   A riposo il graffito finisce a 406: niente da tagliare, per questo
   il taglio sta solo nell-animazione. */
@supports (animation-timeline: scroll()) {
  .scorre.d-graffito { animation-name: d-graffito-entra; }
}

@keyframes d-graffito-entra {
  from {
    translate: calc(var(--dx) * -1px) calc(var(--dy) * -1px);
    clip-path: polygon(
      -10% -10%, 110% -10%,
      110% calc((var(--taglio) - var(--y) + var(--dy)) * 1px),
      -10% calc((var(--taglio) - var(--y) + var(--dy)) * 1px));
  }
  to {
    translate: 0 0;
    clip-path: polygon(
      -10% -10%, 110% -10%,
      110% calc((var(--taglio) - var(--y)) * 1px),
      -10% calc((var(--taglio) - var(--y)) * 1px));
  }
}

/* Le righe bianche piene, non tratteggiate: sono linee di
   divisione, non linee di costruzione. */
.d-riga {
  border: 0;
  border-top: 0.75px solid var(--bianco);
  margin: 0;
  /* la riga sta a meta dell'altezza del suo riquadro */
  align-self: center;
}

/* ---------- Titoli ---------------------------------------- */

/* Anton 57 px, interlinea 95, spaziatura -0,7, bianco.
   Contrasto bianco su nero: 21:1. */
.d-titolo {
  font-family: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  font-size: 57px;
  line-height: 95px;
  letter-spacing: -0.7px;
  font-weight: 400;
  color: var(--bianco);
  margin: 0;
  white-space: nowrap;
}

/* ---------- Testi ----------------------------------------- */

/* Corpo: Courier New 14 px, interlinea 22, bianco. */
.d-corpo {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.7px;
  color: var(--bianco);
  margin: 0;
  white-space: pre-line;
}

.d-corpo--centrato { text-align: center; letter-spacing: normal; }

/* Le didascalie: 9 px, stessa interlinea 22. */
.d-didascalia {
  font-size: 9px;
  line-height: 22px;
  letter-spacing: -0.7px;
  color: var(--bianco);
  margin: 0;
  white-space: pre-line;
}

.d-link {
  font-size: 9px;
  line-height: 22px;
  letter-spacing: -0.7px;
  color: var(--bianco);
  text-align: center;
  margin: 0;
}

.d-link a { color: var(--bianco); text-decoration: underline; }
.d-link a:hover { color: var(--verde); }

/* ---------- Immagini e video ------------------------------ */

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

.d-video video { width: 100%; height: 100%; object-fit: cover; }

/* IL FIORE CHE RUOTA, RITAGLIATO
   Il video e verticale (1080 x 1920) e la rosetta sta in mezzo: dal
   26% al 74% della larghezza e dal 31% al 59% dell'altezza, misurato
   sui fotogrammi. Tutto il resto e fondo nero, e quel nero copriva il
   graffito che gli passa sotto.

   Il riquadro ora e grande quanto la rosetta piu un filo di margine
   (dal 24,3% al 75,7% e dal 30% al 60,2%), e il video ci sta dentro
   ingrandito e spostato in modo che si veda solo quella fetta:
     larghezza  100 / 0,514        = 194,6%
     sinistra   -0,243 x 194,6%    = -47,3%
     alto       -0,30 x 345,9 px   = -103,8 px = -99,8% di 104

   `screen` sul riquadro fa il resto: il nero che resta fra i petali
   diventa trasparente e lascia vedere il graffito. Va sul riquadro e
   non sul video, perche il riquadro fa gruppo a se e il video
   fonderebbe solo con lui, cioe col vuoto.

   Solo da schermo largo: il telefono resta com'era. */
@media (min-width: 900px) {
  .d-video {
    overflow: hidden;
    mix-blend-mode: screen;
  }

  .d-video video {
    position: absolute;
    width: 194.6%;
    max-width: none;
    height: auto;
    left: -47.3%;
    top: -99.8%;
    object-fit: fill;
  }
}

/* ---------- Lo schermo del telefono ------------------------ */

/* Le due schermate scorrono dentro questo riquadro e non ne escono:
   e il vetro del telefono. Senza, la seconda spuntava sotto alla mano
   e restava li sospesa. */
.d-schermo { overflow: hidden; }

.d-schermata {
  position: absolute;
  left: 0;
  top: calc(var(--y-dentro) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  display: block;
}

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

/* ---------- I post che cambiano col mouse sopra ------------- */

/* Sul Readymag questi due stanno sopra a un altro post e, al
   passaggio del mouse, sfumano a zero scoprendolo: e la loro
   animazione `hover`, opacita 100 → 0 in mezzo secondo.
   L-elemento resta li anche a zero, quindi il mouse non lo perde e
   non parte il tremolio entra-esci. */
.d-scopre img { transition: opacity 0.5s ease-in-out; }
.d-scopre:hover img { opacity: 0; }

@media (hover: none) {
  /* col dito lo scambio avviene mentre si tiene premuto */
  .d-scopre:hover img { opacity: 1; }
  .d-scopre:active img { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .d-scopre img { transition-duration: 0.001ms; }
}

/* ---------- La freccia indietro --------------------------- */

.d-indietro { color: var(--bianco); }
.d-indietro:hover { color: var(--verde); }

/* ============================================================
   TELEFONO
   ------------------------------------------------------------
   In colonna spariscono le cornici, le righe e i rettangoli
   neri: sono impaginazione da tela. Restano il video, i testi e
   tutte le immagini, a piena larghezza.
   ============================================================ */

@media (max-width: 899px) {

  /* LO SCHERMO DEL TELEFONO IN COLONNA
     Le due schermate sono `position: absolute` dentro il riquadro
     che fa da vetro. In colonna quel riquadro torna statico, e le
     schermate — non trovando piu un riferimento — si ancorano alla
     tela e finiscono in cima alla pagina, sopra al titolo. Qui
     tornano nel flusso, una sotto l-altra. */
  .d-schermo {
    display: grid;
    gap: 8px;
    height: auto;
    overflow: visible;
  }

  .d-schermata {
    position: static;
    width: auto;
    height: auto;
    display: block;
  }

  .d-schermata img { width: 100%; height: auto; }

  .tela--dyelit { height: auto; overflow: visible; }

  .d-cornice, .d-riga, .d-frecce { display: none; }

  .d-titolo, .d-corpo, .d-didascalia, .d-link, .d-img, .d-video {
    position: static;
    width: auto;
    height: auto;
  }

  .d-titolo {
    font-size: clamp(34px, 11vw, 57px);
    line-height: 1.1;
    white-space: normal;
    margin: 32px 0 16px;
  }

  .d-corpo { font-size: 15px; line-height: 1.7; margin: 12px 0; }
  .d-corpo--centrato { text-align: left; }
  .d-didascalia { font-size: 13px; line-height: 1.6; margin: 12px 0; }
  .d-link { font-size: 14px; text-align: left; margin: 12px 0; }

  .d-img, .d-video {
    aspect-ratio: var(--w) / var(--h);
    margin-bottom: 8px;
  }

  /* La grana in colonna non serve: il fondo e gia nero e le tre
     copie si sovrapporrebbero a caso. */
  .d-grana { display: none; }

}