/* ==========================================================================
   IIFA - smooth hero carousel
   Scoped to #myCarousel (the homepage hero) so no other carousel changes.

   Why this exists
     Bootstrap 3 slides by animating `left`, which is a layout property: every
     frame triggers layout -> paint -> composite on the main thread, so the
     motion stutters whenever anything else is running. This replaces it with a
     crossfade on `opacity`, which the compositor can animate on the GPU
     without touching layout at all.
   ========================================================================== */

/* Stop Bootstrap's left-based slide. */
#myCarousel .carousel-inner > .item {
  left: 0 !important;
  right: 0 !important;
  -webkit-transition: opacity 1.1s cubic-bezier(.45, 0, .18, 1);
          transition: opacity 1.1s cubic-bezier(.45, 0, .18, 1);
  -webkit-transform: none !important;
          transform: none !important;
  opacity: 0;
  /* Promote to its own layer so the fade never repaints the page behind it. */
  will-change: opacity;
  backface-visibility: hidden;
}

#myCarousel .carousel-inner > .item.active { opacity: 1; }

/* During a transition Bootstrap marks the outgoing slide .active.left/.right
   and the incoming one .next.left / .prev.right. Fade them instead of moving. */
#myCarousel .carousel-inner > .item.active.left,
#myCarousel .carousel-inner > .item.active.right {
  left: 0 !important;
  opacity: 0;
  z-index: 1;
}

#myCarousel .carousel-inner > .item.next.left,
#myCarousel .carousel-inner > .item.prev.right {
  opacity: 1;
  z-index: 2;
}

/* Both slides are visible at once mid-fade, so they must stack rather than
   sit side by side. The active one keeps its place in flow to preserve the
   container height; the rest are layered on top of it. */
#myCarousel .carousel-inner > .item.next,
#myCarousel .carousel-inner > .item.prev {
  position: absolute;
  top: 0;
  width: 100%;
}

#myCarousel .carousel-control { z-index: 10; }

/* --------------------------------------------------------------------------
   Slow drift on the visible slide. Runs on the compositor (transform only),
   and gives the crossfade something to resolve into so the cut reads as
   motion rather than a dissolve between two still frames.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Hero sizing - half the viewport.

   The slides are ~2.95:1 banners, so on a phone their natural height was only
   ~200px (30% of the screen). Pinning the stage to 50vh and letting the image
   cover it gives the hero real presence. Cover crops the sides rather than
   letterboxing; these banners are centre-composed, so the subject survives.
   -------------------------------------------------------------------------- */

/* Phones only. Desktop keeps the slide height the artwork gives it, which is
   what it always had - the 50vh stage was a fix for phones, where these ~2.95:1
   banners collapsed to about 30% of the screen. */
@media (max-width: 767px) {
  #myCarousel .carousel-inner,
  #myCarousel .carousel-inner > .item,
  #myCarousel .carousel-inner > .item > a {
    height: clamp(230px, 50vh, 560px);
  }

  #myCarousel .carousel-inner > .item > img,
  #myCarousel .carousel-inner > .item > a > img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

#myCarousel .carousel-inner > .item > img,
#myCarousel .carousel-inner > .item > a > img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transform: scale(1.005);
          transform: scale(1.005);
  transition: transform 7s linear;
  will-change: transform;
}

#myCarousel .carousel-inner > .item.active > img,
#myCarousel .carousel-inner > .item.active > a > img {
  -webkit-transform: scale(1.045);
          transform: scale(1.045);
}

/* The hero is the largest element on the page; clip the drift so the zoom
   never nudges the surrounding layout. */
#myCarousel .carousel-inner { overflow: hidden; }

/* --------------------------------------------------------------------------
   Controls and indicators - lighter, less dated
   -------------------------------------------------------------------------- */

#myCarousel .carousel-control {
  background-image: none !important;
  background: transparent !important;
  width: 8%;
  opacity: 0;
  transition: opacity .3s ease;
  text-shadow: none;
}

#myCarousel:hover .carousel-control { opacity: .85; }
#myCarousel .carousel-control:hover { opacity: 1; }

#myCarousel .carousel-control .glyphicon,
#myCarousel .carousel-control .fa,
#myCarousel .carousel-control span[class*="icon"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 18px;
  transition: background-color .2s ease, transform .2s ease;
}

#myCarousel .carousel-control:hover .glyphicon,
#myCarousel .carousel-control:hover .fa {
  background: rgba(0, 0, 0, .6);
  transform: scale(1.06);
}

#myCarousel .carousel-indicators li {
  width: 9px;
  height: 9px;
  margin: 0 4px;
  background: rgba(255, 255, 255, .45);
  border: 0;
  transition: width .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease;
}

#myCarousel .carousel-indicators li.active {
  width: 26px;
  height: 9px;
  border-radius: 5px;
  background: #ff7a2f;
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #myCarousel .carousel-inner > .item {
    transition-duration: .01ms !important;
  }
  #myCarousel .carousel-inner > .item > img,
  #myCarousel .carousel-inner > .item > a > img {
    transition: none !important;
    transform: none !important;
  }
}