@keyframes mirooooBadgeSlideInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-36px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Right-to-Left Badge Entrance */
@keyframes mirooooBadgeSlideInRight {
  0% {
    opacity: 0;
    transform: translate3d(36px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Left-to-Right Subtitle & Modes Staggered Entrance */
@keyframes mirooooSubSlideInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-12px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Right-to-Left Subtitle Staggered Entrance */
@keyframes mirooooSubSlideInRight {
  0% {
    opacity: 0;
    transform: translate3d(12px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Mobile-Specific Refined Travel Keyframes */
@keyframes mirooooBadgeSlideInLeftMobile {
  0% {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes mirooooBadgeSlideInRightMobile {
  0% {
    opacity: 0;
    transform: translate3d(16px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Lightbox Modal Specific Overrides (Dynamic Clamping, Safe Clearances & Fluid Animations) */
.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay {
  max-width: clamp(140px, 32%, 195px);
  gap: 3px;
  pointer-events: none !important;
  z-index: 10 !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-left,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--top-left,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-left,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--top-left {
  top: 18px;
  left: 18px;
  bottom: auto;
  right: auto;
  align-items: flex-start;
  text-align: left;
  animation: mirooooBadgeSlideInLeft 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-left,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--bottom-left,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-left,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--bottom-left {
  bottom: 18px;
  left: 18px;
  top: auto;
  right: auto;
  align-items: flex-start;
  text-align: left;
  animation: mirooooBadgeSlideInLeft 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-right,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--top-right,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-right,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--top-right {
  top: 18px;
  right: 18px;
  bottom: auto;
  left: auto;
  align-items: flex-end;
  text-align: right;
  animation: mirooooBadgeSlideInRight 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-right,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--bottom-right,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-right,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--bottom-right {
  bottom: 18px;
  right: 18px;
  top: auto;
  left: auto;
  align-items: flex-end;
  text-align: right;
  animation: mirooooBadgeSlideInRight 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge__title,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay__title,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge__title,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay__title {
  font-size: clamp(14px, 2.8vw, 17.5px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-weight: 800;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-left .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-left .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--top-left .miroooo-infographic-overlay__sub,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--bottom-left .miroooo-infographic-overlay__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-left .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-left .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--top-left .miroooo-infographic-overlay__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--bottom-left .miroooo-infographic-overlay__sub {
  font-size: clamp(11px, 2vw, 13px);
  line-height: 1.3;
  margin-top: 2px;
  animation: mirooooSubSlideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-right .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-right .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--top-right .miroooo-infographic-overlay__sub,
.miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--bottom-right .miroooo-infographic-overlay__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-right .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-right .miroooo-infographic-badge__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--top-right .miroooo-infographic-overlay__sub,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--bottom-right .miroooo-infographic-overlay__sub {
  font-size: clamp(11px, 2vw, 13px);
  line-height: 1.3;
  margin-top: 2px;
  animation: mirooooSubSlideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-modes,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-modes {
  gap: 4px;
  margin-top: 4px;
  animation: mirooooSubSlideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both !important;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-mode-item,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-mode-item {
  gap: 6px;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-mode-ring,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-mode-ring {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-width: 2px;
}

.miroooo-gallery-lightbox__media-box .miroooo-infographic-mode-text,
.miroooo-gallery-lightbox-media-box .miroooo-infographic-mode-text {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 600;
  line-height: 1.25;
}

/* Mobile Responsiveness (< 768px) */
@media screen and (max-width: 767px) {
  .miroooo-infographic-badge,
  .miroooo-infographic-overlay,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay {
    max-width: clamp(125px, 36vw, 155px) !important;
    gap: 2px !important;
  }
  .miroooo-infographic-badge--top-left,
  .miroooo-infographic-overlay--top-left,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-left,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--top-left,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-left,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--top-left {
    top: 44px !important;
    left: clamp(10px, 3vw, 14px) !important;
    max-width: clamp(125px, 36vw, 155px) !important;
    transform: translate3d(-16px, 0, 0);
  }
  .miroooo-infographic-badge--bottom-left,
  .miroooo-infographic-overlay--bottom-left,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-left,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--bottom-left,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-left,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--bottom-left {
    bottom: clamp(10px, 3vw, 14px) !important;
    left: clamp(10px, 3vw, 14px) !important;
    max-width: clamp(125px, 36vw, 155px) !important;
    transform: translate3d(-16px, 0, 0);
  }
  .miroooo-infographic-badge--top-right,
  .miroooo-infographic-overlay--top-right,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-right,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--top-right,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-right,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--top-right {
    top: 44px !important;
    right: 10px !important;
    max-width: clamp(120px, 34vw, 150px) !important;
    transform: translate3d(16px, 0, 0);
  }
  .miroooo-infographic-badge--bottom-right,
  .miroooo-infographic-overlay--bottom-right,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-right,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay--bottom-right,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-right,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay--bottom-right {
    bottom: clamp(10px, 3vw, 14px) !important;
    right: 10px !important;
    max-width: clamp(120px, 34vw, 150px) !important;
    transform: translate3d(16px, 0, 0);
  }
  .miroooo-infographic-badge__title,
  .miroooo-infographic-overlay__title,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge__title,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay__title,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge__title,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay__title {
    font-size: clamp(12px, 3.4vw, 14px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0.01em !important;
  }
  .miroooo-infographic-badge__sub,
  .miroooo-infographic-overlay__sub,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge__sub,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-overlay__sub,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge__sub,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-overlay__sub {
    font-size: clamp(9.5px, 2.6vw, 11px) !important;
    line-height: 1.25 !important;
    margin-top: 1px !important;
  }
  .miroooo-infographic-modes,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-modes,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-modes {
    gap: 3px !important;
    margin-top: 2px !important;
  }
  .miroooo-infographic-mode-item,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-mode-item,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-mode-item {
    gap: 5px !important;
    line-height: 1 !important;
  }
  .miroooo-infographic-mode-ring,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-mode-ring,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-mode-ring {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    border-width: 1.8px !important;
  }
  .miroooo-infographic-mode-text,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-mode-text,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-mode-text {
    font-size: clamp(10px, 2.8vw, 11.5px) !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  /* Lightbox Mobile Keyframe Overrides */
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-left,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-left,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-left,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-left {
    animation-name: mirooooBadgeSlideInLeftMobile !important;
  }

  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--top-right,
  .miroooo-gallery-lightbox__media-box .miroooo-infographic-badge--bottom-right,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--top-right,
  .miroooo-gallery-lightbox-media-box .miroooo-infographic-badge--bottom-right {
    animation-name: mirooooBadgeSlideInRightMobile !important;
  }
}