/* ————— prithv · living balcony ————— */
:root{
  --ink:#1e2a22;
  --paper:#f6f3ec;
  --leaf:#3f6f4e;
  --leaf-deep:#27452f;
  --water:#5fa8c9;
  --sun:#e8b96f;
  --glass:rgba(250,249,244,.82);
  --card-shadow:0 18px 50px -12px rgba(20,35,25,.35);
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:#0d1420;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#world{
  position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;
}
#anchors{position:fixed;inset:0;z-index:2;pointer-events:none}
#anchors > *{pointer-events:auto}

/* ————— site chrome ————— */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:1.6rem 2.2rem;pointer-events:none;
  mix-blend-mode:normal;
}
.wordmark{
  font-family:'Fraunces',serif;font-weight:400;font-size:1.55rem;letter-spacing:.02em;
  color:var(--paper);text-shadow:0 1px 14px rgba(10,20,15,.45);
}
.wordmark-dot{color:var(--sun)}
.head-note{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,243,236,.75);text-shadow:0 1px 10px rgba(10,20,15,.5);
  font-weight:500;
}

.sound-toggle{
  position:fixed;left:1.6rem;bottom:1.5rem;z-index:10;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(15,25,18,.35);backdrop-filter:blur(10px);
  border:1px solid rgba(246,243,236,.22);border-radius:99px;
  color:rgba(246,243,236,.85);font-family:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem .95rem;cursor:pointer;transition:all .35s ease;
}
.sound-toggle svg{width:15px;height:15px}
.snd-leaf{fill:rgba(246,243,236,.7);transition:fill .35s}
.sound-toggle[aria-pressed="true"]{border-color:rgba(180,220,170,.55);color:#dff0da}
.sound-toggle[aria-pressed="true"] .snd-leaf{fill:#a8d69a}
.sound-toggle:hover{background:rgba(15,25,18,.55)}

.scroll-hint{
  position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:10;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,243,236,.7);text-align:center;pointer-events:none;
  transition:opacity 1s ease;text-shadow:0 1px 8px rgba(10,20,15,.6);
}
.scroll-hint span{
  display:block;width:1px;height:34px;margin:0 auto .6rem;
  background:linear-gradient(rgba(246,243,236,0),rgba(246,243,236,.8));
  animation:hintFlow 2.4s ease-in-out infinite;
}
@keyframes hintFlow{0%{transform:scaleY(.2);transform-origin:top;opacity:0}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}
.scroll-hint.gone{opacity:0}

/* ————— weather consent ————— */
.wx-ask{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:11;width:248px;
  background:rgba(14,22,17,.58);backdrop-filter:blur(14px);
  border:1px solid rgba(246,243,236,.2);border-radius:18px;
  padding:1.05rem 1.15rem .95rem;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1);
}
.wx-ask.hidden{opacity:0;transform:translateY(10px);pointer-events:none}
.wx-title{
  font-family:'Fraunces',serif;font-size:.95rem;color:var(--paper);margin-bottom:.4rem;
}
.wx-body{font-size:.72rem;line-height:1.55;font-weight:300;color:rgba(246,243,236,.75);margin-bottom:.85rem}
.wx-actions{display:flex;gap:.5rem}
.wx-allow,.wx-later{
  font-family:inherit;font-size:.66rem;letter-spacing:.1em;text-transform:lowercase;
  border-radius:99px;padding:.5rem .95rem;cursor:pointer;transition:all .3s ease;
}
.wx-allow{border:none;background:#5d8f6a;color:#f2f6ef}
.wx-allow:hover{background:#6da37b}
.wx-later{border:1px solid rgba(246,243,236,.25);background:transparent;color:rgba(246,243,236,.7)}
.wx-later:hover{border-color:rgba(246,243,236,.5);color:rgba(246,243,236,.95)}
.wx-ask.thanks .wx-body,.wx-ask.thanks .wx-actions{display:none}

/* ————— captions ————— */
#captions{position:fixed;inset:0;z-index:5;pointer-events:none}
.caption{
  position:absolute;left:6vw;top:50%;transform:translateY(-40%);
  max-width:26rem;opacity:0;transition:opacity .5s ease,transform .8s ease;
}
.caption::before{
  content:'';position:absolute;inset:-3rem -4rem;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(12,20,15,.42),rgba(12,20,15,0));
}
.caption-outro::before{inset:-4rem -6rem}
.caption em{
  display:block;font-family:'Fraunces',serif;font-style:normal;font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.15;color:var(--paper);
  text-shadow:0 2px 24px rgba(8,16,12,.55);margin-bottom:.9rem;
}
.caption p{
  font-size:.95rem;line-height:1.65;font-weight:300;color:rgba(248,246,240,.88);
  text-shadow:0 1px 14px rgba(8,16,12,.6);
}
.caption p b{font-weight:600}
.caption.on{opacity:1;transform:translateY(-50%)}
.caption-outro{left:50%;top:50%;transform:translate(-50%,-42%);text-align:center;max-width:34rem;pointer-events:none}
.caption-outro.on{transform:translate(-50%,-50%)}
.caption-outro em{font-size:clamp(2.6rem,6vw,4.4rem)}
.outro-line{letter-spacing:.28em;text-transform:uppercase;font-size:.72rem !important;font-weight:500 !important;color:rgba(232,185,111,.95) !important;margin-bottom:1.4rem}
.caption-outro p{margin-bottom:1.1rem}
.outro-return{font-family:'Fraunces',serif;font-size:1.02rem !important;color:rgba(248,246,240,.75) !important}
.outro-foot{margin-top:2.2rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,243,236,.45)}

/* ————— scroll track ————— */
#story{position:relative;z-index:1;pointer-events:none}
#story section{height:100vh}
#story section:last-child{height:130vh}

/* ————— phone ————— */
.phone{
  position:absolute;width:212px;height:436px;
  transform-origin:center center;
  border-radius:32px;padding:9px;
  background:linear-gradient(160deg,#2c3230,#161a18 60%,#232826);
  box-shadow:0 30px 60px -18px rgba(10,20,14,.55),inset 0 1px 1px rgba(255,255,255,.18),inset 0 -1px 2px rgba(0,0,0,.5);
  z-index:3;
  transition:box-shadow .8s ease;
}
.phone.resting{
  box-shadow:0 5px 12px -3px rgba(10,20,14,.4),inset 0 1px 1px rgba(255,255,255,.14),inset 0 -1px 2px rgba(0,0,0,.5);
}
.phone-notch{
  position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:58px;height:14px;border-radius:9px;background:#0b0d0c;z-index:2;
}
.phone-screen{
  width:100%;height:100%;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,#f7f5ee 0%,#eef0e6 100%);
  display:flex;flex-direction:column;padding:14px 14px 10px;
  position:relative;
}
/* ————— sleep / wake ————— */
.app-ui{
  display:flex;flex-direction:column;flex:1;min-height:0;
  transition:opacity .55s ease .18s,transform .55s cubic-bezier(.2,.8,.3,1) .18s;
}
.phone.asleep{cursor:pointer}
.phone.asleep .app-ui{opacity:0;transform:scale(.965);transition-delay:0s;pointer-events:none}
.lock-screen{
  position:absolute;inset:0;z-index:5;border-radius:24px;
  background:radial-gradient(120% 90% at 50% 0%,#161d19 0%,#0b0f0d 60%,#080b09 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:1;transition:opacity .7s ease;
}
.phone:not(.asleep) .lock-screen{opacity:0;pointer-events:none}
.lock-time{
  font-family:'Fraunces',serif;font-weight:300;font-size:2rem;
  color:rgba(238,240,232,.82);font-variant-numeric:tabular-nums;margin-top:18px;
}
.lock-date{font-size:.6rem;letter-spacing:.14em;text-transform:lowercase;color:rgba(238,240,232,.4)}
.lock-leaf{width:16px;height:16px;margin-top:26px;fill:rgba(140,190,150,.5)}
.lock-note{font-size:.55rem;letter-spacing:.06em;color:rgba(238,240,232,.28);margin-top:5px;max-width:130px;text-align:center;line-height:1.6}
.sleep-btn{
  position:absolute;top:38px;right:10px;z-index:6;
  width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(30,42,34,.08);display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:opacity .3s ease;
}
.sleep-btn:hover{opacity:1}
.sleep-btn svg{width:12px;height:12px;fill:#68705e}
.phone.asleep .sleep-btn{opacity:0;pointer-events:none}

.phone-hint{
  position:absolute;z-index:3;pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;
  background:rgba(14,22,17,.48);backdrop-filter:blur(10px);
  border:1px solid rgba(246,243,236,.2);border-radius:99px;
  padding:.45rem .9rem;font-size:.66rem;letter-spacing:.13em;text-transform:lowercase;
  color:rgba(246,243,236,.85);transform:translateX(-50%);
  transition:opacity .9s ease;
}
.phone-hint.hidden{opacity:0;pointer-events:none}
.hint-dot{
  width:5px;height:5px;border-radius:50%;background:#8fd0a0;
  box-shadow:0 0 7px rgba(143,208,160,.9);animation:ledIdle 2.6s ease-in-out infinite;
}

.app-header{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.app-brand{font-weight:600;font-size:.78rem;letter-spacing:.02em;color:var(--leaf-deep);display:flex;align-items:center;gap:5px}
.app-dot{width:7px;height:7px;border-radius:50%;background:#59b06a;box-shadow:0 0 6px #59b06a;animation:ledIdle 3s ease-in-out infinite}
@keyframes ledIdle{0%,100%{opacity:1}50%{opacity:.45}}
.app-time{font-size:.68rem;color:#8a917f;font-variant-numeric:tabular-nums}
.app-greeting{font-family:'Fraunces',serif;font-size:1.22rem;margin-top:12px;color:var(--ink)}
.app-sub{font-size:.66rem;color:#7c8574;margin-top:2px}

.water-btn{
  position:relative;width:118px;height:118px;margin:14px auto 10px;
  border:none;border-radius:50%;cursor:pointer;font-family:inherit;
  background:radial-gradient(circle at 34% 30%,#7fc4de,#4a94b8 58%,#33718f);
  box-shadow:0 10px 26px -6px rgba(58,124,153,.55),inset 0 2px 4px rgba(255,255,255,.45),inset 0 -4px 8px rgba(20,60,80,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.water-btn:hover{transform:scale(1.04)}
.water-btn:active{transform:scale(.97)}
.water-btn.watering{background:radial-gradient(circle at 34% 30%,#8fd2a5,#57a06d 58%,#3c7a50)}
.water-ring{position:absolute;inset:-4px;width:126px;height:126px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3}
.ring-fg{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .3s linear}
.water-btn-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff}
.drop-icon{width:20px;height:20px;fill:rgba(255,255,255,.95);filter:drop-shadow(0 1px 3px rgba(20,60,80,.4))}
#waterBtnLabel{font-size:.5rem;font-weight:600;letter-spacing:.14em;max-width:80px;line-height:1.35}

.plant-list{flex:1;overflow:hidden;margin-top:6px;display:flex;flex-direction:column;gap:5px}
.pl-item{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.62);
  border:1px solid rgba(63,111,78,.1);border-radius:11px;padding:5px 8px;
}
.pl-emoji{font-size:.85rem;width:18px;text-align:center}
.pl-name{font-size:.62rem;font-weight:600;color:var(--ink);flex:0 0 62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-bar{flex:1;height:4px;border-radius:2px;background:#e2e2d5;overflow:hidden}
.pl-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#c9a15c,#6bb384 60%,#4a94b8);transition:width 1.2s ease}
.pl-pct{font-size:.58rem;color:#8a917f;width:26px;text-align:right;font-variant-numeric:tabular-nums}
.app-footer{display:flex;justify-content:space-between;margin-top:8px;padding-top:7px;border-top:1px solid rgba(63,111,78,.12)}
.foot-item{font-size:.55rem;color:#8a917f;letter-spacing:.03em}
#footWifi{color:#59a06a}

/* ————— in-scene cards ————— */
.scene-card{
  position:absolute;width:230px;padding:16px 18px 14px;
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);border-radius:16px;
  box-shadow:var(--card-shadow);
  transform-origin:bottom center;z-index:4;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.scene-card.hidden{opacity:0;transform:translateY(8px) scale(.94);pointer-events:none}
.card-leafline{width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--leaf),#8fbf76);margin-bottom:9px}
.card-name{font-family:'Fraunces',serif;font-size:1.08rem;color:var(--ink)}
.card-latin{font-size:.66rem;font-style:italic;color:#7c8574;margin:1px 0 10px}
.card-row{display:flex;align-items:center;gap:8px;font-size:.68rem;color:#68705e;margin-bottom:6px}
.card-row span{flex:0 0 74px}
.card-row b{color:var(--ink);font-weight:600;font-size:.7rem}
.moist-bar{flex:1;height:5px;border-radius:3px;background:#ddddce;overflow:hidden}
.moist-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#c9a15c,#6bb384,#4a94b8);transition:width .8s ease}
.card-tip{
  margin-top:9px;padding-top:9px;border-top:1px dashed rgba(63,111,78,.25);
  font-size:.68rem;line-height:1.5;color:#5a6350;
}
.device-card{width:250px}
.dev-title{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.8rem;color:var(--ink);margin-bottom:11px}
.dev-led{width:8px;height:8px;border-radius:50%;background:#59d67a;box-shadow:0 0 8px #59d67a;animation:ledIdle 2s ease-in-out infinite}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.dev-grid label{display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:#8a917f}
.dev-grid b{font-size:.72rem;color:var(--ink);font-weight:600}

/* ————— responsive & motion ————— */
@media (max-width:720px){
  .caption{left:8vw;right:8vw;max-width:none}
  .site-head{padding:1.1rem 1.3rem}
  .head-note{display:none}
  .scroll-hint{bottom:4.6rem}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint span{animation:none}
  html{scroll-behavior:auto}
}