/* ==========================================================
   BALO MYSTICAL ROSES - 3D Glowing Roses with Steam
   Pure Blue & Pure Pink with soft steam effects
   ========================================================== */

/* --- Container Setup ------------------------------------------------- */
.balo-mystical-roses {
  pointer-events: none;
  z-index: 9999;
}

.balo-mystical-roses[data-position="fixed"] {
  position: fixed;
  inset: 0;
}

.balo-mystical-roses[data-position="absolute"] {
  position: absolute;
  inset: 0;
}

.balo-mystical-roses[data-position="relative"] {
  position: relative;
  width: 100%;
  min-height: 400px;
}

/* --- Rose Positioning ------------------------------------------------ */
.mystical-rose {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 350px;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.mystical-rose-left {
  left: 50px;
}

.mystical-rose-right {
  right: 50px;
}

.rose-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: gentleFloat 6s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-15px) rotateY(10deg); }
}

/* --- Size Variations ------------------------------------------------- */
.balo-mystical-roses[data-size="small"] .mystical-rose {
  width: 150px;
  height: 280px;
}

.balo-mystical-roses[data-size="large"] .mystical-rose {
  width: 250px;
  height: 420px;
}

/* --- 3D Rose Structure ----------------------------------------------- */
.rose-3d {
  position: absolute;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  animation: roseBloom 8s ease-in-out infinite;
}

@keyframes roseBloom {
  0%, 100% { transform: translateX(-50%) scale(1) rotateZ(0deg); }
  50% { transform: translateX(-50%) scale(1.05) rotateZ(5deg); }
}

/* --- Rose Petals (3D Effect) ----------------------------------------- */
.petal {
  position: absolute;
  width: 60px;
  height: 80px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-style: preserve-3d;
  transform-origin: bottom center;
}

/* Blue Rose Petals */
.mystical-rose[data-color="blue"] .petal {
  background: linear-gradient(135deg, 
    #0066ff 0%, 
    #0088ff 30%, 
    #00aaff 60%, 
    #0066ff 100%);
  box-shadow: 
    inset 0 -20px 30px rgba(0, 100, 255, 0.5),
    0 0 30px rgba(0, 136, 255, 0.6),
    0 0 60px rgba(0, 170, 255, 0.4);
}

/* Pink Rose Petals */
.mystical-rose[data-color="pink"] .petal {
  background: linear-gradient(135deg, 
    #ff1493 0%, 
    #ff69b4 30%, 
    #ffb6c1 60%, 
    #ff1493 100%);
  box-shadow: 
    inset 0 -20px 30px rgba(255, 20, 147, 0.5),
    0 0 30px rgba(255, 105, 180, 0.6),
    0 0 60px rgba(255, 182, 193, 0.4);
}

/* Petal Positioning (Creating 3D Rose) */
.petal-1 {
  left: 50%;
  top: 50%;
  transform: 
    translateX(-50%) translateY(-50%) 
    rotateX(20deg) rotateZ(0deg) 
    translateZ(30px);
  animation: petalPulse 4s ease-in-out infinite 0s;
}

.petal-2 {
  left: 50%;
  top: 50%;
  transform: 
    translateX(-50%) translateY(-50%) 
    rotateX(20deg) rotateZ(72deg) 
    translateZ(25px);
  animation: petalPulse 4s ease-in-out infinite 0.2s;
}

.petal-3 {
  left: 50%;
  top: 50%;
  transform: 
    translateX(-50%) translateY(-50%) 
    rotateX(20deg) rotateZ(144deg) 
    translateZ(20px);
  animation: petalPulse 4s ease-in-out infinite 0.4s;
}

.petal-4 {
  left: 50%;
  top: 50%;
  transform: 
    translateX(-50%) translateY(-50%) 
    rotateX(20deg) rotateZ(216deg) 
    translateZ(25px);
  animation: petalPulse 4s ease-in-out infinite 0.6s;
}

.petal-5 {
  left: 50%;
  top: 50%;
  transform: 
    translateX(-50%) translateY(-50%) 
    rotateX(20deg) rotateZ(288deg) 
    translateZ(30px);
  animation: petalPulse 4s ease-in-out infinite 0.8s;
}

.petal-center {
  width: 40px;
  height: 50px;
  left: 50%;
  top: 50%;
  transform: 
    translateX(-50%) translateY(-50%) 
    rotateX(80deg) 
    translateZ(15px);
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
}

@keyframes petalPulse {
  0%, 100% { 
    transform: 
      translateX(-50%) translateY(-50%) 
      rotateX(20deg) rotateZ(var(--rotation, 0deg)) 
      translateZ(var(--depth, 30px)) 
      scale(1);
  }
  50% { 
    transform: 
      translateX(-50%) translateY(-50%) 
      rotateX(25deg) rotateZ(var(--rotation, 0deg)) 
      translateZ(var(--depth, 30px)) 
      scale(1.02);
  }
}

/* --- Rose Stem ------------------------------------------------------- */
.rose-stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 200px;
  border-radius: 4px;
  background: linear-gradient(to bottom,
    rgba(34, 139, 34, 0.9) 0%,
    rgba(34, 139, 34, 1) 50%,
    rgba(20, 90, 20, 1) 100%);
  box-shadow: 
    inset -2px 0 4px rgba(0, 0, 0, 0.3),
    2px 0 8px rgba(34, 139, 34, 0.4);
}

/* --- Rose Leaves ----------------------------------------------------- */
.rose-leaf {
  position: absolute;
  width: 40px;
  height: 60px;
  background: linear-gradient(135deg,
    #228b22 0%,
    #32cd32 50%,
    #228b22 100%);
  border-radius: 0 90% 90% 0;
  transform-origin: left center;
  box-shadow: 
    inset -2px 0 4px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(34, 139, 34, 0.3);
}

.rose-leaf-1 {
  bottom: 120px;
  left: 40%;
  transform: rotate(-30deg);
  animation: leafSway 5s ease-in-out infinite;
}

.rose-leaf-2 {
  bottom: 80px;
  right: 40%;
  transform: rotate(30deg) scaleX(-1);
  animation: leafSway 5s ease-in-out infinite 0.5s;
}

@keyframes leafSway {
  0%, 100% { transform: rotate(var(--base-rotation, -30deg)); }
  50% { transform: rotate(calc(var(--base-rotation, -30deg) + 10deg)); }
}

/* --- Glow Effect ----------------------------------------------------- */
.rose-glow {
  position: absolute;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: glowPulse 3s ease-in-out infinite;
}

.balo-mystical-roses[data-glow="yes"] .rose-glow {
  opacity: 1;
}

/* Blue Glow */
.mystical-rose[data-color="blue"] .rose-glow {
  background: radial-gradient(circle,
    rgba(0, 136, 255, 0.4) 0%,
    rgba(0, 170, 255, 0.2) 40%,
    transparent 70%);
  box-shadow: 
    0 0 40px rgba(0, 136, 255, 0.6),
    0 0 80px rgba(0, 170, 255, 0.4),
    0 0 120px rgba(0, 200, 255, 0.2);
}

/* Pink Glow */
.mystical-rose[data-color="pink"] .rose-glow {
  background: radial-gradient(circle,
    rgba(255, 105, 180, 0.4) 0%,
    rgba(255, 182, 193, 0.2) 40%,
    transparent 70%);
  box-shadow: 
    0 0 40px rgba(255, 105, 180, 0.6),
    0 0 80px rgba(255, 182, 193, 0.4),
    0 0 120px rgba(255, 192, 203, 0.2);
}

@keyframes glowPulse {
  0%, 100% { 
    opacity: 0.5; 
    transform: translateX(-50%) scale(1); 
  }
  50% { 
    opacity: 0.8; 
    transform: translateX(-50%) scale(1.1); 
  }
}

/* --- Steam Effect ---------------------------------------------------- */
.steam-container {
  position: absolute;
  bottom: 200px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 200px;
  pointer-events: none;
}

.steam-particle {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(4px);
}

/* Blue Steam */
.mystical-rose[data-color="blue"] .steam-particle {
  background: radial-gradient(circle,
    rgba(135, 206, 250, 0.6) 0%,
    rgba(173, 216, 230, 0.3) 50%,
    transparent 100%);
  box-shadow: 
    0 0 20px rgba(135, 206, 250, 0.4),
    0 0 40px rgba(173, 216, 230, 0.2);
}

/* Pink Steam */
.mystical-rose[data-color="pink"] .steam-particle {
  background: radial-gradient(circle,
    rgba(255, 182, 193, 0.6) 0%,
    rgba(255, 192, 203, 0.3) 50%,
    transparent 100%);
  box-shadow: 
    0 0 20px rgba(255, 182, 193, 0.4),
    0 0 40px rgba(255, 192, 203, 0.2);
}

/* Steam Animation - Each particle unique */
.steam-1 { animation: steamRise 4s ease-out infinite 0s; left: 45%; }
.steam-2 { animation: steamRise 4.5s ease-out infinite 0.3s; left: 55%; }
.steam-3 { animation: steamRise 4.2s ease-out infinite 0.6s; left: 50%; }
.steam-4 { animation: steamRise 4.8s ease-out infinite 0.9s; left: 48%; }
.steam-5 { animation: steamRise 4.4s ease-out infinite 1.2s; left: 52%; }
.steam-6 { animation: steamRise 4.6s ease-out infinite 1.5s; left: 46%; }
.steam-7 { animation: steamRise 4.3s ease-out infinite 1.8s; left: 54%; }
.steam-8 { animation: steamRise 4.7s ease-out infinite 2.1s; left: 49%; }
.steam-9 { animation: steamRise 4.1s ease-out infinite 2.4s; left: 51%; }
.steam-10 { animation: steamRise 4.9s ease-out infinite 2.7s; left: 47%; }
.steam-11 { animation: steamRise 4.4s ease-out infinite 3.0s; left: 53%; }
.steam-12 { animation: steamRise 4.6s ease-out infinite 3.3s; left: 50%; }

@keyframes steamRise {
  0% {
    bottom: 0;
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  10% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.5;
    transform: translateX(calc(-50% + var(--drift, 10px))) scale(1.2);
  }
  100% {
    bottom: 180px;
    opacity: 0;
    transform: translateX(calc(-50% + var(--drift, 20px))) scale(1.5);
  }
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 768px) {
  .mystical-rose-left {
    left: 20px;
  }
  
  .mystical-rose-right {
    right: 20px;
  }
  
  .mystical-rose {
    width: 150px;
    height: 280px;
  }
  
  .rose-3d {
    width: 90px;
    height: 90px;
    bottom: 150px;
  }
  
  .petal {
    width: 45px;
    height: 60px;
  }
  
  .rose-stem {
    height: 160px;
  }
}

/* --- Accessibility --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rose-container,
  .rose-3d,
  .petal,
  .rose-leaf,
  .rose-glow,
  .steam-particle {
    animation: none !important;
  }
  
  .rose-glow {
    opacity: 0.6;
  }
}

/* --- Hide when no steam ----------------------------------------------- */
.balo-mystical-roses[data-steam="no"] .steam-container {
  display: none;
}

/* --- Hide when no glow ------------------------------------------------ */
.balo-mystical-roses[data-glow="no"] .rose-glow {
  display: none;
}