/* Órbita de fotos — port vanilla do ImageCarouselHero (Aceternity)
 *
 * Escala o elemento inteiro com --image-orbit-scale (padrão 1.35).
 * Ex.: style="--image-orbit-scale: 1.6" no .image-orbit ou .sobre-media--orbit
 */

.sobre-media--orbit,
.image-orbit {
  --image-orbit-scale: 1.35;
}

.image-orbit {
  --orbit-base-w: 22rem;
  --orbit-base-h: 22rem;
  --orbit-card-w: 7.75rem;
  --orbit-card-h: 9.75rem;
  position: relative;
  width: calc(var(--orbit-base-w) * var(--image-orbit-scale));
  max-width: min(100%, calc(34rem * var(--image-orbit-scale)));
  height: calc(var(--orbit-base-h) * var(--image-orbit-scale));
  margin-inline: auto;
  padding-inline: calc(0.75rem * var(--image-orbit-scale));
  box-sizing: border-box;
  perspective: 1000px;
  isolation: isolate;
  overflow: visible;
}

.image-orbit__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  overflow: visible;
}

.image-orbit__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-card-w) * var(--image-orbit-scale));
  height: calc(var(--orbit-card-h) * var(--image-orbit-scale));
  margin: 0;
  border-radius: calc(1rem * var(--image-orbit-scale));
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 12px 32px rgba(30, 43, 40, 0.16);
  border: 3px solid var(--color-white, #fff);
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

.image-orbit__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  user-select: none;
}

.image-orbit__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .image-orbit__card:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.45) inset,
      0 18px 40px rgba(30, 43, 40, 0.22);
    z-index: 3;
  }

  .image-orbit__card:hover::after {
    opacity: 1;
  }
}

.sobre-media--orbit {
  width: 100%;
  max-width: calc(36rem * var(--image-orbit-scale));
  margin-inline: auto;
  overflow: visible;
}

/* Stagger: só opacity — transform no pai quebra órbita 3D dos cards */
.reveal-stagger > .sobre-media--orbit {
  opacity: 0;
  transform: none !important;
  animation: none !important;
}

.reveal-stagger.is-visible > .sobre-media--orbit {
  animation: imageOrbitFadeIn var(--reveal-duration, 0.55s) var(--ease-out-soft, ease-out) both !important;
  transform: none !important;
}

@keyframes imageOrbitFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Pais não podem cortar cards que saem do box da órbita */
#sobre:has(.image-orbit),
#sobre:has(.image-orbit) > .container,
#sobre:has(.image-orbit) .sobre-grid {
  overflow: visible;
}

@media (max-width: 768px) {
  .sobre-media--orbit,
  .image-orbit {
    --image-orbit-scale: 1.15;
  }

  .image-orbit {
    --orbit-base-w: 17.5rem;
    --orbit-base-h: 17.5rem;
    --orbit-card-w: 5.75rem;
    --orbit-card-h: 7.25rem;
    width: min(100%, calc(var(--orbit-base-w) * var(--image-orbit-scale)));
    max-width: 100%;
    height: calc(var(--orbit-base-h) * var(--image-orbit-scale));
    padding-inline: calc(0.5rem * var(--image-orbit-scale));
    /* Cards giram dentro do box — evita overflow-x que “samba” a viewport */
    overflow: hidden;
  }

  .sobre-media--orbit {
    max-width: 100%;
    width: min(100%, calc(19rem * var(--image-orbit-scale)));
    overflow: hidden;
  }

  #sobre:has(.image-orbit) {
    overflow-x: clip;
  }

  #sobre:has(.image-orbit) > .container {
    overflow-x: clip;
  }
}

@media (min-width: 961px) {
  .sobre-media--orbit,
  .image-orbit {
    --image-orbit-scale: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > .sobre-media--orbit,
  .reveal-stagger.is-visible > .sobre-media--orbit {
    opacity: 1;
    animation: none !important;
  }
}