/* ============================================================
   Exact-fit animated butterfly for the home hero only
   Keeps the previous laptop layout untouched and pins the wing
   animation over the butterfly already printed in the banner.
   ============================================================ */

.hero-card-fullbleed{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Big butterfly position in the source banner artwork.
   Percent values keep it locked while the image/card scales. */
.gg-hero-butterfly-exact{
  position: absolute !important;
  left: 49.45% !important;
  top: 20.8% !important;
  width: 30.3% !important;
  aspect-ratio: 385 / 281 !important;
  pointer-events: none !important;
  z-index: 3 !important;
  transform-origin: 50% 50% !important;
  animation: ggHeroButterflyBreath 4.8s ease-in-out infinite !important;
  will-change: transform !important;
  filter: drop-shadow(0 18px 28px rgba(71, 20, 86, .16));
}

.gg-hero-butterfly-wing{
  position: absolute !important;
  top: 0 !important;
  width: 50% !important;
  height: 100% !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

.gg-hero-butterfly-wing img{
  position: absolute !important;
  top: 0 !important;
  width: 200% !important;
  height: 100% !important;
  object-fit: fill !important;
  max-width: none !important;
  display: block !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.gg-left-wing{
  left: 0 !important;
  transform-origin: 100% 50% !important;
  animation: ggHeroLeftWing 1.05s ease-in-out infinite !important;
}

.gg-left-wing img{ left: 0 !important; }

.gg-right-wing{
  right: 0 !important;
  transform-origin: 0% 50% !important;
  animation: ggHeroRightWing 1.05s ease-in-out infinite !important;
}

.gg-right-wing img{ right: 0 !important; }

@keyframes ggHeroLeftWing{
  0%,100%{ transform: perspective(1100px) rotateY(0deg) translateZ(0); }
  50%{ transform: perspective(1100px) rotateY(29deg) translateZ(3px); }
}

@keyframes ggHeroRightWing{
  0%,100%{ transform: perspective(1100px) rotateY(0deg) translateZ(0); }
  50%{ transform: perspective(1100px) rotateY(-29deg) translateZ(3px); }
}

@keyframes ggHeroButterflyBreath{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-5px,0) scale(1.004); }
}

/* Tablet: same artwork fit, softer wing movement */
@media (max-width: 1024px){
  .gg-hero-butterfly-exact{
    left: 49.4% !important;
    top: 21.1% !important;
    width: 30.6% !important;
  }
}

/* Mobile hero may crop a little differently. These values keep the overlay
   pinned to the printed butterfly instead of drifting over the text. */
@media (max-width: 640px){
  .gg-hero-butterfly-exact{
    left: 48.7% !important;
    top: 21.4% !important;
    width: 31.8% !important;
  }
  .hero-slider-arrow{ z-index: 8 !important; }
  .hero-slider-dots{ z-index: 8 !important; }
}

@media (prefers-reduced-motion: reduce){
  .gg-hero-butterfly-exact,
  .gg-left-wing,
  .gg-right-wing{
    animation: none !important;
  }
}