/* --- Ticker animation --- */
.ticker-slide {
  animation: ticker 18s linear infinite;
}
@keyframes ticker {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* --- Smooth transition for bottom nav --- */
#bottomNav {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* --- Hamburger dropdown menu --- */
#menuPanel {
  transition: all 0.3s ease;
}
/* --- Carousel fade transition --- */
.carousel-img {
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel-img.active {
opacity: 1;
z-index: 10;
}

.playcard {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  transition: all 0.5s ease;
  border-radius: 1.25rem; /* same as rounded-2xl */
  position: relative;
}

.playcard.highlight {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  transform: scale(1.03);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 223, 88, 0.15) 100%
  );
}

/*.playcard.highlight {
  box-shadow: 0 -6px 20px -4px rgba(255, 215, 0, 0.8); *//* only top edge glow *//*
  transform: scale(1.02);
  background: linear-gradient(
    to bottom,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 255, 255, 1) 60%
  );
}*/


.playcard:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* --- Carousel images --- */

#carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

/* --- Active image visible --- */
#carousel-img.active {
  opacity: 1;
  z-index: 1;
}

/* --- Carousel --- */
#carouselSection {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

#carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* --- 3D Showcase with Depth Glow --- */
#imageRing {
  perspective: 1000px;
  transform-style: preserve-3d;
  perspective-origin: center;
  overflow: visible;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  position: relative;

  /* 🟢 New: Rendering optimization */
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* ✨ Depth Glow Base (soft golden aura) */
#imageRing::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 60px;
  background: radial-gradient(
    circle at center,
    rgba(255, 223, 120, 0.55) 0%,
    rgba(255, 215, 0, 0.25) 40%,
    rgba(255, 215, 0, 0) 80%
  );
  filter: blur(18px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 5;
}

#rotatingContainer {
  position: relative;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;

    /* 🧊 GPU acceleration */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.ring-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  transform: translate(-50%, -50%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1), box-shadow 0.6s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 215, 0, 0.3);
  background-color: white;
  backface-visibility: hidden;
  overflow: hidden;

    /* 🟢 New: Stabilize GPU rendering */
  backface-visibility: hidden;
  transform-style: preserve-3d;
  image-rendering: -webkit-optimize-contrast;
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* Hover for desktop */
.ring-img:hover {
  transform: translate(-50%, -50%) scale(1.1) translateZ(50px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* Active click pop */
/*.ring-img.active {
  transform: translate(-50%, -50%) scale(1.3) translateZ(90px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 210, 70, 0.7);
  z-index: 15;
}*/

/*.ring-img.active {
  transform: translate(-50%, -50%) scale(3.0) translateZ(120px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 210, 70, 0.8);
  z-index: 20;
}*/

.ring-img.active {
  transform: translate(-50%, -50%) scale(1.8) translateZ(160px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.70), 0 0 40px rgba(255,210,70,0.85);
  z-index: 50;
}



/* ✨ Sparkle animation */
.ring-img.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    75deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: sparkleSweep 1.2s ease-in-out forwards;
  pointer-events: none;
}

@keyframes sparkleSweep {
  0% {
    left: -75%;
    opacity: 0.3;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

/* 🌐 Mobile scaling */
@media (max-width: 600px) {
  #rotatingContainer {
    width: 200px;
    height: 200px;
  }
  .ring-img {
    width: 90px;
    height: 90px;
  }
  #imageRing::before {
    width: 160px;
    height: 50px;
    bottom: -15px;
  }
}

/* --- Camera Dolly Zoom effect --- */
#imageRing {
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1);
  transform: translateZ(0px);
}

/* Zoomed-in state when focusing */
#imageRing.zoomed {
  transform: translateZ(80px) scale(1.05);
}

/* Bottom navigation */

.bottom-nav1 {
      position: fixed;
      bottom: 1rem;
      left: 5%;
      transform: translateX(0%);
      width: 90%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 1.5rem;
      box-shadow: 0 4px 20px rgba(255, 215, 0, 0.25);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px 0;
      font-size: 0.85rem;
      transition: transform 0.3s ease;
      z-index: 50;
    }