/* DH02: materiali dedicati alla sola presentazione Ambiente. */

.stage[data-dh02-code="DH02-K1"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k1-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k1-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K2"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k2-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k2-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K3"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k3-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k3-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K4"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k4-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k4-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K5"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k5-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k5-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K6"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k6-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k6-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K7"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k7-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k7-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K8"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k8-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k8-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K9"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k9-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k9-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K10"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k10-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k10-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K11"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k11-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k11-cassonetto.svg");
}

.stage[data-dh02-code="DH02-K12"] {
  --dh02-presentation-fabric: url("assets/giorno-notte/presentazione-dh02/dh02-k12-telo.svg");
  --dh02-presentation-cassette: url("assets/giorno-notte/presentazione-dh02/dh02-k12-cassonetto.svg");
}

.stage[data-model="giorno-notte"][data-series="dh02"][data-view="ambiente"][data-dh02-code] .daynight-tile {
  position: relative;
  background-image: var(--dh02-presentation-fabric);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  image-rendering: auto;
}

.stage[data-model="giorno-notte"][data-series="dh02"][data-view="ambiente"][data-dh02-code] .daynight-tile:nth-child(even) {
  transform: none;
}

.stage[data-model="giorno-notte"][data-series="dh02"][data-view="ambiente"][data-dh02-code] .daynight-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/giorno-notte/presentazione-dh02/trama-liscia.webp") repeat center / 256px 256px;
  opacity: .035;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
  mask-image: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-model="giorno-notte"][data-series="dh02"][data-view="ambiente"][data-dh02-code] .cassette-highlight {
  background-image: var(--dh02-presentation-cassette);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  filter: none;
}

.stage[data-model="giorno-notte"][data-series="dh02"][data-view="ambiente"][data-dh02-code] .cassette-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/giorno-notte/presentazione-dh02/trama-liscia.webp") repeat center / 256px 256px;
  opacity: .035;
}