/* ============================================================
   LA FORESTA INCANTATA — versione leggera
   Tutto il bosco è disegnato su un'unica tela (canvas): niente centinaia di
   elementi, niente ombre ricalcolate, niente layout a ogni frame.
   La finestra che si apre è un clip-path (non cambia il layout della pagina).
   ============================================================ */
.forest{position:relative;height:900vh;background:var(--pink)}
.fst{position:sticky;top:0;height:100vh;overflow:hidden}
.fpanel{position:absolute;inset:0;overflow:hidden;background:#7a8a3c;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  clip-path:inset(calc((1 - var(--oc,1)) * 20vh) calc((1 - var(--oc,1)) * 22vw) round calc((1 - var(--oc,1)) * 36px))}
.fscene{position:absolute;inset:0}
.fworld{position:absolute;inset:0}
.fworld canvas{display:block;width:100%;height:100%;transform-origin:50% 50%;transform:scale(var(--zs,1));will-change:transform}
.fshade{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(30,15,5,.32) 100%)}

.fbroom{position:absolute;left:0;top:0;width:clamp(200px,26vw,460px);z-index:3;will-change:transform}
.fcap{position:absolute;left:50%;top:15%;z-index:4;pointer-events:none;
  font-family:Bayon,Impact,sans-serif;font-size:clamp(28px,4.2vw,68px);line-height:1;white-space:nowrap;
  background:var(--red);color:var(--cream);border-radius:999px;padding:.32em 1em .2em;
  transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .45s,transform .7s cubic-bezier(.3,1.5,.5,1)}
.fcap.on{opacity:1;transform:translate(-50%,-50%) scale(1)}

.fintro{position:absolute;inset:0;z-index:5;display:grid;place-items:center;align-content:center;gap:2vh;text-align:center;
  pointer-events:none;opacity:calc(1 - var(--oi,0) * 2.2)}
.fintro h2{margin:0;color:var(--cream);font-size:clamp(64px,9vw,170px);line-height:.82;text-shadow:0 .04em 0 rgba(60,30,10,.55)}
.fintro .pill{pointer-events:none;font-size:clamp(20px,2vw,32px)}
.flabels{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:calc(1 - var(--oi,0) * 3)}
.flabels.exit{opacity:var(--oe,0)}
.flabels span{position:absolute;left:50%;transform:translateX(-50%);font-family:Bayon,Impact,sans-serif;color:var(--red);
  font-size:clamp(22px,2.4vw,40px);white-space:nowrap}
.flabels .t{top:calc(10vh * (1 - var(--o,0)) - .5em)}
.flabels .b{bottom:calc(10vh * (1 - var(--o,0)) - .5em)}

@media (max-width:760px),(orientation:portrait){
  .fpanel{clip-path:inset(calc((1 - var(--oc,1)) * 16vh) calc((1 - var(--oc,1)) * 7vw) round calc((1 - var(--oc,1)) * 28px))}
  .fcap{top:13%;font-size:clamp(24px,7.4vw,44px)}
}


.fintro{display:none !important}   /* il titolo grande e' sostituito dalla porta */
.flabels .t{top:calc(4vh * (1 - var(--o,0)) - .3em)}
.flabels .b{bottom:calc(4vh * (1 - var(--o,0)) - .3em)}