/* =========================================
   EngJoy — Scene Backgrounds
   Each section gets a themed scene visible
   behind a soft brand-tinted overlay so content
   stays readable.
   ========================================= */

/* Common: ensure content sits above the scene */
section[data-world] > .container,
section[data-world] > * {
  position: relative;
  z-index: 2;
}
section[data-world] {
  isolation: isolate;
  overflow: hidden;
}

/* ===== HERO — Sunny Meadow (outdoor) ===== */
section#hero {
  background:
    linear-gradient(180deg, rgba(255,253,248,0.55) 0%, rgba(255,253,248,0.85) 70%, rgba(255,253,248,0.95) 100%),
    url('assets/scenes/hero-meadow.svg') center bottom / cover no-repeat;
}
/* Animated sun rays overlay */
section#hero::after {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(246,187,88,.35) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse {
  0%,100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ===== PROBLEM — Indoor child's room ===== */
section#problem {
  background:
    linear-gradient(180deg, rgba(255,248,236,0.75) 0%, rgba(255,248,236,0.92) 60%),
    url('assets/scenes/problem-room.svg') center bottom / cover no-repeat;
}

/* ===== HOW — Jungle adventure (outdoor) ===== */
section#how {
  background:
    linear-gradient(180deg, rgba(255,253,248,0.55) 0%, rgba(255,253,248,0.88) 70%),
    url('assets/scenes/how-jungle.svg') center bottom / cover no-repeat;
}

/* ===== CHARACTERS — Tropical island (outdoor) ===== */
section#characters {
  background:
    linear-gradient(180deg, rgba(255,253,248,0.50) 0%, rgba(255,253,248,0.85) 75%),
    url('assets/scenes/characters-island.svg') center bottom / cover no-repeat;
}

/* ===== PARENTS — Cozy home interior (indoor) ===== */
section#parents {
  background:
    linear-gradient(180deg, rgba(255,248,236,0.70) 0%, rgba(255,248,236,0.92) 60%),
    url('assets/scenes/parents-home.svg') center bottom / cover no-repeat;
}

/* ===== PRICING — Festival plaza (outdoor) ===== */
section#pricing {
  background:
    linear-gradient(180deg, rgba(255,253,248,0.55) 0%, rgba(255,253,248,0.90) 70%),
    url('assets/scenes/pricing-plaza.svg') center bottom / cover no-repeat;
}

/* ===== WAITLIST — Magical starry night ===== */
section#waitlist {
  background:
    linear-gradient(180deg, rgba(34,38,99,0.70) 0%, rgba(34,38,99,0.55) 60%, rgba(34,38,99,0.40) 100%),
    url('assets/scenes/waitlist-night.svg') center bottom / cover no-repeat;
}
/* Make waitlist text legible against dark scene */
section#waitlist .kicker:not(.kicker-yellow) { background: rgba(255,255,255,.18); color: #fff; }

/* ===== ANIMATED OVERLAYS (drifting clouds, etc.) ===== */
.scene-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Drifting clouds — pure CSS */
.cloud {
  position: absolute;
  width: 80px; height: 30px;
  background: #fff;
  border-radius: 50px;
  opacity: 0.8;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.05));
  animation: drift 28s linear infinite;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 36px; height: 36px; top: -16px; left: 12px; }
.cloud::after { width: 50px; height: 50px; top: -22px; right: 10px; }

@keyframes drift {
  from { transform: translateX(-150px); }
  to   { transform: translateX(calc(100vw + 150px)); }
}

/* Swaying leaves overlay */
.leaf {
  position: absolute;
  width: 24px; height: 24px;
  font-size: 24px;
  animation: leafSway 4s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes leafSway {
  0%,100% { transform: rotate(-8deg); }
  50%     { transform: rotate(8deg); }
}

/* Twinkle for stars overlay */
.twinkle {
  position: absolute;
  font-size: 20px;
  animation: twinkleAnim 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes twinkleAnim {
  0%,100% { opacity: 0.3; transform: scale(0.8); }
  50%     { opacity: 1;   transform: scale(1.2); }
}

/* Water shimmer line */
.shimmer {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmerSlide 3s ease-in-out infinite;
}
@keyframes shimmerSlide {
  0%   { transform: translateX(-50%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(50%); opacity: 0; }
}

/* Fireflies for waitlist */
.firefly {
  position: absolute;
  width: 6px; height: 6px;
  background: #f6bb58;
  border-radius: 50%;
  box-shadow: 0 0 12px #f6bb58, 0 0 24px rgba(246,187,88,.5);
  animation: fireflyFloat 6s ease-in-out infinite;
}
@keyframes fireflyFloat {
  0%,100% { transform: translate(0,0); opacity: .4; }
  50%     { transform: translate(40px, -30px); opacity: 1; }
}

/* Hide heavy scene backgrounds on small screens for performance */
@media (max-width: 600px) {
  section[data-world] {
    background-size: cover, cover;
    background-position: center bottom, center bottom;
  }
  .cloud, .leaf, .firefly { display: none; }
  section#hero::after { display: none; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cloud, .leaf, .twinkle, .shimmer, .firefly,
  section#hero::after {
    animation: none !important;
  }
}