/* DH01, DH07, DH08: materiali lisci per la sola vista Ambiente. */

.stage[data-gn-presentation-code="DH01-2812"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2812-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2812-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2815"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2815-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2815-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2816"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2816-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2816-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2817A"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2817a-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2817a-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2817"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2817-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2817-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2819a"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2819a-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2819a-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2819"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2819-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2819-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2820"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2820-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2820-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2821"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2821-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2821-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2822"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2822-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2822-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-2826"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-2826-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-2826-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-5816"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-5816-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-5816-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-5819"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-5819-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-5819-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-5820"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-5820-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-5820-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-5821"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-5821-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-5821-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH01-D613"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh01/dh01-d613-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh01/dh01-d613-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, #000 0 31.25%, transparent 31.25% 68.75%, #000 68.75% 100%);
}

.stage[data-gn-presentation-code="DH07-1"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh07/dh07-1-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh07/dh07-1-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH07-2"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh07/dh07-2-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh07/dh07-2-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH07-3"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh07/dh07-3-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh07/dh07-3-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH07-4"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh07/dh07-4-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh07/dh07-4-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH07-5"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh07/dh07-5-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh07/dh07-5-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH07-6"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh07/dh07-6-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh07/dh07-6-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH08-1"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh08/dh08-1-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh08/dh08-1-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH08-2"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh08/dh08-2-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh08/dh08-2-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH08-3"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh08/dh08-3-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh08/dh08-3-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

.stage[data-gn-presentation-code="DH08-4"] {
  --gn-presentation-fabric: url("assets/giorno-notte/presentazione-dh08/dh08-4-telo.svg");
  --gn-presentation-cassette: url("assets/giorno-notte/presentazione-dh08/dh08-4-cassonetto.svg");
  --gn-presentation-weave-mask: linear-gradient(to bottom, transparent 0 21.875%, #000 21.875% 78.125%, transparent 78.125% 100%);
}

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

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

.stage[data-model="giorno-notte"][data-view="ambiente"][data-gn-presentation-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: var(--gn-presentation-weave-mask);
  mask-image: var(--gn-presentation-weave-mask);
}

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

.stage[data-model="giorno-notte"][data-view="ambiente"][data-gn-presentation-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;
}