/* Emozioni Digitali · i disegni animati delle copertine (scene.js) */
.scene { position: relative; display: block; width: min(76vw, 280px, 40vh); margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .8s, transform .8s; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene > img { display: block; width: 100%; height: auto; animation: sc-float 4s ease-in-out infinite; transition: transform .8s, opacity .8s; }
.scene.gone { opacity: 0; transform: translateY(24px) scale(.92); pointer-events: none; }
.sc-png.open > img { transform: scale(1.15); opacity: .2; }
.sc-castello, .sc-cassetta { width: min(76vw, 300px, 38vh); }
.sc-aereo { width: min(70vw, 280px); }

/* colori dalla palette del modello */
.scene .ca { fill: var(--accent); } .scene .cb { fill: var(--accent2); } .scene .cp { fill: var(--paper); }
.scene .ci { fill: var(--ink); } .scene .ce { fill: var(--env, #efe2c4); }
.scene .sa { stroke: var(--accent); } .scene .sb { stroke: var(--accent2); }
.scene .lt { filter: brightness(1.12); } .scene .dk1 { filter: brightness(.94); } .scene .dk2 { filter: brightness(.86); } .scene .dk3 { filter: brightness(.65); }
.scene .nm { font-family: var(--f-title, Georgia, serif); }
.scene .ini { font-family: var(--f-title, Georgia, serif); }

/* l'anello di "tieni premuto" */
.scene .ring { position: absolute; width: 84px; height: 84px; transform: translate(-50%, -50%); pointer-events: none; }
.scene .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.scene .ring circle { fill: none; stroke: var(--accent); stroke-width: 6; stroke-dasharray: 339; stroke-dashoffset: 339; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); }
.light .scene .ring circle { stroke: var(--ink2); }

/* mini anteprime */
.thumb { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: grid; place-items: center; padding: 10%; }
.thumb .scene { width: 100%; max-width: 100%; pointer-events: none; }

@keyframes sc-float { 50% { transform: translateY(-8px); } }
@keyframes sc-bob { 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes sc-sway { 50% { transform: rotate(2.5deg); } }
@keyframes sc-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } }
@keyframes sc-blink { 50% { opacity: .25; } }
@keyframes sc-flicker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.9, 1.12); } 60% { transform: scale(1.08, .92); } }
@keyframes sc-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.06); } 40% { transform: scale(.98); } }
@keyframes sc-jump { 30% { transform: translateY(-16px) scale(1.04); } 60% { transform: translateY(0) scale(.98, 1.02); } }
@keyframes sc-shake { 20%, 60% { transform: rotate(-7deg); } 40%, 80% { transform: rotate(7deg); } }
@keyframes sc-spin { to { transform: rotate(1turn); } }
@keyframes sc-puff { 0% { transform: translateY(8px) scale(.5); opacity: 0; } 30% { opacity: .55; } 100% { transform: translateY(-14px) scale(1.2); opacity: 0; } }
@keyframes sc-stamp { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sc-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sc-flap { 50% { transform: scaleY(-.6); } }
@keyframes sc-fall { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes sc-rise { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-30px); opacity: 0; } }

/* castello */
.sc-castello .win { animation: sc-blink 3s infinite; }
.sc-castello .win:nth-of-type(2n) { animation-delay: 1.1s; }
.sc-castello .flag { transform-box: fill-box; transform-origin: 0 50%; animation: sc-flicker 1.6s infinite; }
.sc-castello .gate { transition: fill 1s; }
.sc-castello.open .win { fill: #fff8d6; animation: none; filter: drop-shadow(0 0 6px #ffe9a0); }
.sc-castello.open .gate { fill: #ffe9a0; }
.sc-castello.open .cs { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-jump .8s; }

/* lucchetto */
.sc-lucchetto .bd { transform-box: fill-box; transform-origin: 50% 60%; animation: sc-beat 1.6s infinite; }
.sc-lucchetto .shk { transform-box: fill-box; transform-origin: 100% 100%; transition: transform .7s cubic-bezier(.3,1.6,.5,1); }
.sc-lucchetto.open .shk { transform: translate(10px, -24px) rotate(30deg); }

/* busta */
.sc-busta .flap { transform-box: fill-box; transform-origin: 50% 0; transition: transform .7s .25s; }
.sc-busta .let { transform-box: fill-box; transition: transform .9s .8s cubic-bezier(.3,1.2,.5,1); }
.sc-busta .seal { transform-box: fill-box; transform-origin: center; transition: transform .5s, opacity .5s; }
.sc-busta.open .seal { transform: translateY(40px) rotate(40deg) scale(.6); opacity: 0; }
.sc-busta.open .flap { transform: scaleY(-1); }
.sc-busta.open .let { transform: translateY(-58px); }

/* barattolo */
.sc-barattolo .fl { transform-box: fill-box; transform-origin: center; animation: sc-blink 2s calc(var(--i) * .3s) infinite; filter: drop-shadow(0 0 5px var(--accent)); transition: transform 1.6s calc(var(--i) * .06s) ease-out, opacity 1.6s; }
.sc-barattolo .lid { transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.3,1.3,.5,1); }
.sc-barattolo.open .lid { transform: translate(34px, -70px) rotate(40deg); }
.sc-barattolo.open .fl { transform: translate(var(--dx), -150px); opacity: 0; animation: none; }

/* torta */
.sc-torta .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-flicker .5s infinite; transition: opacity .3s, transform .3s; }
.sc-torta .smk { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-torta .t { cursor: pointer; }
.sc-torta .t.done .flame { opacity: 0; animation: none; transform: scale(.2); }
.sc-torta .t.done .smk { animation: sc-puff 1.2s forwards; }
.sc-torta.open .ck { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-jump .7s; }

/* palloncini */
.sc-palloncini .t { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-bob 3s ease-in-out infinite; transition: transform .15s, opacity .15s; cursor: pointer; }
.sc-palloncini .b1 { animation-delay: -1s; } .sc-palloncini .b2 { animation-delay: -2s; }
.sc-palloncini .t.done { transform: scale(1.5); opacity: 0; animation: none; pointer-events: none; }

/* regalo */
.sc-regalo svg { transform-origin: 50% 100%; animation: sc-wiggle 2.4s ease-in-out infinite; }
.sc-regalo .lid { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.3,1.4,.5,1); }
.sc-regalo.open svg { animation: none; }
.sc-regalo.open .lid { transform: translate(40px, -100px) rotate(32deg); }

/* razzo */
.sc-razzo .rk { transform-box: fill-box; animation: sc-shake .25s infinite; animation-play-state: paused; transition: transform 1.5s cubic-bezier(.6,0,.9,.4); }
.sc-razzo .flame { transform-box: fill-box; transform-origin: 50% 0; animation: sc-flicker .3s infinite; }
.sc-razzo:hover .rk { animation-play-state: running; }
.sc-razzo.open .rk { transform: translateY(-340px); animation: none; }
.sc-razzo.open .flame { transform: scaleY(1.8); }

/* tocco */
.sc-tocco .tas { transform-box: fill-box; transform-origin: 0 0; animation: sc-swing 2.4s ease-in-out infinite; }
.sc-tocco .cap { transform-box: fill-box; transform-origin: center; transition: transform 1.3s cubic-bezier(.2,.9,.4,1); }
.sc-tocco.open .cap { transform: translateY(-190px) rotate(-340deg); }

/* spumante */
.sc-spumante .foam { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); transition: transform .6s .2s cubic-bezier(.3,1.6,.5,1); }
.sc-spumante .cork { transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.2,.8,.4,1); }
.sc-spumante svg { transform-origin: 50% 100%; animation: sc-wiggle 3s ease-in-out infinite; }
.sc-spumante.open svg { animation: none; }
.sc-spumante.open .cork { transform: translate(60px, -150px) rotate(240deg); }
.sc-spumante.open .foam { transform: scale(1); }

/* trofeo */
.sc-trofeo .shine { animation: sc-shine 3s ease-in-out infinite; }
@keyframes sc-shine { 0%, 60% { transform: translateX(0); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(80px); opacity: 0; } }
.sc-trofeo .st { transform-box: fill-box; transform-origin: center; }
.sc-trofeo.open .tr { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-jump .8s; }
.sc-trofeo.open .st { animation: sc-spin .9s; }

/* nuvola */
.sc-nuvola .cl { fill: #8a9bb0; transition: fill 1s; }
.sc-nuvola .dr { transform-box: fill-box; animation: sc-fall 1s linear infinite; animation-delay: calc(var(--i) * .17s); }
.sc-nuvola .rain { transition: opacity .6s; }
.sc-nuvola .rb path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s calc(.5s + var(--i) * .12s); }
.sc-nuvola .sun { transform-box: fill-box; transform-origin: center; transform: translateY(30px) scale(.4); opacity: 0; transition: transform 1s .3s, opacity 1s .3s; }
.sc-nuvola .mouth { transform-box: fill-box; transform-origin: center; transform: scaleY(-1); transition: transform .5s; }
.sc-nuvola.open .cl { fill: #ffffff; }
.sc-nuvola.open .rain { opacity: 0; }
.sc-nuvola.open .rb path { stroke-dashoffset: 0; }
.sc-nuvola.open .sun { transform: none; opacity: 1; }
.sc-nuvola.open .mouth { transform: none; }

/* fiori */
.sc-fiori .bq { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-sway 4s ease-in-out infinite; }
.sc-fiori .fw { transform-box: fill-box; transform-origin: center; transform: scale(.55); transition: transform .8s calc(var(--d) + .1s) cubic-bezier(.3,1.6,.5,1); }
.sc-fiori.open .fw { transform: scale(1.2); }

/* cassetta */
.sc-cassetta .door { transform-box: fill-box; transform-origin: left center; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.sc-cassetta.open .door { transform: perspective(400px) rotateY(-110deg); }
.sc-cassetta .flag { transform-box: fill-box; transform-origin: 0% 100%; animation: sc-swing 2s ease-in-out infinite; }

/* aereo */
.sc-aereo .pl { animation: sc-hover 3s ease-in-out infinite; transition: transform 1s cubic-bezier(.5,0,.3,1); transform-box: fill-box; }
@keyframes sc-hover { 50% { transform: translate(8px, -14px) rotate(3deg); } }
.sc-aereo.open .pl { animation: none; transform: translate(260px, -160px) rotate(-14deg) scale(.6); }

/* luna */
.sc-luna .moon { transform-box: fill-box; transform-origin: center; animation: sc-sway 5s ease-in-out infinite; }
.sc-luna .tw { transform-box: fill-box; transform-origin: center; animation: sc-blink 2s infinite; }
.sc-luna .shoot { opacity: 0; }
.sc-luna.open .shoot { animation: sc-shoot 1.1s .1s ease-in forwards; }
@keyframes sc-shoot { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-170px, 85px); } }
.sc-luna.open .moon { filter: drop-shadow(0 0 14px #fff2b8); }

/* cartolina */
.sc-cartolina .pc { transform-box: fill-box; transform-origin: center; animation: sc-sway 4s ease-in-out infinite; transition: transform .9s .7s; }
.sc-cartolina .pm { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-cartolina.open .pm { animation: sc-stamp .5s forwards; }
.sc-cartolina.open .pc { animation: none; transform: translateY(-30px) rotate(-6deg) scale(1.06); }

/* casetta */
.sc-casetta .smk circle { transform-box: fill-box; transform-origin: center; animation: sc-puff 3s infinite; }
.sc-casetta .smk circle:nth-child(2) { animation-delay: 1s; } .sc-casetta .smk circle:nth-child(3) { animation-delay: 2s; }
.sc-casetta .w { fill: #f4c96a; animation: sc-blink 4s infinite; }
.sc-casetta .door { transform-box: fill-box; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.3,1.2,.5,1); }
.sc-casetta.open .door { transform: scaleX(.12); }
.sc-casetta.open .w { fill: #fff3c0; animation: none; filter: drop-shadow(0 0 6px #ffe39a); }

/* libro */
.sc-libro .cv { transform-box: fill-box; transform-origin: 0 50%; transition: transform .9s cubic-bezier(.5,0,.3,1), opacity .3s .7s; }
.sc-libro svg { animation: sc-float 4s ease-in-out infinite; }
.sc-libro.open .cv { transform: scaleX(.04) skewY(-8deg); opacity: 0; }

/* albero */
.sc-albero .can { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-sway 5s ease-in-out infinite; }
.sc-albero .h { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s calc(var(--d) + .1s) cubic-bezier(.3,1.8,.5,1); }
.sc-albero.open .h { transform: scale(1); }

/* anelli */
.sc-anelli .lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.3,1.3,.5,1); }
.sc-anelli .gl { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-anelli svg { animation: sc-float 4s ease-in-out infinite; }
.sc-anelli.open .lid { transform: translateY(-62px) rotate(-6deg); }
.sc-anelli.open .gl { animation: sc-blink 1s .6s infinite; opacity: 1; }

/* colombe */
.sc-colombe .d1, .sc-colombe .d2 { transform-box: fill-box; transition: transform 1.6s cubic-bezier(.4,0,.3,1); }
.sc-colombe .wg { transform-box: fill-box; transform-origin: 50% 100%; }
.sc-colombe .hh { transform-box: fill-box; transform-origin: center; animation: sc-beat 1.6s infinite; }
.sc-colombe.open .d1 { transform: translate(-70px, -170px) rotate(-10deg); }
.sc-colombe.open .d2 { transform: translate(70px, -170px) rotate(10deg); }
.sc-colombe.open .wg { animation: sc-flap .25s infinite; }

/* cicogna */
.sc-cicogna .stk { transform-box: fill-box; animation: sc-bob 3s ease-in-out infinite; transition: transform 1.6s ease-in; }
.sc-cicogna .wg { transform-box: fill-box; transform-origin: 30% 100%; animation: sc-flap 1.2s ease-in-out infinite; }
.sc-cicogna .bdl { transform-box: fill-box; transform-origin: 50% 0; animation: sc-swing 3s ease-in-out infinite; transition: transform 1.4s .3s cubic-bezier(.3,1.2,.5,1); }
.sc-cicogna.open .stk { animation: none; transform: translate(260px, -80px); }
.sc-cicogna.open .bdl { animation: none; transform: translate(-54px, 30px) scale(1.25); }

/* giostrina */
.sc-giostrina .hang { transform-box: fill-box; transform-origin: 50% 0; animation: sc-swing 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.sc-giostrina.open .hang { animation-duration: .7s; }
.sc-giostrina.open .mob { transform-box: fill-box; transform-origin: 50% 0; animation: sc-swing 1.2s ease-in-out 2; }

/* panni */
.sc-panni .it { transform-box: fill-box; transform-origin: 50% 0; animation: sc-swing 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
.sc-panni.open .it { animation-duration: .6s; }

/* albero di Natale */
.sc-alberonatale .lt { opacity: .3; transition: opacity .3s calc(var(--i) * .08s); }
.sc-alberonatale .st { transform-box: fill-box; transform-origin: center; opacity: .55; transition: opacity .5s; }
.sc-alberonatale.open .lt { opacity: 1; animation: sc-blink 1.2s calc(var(--i) * .15s + 1s) infinite; filter: drop-shadow(0 0 4px currentColor); }
.sc-alberonatale.open .st { opacity: 1; animation: sc-spin 1s; filter: drop-shadow(0 0 10px #ffe9a0); }

/* palla di neve */
.sc-pallaneve .sn { transform-box: fill-box; animation: sc-fall 4s linear infinite; animation-delay: calc(var(--i) * -.4s); }
.sc-pallaneve .glb { transform-box: fill-box; transform-origin: 50% 100%; }
.sc-pallaneve.open .glb { animation: sc-shake .35s 3; }
.sc-pallaneve.open .sn { animation-duration: 1.2s; }

/* fuochi */
.sc-fuochi .sp { transform-box: fill-box; transform-origin: center; animation: sc-blink .3s infinite; }
.sc-fuochi .rk { transform-box: fill-box; transition: transform 1s cubic-bezier(.6,0,.9,.5), opacity .3s .9s; }
.sc-fuochi.open .rk { transform: translateY(-170px); opacity: 0; }

/* uovo */
.sc-uovo svg { transform-origin: 50% 100%; animation: sc-wiggle 2.6s ease-in-out infinite; }
.sc-uovo .top { transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.3,1.2,.5,1); }
.sc-uovo .chk { transform-box: fill-box; transition: transform .6s .4s cubic-bezier(.3,1.8,.5,1); }
.sc-uovo.open svg { animation: none; }
.sc-uovo.open .top { transform: translate(-36px, -96px) rotate(-34deg); }
.sc-uovo.open .chk { transform: translateY(-16px); }

/* biscotto */
.sc-biscotto svg { transform-origin: 50% 70%; animation: sc-wiggle 2.6s ease-in-out infinite; }
.sc-biscotto .l, .sc-biscotto .r { transform-box: fill-box; transform-origin: 100% 100%; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.sc-biscotto .r { transform-origin: 0 100%; }
.sc-biscotto .strip { transform-box: fill-box; transform-origin: center; transform: scaleX(.2); opacity: 0; transition: transform .7s .3s cubic-bezier(.3,1.4,.5,1), opacity .3s .3s; }
.sc-biscotto.open svg { animation: none; }
.sc-biscotto.open .l { transform: translate(-30px, 12px) rotate(-22deg); }
.sc-biscotto.open .r { transform: translate(30px, 12px) rotate(22deg); }
.sc-biscotto.open .strip { transform: none; opacity: 1; }

/* tazze */
.sc-tazze .st path { transform-box: fill-box; animation: sc-rise 2.4s ease-out infinite; }
.sc-tazze .m1, .sc-tazze .m2 { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.sc-tazze.open .m1 { transform: translateX(16px) rotate(14deg); }
.sc-tazze.open .m2 { transform: translateX(-16px) rotate(-14deg); }

/* bolle */
.sc-bolle .b { transform-box: fill-box; transform-origin: center; animation: sc-float 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.sc-bolle .big { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.sc-bolle.open .big { animation: sc-bubble 1.4s ease-out forwards; }
@keyframes sc-bubble { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1.3) translateY(-20px); } 100% { transform: scale(1.6) translate(10px, -90px); opacity: 0; } }

/* valigia */
.sc-valigia .sk { transform-box: fill-box; transform-origin: center; transition: transform .4s calc(var(--i) * .12s) cubic-bezier(.3,1.8,.5,1); }
.sc-valigia .sk:nth-of-type(n+3) { transform: scale(0); }
.sc-valigia .vl { transform-box: fill-box; transition: transform 1.2s .8s cubic-bezier(.6,0,.9,.6); }
.sc-valigia svg { animation: sc-float 3s ease-in-out infinite; }
.sc-valigia.open .sk { transform: scale(1.1); }
.sc-valigia.open .vl { transform: translateX(280px) rotate(6deg); }

/* mongolfiera */
.sc-mongolfiera .bal { transform-box: fill-box; animation: sc-bob 4s ease-in-out infinite; transition: transform 2s cubic-bezier(.5,0,.6,1); }
.sc-mongolfiera.open .bal { animation: none; transform: translate(30px, -360px) rotate(4deg); }

/* barchetta */
.sc-barchetta .bt { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-bob 2.6s ease-in-out infinite; transition: transform 2s cubic-bezier(.5,0,.6,1); }
.sc-barchetta svg { overflow: hidden; }
.sc-barchetta .wv { animation: sc-wave 3s linear infinite; }
.sc-barchetta .w2 { animation-duration: 2s; animation-direction: reverse; }
@keyframes sc-wave { to { transform: translateX(40px); } }
.sc-barchetta.open .bt { animation: none; transform: translateX(260px) rotate(4deg); }

/* sdraio */
.sc-sdraio .sun { transform-box: fill-box; transform-origin: center; transform: translateY(26px); transition: transform 1.2s cubic-bezier(.3,1.1,.5,1); }
.sc-sdraio .rays { transform-box: fill-box; transform-origin: center; animation: sc-spin 12s linear infinite; }
.sc-sdraio.open .sun { transform: translateY(-58px); }
.sc-sdraio.open .rays { animation-duration: 2s; }

/* medaglia */
.sc-medaglia .md { transform-box: fill-box; transform-origin: 50% 0; animation: sc-swing 3s ease-in-out infinite; }
.sc-medaglia.open .md { animation: sc-swing .5s ease-in-out 3; filter: drop-shadow(0 0 16px #ffe28a); }

/* lavagna */
.sc-lavagna .ch { font-family: "Caveat", cursive; font-weight: 600; fill: transparent; stroke: #f2f2e8; stroke-width: 1.2; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s ease-in-out, fill .6s 1.4s; }
.sc-lavagna .ap { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-wiggle 3s ease-in-out infinite; }
.sc-lavagna.open .ch { stroke-dashoffset: 0; fill: #f2f2e8; }
.sc-lavagna.open .ap { animation: sc-jump .6s 1.6s; }

/* forziere */
.sc-forziere .lid { transform-box: fill-box; transform-origin: 0 100%; transition: transform .8s cubic-bezier(.3,1.3,.5,1); }
.sc-forziere .gw { opacity: 0; transition: opacity .8s .3s; }
.sc-forziere svg { animation: sc-wiggle 3s ease-in-out infinite; transform-origin: 50% 100%; }
.sc-forziere.open svg { animation: none; }
.sc-forziere.open .lid { transform: translate(-6px, -18px) rotate(-28deg); }
.sc-forziere.open .gw { opacity: .55; }

/* mappa */
.sc-mappa .mp { transform-box: fill-box; transform-origin: center; transform: scaleX(.12); opacity: 0; transition: transform .9s .2s cubic-bezier(.3,1.1,.5,1), opacity .2s .2s; }
.sc-mappa .scroll { transform-box: fill-box; transform-origin: center; animation: sc-wiggle 2.8s ease-in-out infinite; transition: opacity .3s; }
.sc-mappa .cov { stroke: var(--paper); stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s 1.1s linear; }
.sc-mappa .x { transform-box: fill-box; transform-origin: center; }
.sc-mappa.open .scroll { opacity: 0; animation: none; }
.sc-mappa.open .mp { transform: none; opacity: 1; }
.sc-mappa.open .cov { stroke-dashoffset: -1; }
.sc-mappa.open .x { animation: sc-beat .8s 2.2s 2; }

/* segreto */
.sc-segreto .stp { transform-box: fill-box; transform-origin: center; }
.sc-segreto .pp { transform-box: fill-box; transition: transform .9s .5s cubic-bezier(.3,1.2,.5,1); }
.sc-segreto svg { animation: sc-float 4s ease-in-out infinite; }
.sc-segreto.open .stp { animation: sc-stamp .5s; }
.sc-segreto.open .pp { transform: translateY(-46px); }

/* pupazzo */
.sc-pupazzo .cr { transform-box: fill-box; transform-origin: 0 0; animation: sc-spin 2.4s linear infinite; }
.sc-pupazzo .jk { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.7, .1); transition: transform .6s .25s cubic-bezier(.3,1.9,.5,1); }
.sc-pupazzo .lid { transform-box: fill-box; transform-origin: 0 50%; transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
.sc-pupazzo.open .cr { animation-duration: .3s; }
.sc-pupazzo.open .lid { transform: rotate(-120deg); }
.sc-pupazzo.open .jk { transform: none; }

/* sparacoriandoli */
.sc-popper .pp { transform-box: fill-box; transform-origin: 0 100%; animation: sc-wiggle 2.4s ease-in-out infinite; }
.sc-popper .srs path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s calc(var(--i) * .05s) ease-out; }
.sc-popper.open .pp { animation: sc-recoil .4s; }
@keyframes sc-recoil { 40% { transform: translate(-10px, 10px) rotate(-4deg); } }
.sc-popper.open .srs path { stroke-dashoffset: 0; }

/* bottiglia: fotografia a tre livelli (mare con bottiglia aperta, tappo, rotolo). Si tocca: il tappo salta via e il messaggio esce */
.scene.sc-bottiglia { width: min(78vw, 340px, 44vh); aspect-ratio: 2 / 3; }
.thumb .scene.sc-bottiglia { width: 64%; }
.sc-bottiglia .ph { container-type: inline-size; position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; box-shadow: 6px 6px 0 rgba(0,0,0,.28); }
.sc-bottiglia .ph img { position: absolute; display: block; height: auto; max-width: none; animation: none; }
.sc-bottiglia .mare { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-bottiglia .vuota { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.sc-bottiglia .tap { left: 47.4%; top: 18.1%; width: 6.2%; transform-origin: 50% 85%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.sc-bottiglia .rot { left: 43.6%; top: 14.4%; width: 14%; opacity: 0; transform-origin: 50% 50%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
@media (prefers-reduced-motion: no-preference) {
  .sc-bottiglia .vuota { transition: opacity .5s .45s; }
  .sc-bottiglia.open .vuota { opacity: 1; }
  .sc-bottiglia.open .tap { animation: bt-cork 1.5s cubic-bezier(.25,.7,.35,1) forwards; }
  .sc-bottiglia.open .rot { animation: bt-rot 3s .5s cubic-bezier(.3,.8,.3,1) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-bottiglia.open .tap { opacity: 0; }
  .sc-bottiglia.open .vuota { opacity: 1; }
  .sc-bottiglia.open .rot { opacity: 0; }
  .sc-bottiglia.open .fg { clip-path: none; opacity: 1; }
}
@keyframes bt-cork {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  38% { transform: translate(70%, -330%) rotate(95deg); opacity: 1; }
  100% { transform: translate(260%, 90%) rotate(250deg); opacity: 0; }
}
@keyframes bt-rot {
  0% { transform: translate(0, 18%) scale(.55) rotate(-8deg); opacity: 0; }
  18% { transform: translate(0, -45%) scale(.9) rotate(-6deg); opacity: 1; }
  62% { transform: translate(0, 182%) scale(3.4) rotate(3deg); opacity: 1; }
  100% { transform: translate(0, 200%) scale(3.8) rotate(0deg); opacity: 0; }
}

/* biglietto d'oro */
.sc-biglietto .rays { transform-box: fill-box; transform-origin: center; animation: sc-spin 30s linear infinite; }
.sc-biglietto .tk { transform-box: fill-box; transform-origin: center; animation: sc-float 3s ease-in-out infinite; transition: transform .8s cubic-bezier(.3,1.4,.5,1); }
.sc-biglietto .shine { animation: sc-shine 2.6s ease-in-out infinite; }
.sc-biglietto.open .tk { animation: none; transform: scale(1.18) rotate(-4deg); }
.sc-biglietto.open .rays { animation-duration: 3s; }

/* telegramma */
.sc-telegramma .tg { transform-box: fill-box; transform-origin: center; animation: sc-float 3.4s ease-in-out infinite; }
.sc-telegramma .pap { transform-box: fill-box; transition: transform .9s .5s cubic-bezier(.3,1.2,.5,1); }
.sc-telegramma .strip { transform-box: fill-box; transform-origin: 0 50%; transition: transform .5s, opacity .5s; }
.sc-telegramma.open .strip { transform: translate(-30px, 30px) rotate(-30deg); opacity: 0; }
.sc-telegramma.open .pap { transform: translateY(-46px); }

@media (prefers-reduced-motion: reduce) { .scene *, .scene { animation: none !important; } }

/* copertina fotografica (img/foto/<stile>.webp): foto incorniciata che si apre con lo stesso gesto dello stile */
.scene.sc-foto { width: min(78vw, 340px, 44vh); aspect-ratio: 2 / 3; }
.thumb .scene.sc-foto { width: 64%; }
.sc-foto > img:not(.rt-sp) { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 6px 6px 0 rgba(0,0,0,.28); animation: none; }
.sc-foto.open > img { transform: scale(1.1); filter: brightness(1.25) saturate(1.1); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.4s; }
@media (prefers-reduced-motion: reduce) { .sc-foto.open > img { transform: none; } }

/* il foglio che si srotola con l'inizio della lettera */
.sc-bottiglia .fg { position: absolute; left: 7%; top: 13%; width: 86%; aspect-ratio: 760 / 1000; display: block; opacity: 0; clip-path: inset(0 0 100% 0); filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.sc-bottiglia .fg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-bottiglia .fg-t, .sc-bottiglia .fg-x { position: absolute; left: 12%; right: 12%; color: #4a2f1a; font-family: var(--f-title, Georgia, serif); text-align: left; }
.sc-bottiglia .fg-t { top: 12%; font-size: 10.5cqw; line-height: 1.1; }
.sc-bottiglia .fg-x { top: 27%; font-size: 6.6cqw; line-height: 1.5; opacity: .94; }
@media (prefers-reduced-motion: no-preference) {
  .sc-bottiglia.open .fg { animation: bt-fg 1.3s 2.35s cubic-bezier(.3,.7,.2,1) forwards; }
}
@keyframes bt-fg { 0% { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(-4%) scale(.96); } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
.thumb .sc-bottiglia .fg { display: none; }

/* copertina della bottiglia a tutto schermo: la foto e' il fondo, titolo in alto e invito in basso */
.st-foto .scr.cover { padding: 0; overflow: hidden; }
.st-foto .scr.cover .col { position: static; margin: 0; max-width: none; width: 100%; min-height: 100%; justify-content: flex-start; padding: calc(max(14px, env(safe-area-inset-top, 0px)) + 54px) 22px calc(max(18px, env(safe-area-inset-bottom, 0px)) + 78px); pointer-events: none; }
.st-foto .scr.cover .title { margin-bottom: auto; }
.st-foto .scr.cover .kicker, .st-foto .scr.cover .title, .st-foto .scr.cover .hint { position: relative; z-index: 2; text-shadow: 0 2px 20px rgba(8,10,40,.7), 0 0 3px rgba(8,10,40,.4); }
.st-bottiglia .cover .scene.sc-bottiglia { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; z-index: 0; container-type: size; overflow: hidden; pointer-events: auto; }
.st-bottiglia .cover .sc-bottiglia .ph { position: absolute; left: 50%; top: 0; width: max(100cqw, 80cqh); height: auto; aspect-ratio: 2 / 3; transform: translateX(-50%); border-radius: 0; box-shadow: none; overflow: visible; }
.st-bottiglia .cover .sc-bottiglia::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,18,54,.5) 0%, rgba(14,18,54,0) 34%, rgba(14,18,54,0) 70%, rgba(10,14,44,.55) 100%); }
.st-bottiglia .cover .sc-bottiglia .fg { left: 50%; top: 50%; width: min(86cqw, 360px); translate: -50% -50%; z-index: 3; }

/* schermi larghi (computer, tablet in orizzontale): la foto resta una colonna verticale al centro, sfumata nel mare */
@media (min-aspect-ratio: 1 / 1) {
  .st-bottiglia .cover .scene.sc-bottiglia { left: 50%; right: auto; width: min(100%, 64vh); transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
  .st-bottiglia .cover .sc-bottiglia::after { display: none; }
  .st-foto .scr.cover .col { max-width: 640px; margin-inline: auto; }
}

.st-foto .scr.cover .title { font-size: clamp(36px, min(10.5vw, 7vh), 70px); }

/* luce del tramonto che respira, lampo quando salta il tappo, lento avvicinamento della fotografia */
.sc-bottiglia .glow { position: absolute; left: 50.6%; top: 31%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; opacity: .5; background: radial-gradient(circle, rgba(255,216,152,.7) 0%, rgba(255,166,120,.22) 38%, transparent 68%); }
@media (prefers-reduced-motion: no-preference) {
  .sc-bottiglia .glow { animation: bt-breathe 7s ease-in-out infinite; }
  .sc-bottiglia.open .glow { animation: bt-flash 1.8s ease-out forwards; }
  .st-bottiglia .cover .sc-bottiglia .ph { transform-origin: 50% 30%; animation: bt-kb 26s ease-in-out infinite alternate; }
}
@keyframes bt-breathe { 50% { opacity: .78; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes bt-flash { 0% { opacity: .5; } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: .35; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes bt-kb { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.07); } }

/* luci sul mare, avvicinamento morbido, parallasse con il puntatore */
.sc-bottiglia .glints { position: absolute; inset: 0; pointer-events: none; }
.sc-bottiglia .glints i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff7e2; box-shadow: 0 0 7px 2px rgba(255,226,170,.85); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sc-bottiglia .glints i { animation: bt-glint var(--d, 3s) var(--l, 0s) ease-in-out infinite; }
  .st-bottiglia .cover .sc-bottiglia .ph { translate: var(--tx, 0px) var(--ty, 0px); transition: translate .5s ease-out; }
  .st-foto .scr.cover .title .wd { display: inline-block; animation: bt-word 1.3s cubic-bezier(.2,.7,.2,1) both; }
  .st-foto .scr.cover .kicker { animation: bt-fade 1.6s .1s ease-out both; }
  .st-foto .scr.cover .hint { animation: bt-fade 1.8s 2.2s ease-out both; }
}
@keyframes bt-glint { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: .95; transform: scale(1.5); } }
@keyframes bt-word { from { opacity: 0; filter: blur(12px); transform: translateY(16px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes bt-fade { from { opacity: 0; } to { opacity: 1; } }

/* il foglio della copertina e' la lettera vera (stesse classi .lc), qui solo posizione e comparsa */
.st-bottiglia .cover .sc-bottiglia .fg { left: 50%; top: 50%; width: var(--sheet); aspect-ratio: auto; translate: -50% -50%; filter: none; z-index: 3; text-align: left; }
.st-bottiglia .cover .sc-bottiglia .fg .lc { margin: 0; }

/* copertina fotografica generica (ogni stile con img/foto/<stile>.webp): foto a tutto schermo, titolo in alto, lampo e avvicinamento al tocco */
.st-foto .cover .scene.sc-foto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; z-index: 0; overflow: hidden; pointer-events: auto; }
.st-foto .cover .sc-foto > img:not(.rt-sp) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 0; box-shadow: none; animation: none; transform-origin: 50% 62%; }
.st-foto .cover .sc-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,12,34,.55) 0%, rgba(10,12,34,0) 36%, rgba(10,12,34,0) 68%, rgba(10,12,34,.6) 100%); }
.st-foto .cover .sc-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 60%, rgba(255,240,205,.95), rgba(255,214,150,.4) 36%, transparent 70%); mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  .st-foto .cover .sc-foto > img:not(.rt-sp) { animation: fo-kb 24s ease-in-out infinite alternate; translate: var(--tx, 0px) var(--ty, 0px); transition: translate .5s ease-out; }
  .st-foto .cover .sc-foto.open > img { animation: fo-push 2.6s cubic-bezier(.3,.6,.2,1) forwards; }
  .st-foto .cover .sc-foto.open::before { animation: fo-flash 2s ease-out forwards; }
}
@media (min-aspect-ratio: 1 / 1) {
  .st-foto .cover .scene.sc-foto { left: 50%; right: auto; width: min(100%, 64vh); transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
  .st-foto .cover .sc-foto::after { display: none; }
}
@keyframes fo-kb { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes fo-push { 0% { transform: scale(1.03); filter: none; } 35% { filter: brightness(1.5) saturate(1.2); } 100% { transform: scale(1.22); filter: brightness(1.05); opacity: .15; } }
@keyframes fo-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.st-foto .thumb .scene.sc-foto { position: static; width: 64%; aspect-ratio: 2 / 3; -webkit-mask-image: none; mask-image: none; transform: none; }
.st-foto .thumb .sc-foto::after, .st-foto .thumb .sc-foto::before { display: none; }

.st-foto .scr.cover .kicker { color: #fff3dc; opacity: .92; }
.st-foto .scr.cover .title { color: #fff6e4; }
.st-foto .scr.cover .hint { color: #fff3dc; }

/* anteprime nei cataloghi: la foto riempie tutta la miniatura */
.thumb { position: relative; overflow: hidden; }
.thumb .scene.sc-foto, .thumb .scene.sc-bottiglia { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
.thumb .sc-foto > img:not(.rt-sp) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 0; box-shadow: none; animation: none; }
.thumb .sc-bottiglia .ph { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }

/* riti: livelli sopra la fotografia di copertina */
.rt-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.rt-sp { position: absolute; z-index: 2; pointer-events: none; will-change: transform; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); max-width: none; }
.rt-bob { animation: rt-bob 3.4s ease-in-out infinite; }
@keyframes rt-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
.rt-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; animation: rt-fl 1.4s ease-out forwards; mix-blend-mode: screen; }
@keyframes rt-fl { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.rt-ring { position: absolute; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid; border-radius: 50%; pointer-events: none; animation: rt-rg 1.1s ease-out forwards; }
@keyframes rt-rg { from { transform: scale(.4); opacity: 1; } to { transform: scale(11); opacity: 0; } }
.rt-rays { position: absolute; z-index: 4; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none; border-radius: 50%; opacity: 0; mix-blend-mode: screen; background: repeating-conic-gradient(from 0deg, var(--c) 0deg 5deg, transparent 5deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); mask-image: radial-gradient(circle, #000 0, transparent 60%); animation: rt-ry 1.8s ease-out forwards; }
@keyframes rt-ry { 0% { opacity: 0; transform: rotate(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(40deg) scale(1); } }
.rt-glow { position: absolute; z-index: 3; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; animation: rt-gl 2s ease-out forwards; }
@keyframes rt-gl { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
.rt-sweep { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.rt-sweep::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,246,214,.9), transparent); transform: skewX(-18deg); animation: rt-sw 1.2s ease-in-out forwards; }
@keyframes rt-sw { to { left: 120%; } }
.st-foto .cover .sc-foto > img:not(.rt-sp) { transition: filter .5s; }

/* leggibilita': velo piu' deciso sopra e sotto la foto, e testo scuro quando la copertina e' coperta da un velo chiaro (oro, gesso, vapore) */
.st-foto .cover .sc-foto::after { background: linear-gradient(180deg, rgba(10,12,34,.72) 0%, rgba(10,12,34,.38) 24%, rgba(10,12,34,0) 46%, rgba(10,12,34,0) 66%, rgba(10,12,34,.66) 100%); }
.st-foto .scr.cover .title, .st-foto .scr.cover .kicker { text-shadow: 0 1px 2px rgba(6,8,26,.75), 0 2px 22px rgba(6,8,26,.7); }
.st-foto .scr.cover .hint { text-shadow: 0 1px 2px rgba(6,8,26,.8), 0 0 16px rgba(6,8,26,.7); }
.rt-chiaro .scr.cover .title, .rt-chiaro .scr.cover .kicker, .rt-chiaro .scr.cover .hint { color: #241a10 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55) !important; }
.rt-chiaro .cover .sc-foto::after { background: none !important; }

/* niente menu "salva immagine" / selezione quando si tiene premuto sulla copertina */
.scr.cover, .scr.cover * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.scr.cover img, .scene img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* iPhone: il menu "salva immagine" compariva anche sullo sfondo sfocato. Tutto il biglietto, sfondi compresi, non e' selezionabile ne' salvabile */
#app, #app *:not(input):not(textarea) { -webkit-touch-callout: none !important; -webkit-user-select: none; user-select: none; }
.bgph, .bgtint, .meteors, .decor, #sky, #fx { pointer-events: none !important; }
#app img { -webkit-user-drag: none; pointer-events: none; }
#app .rcard img, #app .lc-pol img { pointer-events: none; }

/* il tappo e' infilato nel collo: il bordo anteriore del vetro (copia della foto ritagliata sulla bocca) resta davanti */
.sc-bottiglia .rim { inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(24.3% 44.5% 73.2% 45.6%); pointer-events: none; }

/* ---- riti 2/3: livelli di interfaccia ---- */
.rt-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.rt-layer > * { pointer-events: auto; }
.rt-img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; pointer-events: none; will-change: transform, opacity; }
.rt-code { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); width: min(92%, 340px); display: grid; justify-items: center; gap: 10px; padding: 14px 14px 16px; background: rgba(12,10,22,.78); border: 1px solid rgba(255,230,160,.45); border-radius: 12px; backdrop-filter: blur(8px); transition: opacity .6s, transform .6s; }
.rt-code.out { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }
.rt-ind { margin: 0; color: #ffe8bd; font: 600 14px/1.3 var(--f-body, system-ui); text-align: center; }
.rt-wheels { display: flex; gap: 10px; }
.rtw { display: grid; justify-items: center; gap: 4px; }
.rtu, .rtn { width: 48px; height: 32px; border: 0; background: transparent; cursor: pointer; position: relative; }
.rtu::before, .rtn::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -9px; border: 9px solid transparent; }
.rtu::before { border-bottom: 11px solid #ffe6b8; margin-top: -9px; } .rtn::before { border-top: 11px solid #ffe6b8; margin-top: -2px; }
.rtd { width: 48px; height: 58px; border: 1px solid rgba(255,230,160,.4); border-radius: 8px; background: linear-gradient(180deg, #060608, #1c1812 50%, #060608); color: #ffe6b8; font: 700 36px/1 ui-monospace, Menlo, Consolas, monospace; cursor: pointer; box-shadow: inset 0 0 12px rgba(0,0,0,.8); }
.rt-try { min-height: 46px; }
.rt-skip { border: 0; background: transparent; color: #ffe6b8; text-decoration: underline; font: 600 13px var(--f-body, system-ui); cursor: pointer; min-height: 40px; }
.rt-paper { position: absolute; z-index: 6; width: 300px; aspect-ratio: 760 / 1000; transform: translate(-50%, -50%) scale(.1); opacity: 0; background: url("/img/bottiglia/foglio.webp") center / 100% 100% no-repeat; pointer-events: none; filter: drop-shadow(0 16px 24px rgba(0,0,0,.5)); }
.rt-eglow { position: absolute; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; opacity: 0; transform: scale(.2); background: radial-gradient(circle, rgba(255,236,170,.95), rgba(255,200,120,.35) 40%, transparent 68%); mix-blend-mode: screen; pointer-events: none; transition: opacity 1.2s, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.rt-eglow.on { opacity: 1; transform: scale(1.6); }
/* cartolina che si gira */
.rt-pc { position: absolute; left: 50%; top: 46%; width: min(86%, 340px); aspect-ratio: 3 / 2; transform: translate(-50%, -50%) rotate(-3deg); perspective: 1100px; cursor: pointer; }
.rt-pc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3,.7,.2,1); }
.rt-pc-in.flip { transform: rotateY(180deg); }
.rt-pc-f, .rt-pc-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; box-shadow: 0 18px 34px rgba(0,0,0,.45); border: 8px solid #fbf6ea; box-sizing: border-box; background-color: #fbf6ea; }
.rt-pc-f { background-repeat: no-repeat; }
.rt-pc-b { transform: rotateY(180deg); background: #f7efdc linear-gradient(90deg, transparent 49.6%, #c9bda0 50%, transparent 50.4%); color: #3b2a1a; padding: 10px 12px; }
.rt-pc-m { position: absolute; left: 8%; top: 22%; width: 42%; margin: 0; font: 500 clamp(15px, 4.6vw, 20px)/1.35 "Caveat", cursive; white-space: pre-wrap; }
.rt-pc-ad { position: absolute; right: 8%; bottom: 14%; width: 40%; border-top: 1px solid #b7a98d; padding-top: 4px; font: 600 14px "Caveat", cursive; }
.rt-pc-st { position: absolute; right: 7%; top: 8%; width: 17%; aspect-ratio: 3 / 4; background: repeating-linear-gradient(0deg, #e9b2a3 0 6px, #c4695a 6px 8px); border: 3px dotted #fbf6ea; box-shadow: 0 0 0 1px #c4695a inset; opacity: 0; transform: translateY(-30px) scale(1.5); transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.rt-pc-st.in { opacity: 1; transform: none; }
.rt-pc-pm { position: absolute; right: 18%; top: 4%; width: 26%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border: 2px solid rgba(40,60,120,.75); border-radius: 50%; color: rgba(40,60,120,.8); font: 700 8px/1.1 ui-monospace, Menlo, monospace; transform: rotate(-12deg) scale(1.8); opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.rt-pc-pm.in { opacity: .9; transform: rotate(-12deg); }
/* libro: pagina che si volta */
.rt-bp { position: absolute; transform-origin: 0 50%; transform: translate(0, -50%) perspective(900px) rotateY(0deg); transition: transform 1.05s cubic-bezier(.4,.1,.3,1); }
.rt-bp i, .rt-bp b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; }
.rt-bp i { background: linear-gradient(90deg, #d8c79b, #f4e8c8 20%, #fbf2d8); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.rt-bp b { background: linear-gradient(270deg, #d8c79b, #f4e8c8 20%, #fbf2d8); transform: rotateY(180deg); }
.rt-bp.flip { transform: translate(0, -50%) perspective(900px) rotateY(-172deg); }
.rt-word { position: absolute; z-index: 7; font: 700 22px var(--f-title, Georgia); color: #ffe6b8; text-shadow: 0 0 12px rgba(255,214,120,.95); opacity: 0; animation: rt-wd 2.6s ease-out forwards; pointer-events: none; }
@keyframes rt-wd { 0% { opacity: 0; transform: translateY(0) scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-190px) scale(1.2); } }
/* libro: pagine con carta, righe di scrittura e ombra di piega */
.rt-bp i, .rt-bp b { background-color: #f6ebcb; background-image: repeating-linear-gradient(180deg, transparent 0 15px, rgba(120,84,40,.28) 15px 16px), linear-gradient(90deg, rgba(90,58,24,.38), rgba(90,58,24,0) 22%), radial-gradient(120% 90% at 30% 20%, #fff7de, #ead9ac 80%); background-size: 100% 100%, 100% 100%, 100% 100%; padding: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 0 18px rgba(120,80,30,.25); }
.rt-bp b { background-image: repeating-linear-gradient(180deg, transparent 0 15px, rgba(120,84,40,.28) 15px 16px), linear-gradient(270deg, rgba(90,58,24,.38), rgba(90,58,24,0) 22%), radial-gradient(120% 90% at 70% 20%, #fff7de, #ead9ac 80%); }
.rt-bp i::before { content: "C"; position: absolute; left: 12px; top: 8px; font: 700 38px/1 var(--f-title, Georgia); color: #9a5b1f; text-shadow: 0 0 8px rgba(255,200,100,.7); }
.rt-bp i::after, .rt-bp b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(255,226,150,.55), transparent 60%); mix-blend-mode: screen; }
/* leggibilita' delle scritte sulle copertine fotografiche */
.st-foto .scr.cover .title, .st-foto .scr.cover .kicker { text-shadow: 0 1px 2px rgba(6,8,26,.7), 0 2px 16px rgba(6,8,26,.75), 0 0 34px rgba(6,8,26,.45); }
.st-foto .cover .sc-foto::after { background: linear-gradient(180deg, rgba(10,12,34,.68) 0%, rgba(10,12,34,.25) 26%, rgba(10,12,34,0) 42%, rgba(10,12,34,0) 62%, rgba(10,12,34,.7) 100%); }
.st-foto .scr.cover .hint { background: rgba(8,10,30,.5); padding: 9px 16px; border-radius: 999px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); font-weight: 700; font-size: 12.5px; color: #fff; max-width: 88%; text-align: center; text-shadow: none; }
.rt-chiaro .scr.cover .hint { background: rgba(255,255,255,.7) !important; color: #241a10 !important; text-shadow: none !important; }
.rt-chiaro .cover .sc-foto::after { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,0) 44%); }

/* tastierino del codice */
.pin-gate { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(6,8,22,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: opacity .5s; }
.pin-gate.go { opacity: 0; pointer-events: none; }
.rt-layer > .pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pin { width: min(88%, 300px); display: grid; justify-items: center; gap: 12px; padding: 18px 16px 18px; background: linear-gradient(180deg, rgba(34,28,18,.94), rgba(14,12,10,.96)); border: 1px solid rgba(231,200,120,.6); border-radius: 22px; box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 24px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,236,190,.25); color: #f6e7bf; transition: opacity .5s, transform .5s; font-family: var(--f-body, system-ui, sans-serif); }
.pin.out { opacity: 0; transform: translate(-50%, -50%) scale(.94) translateY(16px); pointer-events: none; }
.pin-gate .pin.out { transform: scale(.94) translateY(16px); }
.pin-lock { width: 38px; color: #e7c878; filter: drop-shadow(0 0 8px rgba(231,200,120,.45)); }
.pin-lock .sh { transform-origin: 13px 24px; transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.pin.ok .pin-lock .sh { transform: translateY(-5px) rotate(-30deg); } .pin.ok .pin-lock { color: #8be3a1; }
.pin-note { margin: 0; text-align: center; font: 600 14px/1.35 var(--f-body, system-ui); color: #f6e7bf; min-height: 2.7em; display: grid; align-items: center; }
.pin-slots { display: flex; gap: 10px; }
.pin-s { width: 46px; height: 54px; display: grid; place-items: center; font-size: 22px; color: #ffe6b8; border-radius: 12px; background: #0a0907; border: 1.5px solid rgba(231,200,120,.35); box-shadow: inset 0 0 12px rgba(0,0,0,.8); }
.pin-s.on { border-color: #ffd98a; box-shadow: 0 0 0 3px rgba(255,217,138,.2), inset 0 0 12px rgba(0,0,0,.8); }
.pin.bad .pin-slots { animation: pin-shake .38s; } .pin.bad .pin-s { border-color: #ff6b6b; color: #ff9d9d; }
@keyframes pin-shake { 20% { translate: -9px 0; } 40% { translate: 9px 0; } 60% { translate: -6px 0; } 80% { translate: 5px 0; } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 100%; max-width: 240px; }
.pin-k { height: 50px; border: 1px solid rgba(231,200,120,.35); border-radius: 14px; background: linear-gradient(180deg, #3a2f1c, #231c10); color: #ffeac0; font: 700 22px/1 var(--f-body, system-ui); cursor: pointer; box-shadow: 0 3px 0 #0b0905; transition: transform .08s, box-shadow .08s, background .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pin-k:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0905; background: linear-gradient(180deg, #5a4826, #3a2f1c); }
.pin-k.fn { font-size: 20px; color: #e7c878; }
.pin-k:focus-visible { outline: 3px solid #ffd98a; outline-offset: 2px; }
.pin-skip { border: 0; background: transparent; color: #e7c878; text-decoration: underline; font: 600 13px var(--f-body, system-ui); cursor: pointer; min-height: 40px; }
@media (max-height: 640px) { .pin-k { height: 42px; } .pin-s { height: 46px; } .pin { gap: 8px; padding: 12px; } }