/* ============================================================
   site-v25.css — v1.6.1
   Hero image: remove background panel, royal floating image
   ============================================================ */

.hero-media-frame {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  aspect-ratio: 5 / 4 !important;
  position: relative !important;
  padding: 0 !important;
}
.hero-media-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
  filter:
    drop-shadow(0 22px 36px rgba(20,33,61,0.18))
    drop-shadow(0 8px 18px rgba(79,142,220,0.16)) !important;
  transition: transform .6s cubic-bezier(.2,.7,.2,1),
              filter .5s ease !important;
}
.hero-media-frame:hover img {
  transform: translateY(-6px) scale(1.02) !important;
  filter:
    drop-shadow(0 30px 48px rgba(20,33,61,0.25))
    drop-shadow(0 14px 28px rgba(79,142,220,0.28))
    saturate(1.05) !important;
}

/* Royal halo behind the image */
.hero-media-frame::before {
  content: '';
  position: absolute;
  top: 8%; left: 6%; right: 6%; bottom: 8%;
  z-index: 0;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(102,179,255,0.40) 0%, rgba(79,142,220,0.18) 35%, transparent 70%),
    radial-gradient(50% 50% at 75% 75%, rgba(207,229,255,0.55) 0%, transparent 70%);
  filter: blur(40px);
  border-radius: 50%;
  pointer-events: none;
  animation: hero-halo 9s ease-in-out infinite;
}
@keyframes hero-halo {
  0%, 100% { transform: scale(1) translate(0,0); }
  50%      { transform: scale(1.05) translate(6px,-6px); }
}

/* Subtle gold + blue accent sparkles */
.hero-media-frame::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background:
    radial-gradient(2px 2px at 14% 22%, rgba(79,142,220,0.55), transparent 60%),
    radial-gradient(2px 2px at 86% 18%, rgba(102,179,255,0.65), transparent 60%),
    radial-gradient(3px 3px at 78% 86%, rgba(79,142,220,0.50), transparent 60%),
    radial-gradient(2px 2px at 18% 82%, rgba(207,229,255,0.70), transparent 60%);
  pointer-events: none;
  animation: hero-sparkle 4s ease-in-out infinite;
}
@keyframes hero-sparkle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Float badge stays */
.hero-media-badge {
  z-index: 4 !important;
  left: 16px !important;
  bottom: 16px !important;
  border: 1px solid rgba(79,142,220,0.18) !important;
  box-shadow: 0 14px 32px -10px rgba(20,33,61,0.20),
              0 6px 14px -4px rgba(79,142,220,0.22) !important;
}

@media (max-width: 880px) {
  .hero-media-frame { aspect-ratio: 4 / 3 !important; max-width: 520px !important; margin: 0 auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-frame::before, .hero-media-frame::after, .hero-media-frame img { animation: none !important; transition: none !important; }
}