/* ==========================================================================
   ANIMATIONS & TRANSITIONS - LUXURY BROWN, GOLD & CREAM
   ========================================================================== */

/* Shimmer Gold Foil Effect */
@keyframes goldShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.gold-shimmer-text {
  background: linear-gradient(
    90deg,
    #9A7425 0%,
    #D4AF37 25%,
    #FFF4D0 50%,
    #D4AF37 75%,
    #9A7425 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: goldShimmer 4s linear infinite;
}

/* Subtle Pulse Glow */
@keyframes goldPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25), 0 0 30px rgba(212, 175, 55, 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.45), 0 0 45px rgba(212, 175, 55, 0.2);
    transform: scale(1.02);
  }
}

.pulse-gold {
  animation: goldPulse 3s ease-in-out infinite;
}

/* Slow Floating / Drift */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.float-slow {
  animation: floatSlow 5s ease-in-out infinite;
}

/* Floating Floral Corner Ornaments */
@keyframes floatOrnamentLeft {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-5px, -10px) rotate(-1.5deg);
  }
}

@keyframes floatOrnamentRight {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(5px, -10px) rotate(1.5deg);
  }
}

.ornament-float-left {
  animation: floatOrnamentLeft 7s ease-in-out infinite;
}

.ornament-float-right {
  animation: floatOrnamentRight 7.5s ease-in-out infinite;
}

/* Music Vinyl Spin */
@keyframes spinDisc {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-disc {
  animation: spinDisc 8s linear infinite;
}

.paused {
  animation-play-state: paused !important;
}

/* Audio Wave Visualizer Bars */
@keyframes soundWave {
  0%, 100% {
    height: 4px;
  }
  50% {
    height: 16px;
  }
}

.wave-bar:nth-child(1) { animation: soundWave 0.8s ease-in-out infinite 0.1s; }
.wave-bar:nth-child(2) { animation: soundWave 0.9s ease-in-out infinite 0.3s; }
.wave-bar:nth-child(3) { animation: soundWave 0.7s ease-in-out infinite 0.2s; }
.wave-bar:nth-child(4) { animation: soundWave 0.85s ease-in-out infinite 0.4s; }

/* Scroll Reveal Base Classes */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-fade.is-visible {
  opacity: 1;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Cover Opening Animation */
.cover-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.8s ease-in-out;
  will-change: transform, opacity;
}

.cover-screen.opened {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Heartbeat Animation for Buttons */
@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}

.heart-beat {
  animation: heartBeat 2.5s ease-in-out infinite;
}

/* ==========================================================================
   ORNAMENT ENTRANCE & CONTINUOUS BREEZE SWAY ANIMATIONS
   (Muncul dan Goyang Semilir Angin Seperti di Cover)
   ========================================================================== */

/* 1. Corner Hanging Flowers (bunga_3.svg) */
@keyframes cornerWindSwayLeft {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  35% {
    transform: rotate(3.5deg) translate3d(1.5px, 2px, 0);
  }
  70% {
    transform: rotate(-2.8deg) translate3d(-1px, 1px, 0);
  }
  100% {
    transform: rotate(2deg) translate3d(0.5px, -1px, 0);
  }
}

@keyframes cornerWindSwayRight {
  0% {
    transform: scaleX(-1) rotate(0deg) translate3d(0, 0, 0);
  }
  35% {
    transform: scaleX(-1) rotate(-3.5deg) translate3d(1.5px, 2px, 0);
  }
  70% {
    transform: scaleX(-1) rotate(2.8deg) translate3d(-1px, 1px, 0);
  }
  100% {
    transform: scaleX(-1) rotate(-2deg) translate3d(0.5px, -1px, 0);
  }
}

.ornament-sway-corner-left {
  transform-origin: 20px 20px;
  animation: cornerWindSwayLeft 6.2s ease-in-out infinite alternate;
  will-change: transform;
}

.ornament-sway-corner-right {
  transform-origin: 50% 50%;
  animation: cornerWindSwayRight 6.8s ease-in-out infinite alternate;
  will-change: transform;
}

/* 2. Horizontal Floral Garland (bunga_5.svg) */
@keyframes garlandBreezeWave {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-3px) rotate(0.8deg) scale(1.01);
  }
  66% {
    transform: translateY(2px) rotate(-0.8deg) scale(0.995);
  }
  100% {
    transform: translateY(-1.5px) rotate(0.5deg) scale(1.005);
  }
}

.ornament-sway-garland {
  transform-origin: 50% 10%;
  animation: garlandBreezeWave 6.5s ease-in-out infinite alternate;
  will-change: transform;
}

/* 3. Round Floral Medallion / Rosette (bunga_4.svg) */
@keyframes medallionGentleTwist {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(3deg) scale(1.03);
  }
  100% {
    transform: rotate(-3deg) scale(0.98);
  }
}

.ornament-sway-medallion {
  transform-origin: 50% 50%;
  animation: medallionGentleTwist 7.5s ease-in-out infinite alternate;
  will-change: transform;
}

/* 4. Vertical Bouquets (bunga_1.svg & bunga_2.svg) */
@keyframes bouquetSwayLeft {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  40% {
    transform: rotate(-3.2deg) translateY(-2px);
  }
  80% {
    transform: rotate(2.4deg) translateY(1px);
  }
  100% {
    transform: rotate(-1.5deg) translateY(-1px);
  }
}

@keyframes bouquetSwayRight {
  0% {
    transform: scaleX(-1) rotate(0deg) translateY(0);
  }
  40% {
    transform: scaleX(-1) rotate(3.2deg) translateY(-2px);
  }
  80% {
    transform: scaleX(-1) rotate(-2.4deg) translateY(1px);
  }
  100% {
    transform: scaleX(-1) rotate(1.5deg) translateY(-1px);
  }
}

.ornament-sway-bouquet-left {
  transform-origin: 30% 90%;
  animation: bouquetSwayLeft 6.8s ease-in-out infinite alternate;
  will-change: transform;
}

.ornament-sway-bouquet-right {
  transform-origin: 50% 50%;
  animation: bouquetSwayRight 7.2s ease-in-out infinite alternate;
  will-change: transform;
}

/* 5. Kembar Mayang Janur Kuning */
@keyframes janurSwayLeft {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2.2deg) translateY(-2px);
  }
  100% {
    transform: rotate(-1.8deg) translateY(1px);
  }
}

@keyframes janurSwayRight {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-2.2deg) translateY(-2px);
  }
  100% {
    transform: rotate(1.8deg) translateY(1px);
  }
}

.ornament-sway-janur-left {
  transform-origin: bottom center;
  animation: janurSwayLeft 5.8s ease-in-out infinite alternate;
  will-change: transform;
}

.ornament-sway-janur-right {
  transform-origin: bottom center;
  animation: janurSwayRight 6.4s ease-in-out infinite alternate;
  will-change: transform;
}

/* 6. Topeng Betawi Floating Hover */
@keyframes floatMaskHover {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(1deg);
  }
  100% {
    transform: translateY(2px) rotate(-1deg);
  }
}

.ornament-float-mask {
  transform-origin: center center;
  animation: floatMaskHover 4.8s ease-in-out infinite alternate;
  will-change: transform;
}