/* ============================================================
   MONK OF IBIZA — ANIMATIONS & EFFECTS
   ============================================================ */

/* === KEYFRAMES === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes revealText {
  from { opacity: 0; transform: translateY(100%); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0% 0); }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 168, 79, 0); }
  50% { box-shadow: 0 0 0 12px rgba(214, 168, 79, 0); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes waveBar {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

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

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* === HERO ANIMATIONS === */
.hero-title-word {
  display: inline-block;
  overflow: hidden;
}

.hero-title-word span {
  display: inline-block;
  animation: revealText 1.2s var(--ease-out) forwards;
  opacity: 0;
}

/* === GRADIENT TEXT ANIMATION === */
.gradient-text-animated {
  background: linear-gradient(90deg, var(--gold-main), var(--gold-soft), var(--sunset-orange), var(--gold-main));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* === PARTICLES / AMBIENT EFFECTS === */
.particles-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--gold-main);
  border-radius: 50%;
  opacity: 0;
  animation: float 6s ease-in-out infinite;
}

/* === AUDIO VISUALIZER BARS === */
.visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.visualizer-bar {
  width: 3px;
  background: var(--gold-main);
  border-radius: 2px;
  transform-origin: bottom;
  animation: waveBar 1s ease-in-out infinite;
}

.visualizer-bar:nth-child(1) { animation-delay: 0s; height: 70%; }
.visualizer-bar:nth-child(2) { animation-delay: 0.15s; height: 100%; }
.visualizer-bar:nth-child(3) { animation-delay: 0.3s; height: 60%; }
.visualizer-bar:nth-child(4) { animation-delay: 0.45s; height: 80%; }
.visualizer-bar:nth-child(5) { animation-delay: 0.1s; height: 50%; }

/* === CURSOR GLOW === */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,168,79,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: var(--z-overlay);
  transform: translate(-50%, -50%);
  transition: transform 0.1s linear;
}

/* === PROGRESS BAR === */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--gradient-gold);
  z-index: calc(var(--z-nav) + 1);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* === FLOATING BADGE === */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.float-badge {
  animation: floatBadge 4s ease-in-out infinite;
}

/* === SHIMMER LOADING === */
.shimmer {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(214,168,79,0.05) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* === HOVER LIFT === */
.hover-lift {
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card);
}

/* === SPIN === */
.spin { animation: spin 20s linear infinite; }

/* === PULSE === */
.pulse-gold { animation: pulseGold 2s infinite; }