/* Keyframes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slowBreathe {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes floatParticles {
  0% { transform: translateY(0) translateX(0); opacity: 0.2; }
  50% { opacity: 0.6; }
  100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

/* Utilities */
.fade-in {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* Background Atmosphere */
.atmosphere-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(193, 122, 75, 0.03) 0%, transparent 70%);
  animation: slowBreathe 10s infinite alternate ease-in-out;
  z-index: 0;
}

.steam-particles {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.01) 2px, transparent 4px),
    radial-gradient(circle at 80% 40%, rgba(227,181,136,0.02) 3px, transparent 6px);
  background-size: 150px 150px;
  animation: floatParticles 15s infinite linear;
  z-index: 1;
}

/* Observer Class */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

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