/* ============================================================
   IL MURO CON LA PORTA (versione D) — WALL_DOOR_02
   Il muro riempie sempre tutta la finestra (un po' oltre i bordi); tutto quello che ci sta sopra
   e' posizionato in percentuale sull'immagine, quindi segue il muro quando cambia misura o si zooma.
   ============================================================ */
.forest{height:150vh}
section.forest{height:150vh}                    /* porta chiusa: la sezione e' corta e lo scroll la supera */
section.forest.open{height:900vh}               /* porta aperta: si entra nella foresta */
.flabels:not(.exit){display:none}
.fpanel{-webkit-mask-image:none!important;mask-image:none!important;clip-path:none!important}

.wscene{position:absolute;inset:0;z-index:5;overflow:hidden;touch-action:pan-y;cursor:grab;pointer-events:none}
.wscene:active{cursor:grabbing}
.wall{position:absolute;will-change:transform;pointer-events:none}
.wall > *{pointer-events:auto}
.wimg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}

/* le due ante: dietro al muro non serve, stanno nell'apertura e ruotano sui bordi esterni */
.wleaves{position:absolute;inset:0;pointer-events:none}
.wl{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;will-change:transform;-webkit-user-drag:none}
.wl.l{left:38.087%;top:31.035%;width:12.116%;transform-origin:0 50%}
.wl.r{left:49.952%;top:31.035%;width:11.942%;transform-origin:100% 50%}

/* decorazioni: animali, creature, piante — ognuna in percentuale sull'immagine, ancorata ai piedi */
.wdeco{position:absolute;inset:0;pointer-events:none}
.wd{position:absolute;transform:translate(-50%,-100%);pointer-events:auto}
.wd .sp{touch-action:pan-y;transform-origin:50% 100%;animation-duration:var(--dur,5s);animation-delay:var(--dl,0s);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.wd.bob .sp{animation-name:wbob}
.wd.sway .sp{animation-name:wsway}
.wd.breathe .sp{animation-name:wbreathe}
.wd.float .sp{animation-name:wfloat;animation-duration:calc(var(--dur,5s) * 1.6)}
.wd.flit .sp{animation-name:wflit;animation-duration:calc(var(--dur,5s) * .9)}
@keyframes wbob{0%,100%{translate:0 0}50%{translate:0 -6%}}
@keyframes wsway{0%,100%{rotate:-2.6deg}50%{rotate:2.6deg}}
@keyframes wbreathe{0%,100%{scale:1 1}50%{scale:1.02 1.045}}
@keyframes wfloat{0%,100%{translate:0 0;rotate:-3deg}25%{translate:6% -10%;rotate:4deg}50%{translate:0 -16%;rotate:-2deg}75%{translate:-6% -8%;rotate:5deg}}
@keyframes wflit{0%,100%{translate:0 0;rotate:-8deg}30%{translate:14% -18%;rotate:10deg}60%{translate:-10% -30%;rotate:-6deg}}

/* il calderone sul muro (dove sta la chiave) e la serratura */
.wcauldron{position:absolute;left:73.74%;top:75.06%;width:9%;height:12.5%;transform:translate(-50%,-50%);padding:0;border:0;background:none;cursor:pointer;border-radius:50%;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.wcauldron:focus-visible{outline:2px dashed var(--red);outline-offset:4px}
.wcauldron.pulse::after{content:"";position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,220,140,.55),rgba(255,220,140,0));animation:wpulse 1.8s ease-in-out infinite}
@keyframes wpulse{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.wkeyhole{position:absolute;left:52.87%;top:69.31%;width:3.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.wkeyhole.hot::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,225,150,.75),rgba(255,225,150,0));animation:wpulse 1.4s ease-in-out infinite}

/* la chiave: salta fuori dal calderone, atterra sul ripiano e si trascina alla serratura */
.wkey{position:absolute;left:70.5%;top:80.3%;width:3.2%;transform:translate(-50%,-100%);padding:0;border:0;background:none;cursor:grab;touch-action:none;z-index:8;-webkit-tap-highlight-color:transparent}
.wkey img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(60,30,10,.35))}
.wkey::before{content:none;position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,225,150,.6),rgba(255,225,150,0));animation:wpulse 1.6s ease-in-out infinite;pointer-events:none}
.wkey.away{opacity:.15;pointer-events:none}
.wkeydrag{position:fixed;left:0;top:0;z-index:990;pointer-events:none;will-change:transform}
.wkeydrag img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 6px rgba(60,30,10,.3))}

/* suggerimento in basso e scintille */
.whint{position:absolute;left:50%;bottom:calc(6px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9;pointer-events:none;
  font-family:Bayon,Impact,sans-serif;font-size:clamp(15px,1.7vw,24px);text-transform:uppercase;color:var(--red);opacity:.9;
  transition:opacity .4s;text-shadow:0 1px 0 var(--cream),0 -1px 0 var(--cream),1px 0 0 var(--cream),-1px 0 0 var(--cream);
  max-width:min(88vw,600px);text-align:center;line-height:1.08;white-space:normal}
.whint.long{font-size:clamp(12px,1.4vw,19px);max-width:min(90vw,520px)}
.wfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
@media (prefers-reduced-motion:reduce){.wd .sp,.wkey::before,.wcauldron.pulse::after,.wkeyhole.hot::before{animation:none!important}}

.warrow{position:absolute;z-index:9;width:46px;height:46px;border-radius:50%;border:0;background:var(--red);color:var(--cream);font-size:20px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;
  transform:translateY(-50%) scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);box-shadow:0 4px 0 rgba(60,20,10,.25);animation:wnudge 1.2s ease-in-out infinite}
.warrow.l{left:10px}.warrow.r{right:10px}
.warrow.on{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
@keyframes wnudge{0%,100%{translate:0 0}50%{translate:var(--nx,-5px) 0}}
.warrow.r{--nx:5px}

/* alberi ai lati del muro: dietro al muro, tagliati dai bordi del browser */
.wtrees{position:absolute;inset:0;pointer-events:none}
.wtree{position:absolute;display:block;max-width:none;height:auto;transform:translate(-50%,-100%) scaleX(var(--fl,1));transform-origin:50% 100%;animation:wtreesway 9s ease-in-out infinite;animation-delay:var(--dl,0s);pointer-events:none;-webkit-user-drag:none;user-select:none}
@keyframes wtreesway{0%,100%{rotate:-.5deg}50%{rotate:.5deg}}
@media (prefers-reduced-motion:reduce){.wtree{animation:none}}

/* sfumatura morbida in cima: solo lo sfondo si fonde con la sezione sopra; l'illustrazione (z-index 5) resta intatta */
.fst::before{content:"";position:absolute;left:0;right:0;top:0;height:42vh;z-index:1;pointer-events:none;transform:translateY(var(--ty,0px));
  background:linear-gradient(to bottom,var(--pink) 0%,rgba(233,211,174,.85) 22%,rgba(233,211,174,.5) 50%,rgba(233,211,174,.18) 78%,rgba(233,211,174,0) 100%)}

/* il prato verde sotto il muro e la porta: sfuma verso il beige solo nello sfondo (l'illustrazione sta sopra, z-index 5) */
section.forest:not(.open) .fst::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30vh;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(233,211,174,0) 0%,rgba(233,211,174,.25) 35%,rgba(233,211,174,.7) 75%,var(--pink) 100%)}

/* niente vignettatura scura ai bordi finche' la porta e' chiusa: era lei a creare le fasce di colore sotto l'RSVP e sotto "trova la chiave" */
section.forest:not(.open) .fshade{display:none}

.fshade{opacity:var(--sh,0)}

/* la moneta con la runa sul muro: luminosa e ben visibile */
.wd.coin{z-index:8}
.wd.coin .sp img{filter:drop-shadow(0 0 8px #ffe08a) drop-shadow(0 0 22px rgba(255,190,50,.95))}
.wd.coin::before{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,120,.6),rgba(255,226,120,0));animation:wpulse 1.6s ease-in-out infinite;pointer-events:none}

/* la moneta con la runa nel bosco: grande, luminosa, si vede da lontano */
.fcoin{position:absolute;z-index:7;width:clamp(84px,11vw,150px);aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border:0;background:none;cursor:pointer;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent}
.fcoin img{display:block;width:100%;height:auto;animation:fcspin 2.6s ease-in-out infinite;filter:drop-shadow(0 0 10px #ffe08a) drop-shadow(0 0 26px rgba(255,190,50,.95));pointer-events:none}
.fcoin::before{content:"";position:absolute;left:50%;top:50%;width:250%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,120,.75),rgba(255,226,120,0));animation:wpulse 1.5s ease-in-out infinite;pointer-events:none}
@keyframes fcspin{0%,100%{transform:scaleX(1) rotate(-6deg)}50%{transform:scaleX(.35) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.fcoin img,.fcoin::before{animation:none}}