/* ===== Ventura Background — Enchanted Water Forest ===== */

body.ide-page::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background: #0a0e16;
}

/* WebGL water canvas background */
#water-bg {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}

/* Foliage overlay */
.foliage{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* Depth layers */
.foliage .bg{filter:saturate(0.3) contrast(0.8) brightness(0.7) blur(2px);opacity:0.5}
.foliage .mid{filter:saturate(0.7) contrast(0.9) brightness(0.9) blur(0.5px);opacity:0.7}
.foliage .fg{filter:saturate(1.1) contrast(1.05);opacity:0.85}

.foliage .leaf{position:absolute;animation:leafFloat linear infinite}
.foliage .fish{position:absolute;opacity:0.6;animation:fishSwim linear infinite}
.foliage .tendril{position:absolute;opacity:0.5;animation:tendrilSway 5s ease-in-out infinite alternate}

@keyframes leafFloat{
  0%{transform:translate(0,0) rotate(var(--r0)) scale(var(--s0));opacity:0}
  8%{opacity:var(--op)}
  50%{transform:translate(calc(var(--dx)*0.5),calc(var(--dy)*0.5)) rotate(calc(var(--r0) + var(--rot)*0.5)) scale(calc(var(--s0)*0.7));opacity:var(--op)}
  92%{opacity:calc(var(--op)*0.4)}
  100%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r0) + var(--rot))) scale(calc(var(--s0)*0.3));opacity:0}
}
@keyframes fishSwim{0%{transform:translateX(-80px)}100%{transform:translateX(calc(100vw + 80px))}}
@keyframes tendrilSway{0%{transform:rotate(-3deg) translateX(-2px)}100%{transform:rotate(3deg) translateX(2px)}}

/* ===== Ambient particles (fireflies + water sparkles) ===== */
body.ide-page .ambient-particles {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.ambient-particles .p {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: particleFloat 20s ease-in-out infinite;
}
.ambient-particles .p:nth-child(1) { width: 4px; height: 4px; background: #a855f7; box-shadow: 0 0 10px 2px #a855f7; left: 12%; bottom: 20%; animation-delay: 0s; }
.ambient-particles .p:nth-child(2) { width: 3px; height: 3px; background: #e8c94d; box-shadow: 0 0 9px 2px #e8c94d; left: 75%; bottom: 35%; animation-delay: 2.5s; }
.ambient-particles .p:nth-child(3) { width: 3.5px; height: 3.5px; background: #b280e0; box-shadow: 0 0 10px 2px #b280e0; left: 40%; bottom: 60%; animation-delay: 5s; }
.ambient-particles .p:nth-child(4) { width: 3px; height: 3px; background: #ef4444; box-shadow: 0 0 8px 2px #ef4444; left: 88%; bottom: 50%; animation-delay: 7.5s; }
.ambient-particles .p:nth-child(5) { width: 4px; height: 4px; background: #e8c94d; box-shadow: 0 0 10px 2px #e8c94d; left: 25%; bottom: 75%; animation-delay: 10s; }
.ambient-particles .p:nth-child(6) { width: 3px; height: 3px; background: #ef4444; box-shadow: 0 0 9px 2px #ef4444; left: 60%; bottom: 10%; animation-delay: 3.5s; }
.ambient-particles .p:nth-child(7) { width: 3.5px; height: 3.5px; background: #b280e0; box-shadow: 0 0 10px 2px #b280e0; left: 50%; bottom: 85%; animation-delay: 8s; }
.ambient-particles .p:nth-child(8) { width: 3px; height: 3px; background: #e8c94d; box-shadow: 0 0 8px 2px #e8c94d; left: 8%; bottom: 45%; animation-delay: 1s; }

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; }
  50% { opacity: 0.8; transform: translateY(-80px) translateX(15px) scale(1.2); }
  85% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-160px) translateX(-10px) scale(0.5); }
}

/* ===== Bolhas subindo (profundidade) ===== */
body.ide-page .ambient-particles .p:nth-child(4),
body.ide-page .ambient-particles .p:nth-child(6) {
  background: rgba(150,220,255,0.5);
  box-shadow: 0 0 6px 1px rgba(150,220,255,0.3), inset 0 -2px 4px rgba(255,255,255,0.15);
  width: 5px; height: 5px;
  border: 1px solid rgba(200,240,255,0.2);
  animation: bubbleRise 22s ease-in infinite;
}
body.ide-page .ambient-particles .p:nth-child(6) {
  width: 3px; height: 3px;
  animation-duration: 28s;
}

@keyframes bubbleRise {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }
  10% { opacity: 0.6; }
  50% { opacity: 0.4; transform: translateY(-120px) translateX(8px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-250px) translateX(-5px) scale(0.3); }
}

/* ===== Water surface — Naiá's lake ===== */
body.ide-page .water-ripples {
  position: fixed; bottom: 0; left: 0; right: 0; height: 100%; z-index: 1; pointer-events: none; overflow: hidden;
}

/* Vibrações radiais — emanam de pontos variados */
.water-ripples .ripple {
  display: none;
}
.water-ripples .ripple:nth-child(1) { width: 200px; height: 200px; left: 20%; animation-delay: 0s; animation-duration: 12s; }
.water-ripples .ripple:nth-child(2) { width: 350px; height: 350px; left: 65%; animation-delay: 3s; animation-duration: 15s; }
.water-ripples .ripple:nth-child(3) { width: 150px; height: 150px; left: 45%; animation-delay: 6s; animation-duration: 10s; }
.water-ripples .ripple:nth-child(4) { width: 280px; height: 280px; left: 8%; animation-delay: 2s; animation-duration: 16s; }
.water-ripples .ripple:nth-child(5) { width: 180px; height: 180px; left: 80%; animation-delay: 5s; animation-duration: 13s; }
.water-ripples .ripple:nth-child(6) { width: 250px; height: 250px; left: 35%; animation-delay: 8s; animation-duration: 14s; }

@keyframes rippleFromBar {
  0% { transform: translateX(-50%) translateY(50%) scale(0.3) rotate(0deg); opacity: 0.5; }
  100% { transform: translateX(-50%) translateY(50%) scale(5) rotate(8deg); opacity: 0; }
}



@media (prefers-reduced-motion: reduce) {
  .ambient-particles .p, .water-ripples .ripple { animation: none; opacity: 0.5; }
}