/* =========================================================
   STEP 1 — INPUT AREA
   Instructions first, textarea directly underneath
========================================================= */

#stage1 .tool-card{display:block;width:100%;max-width:100%}
#stage1 .stage-instruction{display:block;width:100%;margin:0 0 16px}
#stage1 #thoughtInput{display:block;width:100%;max-width:100%;min-height:110px;margin:0;box-sizing:border-box;padding:18px 20px;resize:vertical;background:#090d12;border:1px solid rgba(167,139,250,.28);border-radius:var(--radius-md);color:var(--text);font-family:var(--font);font-size:1rem;font-weight:300;line-height:1.6;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}

#thoughtInput::placeholder{color:rgba(138,163,156,.55)}
#thoughtInput:focus{border-color:var(--purple-1);box-shadow:0 0 0 3px rgba(139,92,246,.10)}


/* =========================================================
   COMPLETION
========================================================= */

.complete-icon{font-size:1.05rem}


/* =========================================================
   RIVER — MAIN SCENE
========================================================= */

.river-scene{position:relative;width:100%;height:420px;margin:20px auto;border:1px solid rgba(52,211,153,.16);border-radius:var(--radius-xl);overflow:hidden;background:linear-gradient(180deg,#06120d 0,#0a2018 45%,#07140f 100%);box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(234,255,247,.05)}


/* =========================================================
   RIVER — WATER LAYERS
========================================================= */

.water-layer{position:absolute;inset:0;opacity:.45}

.water-layer-1{background:repeating-linear-gradient(0deg,transparent 0,transparent 34px,rgba(52,211,153,.08) 36px,transparent 38px);animation:waterFlow1 18s ease-in-out infinite alternate}

.water-layer-2{background:radial-gradient(ellipse at 35% 40%,rgba(45,212,191,.16),transparent 45%),radial-gradient(ellipse at 70% 60%,rgba(52,211,153,.10),transparent 40%);animation:waterPulse 12s ease-in-out infinite}

.water-layer-3{background:repeating-linear-gradient(90deg,transparent 0,transparent 80px,rgba(167,139,250,.04) 81px,transparent 83px);animation:waterFlow2 22s linear infinite}


/* =========================================================
   RIVER — WATER ANIMATIONS
========================================================= */

@keyframes waterFlow1{from{transform:translateY(-8px)}to{transform:translateY(8px)}}

@keyframes waterFlow2{from{transform:translateX(0)}to{transform:translateX(-83px)}}

@keyframes waterPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.03)}}


/* =========================================================
   RIVER — RIPPLE EFFECTS
========================================================= */

.ripples{position:absolute;inset:0;pointer-events:none}

.ripples span{position:absolute;border:1px solid rgba(52,211,153,.22);border-radius:50%;animation:ripple 5s ease-out infinite}

.ripples span:nth-child(1){width:80px;height:80px;left:24%;top:35%}

.ripples span:nth-child(2){width:60px;height:60px;left:65%;top:52%;animation-delay:1.5s}

.ripples span:nth-child(3){width:100px;height:100px;left:45%;top:25%;animation-delay:3s}

@keyframes ripple{0%{transform:scale(.3);opacity:.6}100%{transform:scale(2.5);opacity:0}}


/* =========================================================
   THOUGHT LEAF — ANIMATION
========================================================= */

.thought-leaf{position:absolute;left:-220px;top:38%;width:240px;height:160px;z-index:5;opacity:0;pointer-events:none}

.thought-leaf.is-flowing{opacity:1;animation:leafJourney 12s linear forwards}

@keyframes leafJourney{0%{left:-220px;top:38%;transform:rotate(-8deg)}12%{top:34%;transform:rotate(-4deg)}28%{top:41%;transform:rotate(5deg)}44%{top:35%;transform:rotate(-5deg)}60%{top:42%;transform:rotate(6deg)}76%{top:37%;transform:rotate(-4deg)}90%{top:40%;opacity:1}100%{left:calc(100% + 220px);top:38%;transform:rotate(8deg);opacity:0}}


/* =========================================================
   THOUGHT LEAF — LEAF BODY
========================================================= */

.leaf-body{position:relative;width:100%;height:100%;border-radius:2% 98% 2% 98%/2% 98% 2% 98%;background:radial-gradient(ellipse at 28% 25%,#34d399 0,#19734f 38%,#0b3827 72%,#062417 100%);border:1px solid rgba(167,243,208,.24);filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}

.leaf-body::after{content:"";position:absolute;inset:8px;border-radius:inherit;border:1px solid rgba(167,243,208,.12)}


/* =========================================================
   THOUGHT LEAF — TEXT
========================================================= */

.leaf-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:28px 38px;color:#fff;font-family:var(--font);font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.9);z-index:2}


/* =========================================================
   OBSERVER
========================================================= */

.observer{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(234,255,247,.62);font-size:.68rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.8)}

.observer-figure{position:relative;width:68px;height:58px}

.observer-head{position:absolute;left:50%;bottom:30px;width:30px;height:30px;transform:translateX(-50%);border-radius:50%;background:#8aa39c;box-shadow:0 5px 15px rgba(0,0,0,.5)}

.observer-body{position:absolute;left:50%;bottom:6px;width:60px;height:30px;transform:translateX(-50%);border-radius:50%;background:#24352f}

.observer-legs{position:absolute;left:50%;bottom:0;width:50px;height:12px;transform:translateX(-50%);border-radius:50%;background:#08110e}


/* =========================================================
   RELEASED MESSAGE
========================================================= */

.released{position:absolute;left:50%;top:25%;transform:translate(-50%,-50%) scale(.9);opacity:0;z-index:15;color:#fff;font-size:3rem;font-weight:800;letter-spacing:4px;text-shadow:0 4px 20px rgba(0,0,0,.7),0 0 50px rgba(52,211,153,.35);transition:opacity .8s ease,transform .8s ease}

.released.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}


/* =========================================================
   MOBILE — RIVER
========================================================= */

@media(max-width:640px){
    .river-scene{height:350px}
    .thought-leaf{width:190px;height:125px}
    .released{font-size:2.2rem}
}