/* ==========================================================
   VANDVÆRK X – ANIMATIONER
   ========================================================== */

/* Vand-bobler animation i hero */
.hero-animation {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.bubble {
  position: absolute;
  bottom: -50px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  animation: rise linear infinite;
}

@keyframes rise {
  0%   { bottom: -50px; opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { bottom: 110%; opacity: 0; }
}

/* Vanddråbe animation */
@keyframes drip {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  80%  { transform: translateY(20px) scale(0.9); opacity: 0.8; }
  100% { transform: translateY(30px) scale(0.5); opacity: 0; }
}

/* Bølge-effekt */
@keyframes wave {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 60px;
  animation: wave 8s linear infinite;
  opacity: 0.15;
}

/* Fade-in animationer */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll-triggered animationer */
.slide-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Puls animation til status-dot */
.status-dot {
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}