/* Componente "tubo-pvc" (horta vertical hidropônica). Tudo escopado em .tp-root.
   Estados (classes na raiz, controladas por main.js):
     .is-flowing   a bomba está empurrando solução agora (animações de fluxo)
     .is-wet       o substrato está úmido (some devagar quando a bomba desliga)
     .is-offscreen fora da tela: animações pausadas */
.tp-root { margin: 0; padding: 1rem; border: 1px solid #e5e2d8; border-radius: 12px; background: #fff; color: #1f2a1f; }
.tp-layout { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .tp-layout { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }

.tp-svg { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; }
@media (max-width: 719px) { .tp-svg { max-width: 15rem; } }
.tp-svg-text { font: 600 12px/1 Karla, system-ui, sans-serif; fill: #4b5563; }
.tp-svg-text--light { fill: #f1f7fa; font-size: 11px; }

/* crescimento: --g (0..1) vem do controle de dias */
.tp-grow, .tp-roots { transform-box: fill-box; transition: transform 0.25s ease; }
.tp-grow { transform-origin: 50% 100%; transform: scale(calc(0.25 + 0.75 * var(--g, 1))); }
.tp-roots { transform: scale(calc(0.2 + 0.8 * var(--g, 1))); }
.tp-roots--l { transform-origin: 0% 30%; }
.tp-roots--r { transform-origin: 100% 30%; }
.tp-roots path { fill: none; stroke: #f3ead2; stroke-width: 2; stroke-linecap: round; }

/* solução e umidade */
.tp-wet { opacity: 0; transition: opacity 4s ease; }
.is-wet .tp-wet { opacity: 0.28; transition-duration: 0.8s; }
.tp-front, .tp-trickle, .tp-drain { opacity: 0; }
.tp-trickle, .tp-drain { fill: #3e9fc4; }
.tp-flowline { opacity: 0; stroke-dasharray: 7 9; }
.tp-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }

.is-flowing .tp-flowline { opacity: 1; animation: tp-flow 0.9s linear infinite; }
.is-flowing .tp-front { animation: tp-soak 3s linear infinite; }
.is-flowing .tp-trickle { animation: tp-trickle 3.2s linear infinite; }
.is-flowing .tp-drain { animation: tp-drip 1.5s ease-in infinite; }
.is-flowing .tp-ripple { animation: tp-ripple 1.5s ease-out infinite; }

@keyframes tp-flow { to { stroke-dashoffset: -32; } }
@keyframes tp-soak {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(310px); opacity: 0; }
}
@keyframes tp-trickle {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { transform: translateY(368px); opacity: 0; }
}
@keyframes tp-drip {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}
@keyframes tp-ripple {
    0% { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.6); }
}
.is-offscreen * { animation-play-state: paused !important; }

/* destaque de partes */
.tp-part { transition: opacity 0.2s ease, filter 0.2s ease; cursor: pointer; }
.tp-svg[data-hl=""] .tp-part:hover { filter: drop-shadow(0 0 3px rgba(45, 74, 45, 0.55)); }
.tp-svg:not([data-hl=""]) .tp-part,
.tp-svg:not([data-hl=""]) .tp-flow,
.tp-svg:not([data-hl=""]) .tp-svg-text,
.tp-svg:not([data-hl=""]) > path { opacity: 0.25; }
.tp-svg[data-hl="top"] .tp-part[data-part="top"],
.tp-svg[data-hl="tube"] .tp-part[data-part="tube"],
.tp-svg[data-hl="pockets"] .tp-part[data-part="pockets"],
.tp-svg[data-hl="substrate"] .tp-part[data-part="substrate"],
.tp-svg[data-hl="reservoir"] .tp-part[data-part="reservoir"],
.tp-svg[data-hl="pump"] .tp-part[data-part="pump"] { opacity: 1; }
.tp-svg[data-hl="reservoir"] .tp-part[data-part="reservoir"] .tp-svg-text { opacity: 1; }

/* controles */
.tp-controls { display: flex; flex-direction: column; gap: 1.1rem; }
.tp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.tp-col { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.tp-label { font-weight: 700; font-size: 0.85rem; color: #4b5563; margin: 0; }
.tp-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    border: 1px solid #2d4a2d; background: #fff; color: #2d4a2d; border-radius: 8px;
    padding: 0.45rem 0.9rem; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.tp-btn::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: #c4c9c4; }
.tp-btn[aria-pressed="true"] { background: #2d4a2d; color: #fff; }
.tp-btn[aria-pressed="true"]::before { background: #7cc6e4; }
.tp-btn:focus-visible, .tp-part-btn:focus-visible, .tp-root input:focus-visible { outline: 3px solid #9bbf9b; outline-offset: 2px; }
.tp-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; cursor: pointer; }
.tp-status { margin: 0; font-size: 0.92rem; min-height: 2.6em; }
.tp-hint { margin: 0; font-size: 0.85rem; color: #1e5f8a; }
.tp-root input[type="range"] { width: 100%; accent-color: #2d4a2d; }
.tp-scale { display: flex; justify-content: space-between; font-size: 0.78rem; color: #6b7280; }
.tp-day { margin: 0.2rem 0 0; font-weight: 700; font-size: 0.9rem; }
.tp-stage-text { margin: 0; font-size: 0.92rem; min-height: 2.6em; }
.tp-parts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tp-part-btn {
    border: 1px solid #d1d5db; background: #f6f5ef; border-radius: 999px; padding: 0.3rem 0.8rem;
    font: inherit; font-size: 0.82rem; font-weight: 700; color: #374151; cursor: pointer;
}
.tp-part-btn[aria-pressed="true"] { background: #2d4a2d; border-color: #2d4a2d; color: #fff; }
.tp-caption { margin: 0.3rem 0 0; font-size: 0.92rem; min-height: 3.6em; }
.tp-note { margin-top: 1rem; font-size: 0.78rem; color: #6b7280; }

/* movimento reduzido: sem animação, mas o estado continua visível */
@media (prefers-reduced-motion: reduce) {
    .tp-root * { animation: none !important; transition: none !important; }
    .is-flowing .tp-flowline { stroke-dasharray: none; }
    .is-flowing .tp-trickle, .is-flowing .tp-drain { opacity: 0.9; }
    .is-flowing .tp-trickle:nth-of-type(1) { transform: translateY(120px); }
    .is-flowing .tp-trickle:nth-of-type(2) { transform: translateY(240px); }
}