.scrolly--atlas .scrolly__sticky{
  position: sticky;
  top: 0;
  height: var(--app-vh, 100dvh);
  min-height: 100svh;
  overflow: hidden;
}

.atlas{
  position: relative;
  height: 100%;
}

.atlas__map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.9) contrast(1.05);
}

.atlas__layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(8px) scale(1.01);
  transition: opacity 320ms ease, transform 320ms ease;
  z-index: 2;
  pointer-events: none;
}

.scrolly--atlas .scrolly__scrim{
  background: rgba(0,0,0,0);
  z-index: 3;
  transition: background 320ms ease;
}

.atlas__boxes{
  position:absolute;
  inset:0;
  z-index: 4;
  pointer-events:none;
}
.atlas__box{
  position:absolute;
  width: min(1480px, 42vw);
  opacity:0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms ease;
  color:#635e5e;
  text-shadow: 0 0 20px rgba(0,0,0,0.7);
}
.atlas__boxTitle{
  margin:0 0 6px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.95;
}
.atlas__boxText{
  margin:0;
  font-size: var(--p);
  line-height: 1.45;
  max-width: 52ch;
}

.atlas__box--a{ left: 5vw; top: 14vh; }
.atlas__box--b{ right: 5vw; top: 38vh; }
.atlas__box--c{ left: 7vw; bottom: 16vh; }
.atlas__box--d{ right: 7vw; bottom: 12vh; }

.scrolly--atlas[data-active-step="atlas-a"] .atlas__layer--a,
.scrolly--atlas[data-active-step="atlas-b"] .atlas__layer--b,
.scrolly--atlas[data-active-step="atlas-c"] .atlas__layer--c,
.scrolly--atlas[data-active-step="atlas-d"] .atlas__layer--d{
  opacity:1; transform:none;
}

.scrolly--atlas[data-active-step="atlas-a"] .atlas__box--a,
.scrolly--atlas[data-active-step="atlas-b"] .atlas__box--b,
.scrolly--atlas[data-active-step="atlas-c"] .atlas__box--c,
.scrolly--atlas[data-active-step="atlas-d"] .atlas__box--d{
  opacity:1; transform:none;
}

.scrolly--atlas[data-active-step="atlas-a"] .scrolly__scrim{ background: rgba(0,0,0,0.0); }
.scrolly--atlas[data-active-step="atlas-b"] .scrolly__scrim{ background: rgba(0,0,0,0.08); }
.scrolly--atlas[data-active-step="atlas-c"] .scrolly__scrim{ background: rgba(0,0,0,0.09); }
.scrolly--atlas[data-active-step="atlas-d"] .scrolly__scrim{ background: rgba(0,0,0,0.1); }

@media (max-width: 900px){
  .atlas__box{ width: min(520px, 88vw); }
  .atlas__box--a,.atlas__box--b,.atlas__box--c,.atlas__box--d{ left:16px; right:16px; }
}
@media (max-width: 640px){
  .atlas__box{ max-width: 80vw; font-size: 13px; }
  .atlas__box--a{ top: 26vh; }
  .atlas__box--b{ top: 60vh; }
  .atlas__box--c{ bottom: 62vh; }
  .atlas__box--d{ bottom: 32vh; }
}