/* Interaction centers on lens moisture; Space Mono appears sparingly for webcam timestamps. */
:root{
  --abyss:#080A07;
  --basalt:#151B1A;
  --glow:#B7F27B;
  --cyan:#54D6C9;
  --rust:#A85B2A;
  --chalk:#E8DFC8;
  --violet:#3E315C;
  --title:"Pirata One", Impact, fantasy;
  --serif:"Fraunces", Georgia, serif;
  --mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--abyss)}
body{margin:0;min-height:100vh;background:var(--abyss);color:var(--chalk);font-family:var(--serif);overflow-x:hidden;cursor:crosshair}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.mineral-noise{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:.42;mix-blend-mode:screen;background-image:radial-gradient(circle at 11% 14%,#E8DFC855 0 1px,transparent 1.5px),radial-gradient(circle at 57% 62%,#B7F27B44 0 1px,transparent 1.8px),radial-gradient(circle at 83% 31%,#54D6C933 0 1px,transparent 1.4px),linear-gradient(115deg,transparent 0 46%,#ffffff08 49%,transparent 52%);background-size:87px 73px,121px 111px,61px 97px,9px 9px;animation:noiseShift 1.4s steps(2,end) infinite}
#spore-field{position:fixed;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen}
.rock-wall{position:fixed;top:0;bottom:0;width:23vw;z-index:1;pointer-events:none;background:linear-gradient(90deg,#050604,var(--basalt),transparent);filter:drop-shadow(0 0 35px #000)}
.wall-left{left:0;clip-path:polygon(0 0,65% 0,44% 8%,58% 15%,35% 25%,54% 41%,31% 52%,49% 69%,27% 83%,51% 100%,0 100%)}
.wall-right{right:0;transform:scaleX(-1);clip-path:polygon(0 0,58% 0,42% 9%,61% 20%,38% 31%,55% 48%,34% 65%,60% 79%,39% 90%,56% 100%,0 100%)}

.opening-cap{position:fixed;inset:0;display:grid;place-items:center;z-index:20;background:radial-gradient(circle at 50% 44%,#151B1A 0 12%,#080A07 45%,#000 100%);transition:opacity 1.2s ease,visibility 1.2s ease}
.opening-cap.opened{opacity:0;visibility:hidden;pointer-events:none}
.cable-drop{position:absolute;top:0;left:50%;width:8px;height:42vh;background:linear-gradient(90deg,#050604,#A85B2A,#151B1A);box-shadow:0 0 22px #000;transform:translateX(-50%)}
.cap-disc{width:min(58vw,560px);aspect-ratio:1;border-radius:43% 57% 51% 49%/52% 41% 59% 48%;background:radial-gradient(circle at 48% 42%,#151B1A,#080A07 55%,#030403 72%,#000);border:3px solid #A85B2A;box-shadow:inset 0 0 70px #000,0 0 60px #000;animation:capTwitch 4s infinite}
.cap-glow{position:absolute;width:min(40vw,360px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#B7F27B33,transparent 66%);filter:blur(8px);animation:pulse 3s infinite}
.touch-note{position:absolute;bottom:11vh;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:#E8DFC8aa;font-size:12px}

.depth-rope{position:fixed;right:4.2vw;top:11vh;bottom:10vh;width:48px;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.depth-rope:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:5px;background:linear-gradient(#A85B2A,#E8DFC8,#A85B2A);transform:translateX(-50%);box-shadow:0 0 12px #000;border-radius:9px}
.rope-knot{position:relative;width:36px;height:36px;border-radius:45% 55% 48% 52%;background:var(--basalt);border:2px solid #A85B2A;box-shadow:inset 0 0 10px #000,0 0 0 #B7F27B;transition:transform .35s,box-shadow .35s,background .35s}
.rope-knot span{position:absolute;right:44px;top:7px;font-family:var(--mono);font-size:10px;color:#E8DFC8aa;white-space:nowrap;opacity:.6}
.rope-knot.active{background:#B7F27B;box-shadow:0 0 24px #B7F27Baa, inset 0 0 12px #151B1A;transform:scale(1.18) rotate(-9deg)}

#descent{position:relative;z-index:3}
.feed{min-height:100vh;display:grid;place-items:center;padding:7vh 8vw;position:relative;scroll-snap-align:start;overflow:hidden}
.feed:before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 40% 35%,#B7F27B33,transparent 34%),radial-gradient(circle at 72% 67%,#54D6C922,transparent 28%),linear-gradient(#080A07,#151B1A 48%,#080A07);opacity:.56;transform:translateY(var(--drift,0));transition:transform .8s ease}
.scene-surface:before{background:radial-gradient(circle at 52% 38%,#E8DFC819,transparent 23%),linear-gradient(#080A07,#151B1A,#080A07)}
.scene-moss:before{background:radial-gradient(circle at 35% 42%,#B7F27B44,transparent 28%),linear-gradient(120deg,#080A07,#151B1A,#0b1208)}
.scene-choir:before{background:radial-gradient(circle at 52% 36%,#B7F27B55,transparent 32%),radial-gradient(circle at 74% 61%,#54D6C933,transparent 25%),#080A07}
.scene-pool:before{background:radial-gradient(circle at 48% 68%,#54D6C944,transparent 29%),linear-gradient(#151B1A,#050707 58%,#020302)}
.scene-eye:before{background:radial-gradient(circle at 50% 50%,#3E315C 0 18%,#080A07 55%,#000 100%)}

.feed-shell{position:relative;width:min(86vw,1120px);height:min(76vh,760px);transform:translateY(30px) scale(.985);opacity:.55;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s,filter .9s;filter:blur(3px) saturate(.65)}
.feed.active .feed-shell{transform:translateY(0) scale(1);opacity:1;filter:blur(0) saturate(1)}
.lens{position:absolute;inset:6% 9%;overflow:hidden;border:5px solid #151B1A;border-radius:48% 52% 46% 54%/38% 45% 55% 62%;clip-path:polygon(10% 7%,55% 0,92% 13%,100% 49%,88% 86%,43% 100%,5% 81%,0 31%);background:var(--basalt);box-shadow:inset 0 0 90px #000, inset 0 0 15px #54D6C955,0 0 0 9px #A85B2A44,0 35px 80px #000}
.lens:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 28%,#ffffff24,transparent 18%),radial-gradient(circle at 50% 52%,transparent 43%,#000000bb 82%),linear-gradient(90deg,#54D6C911 1px,transparent 1px);background-size:auto,auto,7px 100%;mix-blend-mode:screen;pointer-events:none;z-index:3}
.lens:after{content:"";position:absolute;inset:-20%;background:conic-gradient(from 20deg,#0000,#E8DFC80b,#0000,#54D6C914,#0000);animation:lensWobble 8s ease-in-out infinite;z-index:2;pointer-events:none}

.lens-surface{background:#080A07}.lens-moss{background:radial-gradient(circle at 31% 42%,#B7F27B44,transparent 18%),#151B1A}.lens-choir{background:radial-gradient(circle,#151B1A,#080A07 66%)}.lens-pool{background:linear-gradient(#101816 0 47%,#030504 48% 100%)}.lens-eye{background:#030403}
.static-snow{position:absolute;inset:0;background-image:radial-gradient(#E8DFC8 0 1px,transparent 1.5px),radial-gradient(#B7F27B 0 1px,transparent 1.5px);background-size:13px 17px,19px 23px;opacity:.22;animation:staticJump .18s steps(2,end) infinite;z-index:1}
.hanging-cable{position:absolute;left:49%;top:-5%;width:12px;height:63%;background:#050604;border-left:2px solid #A85B2A;box-shadow:0 0 18px #000;z-index:4}.hanging-cable:after{content:"";position:absolute;bottom:-45px;left:-22px;width:58px;height:58px;border-radius:50%;background:#070907;border:2px solid #151B1A;box-shadow:0 0 22px #000}
.chalk-title{position:absolute;left:12%;right:12%;top:34%;text-align:center;z-index:6;text-shadow:0 2px 0 #000,0 0 18px #B7F27B66;opacity:.9}.chalk-title h1{font-family:var(--title);font-size:clamp(56px,11vw,150px);font-weight:400;line-height:.82;margin:0;color:#E8DFC8;letter-spacing:.02em;filter:url(#none)}.chalk-title p{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:#B7F27B}
.lens-cracks{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(27deg,transparent 44%,#E8DFC850 44.3%,transparent 44.8%),linear-gradient(139deg,transparent 55%,#54D6C944 55.3%,transparent 55.8%),linear-gradient(83deg,transparent 33%,#E8DFC826 33.2%,transparent 33.5%)}
.condensation{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 21% 70%,#E8DFC866 0 4px,transparent 5px),radial-gradient(circle at 75% 30%,#E8DFC855 0 3px,transparent 4px),radial-gradient(circle at 58% 78%,#54D6C955 0 5px,transparent 6px);filter:blur(.3px);animation:droplets 10s linear infinite}.condensation.wiped{opacity:.12;transition:opacity .45s}
.focus-brackets{position:absolute;inset:13%;z-index:8;border:2px solid #E8DFC844;border-radius:20px;clip-path:polygon(0 0,18% 0,18% 4%,4% 4%,4% 18%,0 18%,0 0,82% 0,100% 0,100% 18%,96% 18%,96% 4%,82% 4%,82% 0,100% 82%,100% 100%,82% 100%,82% 96%,96% 96%,96% 82%,100% 82%,18% 100%,0 100%,0 82%,4% 82%,4% 96%,18% 96%);animation:focusHunt 5s ease-in-out infinite}
.tape,.tag,.specimen,.depth-label{position:absolute;z-index:9}.tape{top:1%;left:17%;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#080A07;background:#E8DFC8;padding:9px 18px;transform:rotate(-2deg);box-shadow:0 5px 13px #0008}.tag{font-family:var(--mono);font-size:12px;line-height:1.7;color:#B7F27B;background:#151B1Add;border:1px solid #A85B2A;padding:14px 16px;box-shadow:0 0 22px #000}.tag-left{left:0;top:36%;transform:rotate(2deg)}.tag-right{right:0;top:34%;transform:rotate(-2deg)}.specimen{left:18%;bottom:0;max-width:520px;background:#080A07d9;border-left:4px solid #A85B2A;padding:17px 20px;font-size:clamp(17px,2vw,24px);line-height:1.22;color:#E8DFC8;box-shadow:0 0 30px #000}.depth-label{right:7%;bottom:9%;font-family:var(--title);font-size:clamp(70px,12vw,170px);line-height:.8;color:#E8DFC81a;text-shadow:0 0 24px #54D6C922}

.moss-door{position:absolute;inset:12%;border-radius:55% 45% 42% 58%;background:radial-gradient(circle at 45% 40%,#B7F27B33,transparent 28%),linear-gradient(145deg,#0b1208,#1d2b17,#080A07);box-shadow:inset 0 0 80px #000}.fungus-dishes button{position:absolute;z-index:9;border-radius:50% 50% 46% 54%;background:radial-gradient(circle at 35% 30%,#E8DFC8,#B7F27B 28%,#A85B2A 62%,#151B1A);box-shadow:0 0 25px #B7F27Baa,inset 0 -9px 12px #080A07}.mush-1{left:26%;top:42%;width:82px;height:48px}.mush-2{left:54%;top:31%;width:105px;height:58px}.mush-3{left:44%;top:63%;width:64px;height:39px}.lens.frequency-wet{filter:hue-rotate(70deg) saturate(1.4)}.lens.frequency-bright{filter:brightness(1.25) saturate(1.7)}
.beetle-trail{position:absolute;left:18%;bottom:20%;width:52%;height:20%;z-index:8}.beetle-trail span{position:absolute;width:8px;height:13px;background:#080A07;border:1px solid #B7F27B77;border-radius:50%;box-shadow:0 0 10px #B7F27B}.beetle-trail span:nth-child(1){left:0;top:70%}.beetle-trail span:nth-child(2){left:21%;top:42%}.beetle-trail span:nth-child(3){left:43%;top:58%}.beetle-trail span:nth-child(4){left:65%;top:28%}.beetle-trail span:nth-child(5){left:90%;top:38%;animation:beetle 5s linear infinite}
.spore-constellation i{position:absolute;width:16px;height:16px;border-radius:50%;background:#B7F27B;box-shadow:0 0 28px #B7F27B}.spore-constellation i:nth-child(1){left:28%;top:32%}.spore-constellation i:nth-child(2){left:41%;top:26%}.spore-constellation i:nth-child(3){left:58%;top:31%}.spore-constellation i:nth-child(4){left:34%;top:49%}.spore-constellation i:nth-child(5){left:51%;top:48%;background:#54D6C9}.spore-constellation i:nth-child(6){left:67%;top:52%}.spore-constellation i:nth-child(7){left:39%;top:68%}.spore-constellation i:nth-child(8){left:56%;top:70%}.spore-constellation i:nth-child(9){left:48%;top:58%;width:9px;height:9px;animation:pulse 2s infinite}.mineral-curtains{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 38px,#E8DFC814 40px 43px,transparent 46px 70px);filter:blur(1px)}.salamander{position:absolute;left:-18%;top:59%;width:180px;height:28px;border-radius:50%;background:linear-gradient(90deg,transparent,#E8DFC8,#54D6C9,#E8DFC8,transparent);box-shadow:0 0 20px #54D6C9;animation:swim 13s linear infinite;z-index:8}.scanline-gather{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 13px,#B7F27B22 14px 15px);animation:gather 4s ease-in-out infinite;z-index:6}
.water-caustics{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 72%,#54D6C944,transparent 24%),repeating-radial-gradient(ellipse at 50% 82%,#54D6C922 0 2px,transparent 3px 18px);animation:water 5s linear infinite}.pool-reflection,.pointer-lure{position:absolute;width:26px;height:26px;border-radius:50%;background:#E8DFC8;box-shadow:0 0 25px #54D6C9,0 0 60px #B7F27B;left:50%;top:72%;transform:translate(-50%,-50%);z-index:9}.moth-tape{position:absolute;left:16%;top:18%;width:130px;height:48px;background:#E8DFC8aa;transform:rotate(-17deg);box-shadow:0 0 12px #000}.moth-tape:after{content:"";position:absolute;left:42px;top:8px;width:45px;height:28px;background:#151B1A;clip-path:polygon(50% 0,100% 48%,50% 100%,0 48%);opacity:.8}.rust-bracket{position:absolute;right:15%;bottom:19%;width:110px;height:110px;border:13px solid #A85B2A;border-left-color:transparent;border-radius:20px;transform:rotate(18deg);box-shadow:inset 0 0 22px #000,0 0 18px #000}
.violet-aura{position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,#3E315C 0 18%,#54D6C918 24%,transparent 46%);animation:pulse 6s infinite}.great-eye{position:absolute;left:50%;top:50%;width:min(52vw,590px);height:min(28vw,300px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 50%,#080A07 0 16%,#B7F27B 17% 20%,#3E315C 21% 42%,#000 63%);box-shadow:0 0 80px #3E315C, inset 0 0 50px #000;animation:blink 9s infinite}.soft-loop{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 9px,#E8DFC80a 10px);opacity:.55;animation:staticJump .9s steps(2,end) infinite}
.focus-ring{position:fixed;left:22px;bottom:22px;z-index:14;width:96px;height:96px;border:2px solid #A85B2A;border-radius:50%;box-shadow:0 0 19px #000;background:#151B1Aaa}.focus-ring span{position:absolute;inset:12px;border:1px dashed #E8DFC866;border-radius:50%}.focus-ring span:nth-child(2){inset:28px;border-color:#54D6C966}.focus-ring span:nth-child(3){inset:43px;background:#B7F27B;box-shadow:0 0 16px #B7F27B}.focus-ring.turning{animation:focusTurn .6s ease}

@keyframes noiseShift{50%{transform:translate(2px,-2px)}}@keyframes capTwitch{0%,92%,100%{transform:rotate(0)}94%{transform:rotate(-2deg) translateY(3px)}96%{transform:rotate(3deg)}}@keyframes pulse{50%{opacity:.45;transform:scale(1.08)}}@keyframes staticJump{50%{transform:translate(5px,-3px)}}@keyframes lensWobble{50%{transform:rotate(8deg) scale(1.05)}}@keyframes droplets{to{background-position:0 -120px}}@keyframes focusHunt{50%{inset:17%;filter:blur(1px)}}@keyframes beetle{50%{transform:translate(40px,-16px) rotate(25deg)}}@keyframes swim{to{left:112%}}@keyframes gather{50%{background-size:100% 5px;opacity:.85}}@keyframes water{to{transform:translateY(20px)}}@keyframes blink{0%,92%,100%{transform:translate(-50%,-50%) scaleY(1)}95%{transform:translate(-50%,-50%) scaleY(.08)}}@keyframes focusTurn{to{transform:rotate(80deg)}}

@media (max-width:760px){.feed{padding:9vh 4vw}.feed-shell{width:94vw;height:78vh}.lens{inset:8% 3%}.depth-rope{right:1vw}.tag{display:none}.specimen{left:6%;right:6%;font-size:16px}.tape{left:7%;font-size:10px}.chalk-title h1{font-size:18vw}.focus-ring{display:none}}