/* Nebula Background — single fixed atmospheric layer behind all content */

/* Fixed full-viewport nebula container */
.nebula-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(90, 60, 160, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(60, 80, 170, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(65, 50, 110, 0.10) 0%, transparent 60%),
    linear-gradient(135deg, #3a3564 0%, #4f4f7d 40%, #4a4578 70%, #3a3564 100%);
}

/* Shared layer base */
.nebula-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Layer 2: Animated Clouds --- */
.nebula-clouds { z-index: 1; }

.nebula-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.nebula-cloud--a {
  width: 60%;
  height: 50%;
  top: -10%;
  left: -10%;
  background: radial-gradient(ellipse, rgba(100, 60, 190, 0.18), transparent 70%);
  animation: nebulaDriftA 38s ease-in-out infinite;
}

.nebula-cloud--b {
  width: 55%;
  height: 45%;
  bottom: -10%;
  right: -10%;
  background: radial-gradient(ellipse, rgba(70, 80, 180, 0.15), transparent 70%);
  animation: nebulaDriftB 45s ease-in-out infinite reverse;
}

.nebula-cloud--c {
  width: 50%;
  height: 40%;
  top: 30%;
  left: 30%;
  background: radial-gradient(ellipse, rgba(120, 70, 160, 0.12), transparent 70%);
  animation: nebulaDriftC 52s ease-in-out infinite;
}

.nebula-cloud--d {
  width: 45%;
  height: 40%;
  top: 55%;
  left: -5%;
  background: radial-gradient(ellipse, rgba(85, 55, 170, 0.14), transparent 70%);
  animation: nebulaDriftD 47s ease-in-out infinite reverse;
}

@keyframes nebulaDriftA {
  0%, 100% { transform: scale(1) translate(0, 0) rotate(0deg); }
  33%      { transform: scale(1.12) translate(20px, 10px) rotate(1.5deg); }
  66%      { transform: scale(0.95) translate(-15px, -8px) rotate(-1deg); }
}

@keyframes nebulaDriftB {
  0%, 100% { transform: scale(1) translate(0, 0) rotate(0deg); }
  40%      { transform: scale(1.1) translate(-25px, 12px) rotate(2deg); }
  70%      { transform: scale(1.05) translate(10px, -15px) rotate(-1.5deg); }
}

@keyframes nebulaDriftC {
  0%, 100% { transform: scale(1) translate(0, 0) rotate(0deg); }
  50%      { transform: scale(1.15) translate(-20px, 18px) rotate(1.8deg); }
}

@keyframes nebulaDriftD {
  0%, 100% { transform: scale(1) translate(0, 0) rotate(0deg); }
  35%      { transform: scale(1.08) translate(15px, -12px) rotate(1.2deg); }
  65%      { transform: scale(1.12) translate(-18px, 10px) rotate(-1.5deg); }
}

/* --- Layer 3: Particles --- */
.nebula-particles { z-index: 2; }

.nebula-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: nebulaFloat linear infinite;
}

.nebula-particle--glow {
  box-shadow: 0 0 8px rgba(180, 170, 255, 0.5);
}

@keyframes nebulaFloat {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.2; }
  25%      { transform: translateY(-12px) translateX(6px) scale(1.05); opacity: 0.6; }
  50%      { transform: translateY(-20px) translateX(-4px) scale(0.95); opacity: 0.35; }
  75%      { transform: translateY(-8px) translateX(10px) scale(1.02); opacity: 0.7; }
}

/* --- Layer 4: Grid Overlay --- */
.nebula-grid {
  z-index: 3;
  background-image:
    linear-gradient(
      transparent 24px,
      rgba(140, 130, 220, 0.025) 24px,
      rgba(140, 130, 220, 0.025) 25px,
      transparent 25px
    ),
    linear-gradient(90deg,
      transparent 24px,
      rgba(140, 130, 220, 0.025) 24px,
      rgba(140, 130, 220, 0.025) 25px,
      transparent 25px
    );
  background-size: 50px 50px;
  opacity: 0.35;
}

/* --- Purple sections: transparent to reveal the nebula --- */
.bg--base.nebula-reveal,
.footer.nebula-reveal {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* --- Non-purple sections: opaque to cover the nebula --- */
.nebula-opaque {
  position: relative;
  z-index: 1;
}

/* Hero + template shop already have #efeffb in their own CSS */
/* Blog section is white */
.fr-article-section-hotel.nebula-opaque {
  background-color: #ffffff;
}

/* CTA bottom section — light bg */
.cta-section.nebula-opaque {
  background-color: #fafafa;
}

/* Header sits above nebula */
header.nebula-opaque {
  position: relative;
  z-index: 1;
}

/* Reduce GPU cost on mobile */
@media (max-width: 767px) {
  .nebula-cloud {
    filter: blur(50px);
    will-change: auto;
    animation-duration: 60s;
  }
  .nebula-particle {
    display: none;
  }
  .nebula-grid {
    display: none;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nebula-cloud,
  .nebula-particle {
    animation: none !important;
  }
}