/* ==========================================================================
   Nicolai Flora — Atmospheric Effects: steam, glow, ripple, parallax, 3D
   (the thin falling droplet streaks were removed — flagged as unattractive;
   the drifting steam/mist layer stays)
   ========================================================================== */

.fx-rain, .fx-droplets, .fx-condensation{ display:none; }

/* ----- Steam / mist drifting layer ----- */
.fx-steam{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.fx-steam i{
  position:absolute; bottom:-10%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(230,240,235,.16), rgba(230,240,235,0) 70%);
  filter:blur(18px);
  animation:steam-rise linear infinite;
  opacity:.5;
}
.fx-steam i:nth-child(1){ width:340px; height:340px; left:-4%;  animation-duration:26s; animation-delay:0s; }
.fx-steam i:nth-child(2){ width:260px; height:260px; left:22%;  animation-duration:19s; animation-delay:-6s; }
.fx-steam i:nth-child(3){ width:420px; height:420px; left:48%;  animation-duration:31s; animation-delay:-14s; }
.fx-steam i:nth-child(4){ width:300px; height:300px; left:70%;  animation-duration:23s; animation-delay:-3s; }
.fx-steam i:nth-child(5){ width:380px; height:380px; left:86%;  animation-duration:28s; animation-delay:-11s; }
@keyframes steam-rise{
  0%{ transform:translate(0,0) scale(1); opacity:0; }
  15%{ opacity:.5; }
  50%{ transform:translate(2%, -45vh) scale(1.15); }
  85%{ opacity:.28; }
  100%{ transform:translate(-3%, -95vh) scale(1.3); opacity:0; }
}

/* ----- Glow orb accents ----- */
.fx-glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:1; opacity:.5; }
.fx-glow.gold{ background:radial-gradient(circle, rgba(201,162,74,.5), transparent 70%); }
.fx-glow.emerald{ background:radial-gradient(circle, rgba(42,138,92,.45), transparent 70%); }

/* ----- Water ripple on buttons/cards (subtle luxury touch) ----- */
.ripple-hover{ position:relative; overflow:hidden; }
.ripple-hover::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(230,205,138,.35), transparent 55%);
  transition:opacity .4s;
  pointer-events:none;
}
.ripple-hover:hover::after{ opacity:1; }

/* ----- Parallax layers ----- */
.fx-parallax{ will-change:transform; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce){
  .fx-steam i, .hero-media img{ animation:none !important; }
}

/* ----- Mobile perf ----- */
@media (max-width:640px){
  .fx-steam i{ filter:blur(12px); }
}