/*
 * Shared cream mat frame — fixed inset from edges (px, not %).
 * Used on hero, cakes carousel, gelato cart, visit map, social gallery.
 * Excludes: About gallery.
 */

.media-frame {
  box-sizing: border-box;
  width: 100%;
  padding: var(--image-frame-inset);
  background: var(--color-cream);
}

.media-frame__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-teal);
}

.media-frame__inner > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Shared crossfade carousels (hero + showcase).
 * Ken Burns is delayed until the fade finishes so transform and opacity do not fight.
 */
.hero__slides,
.cakes-carousel__slides,
.gelato-cart-carousel__slides,
.social-gallery__slides {
  isolation: isolate;
}

.hero__media .hero__slide,
.cakes-carousel__slide,
.gelato-cart-carousel__slide,
.social-gallery__slide {
  z-index: 0;
  opacity: 0;
  transform: scale(1) translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: none;
  transition: opacity var(--carousel-crossfade-duration) var(--carousel-crossfade-easing);
}

.hero__media .hero__slide.is-active,
.cakes-carousel__slide.is-active,
.gelato-cart-carousel__slide.is-active {
  opacity: 1;
  z-index: 1;
  animation: carousel-ken-burns var(--carousel-ken-burns-duration)
    var(--carousel-ken-burns-easing) var(--carousel-crossfade-duration) infinite alternate;
}

.social-gallery__slide.is-active {
  opacity: 1;
  z-index: 1;
}

@keyframes carousel-ken-burns {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
}

@media (min-width: 768px) {
  .hero__media .hero__slide {
    image-rendering: auto;
  }

  .hero__media .hero__slide.is-active,
  .cakes-carousel__slide.is-active,
  .gelato-cart-carousel__slide.is-active {
    animation-name: carousel-ken-burns-desktop;
    animation-duration: var(--carousel-ken-burns-duration-desktop);
    animation-timing-function: var(--carousel-ken-burns-easing);
    animation-delay: var(--carousel-crossfade-duration);
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes carousel-ken-burns-desktop {
    from {
      transform: scale(1) translate3d(0, 0, 0);
    }

    to {
      transform: scale(1.02) translate3d(0, 0, 0);
    }
  }
}

/*
 * Section showcase carousels — fill frame; safe focal (object-position overrides in section CSS).
 */
.cakes-carousel__slide,
.gelato-cart-carousel__slide {
  object-fit: var(--showcase-image-fit);
  object-position: center clamp(
    var(--showcase-focal-y-min),
    var(--showcase-focal-y),
    var(--showcase-focal-y-max)
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero__media .hero__slide,
  .cakes-carousel__slide,
  .gelato-cart-carousel__slide,
  .social-gallery__slide {
    transition-duration: 0.01ms;
  }

  .hero__media .hero__slide.is-active,
  .cakes-carousel__slide.is-active,
  .gelato-cart-carousel__slide.is-active {
    animation: none;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

/* Fade carousels — click image area to show next slide */
.carousel-viewport--clickable {
  cursor: pointer;
}