/* ==========================================================
   AQUAARON — escena SVG: líneas, tuberías, cables, fugas, etiquetas
   El estado por defecto = casa terminada y funcionando.
   JS parte de un estado "apagado" y lo enciende con el scroll.
   ========================================================== */
#scene{--cream:#f5efe4}
.ln{fill:none;stroke:rgba(245,239,228,.55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ln--strong{stroke:rgba(245,239,228,.5);stroke-width:2.5}
.ln--faint{stroke:rgba(245,239,228,.18);stroke-width:2}
.star{opacity:.7;animation:twinkle 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.95}}
.smoke circle{opacity:0;animation:smoke 5.6s ease-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:center}
@keyframes smoke{0%{opacity:.0;transform:translate(0,30px) scale(.4)}20%{opacity:.16}100%{opacity:0;transform:translate(26px,-70px) scale(1.7)}}
.meter-needle{transform-box:view-box;transform-origin:250px 961px;animation:spin 3.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.valve-wheel{transform-box:fill-box;transform-origin:center}

/* ---------- Tuberías ---------- */
#scene use{fill:none;stroke-linecap:round;stroke-linejoin:round}
#supply .pl-out use{stroke:#d0793a;stroke-width:16}
#supply .pl-in use{stroke:#0b1c28;stroke-width:9.5}
#supply .pl-fill use{stroke:#3cc8ea;stroke-width:6}
#supply .pl-flow use{stroke:rgba(255,255,255,.92);stroke-width:2.4;stroke-dasharray:2 16;animation:flow 1.5s linear infinite}
#drains .pl-out use{stroke:#7f8f96;stroke-width:20}
#drains .pl-in use{stroke:#0d1f2c;stroke-width:13}
#drains .pl-flow use{stroke:rgba(150,205,188,.75);stroke-width:4;stroke-dasharray:4 14;animation:flow 2.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.fit circle{fill:#0b1c28;stroke:#d0793a;stroke-width:4}
#leakJoint{transition:none}
#shower path{animation:shower .9s linear infinite}
@keyframes shower{to{stroke-dashoffset:-32}}

/* ---------- Electricidad ---------- */
#cables use{fill:none;stroke-linecap:round;stroke-linejoin:round}
#cables .ce use{stroke:rgba(255,194,60,.34);stroke-width:3}
#cables .cg use{stroke:#ffc23c;stroke-opacity:.14;stroke-width:11}
#cables .cf use{stroke:#ffc23c;stroke-width:3.2}
#cables .cp use{stroke:#fff6d0;stroke-width:5;stroke-dasharray:16 300;animation:pulse 3.4s linear infinite;animation-delay:var(--d,0s)}
@keyframes pulse{from{stroke-dashoffset:0}to{stroke-dashoffset:-316}}
.brk .knob{fill:#5ee0a4}
.brk .led{fill:#5ee0a4}
#cones{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.82}}
.bulb{filter:none}
.sw-knob{transform-box:fill-box}

/* ---------- Fuga ---------- */
.drop{animation:drip 1.5s cubic-bezier(.5,0,.9,.6) infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes drip{0%{transform:translateY(0) scale(.4);opacity:0}14%{transform:translateY(2px) scale(1);opacity:1}86%{opacity:1}100%{transform:translateY(84px) scale(.9);opacity:0}}
#ping{animation:ping 1.5s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ping{0%{transform:scale(.7);opacity:.95}100%{transform:scale(2.6);opacity:0}}
#spurt{animation:spurt .7s linear infinite}
@keyframes spurt{to{stroke-dashoffset:-22}}
.g-read{fill:#f5efe4;font:500 11px var(--f-mono);letter-spacing:.06em}
.g-bad{fill:#ff6a4d;opacity:0}

/* ---------- Etiquetas técnicas ---------- */
.tag rect{fill:rgba(11,28,40,.9);stroke:currentColor;stroke-width:1.5}
.tag text{fill:currentColor;font:500 12px var(--f-mono);letter-spacing:.1em}
.tag .leader{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:3 4}
.tag--alert{color:#ff6a4d}.tag--ok{color:#5ee0a4}.tag--spark{color:#ffc23c}.tag--water{color:#3cc8ea}
#tagLeak,#tagPipe{opacity:0}
#tagOk,#tagVolt{opacity:1}

/* Estado por defecto (casa terminada): sin fuga, sin herramientas volando */
#toolWrench,#toolDriver,#toolTrowel{opacity:0}
#shower{opacity:0}
.win-bed,.win-kit{transition:none}

/* Rendimiento: pausar todo lo que no se ve */
.stage.is-paused *{animation-play-state:paused!important}
body.lite .star,body.lite .smoke,body.lite #cones{animation:none}
@media (prefers-reduced-motion:reduce){
  .stage *{animation:none!important}
  #supply .pl-flow,#drains .pl-flow,#cables .cp{display:none}
}

/* rellenos: extremos rectos para que un trazo vacío no deje un punto */
#supply .pl-fill use,#cables .cf use{stroke-linecap:butt}
.story.is-static .rail,.story.is-static .scrollcue{display:none}