/* Coordinates follow the uncropped artwork, including the mobile scenes. */
.sky-twinkles{position:absolute;inset:0;z-index:1;pointer-events:none}
.sky-twinkles i{position:absolute;left:var(--x);top:var(--y);width:clamp(6px,.85vw,13px);aspect-ratio:1;opacity:.2;transform:translate(-50%,-50%);animation:sky-glint var(--speed,5.8s) ease-in-out var(--delay,0s) infinite;filter:drop-shadow(0 0 4px #fff9c899)}
.sky-twinkles i:before{content:"";position:absolute;inset:0;background:#fffbe6;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%)}
@keyframes sky-glint{0%,25%,70%,100%{opacity:.12;transform:translate(-50%,-50%) scale(.55)}43%,48%{opacity:.95;transform:translate(-50%,-50%) scale(1)}}
.hero-stars i{width:clamp(6px,.85vw,15px);height:clamp(6px,.85vw,15px)}
#garden .garden-sky{inset:0 0 auto;width:100%;height:auto;aspect-ratio:3/2;z-index:1}
.scroll-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.nft-scroll .scroll-full-art{z-index:0;opacity:1}
.nft-scroll .roadmap-layout{z-index:2}
.scroll-feather-link{position:absolute;left:.6%;top:29.2%;width:10.6%;height:26%;min-width:44px;min-height:44px;z-index:3;pointer-events:auto;text-decoration:none;color:#fff7c8;isolation:isolate;border-radius:12px}
.scroll-feather-link:before{content:"";position:absolute;inset:0;background:#ffe28b;opacity:0;clip-path:polygon(10% 99%,20% 63%,19% 48%,31% 27%,100% 0,88% 42%,58% 71%,26% 91%);filter:drop-shadow(0 0 12px #ffe08a);transition:opacity .2s}
.scroll-feather-link:hover:before,.scroll-feather-link:focus-visible:before{opacity:.2}
.scroll-feather-link:focus-visible{outline:3px solid #ffda69;outline-offset:4px}
.feather-glint{position:absolute;right:7%;top:4%;font:normal clamp(12px,1.25vw,19px)/1 Georgia,serif;color:#fff2b8;text-shadow:0 0 6px #d9a62b;animation:feather-glint 4.5s ease-in-out infinite;pointer-events:none}
@keyframes feather-glint{0%,25%,80%,100%{opacity:.15;transform:scale(.7)}45%,55%{opacity:1;transform:scale(1)}}
.feather-caption{position:absolute;left:80%;top:39%;width:max-content;max-width:220px;padding:9px 13px;background:#112017;color:#fff1cd;border:1px solid #d0b67d;border-radius:8px;font:700 15px/1.3 Fell,Georgia,serif;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.scroll-feather-link:hover .feather-caption,.scroll-feather-link:focus-visible .feather-caption{opacity:1;transform:none}
.feather-trail{display:none}
.still .sky-twinkles i,.still .feather-glint{animation:none;opacity:.5}
@media(prefers-reduced-motion:reduce){.sky-twinkles i,.feather-glint{animation:none;opacity:.5}.scroll-feather-link:before,.feather-caption{transition:none}}
@media(max-width:900px){
 #roadmap.nft-scroll{padding:0 0 70px;background:#112017}
 .scroll-scene{position:relative;inset:auto;width:100%;aspect-ratio:3/2}
 .nft-scroll .scroll-full-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:1}
 .nft-scroll .roadmap-layout{position:relative;inset:auto;width:calc(100% - 36px);max-width:520px;margin:18px auto 0}
 .feather-trail{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:14px;min-height:44px;width:max-content;max-width:calc(100% - 32px);margin:12px auto 26px;padding:6px 14px;color:#f5dba5;font:700 16px/1.4 Fell,Georgia,serif;text-decoration:underline;text-underline-offset:5px}
 .feather-trail:focus-visible{outline:2px solid #ffda69;outline-offset:3px}
 .feather-caption{font-size:13px;max-width:175px;padding:7px 10px}
}
@media(max-width:360px){.nft-scroll .roadmap-layout{width:calc(100% - 30px)}}

/* The secret sits in the water, using the artwork’s original coordinates. */
#garden>.footer-art{mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)}
#garden .footer-overlay{margin-top:-90px;background:linear-gradient(transparent,#000 85px);z-index:3}
.garden-interactions{position:absolute;inset:0 0 auto;width:100%;height:auto;aspect-ratio:3/2;z-index:2;pointer-events:none}
.key-sparkles i{width:clamp(10px,1.25vw,20px);filter:drop-shadow(0 0 5px #ffe069);animation-duration:4.5s}
.key-sparkles i:before{background:#fff5b2}
.pond-portal{position:absolute;left:42%;top:58%;width:23%;height:18%;min-width:70px;min-height:44px;border-radius:50%;pointer-events:auto;cursor:pointer;background:transparent;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pond-ring{position:absolute;inset:12%;border:2px solid #e7ffffd9;border-radius:50%;opacity:0;transform:scale(.2);pointer-events:none}
.pond-portal:hover .pond-ring,.pond-portal:focus-visible .pond-ring{animation:secret-pond-ripple 1.9s ease-out infinite}
.pond-portal .pond-ring:nth-child(2){animation-delay:.6s}.pond-portal .pond-ring:nth-child(3){animation-delay:1.2s}
.pond-portal:focus-visible{outline:2px dashed #d7ffff;outline-offset:4px}
@keyframes secret-pond-ripple{0%{opacity:0;transform:scale(.2)}15%{opacity:.9}100%{opacity:0;transform:scale(1.25)}}
@media(max-width:900px){#garden .footer-overlay{margin-top:-20px;padding-top:20px;background:linear-gradient(transparent,#000 45px)}}
@media(prefers-reduced-motion:reduce){.pond-portal:hover .pond-ring,.pond-portal:focus-visible .pond-ring{animation:none;opacity:.65;transform:scale(.85)}.pond-portal .pond-ring:nth-child(2){transform:scale(.55)}.pond-portal .pond-ring:nth-child(3){transform:scale(.3)}}
.still .pond-portal:hover .pond-ring,.still .pond-portal:focus-visible .pond-ring{animation:none;opacity:.65;transform:scale(.85)}

/* A quiet hit area follows the painted key; the clue stays hidden until found. */
.garden-key{position:absolute;left:16.8%;top:69%;width:14%;height:13.5%;min-width:48px;min-height:44px;padding:0;z-index:3;border:0;border-radius:35%;background:transparent;box-shadow:none;pointer-events:auto;cursor:help;color:#fff1cb;transform:none}
.garden-key:hover,.garden-key:focus{background:transparent;box-shadow:none;transform:none}
.garden-key:focus-visible{outline:2px dashed #ffe4a2;outline-offset:4px}
.key-clue{position:absolute;left:50%;bottom:100%;width:max-content;max-width:min(280px,68vw);padding:11px 16px;border:1px solid #d0b67d;border-radius:9px;background:#101d13f5;box-shadow:0 5px 18px #0005;font:700 clamp(15px,1.4vw,21px)/1.4 Fell,Georgia,serif;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}
.garden-key:hover .key-clue,.garden-key:focus .key-clue{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:900px){.garden-key .key-clue{left:0;max-width:65vw;transform:translate(0,5px)}.garden-key:hover .key-clue,.garden-key:focus .key-clue{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.key-clue{transition:none}}

/* Both full-width paintings meet in the same black night sky. */
#beginning.forest-hero .hero-picture:after{height:18%;min-height:20px;max-height:110px;background:linear-gradient(to bottom,transparent 0%,#0001 22%,#0008 66%,#000 100%)}
#river{border-top:0;background:#000}
#river:before{height:8%;min-height:18px;max-height:80px;background:linear-gradient(to bottom,#000 0%,#000b 22%,transparent 100%);z-index:2}
#river>.sky-twinkles{z-index:3}

/* Small, staggered glints follow actual stars in the second scene. */
#river>.sky-twinkles i{width:clamp(7px,1vw,16px);filter:drop-shadow(0 0 5px #fffbdab3)}
#river>.sky-twinkles i:after{content:"";position:absolute;inset:-65%;border-radius:50%;background:radial-gradient(circle,#fffad54d,transparent 68%)}

/* Keep the signature above the illustrated crease at the parchment’s foot. */
@media(min-width:901px){.nft-scroll .roadmap-layout{bottom:27%}}
.nft-scroll-signature{font-family:Fell,Georgia,serif;letter-spacing:.03em;text-decoration:none}

/* A narrow gloss passes over the illustrated coin without covering its edges. */
.coin-gloss{position:absolute;left:88.2278%;top:44.5328%;width:8.8292%;height:9.5427%;z-index:1;border-radius:50%;overflow:hidden;pointer-events:none;transform:rotate(7deg)}
.coin-gloss:before{content:"";position:absolute;inset:-35% -50%;background:linear-gradient(110deg,transparent 36%,#fff9cf00 42%,#fffbdcbb 49%,#fff 50%,#fffbdc66 54%,transparent 62%);transform:translateX(-90%);opacity:0;animation:coin-gloss-sweep 7.6s ease-in-out infinite}
@keyframes coin-gloss-sweep{0%,62%{transform:translateX(-90%);opacity:0}66%{opacity:.7}82%{transform:translateX(90%);opacity:.7}86%,100%{transform:translateX(90%);opacity:0}}
/* Moon and stars use the same coordinate plane as the uncropped pond painting. */
.garden-moon-glow{position:absolute;left:77.93%;top:9.18%;width:8.9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:transparent;box-shadow:0 0 clamp(9px,2.1vw,32px) clamp(2px,.45vw,7px) #f4faff70,0 0 clamp(18px,3.7vw,58px) clamp(4px,.9vw,14px) #dcecff2b;animation:garden-moon-breathe 8s ease-in-out infinite;pointer-events:none}
@keyframes garden-moon-breathe{0%,100%{opacity:.65}50%{opacity:1}}
#garden .garden-sky i{width:clamp(7px,.9vw,14px);filter:drop-shadow(0 0 5px #fffbe9a6)}
#garden .garden-sky i:after{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,#fff9cc44,transparent 70%)}
/* The last chapter closes with the dragon and a quiet music credit. */
#garden .footer-dock{grid-template-columns:1fr;justify-items:center;gap:26px}
#garden .footer-brand{gap:22px;font-size:clamp(46px,4.5vw,68px);line-height:1.05;color:#fff}
#garden .footer-brand img{width:100px;height:100px}
#garden .footer-brand small{font:400 clamp(17px,1.55vw,23px)/1.4 Fell,Georgia,serif;letter-spacing:2.1px;color:#fff;margin-top:12px}
#garden .music-credit{font-size:15px;line-height:1.55;color:#8c9290;max-width:650px;margin:0;text-align:center}
#garden .music-credit a{color:inherit;transition:color .2s}
#garden .music-credit a:hover,#garden .music-credit a:focus-visible{color:#cbd1ce}
#garden .footer-socials{display:flex;flex-direction:row;justify-self:start;align-items:center;gap:12px}
#garden .footer-socials[hidden]{display:none}
#garden .footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:10px;border:0;border-radius:0;box-shadow:none;background:transparent;color:#fff;text-decoration:none;transition:filter .2s,transform .2s}
#garden .footer-socials svg{display:block;width:28px;height:28px;fill:currentColor}
#garden .footer-socials a:hover,#garden .footer-socials a:focus-visible{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #bfffd1);transform:translateY(-2px)}
#garden .footer-socials a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:7px}
@media(max-width:650px){#garden .footer-dock{gap:25px}#garden .footer-brand{gap:16px;font-size:46px}#garden .footer-brand img{width:78px;height:78px}#garden .footer-brand small{font-size:16px;letter-spacing:1.2px;margin-top:9px}#garden .music-credit{font-size:13px;max-width:430px}#garden .footer-socials{gap:10px}}
@media(max-width:360px){#garden .footer-brand{gap:12px;font-size:40px}#garden .footer-brand img{width:66px;height:66px}#garden .footer-brand small{font-size:14px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){#garden .footer-socials a,#garden .music-credit a{transition:none}}
.still .coin-gloss:before{animation:none;opacity:0}.still .garden-moon-glow{animation:none;opacity:.8}
@media(prefers-reduced-motion:reduce){.coin-gloss:before{animation:none;opacity:0}.garden-moon-glow{animation:none;opacity:.8}}

/* The pond starts in its own sky so the previous parchment cannot cross its moon. */
#garden{margin-top:0;mask-image:none;-webkit-mask-image:none}
#garden:before{content:"";position:absolute;inset:0 0 auto;height:clamp(3px,.55vw,8px);background:linear-gradient(#000,transparent);z-index:1;pointer-events:none}
#roadmap.nft-scroll{background:#000}
.scroll-scene:after{content:"";position:absolute;inset:auto 0 0;height:5%;background:linear-gradient(transparent,#000);z-index:1;pointer-events:none}

/* The painted coin opens the supplied OURO market in a separate tab. */
.scroll-coin-link{position:absolute;left:88.2278%;top:44.5328%;width:8.8292%;height:9.5427%;z-index:3;border-radius:50%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scroll-coin-link .coin-gloss{inset:0;width:100%;height:100%;transform:none}
.scroll-coin-link:after{content:"";position:absolute;inset:-5px;border-radius:50%}
.scroll-coin-link:hover{filter:drop-shadow(0 0 7px #f3e6a580)}
.scroll-coin-link:focus-visible{outline:3px solid #fff1b2;outline-offset:5px}
@media(max-width:600px){.scroll-coin-link:after{inset:-12px}}