/**
 * ============================================================================
 * Premium Diwali Promotional Floating Hanger
 * King Group Hospitality (kinggrouphospitality.com)
 * ============================================================================
 * 
 * - Positioned on the TOP RIGHT corner below the main navigation menu bar.
 * - Dynamic height alignment for full responsiveness on mobile, tablet & desktop.
 * - Continuous warm golden illumination aura following the artwork contour.
 * - Festive glowing light bulbs, organic flickering diya flames & engaging bling sparkles.
 * - Sized for comfortable readability of "Diwali is for everyone!" across all screen sizes.
 */

:root {
  /* Dimensions & Positioning (Desktop > 1200px) */
  --diwali-width: 400px;
  --diwali-top: 0px;  /* Clearance below the header menu bar */
  --diwali-right: max(20px, calc((100vw - 1170px) / 2 + -35px));
  --diwali-left: auto;
  --diwali-transform: none;
  --diwali-z-index: 995; /* Floats over banner, respects sticky header & modals */

  /* Hanging, Swinging & Floating Animation Settings */
  --diwali-swing-angle: 2.2deg;
  --diwali-float-dist: 5px;
  --diwali-swing-speed: 5.2s;
  --diwali-float-speed: 4.2s;

  /* Golden Lighting, Bling & Continuous Glow Settings */
  --diwali-glow-speed: 3.2s;
  --diwali-glow-color: #ffc44c;
  --diwali-hover-scale: 1.025;

  /* Diya Flame Flicker Settings */
  --diwali-flicker-speed: 1.8s;
}

/* Floating Suspension Wrapper */
.diwali-hanger-wrapper {
  position: absolute;
  top: var(--diwali-top);
  right: var(--diwali-right);
  left: var(--diwali-left);
  transform: var(--diwali-transform);
  z-index: var(--diwali-z-index);
  width: var(--diwali-width);
  max-width: calc(100vw - 20px);
  aspect-ratio: 1024 / 682;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none; /* Allows clicks outside artwork to pass straight through */
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

/* Accessible Interactive Link (Pointer events active only on clickable hanger) */
.diwali-hanger__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.diwali-hanger__link:focus-visible {
  outline: 2px dashed #ecc971;
  outline-offset: 6px;
  border-radius: 20px;
}

/* Floating Animation Container */
.diwali-hanger__float {
  position: relative;
  width: 100%;
  height: 100%;
  animation: diwaliFloat var(--diwali-float-speed) ease-in-out infinite;
  will-change: transform;
}

/* Gentle Pendulum Swing: Anchored physically at top suspension rope points */
.diwali-hanger__swing {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 0%;
  animation: diwaliSwing var(--diwali-swing-speed) ease-in-out infinite;
  will-change: transform;
}

/* Main Transparent PNG Image with Continuous Golden Silhouette Aura */
.diwali-hanger__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  /* Continuous gentle golden illumination along exact contour (no rectangular box) */
  filter: drop-shadow(0 0 8px rgba(255, 196, 50, 0.7))
          drop-shadow(0 0 20px rgba(255, 135, 0, 0.35));
  animation: diwaliContinuousGlow var(--diwali-glow-speed) ease-in-out infinite alternate;
  will-change: filter;
}

/* SVG Overlay for Golden Border Light Bulbs & Bling Stars */
.diwali-hanger__lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  background: transparent !important;
}

/* Group A bulbs gentle pulsing */
.diwali-bulbs--a {
  animation: diwaliBulbsPulseA var(--diwali-glow-speed) ease-in-out infinite alternate;
}

/* Group B bulbs alternating shimmer */
.diwali-bulbs--b {
  animation: diwaliBulbsPulseB calc(var(--diwali-glow-speed) * 1.15) ease-in-out infinite alternate;
  animation-delay: -1.2s;
}

/* Engaging Bling / Sparkle Star Twinkle Animation */
.diwali-bling {
  transform-box: fill-box;
  transform-origin: center;
  animation: diwaliBlingTwinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}

.diwali-bling--1 { animation-delay: 0s; }
.diwali-bling--2 { animation-delay: 1.1s; }
.diwali-bling--3 { animation-delay: 2.2s; }
.diwali-bling--4 { animation-delay: 1.6s; }
.diwali-bling--5 { animation-delay: 0.7s; }
.diwali-bling--6 { animation-delay: 2.7s; }

/* Realistic Diya Flame Glow Elements */
.diwali-flame {
  position: absolute;
  border-radius: 50% 50% 35% 35%;
  background: radial-gradient(ellipse at 50% 65%, 
              rgba(255, 255, 255, 0.95) 0%, 
              rgba(255, 235, 130, 0.85) 30%, 
              rgba(255, 140, 20, 0.55) 60%, 
              rgba(255, 80, 0, 0.15) 85%, 
              transparent 100%);
  pointer-events: none;
  transform-origin: 50% 85%;
  will-change: transform, opacity;
}

/* Left Diya Flame */
.diwali-flame--left {
  left: 14.5%;
  top: 48.5%;
  width: 3.2%;
  height: 8.5%;
  animation: diwaliFlickerLeft var(--diwali-flicker-speed) ease-in-out infinite;
}

/* Right Diya Flame */
.diwali-flame--right {
  left: 82.1%;
  top: 48.7%;
  width: 3.2%;
  height: 8.5%;
  animation: diwaliFlickerRight calc(var(--diwali-flicker-speed) * 1.25) ease-in-out infinite;
  animation-delay: -0.6s;
}

/* Top Title 'i' Diya Flame */
.diwali-flame--top {
  left: 30.1%;
  top: 25.8%;
  width: 2.1%;
  height: 5.6%;
  animation: diwaliFlickerTop calc(var(--diwali-flicker-speed) * 0.9) ease-in-out infinite;
  animation-delay: -0.3s;
}

/* Desktop Hover Interaction: Enhanced Glow & Subtle Scale */
@media (hover: hover) and (pointer: fine) {
  .diwali-hanger__link:hover {
    transform: scale(var(--diwali-hover-scale));
  }
  .diwali-hanger__link:hover .diwali-hanger__img {
    filter: drop-shadow(0 0 14px rgba(255, 220, 70, 0.95))
            drop-shadow(0 0 28px rgba(255, 150, 0, 0.65));
  }
}

/* Hide when mobile menu, search modal, or popup is open */
body.mobile-menu-visible .diwali-hanger-wrapper,
body.modal-open .diwali-hanger-wrapper,
#mobile-menu:not([style*="display: none"]) ~ .diwali-hanger-wrapper,
.open-search-form ~ .diwali-hanger-wrapper,
.diwali-hanger-wrapper[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* ============================================================================
 * Responsive Breakpoints (Carefully scaled for maximum readability on all devices)
 * ============================================================================ */

/* Laptop / Compact Desktops (992px to 1199px) */
@media (max-width: 1199px) {
  :root {
    --diwali-width: 350px;
    --diwali-right: max(15px, calc((100vw - 970px) / 2 + 10px));
    --diwali-left: auto;
    --diwali-transform: none;
    --diwali-swing-angle: 1.8deg;
    --diwali-float-dist: 4px;
  }
}

/* Tablets (768px to 991px) */
@media (max-width: 991px) {
  :root {
    --diwali-width: 330px;
    --diwali-right: auto;
    --diwali-left: 50%;
    --diwali-transform: translateX(-50%);
    --diwali-swing-angle: 1.5deg;
    --diwali-float-dist: 4px;
  }
}

/* Standard Mobile Screens (480px to 767px) */
@media (max-width: 767px) {
  :root {
    --diwali-width: 290px;
    --diwali-right: auto;
    --diwali-left: 50%;
    --diwali-transform: translateX(-50%);
    --diwali-swing-angle: 1.3deg;
    --diwali-float-dist: 3px;
  }
}

/* Compact Mobile Phones (up to 479px) */
@media (max-width: 479px) {
  :root {
    --diwali-width: min(285px, 86vw);
    --diwali-right: auto;
    --diwali-left: 50%;
    --diwali-transform: translateX(-50%);
    --diwali-swing-angle: 1.1deg;
  }
}

/* Accessibility: Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .diwali-hanger__float,
  .diwali-hanger__swing,
  .diwali-hanger__img,
  .diwali-bulbs,
  .diwali-bling,
  .diwali-flame {
    animation: none !important;
    transition: none !important;
  }
  .diwali-hanger__link:hover {
    transform: none !important;
  }
}

/* Print Styles */
@media print {
  .diwali-hanger-wrapper {
    display: none !important;
  }
}

/* ============================================================================
 * Keyframe Animations
 * ============================================================================ */

/* Continuous Golden Lighting Glow along the hanger contour */
@keyframes diwaliContinuousGlow {
  0% {
    filter: drop-shadow(0 0 8px rgba(255, 196, 50, 0.7))
            drop-shadow(0 0 20px rgba(255, 135, 0, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 215, 65, 0.95))
            drop-shadow(0 0 28px rgba(255, 145, 15, 0.6))
            drop-shadow(0 0 42px rgba(255, 90, 0, 0.25));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 196, 50, 0.7))
            drop-shadow(0 0 20px rgba(255, 135, 0, 0.35));
  }
}

/* Pendulum Swing */
@keyframes diwaliSwing {
  0% {
    transform: rotate(calc(-1 * var(--diwali-swing-angle)));
  }
  50% {
    transform: rotate(var(--diwali-swing-angle));
  }
  100% {
    transform: rotate(calc(-1 * var(--diwali-swing-angle)));
  }
}

/* Vertical Float */
@keyframes diwaliFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(var(--diwali-float-dist));
  }
}

/* Border Bulbs Pulsing (Group A) */
@keyframes diwaliBulbsPulseA {
  0% {
    opacity: 0.55;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* Border Bulbs Pulsing (Group B) */
@keyframes diwaliBulbsPulseB {
  0% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }
}

/* Bling Star Twinkle Keyframes */
@keyframes diwaliBlingTwinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: scale(1.2) rotate(45deg);
  }
  40% {
    opacity: 0.85;
    transform: scale(0.9) rotate(90deg);
  }
  55% {
    opacity: 0;
    transform: scale(0.15) rotate(135deg);
  }
}

/* Organic Diya Flame Flickering (Left) */
@keyframes diwaliFlickerLeft {
  0%, 100% {
    opacity: 0.85;
    transform: scale(1, 1);
  }
  18% {
    opacity: 1;
    transform: scale(1.08, 1.12) skewX(-1.5deg);
  }
  36% {
    opacity: 0.75;
    transform: scale(0.96, 0.94) skewX(1deg);
  }
  58% {
    opacity: 0.95;
    transform: scale(1.05, 1.08) skewX(-1deg);
  }
  80% {
    opacity: 0.8;
    transform: scale(0.98, 0.98) skewX(0.8deg);
  }
}

/* Organic Diya Flame Flickering (Right) */
@keyframes diwaliFlickerRight {
  0%, 100% {
    opacity: 0.88;
    transform: scale(1, 1);
  }
  22% {
    opacity: 0.72;
    transform: scale(0.95, 0.93) skewX(1.2deg);
  }
  44% {
    opacity: 1;
    transform: scale(1.07, 1.1) skewX(-1deg);
  }
  66% {
    opacity: 0.82;
    transform: scale(0.98, 1.02) skewX(1.5deg);
  }
  88% {
    opacity: 0.96;
    transform: scale(1.04, 1.06) skewX(-0.8deg);
  }
}

/* Organic Diya Flame Flickering (Top Title) */
@keyframes diwaliFlickerTop {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1, 1);
  }
  30% {
    opacity: 0.7;
    transform: scale(0.93, 0.95);
  }
  65% {
    opacity: 1;
    transform: scale(1.1, 1.12);
  }
}