/* Shared Brazilian scene atlas component. Each atlas is a 2 × 2 grid; --scene-aspect is each scene’s width / height.
   Markup: <span class="br-scene" data-scene="confeitaria" aria-hidden="true"><span class="br-scene-image"></span></span>
   Give the wrapper a definite width and height (or inset: 0 in a sized parent).
   The inner layer keeps the scene ratio so scenes are cropped, never stretched. Transform
   that inner layer, not the background position, to keep adjacent sectors out. */
.br-scene {
  --scene-atlas: url('assets/cenarios-brasil-a-v06.png');
  --scene-aspect: 1.5;
  --scene-x: 0%;
  --scene-y: 0%;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background: #cdd5de;
  isolation: isolate;
}
.br-scene-image {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-image: var(--scene-atlas);
  background-size: 200% 200%;
  background-position: var(--scene-x) var(--scene-y);
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) scale(1.018);
  transform-origin: center;
}
@supports (width: 1cqw) {
  .br-scene-image {
    width: max(100cqw, calc(100cqh * var(--scene-aspect)));
    height: max(calc(100cqw / var(--scene-aspect)), 100cqh);
  }
}
.br-scene[data-scene="confeitaria"], .br-scene[data-scene="alimentacao"] { --scene-x: 0%; --scene-y: 0%; }
.br-scene[data-scene="ensino"], .br-scene[data-scene="educacao"] { --scene-x: 100%; --scene-y: 0%; }
.br-scene[data-scene="lavanderia"], .br-scene[data-scene="servicos"] { --scene-x: 0%; --scene-y: 100%; }
.br-scene[data-scene="varejo"] { --scene-x: 100%; --scene-y: 100%; }
.br-scene[data-scene="beleza"], .br-scene[data-scene="pets"],
.br-scene[data-scene="academia"], .br-scene[data-scene="fitness"],
.br-scene[data-scene="tecnologia"] { --scene-atlas: url('assets/cenarios-brasil-b-v06.png'); }
.br-scene[data-scene="beleza"] { --scene-x: 0%; --scene-y: 0%; }
.br-scene[data-scene="pets"] { --scene-x: 100%; --scene-y: 0%; }
.br-scene[data-scene="academia"], .br-scene[data-scene="fitness"] { --scene-x: 0%; --scene-y: 100%; }
.br-scene[data-scene="tecnologia"] { --scene-x: 100%; --scene-y: 100%; }
@media (prefers-reduced-motion: reduce) {
  .br-scene, .br-scene-image { animation: none !important; transition: none !important; }
  .br-scene-image { transform: translate(-50%, -50%) scale(1.018) !important; }
}

/* V06 revision: dedicated salon, home-office and appetizing food scenes. */
.br-scene[data-scene="beleza"],.br-scene[data-scene="homeoffice"],.br-scene[data-scene="home-office"],.br-scene[data-scene="confeitaria"],.br-scene[data-scene="alimentacao"]{--scene-atlas:url('assets/cenarios-brasil-c-v06.png')}
.br-scene[data-scene="beleza"]{--scene-x:0%;--scene-y:0%}
.br-scene[data-scene="homeoffice"],.br-scene[data-scene="home-office"]{--scene-x:100%;--scene-y:0%}
.br-scene[data-scene="confeitaria"],.br-scene[data-scene="alimentacao"]{--scene-x:0%;--scene-y:100%}