/* Extend the original Croatian map into an engraved landscape across the catalogue header. */
#atlas-catalog .results-catalog__heading {
  background: radial-gradient(ellipse 56% 130% at 62% 100%, #163f32, transparent 90%), #02231b;
}
#atlas-catalog .results-catalog__heading::before {
  inset: 0 0 auto auto; height: 100%; width: auto; aspect-ratio: 770 / 572;
  background: var(--atlas-art) right center / auto 100% no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 53%);
  z-index: -1;
}
#atlas-catalog .results-catalog__heading::after {
  content: ""; position: absolute; pointer-events: none; z-index: -2;
  inset: 0 8% 0 25%;
  background: url("/assets/eko-atlas-zones-20261104/reljef-9f56de8c516d.svg") center / 100% 100% no-repeat;
  mask-image: linear-gradient(90deg,transparent 1%,#000 25% 79%,transparent 99%);
}
@media (min-width: 651px) and (max-width: 960px) {
  #atlas-catalog .results-catalog__heading::after { inset-inline: 25% 10%; background-size: cover; opacity: .8; }
}
@media (max-width: 650px) {
  #atlas-catalog .results-catalog__heading { background: #02231b; }
  #atlas-catalog .results-catalog__heading::before {
    height: 164px; width: 206px; aspect-ratio: auto;
    background: linear-gradient(to bottom,transparent 115px,#02231b 160px), var(--atlas-art) right top / auto 152px no-repeat;
    mask-image: linear-gradient(90deg,transparent,#000 47%);
  }
  #atlas-catalog .results-catalog__heading::after {
    inset: 2px 15% auto -8%; height: 140px; opacity: .68;
    background-size: auto 126%; background-position: 38% center;
    mask-image: linear-gradient(0deg,transparent,#000 34%);
  }
}
@media (forced-colors: active), print {
  #atlas-catalog .results-catalog__heading::after { display: none; }
}

/* Keep the original Atlas value in the layout and accessibility tree throughout the roll. */
:is(.atlas-stats, #catalogResultCount, #mobileResultCount, #mappedCount, #regionalCount, #unmappedCount, .source-registry__metrics)
  :is(span.atlas-number-roll, .atlas-number-roll span) {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  margin: 0; padding: 0; border: 0; min-height: 0; gap: 0;
}
span.atlas-number-roll { position: relative; display: inline-block; }
span.atlas-number-roll__value { display: inline; }
span.atlas-number-roll__faces { display: none; }

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .atlas-number-roll__value { opacity: 0; }
  span.atlas-number-roll__faces {
    position: absolute; inset: 0; display: flex; justify-content: center; align-items: stretch;
    pointer-events: none; user-select: none; white-space: nowrap;
  }
  .atlas-number-roll__faces > span { position: relative; display: block; overflow: hidden; }
  .atlas-number-roll__faces > span::before,
  .atlas-number-roll__faces > span::after {
    display: block; animation-duration: 560ms;
    animation-timing-function: cubic-bezier(.22,.68,.25,1);
    animation-fill-mode: both; animation-delay: var(--atlas-roll-delay, 0ms);
  }
  .atlas-number-roll__faces > span::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(currentColor,currentColor) center / 60% .08em no-repeat;
    animation-name: atlas-digit-out;
  }
  .atlas-number-roll__faces > span::after { content: attr(data-digit); animation-name: atlas-digit-in; }
  .atlas-number-roll__faces > span:nth-child(2) { --atlas-roll-delay: 65ms; }
  .atlas-number-roll__faces > span:nth-child(n+3) { --atlas-roll-delay: 115ms; }
  @keyframes atlas-digit-out {
    from { transform: translateY(0) rotateX(0); }
    65%, to { transform: translateY(-110%) rotateX(70deg); }
  }
  @keyframes atlas-digit-in {
    from { transform: translateY(110%) rotateX(-70deg); }
    to { transform: translateY(0) rotateX(0); }
  }
}