/**
 * ═══════════════════════════════════════════════════════════════════════════
 * MAHARAJA ROYAL LUXURY ANIMATION & MOTION STYLESHEET v5.0
 * Hardware-Accelerated 3D Transforms, Shimmers & Interactive Hover Physics
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─── 1. GPU Acceleration & Base Motion ─── */
.will-animate,
.gsap-card,
.tilt-card {
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── 2. 3D Perspective Card Container ─── */
.tilt-card-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.tilt-card {
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s ease;
  transform-style: preserve-3d;
}

/* ─── 3. Golden Foil Shimmer Sweep ─── */
.gold-shimmer-sweep {
  position: relative;
  overflow: hidden;
}

.gold-shimmer-sweep::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -120%;
  width: 70%;
  height: 220%;
  background: linear-gradient(
    65deg,
    transparent 0%,
    rgba(242, 194, 48, 0.04) 30%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(242, 194, 48, 0.06) 70%,
    transparent 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gold-shimmer-sweep:hover::after {
  opacity: 1;
  animation: singleSheenSweep 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes singleSheenSweep {
  0% { left: -120%; }
  100% { left: 220%; }
}

/* ─── 4. Tandoor Charcoal Ember Glow ─── */
.ember-glow-pulse {
  animation: emberGlow 4s infinite ease-in-out;
}

@keyframes emberGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(232, 114, 44, 0.25), inset 0 0 15px rgba(245, 185, 66, 0.15);
    border-color: rgba(232, 114, 44, 0.35);
  }
  50% {
    box-shadow: 0 0 45px rgba(232, 114, 44, 0.55), inset 0 0 30px rgba(245, 185, 66, 0.35);
    border-color: rgba(242, 194, 48, 0.75);
  }
}

/* ─── 5. Floating Accents & Royal Badges ─── */
.float-subtle {
  animation: floatSubtle 4.5s infinite ease-in-out;
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* ─── 6. Magnetic Button Physics ─── */
.magnetic-btn {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

  box-shadow: 0 10px 25px -5px rgba(194, 42, 158, 0.35);
}

/* ─── 7. Gallery Card Shimmer & Motion Physics ─── */
.gallery-art-card {
  transform-origin: center center;
  will-change: transform, opacity, box-shadow;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.gallery-art-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 22px 40px -10px rgba(42, 14, 61, 0.5), 0 0 25px -5px rgba(242, 194, 48, 0.25);
  border-color: rgba(242, 194, 48, 0.6) !important;
}

.gallery-card-shimmer {
  background: linear-gradient(
    115deg,
    #170624 0%,
    #240B3B 35%,
    #2F104C 50%,
    #240B3B 65%,
    #170624 100%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2.2s infinite ease-in-out;
}

@keyframes shimmerSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 8. Fail-Safe Visibility Guarantees ─── */
/* Never leave content invisible if JS is delayed or blocked */
.reveal-on-scroll,
.gsap-reveal-header,
.gsap-stagger-card,
.gallery-art-card,
.spice-card,
.tandoor-feature-card {
  opacity: 1;
  transform: none;
}

/* ─── 8. Touch & Reduced Motion Compliance ─── */
@media (max-width: 767px) {
  .tilt-card { transform: none !important; }
  .float-subtle { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}