/* Scirocco hero slider only. Safe to keep separate from scirocco.css. */
.hero.hero-slider {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0d1f27;
}

/* Moving photo layer. */
.hero-slider .hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-slider .hero-slide {
  position: absolute;
  inset: -7%;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-position, 50% 50%);
  transform: scale(var(--kb-scale, 1.16)) translate3d(var(--kb-x, 0), var(--kb-y, 0), 0);
  transition: opacity 900ms ease-in-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* URLs are resolved relative to this CSS file: assets/css/ -> assets/images/. */
.hero-slider .hero-slide:nth-child(1) {
  background-image: url('../images/scirocco-slider/E49A9656.jpg');
  --kb-x: -1.8%; --kb-y: .8%; --kb-scale: 1.16; --hero-position: 52% 52%;
}
.hero-slider .hero-slide:nth-child(2) {
  background-image: url('../images/scirocco-slider/E49A9643.jpg');
  --kb-x: 1.8%; --kb-y: -.8%; --kb-scale: 1.17; --hero-position: 50% 52%;
}
.hero-slider .hero-slide:nth-child(3) {
  background-image: url('../images/scirocco-slider/E49A9647.jpg');
  --kb-x: -1.4%; --kb-y: -1.2%; --kb-scale: 1.18; --hero-position: 50% 52%;
}
.hero-slider .hero-slide:nth-child(4) {
  background-image: url('../images/scirocco-slider/E49A9648.jpg');
  --kb-x: 1.6%; --kb-y: .9%; --kb-scale: 1.17; --hero-position: 52% 50%;
}
.hero-slider .hero-slide:nth-child(5) {
  background-image: url('../images/scirocco-slider/E49A9649.jpg');
  --kb-x: -1.7%; --kb-y: .7%; --kb-scale: 1.16; --hero-position: 50% 50%;
}
.hero-slider .hero-slide:nth-child(6) {
  background-image: url('../images/scirocco-slider/E49A9642.jpg');
  --kb-x: 1.5%; --kb-y: -.9%; --kb-scale: 1.18; --hero-position: 48% 52%;
}

.hero-slider .hero-slide.is-active {
  opacity: 1;
  z-index: 2;
  animation: sciroccoKenBurns 4.7s cubic-bezier(.18,.62,.22,1) both;
}

/* Keep the site's existing dark/readability overlay above the photos. */
.hero.hero-slider::before {
  z-index: 3;
  pointer-events: none;
}

.hero.hero-slider > .container {
  position: relative;
  z-index: 4;
}

.hero.hero-slider > .hero-badge {
  z-index: 4;
}

@keyframes sciroccoKenBurns {
  0% {
    transform: scale(1.01) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(var(--kb-scale, 1.16)) translate3d(var(--kb-x, 0), var(--kb-y, 0), 0);
  }
}

@media (max-width: 900px) {
  .hero-slider .hero-slide { inset: -9%; }
}

@media (max-width: 680px) {
  .hero-slider .hero-slide { inset: -11%; }
}
