/* JAA Gradients — layout + still posters (shown before the animation starts, and as the fallback). */
.jaa-gradient,
[data-jaa-gradient] {
  position: relative;
  isolation: isolate;
  background-color: #F4F2F2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.jaa-gradient__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.jaa-gradient--live > .jaa-gradient__canvas { opacity: 1; }

.jaa-gradient-01,
[data-jaa-gradient="01"],
[data-jaa-gradient="1"] {
  background-color: #6B584C;
  background-image: url("posters/jaa-gradient-01.jpg");
}
.jaa-gradient-02,
[data-jaa-gradient="02"],
[data-jaa-gradient="2"] {
  background-color: #DDE1C7;
  background-image: url("posters/jaa-gradient-02.jpg");
}
.jaa-gradient-03,
[data-jaa-gradient="03"],
[data-jaa-gradient="3"] {
  background-color: #396E72;
  background-image: url("posters/jaa-gradient-03.jpg");
}
.jaa-gradient-04,
[data-jaa-gradient="04"],
[data-jaa-gradient="4"] {
  background-color: #D6D2CE;
  background-image: url("posters/jaa-gradient-04.jpg");
}
.jaa-gradient-05,
[data-jaa-gradient="05"],
[data-jaa-gradient="5"] {
  background-color: #B5AC72;
  background-image: url("posters/jaa-gradient-05.jpg");
}
.jaa-gradient-06,
[data-jaa-gradient="06"],
[data-jaa-gradient="6"] {
  background-color: #B39D93;
  background-image: url("posters/jaa-gradient-06.jpg");
}