/* Keep the page width identical before and after scroll is restored. */
html{scrollbar-gutter:stable}
@font-face{font-family:KumanekoStory;src:url('../condivisi/font/CinzelDecorative-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
html.intro-active{overflow:hidden;background:#000;scroll-behavior:auto;overflow-anchor:none}
.intro-active body{overflow:hidden}
.intro-active body>header,.intro-active body>.width-toggle{visibility:hidden}
.intro-active main *,.intro-active footer *{animation-play-state:paused!important}
#kumaneko-intro{position:fixed;inset:0;z-index:10000;background:#000;color:#eee8d6;isolation:isolate;overflow:hidden;font-family:'DM Sans',sans-serif;transition:opacity .7s ease;touch-action:pan-y}
#kumaneko-intro.is-leaving{opacity:0;pointer-events:none}
.intro-stage{position:absolute;inset:0;opacity:0}
.intro-stage.is-lit{opacity:1}
.intro-stage canvas{display:block;width:100%;height:100%}
.intro-topline{position:absolute;top:clamp(20px,4vh,44px);left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.intro-topline strong{display:block;font-size:10px;font-weight:600;letter-spacing:.46em;color:#d0bd8d}
.intro-topline span{display:block;font-size:8px;letter-spacing:.32em;color:#746e60;margin-top:8px}
.intro-lit .intro-topline{opacity:1}
.intro-skip{position:absolute;right:clamp(18px,3vw,48px);top:clamp(18px,3vh,36px);color:#aba598;background:transparent;border:1px solid #b7a87c30;border-radius:5px;padding:9px 14px;font-size:10px;letter-spacing:.08em;cursor:pointer;z-index:5}
.intro-skip:hover{color:#fff3d1;border-color:#c3ac7866;background:#ffffff08}
.intro-copy{position:absolute;bottom:clamp(28px,7vh,82px);left:50%;transform:translateX(-50%);width:min(760px,88vw);text-align:center;pointer-events:none;opacity:0;transition:opacity .3s,transform .55s}
.intro-lit .intro-copy{opacity:1}
.intro-caption{font:700 clamp(16px,1.7vw,25px)/1.65 KumanekoStory,Georgia,serif;letter-spacing:-.025em;text-wrap:balance;margin:0;color:#ead7a5;text-shadow:0 2px 0 #322415,0 4px 12px #000,0 0 25px #b6943b33}
.intro-caption em{font:inherit;color:#fff0c9}
.intro-subtitle{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:#827761;margin:18px 0 0}
.intro-enter{position:absolute;display:none;padding:0;border:0;background:transparent;border-radius:18px;cursor:pointer;color:transparent;z-index:3;-webkit-tap-highlight-color:transparent}
.intro-enter.is-ready{display:block}
.intro-enter:focus-visible{outline:2px solid #f1d183;outline-offset:12px;box-shadow:0 0 35px #e4c66b50}
.intro-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.intro-fallback{display:none;position:absolute;inset:20% 15% 30%;align-items:center;justify-content:center}
.intro-fallback img{width:min(240px,50vw);filter:drop-shadow(0 0 45px #bcad6a55)}
.intro-fallback-mode .intro-fallback{display:flex}
.intro-fallback-mode .intro-enter{inset:20% 15% 30%!important;width:auto!important;height:auto!important;display:block}
.intro-zooming .intro-copy,.intro-zooming .intro-topline,.intro-zooming .intro-skip{opacity:0;pointer-events:none}
@media(max-width:600px){.intro-topline{top:26px;left:22px;transform:none;text-align:left}.intro-topline strong{font-size:8px;letter-spacing:.25em}.intro-topline span{font-size:6px}.intro-skip{font-size:9px;padding:7px 10px}.intro-copy{bottom:6vh;width:88vw}.intro-caption{font-size:16px}.intro-subtitle{font-size:8px;line-height:1.7}}
@media(prefers-reduced-motion:reduce){#kumaneko-intro,.intro-copy{transition:opacity .2s}.intro-caption{text-shadow:none}}

.intro-skip:focus-visible{outline:1px solid #d0bd8d;outline-offset:4px}
.intro-light-switch{position:absolute;z-index:6;top:clamp(32px,6vh,68px);left:clamp(24px,5vw,80px);width:150px;padding:0;border:0;background:none;color:#ffebbd;cursor:pointer;perspective:650px;transform:scale(1.35);transform-origin:top left;transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1);-webkit-tap-highlight-color:transparent}
.light-switch-base{position:relative;display:grid;place-items:center;width:116px;height:116px;margin:0 auto 28px;border:2px solid #aa8b53;border-radius:27px;background:linear-gradient(145deg,#cfaf72 0%,#71603c 12%,#30291d 43%,#6f5a34 82%,#ad9258);box-shadow:inset 0 2px 2px #fff0b8aa,inset 0 -3px 4px #110e08,0 7px 0 #372e1c,0 9px 0 #17140e,0 17px 25px #000c;transform:rotateX(0deg) rotateY(0deg);transform-style:preserve-3d}
.light-switch-cap{display:grid;place-items:center;width:83px;height:83px;border-radius:50%;border:2px solid #c46a65;background:radial-gradient(ellipse at 33% 20%,#ef9a93 0%,#d75d56 19%,#a51d22 47%,#650a10 79%,#350409);box-shadow:inset 0 3px 4px #ffd0c799,inset 0 -5px 7px #2b0105,0 6px 0 #40060a,0 8px 0 #240306,0 10px 10px #000a,0 0 25px #c02b2b18;transform:translateZ(12px);transition:transform .18s,box-shadow .18s,filter .25s}
.light-switch-cap svg{width:42px;height:42px;fill:#ffe7a629;stroke:#fff0ba;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 0 #3b1010) drop-shadow(0 0 6px #ffe1a644)}
.light-switch-rivet{position:absolute;width:8px;height:8px;background:linear-gradient(135deg,#ead39b,#7e653c 50%,#322717);border-radius:50%;box-shadow:0 1px 2px #000}.rivet-a{left:10px;top:10px}.rivet-b{right:10px;bottom:10px}
.light-switch-sign{position:relative;display:block;padding:13px 8px 10px;border:2px solid #ad8046;border-radius:9px 12px 8px 11px;background:repeating-linear-gradient(4deg,#ffffff03 0 2px,#00000009 3px 5px),linear-gradient(150deg,#73502f,#432c1b 60%,#644126);box-shadow:inset 0 2px 0 #e4b16a66,inset 0 -3px 0 #25170e,0 5px 0 #24180e,0 12px 18px #0009;font:700 20px/1.25 KumanekoStory,Georgia,serif;text-shadow:0 2px 0 #281609,0 -1px 0 #fff5cb22;transform:rotateX(0deg);transform-origin:50% -28px;animation:intro-sign-idle 4.8s ease-in-out infinite;transition:transform .4s cubic-bezier(.2,1.8,.4,1)}
.light-switch-sign::before,.light-switch-sign::after{content:'';position:absolute;top:-30px;width:4px;height:29px;border:1px solid #9f865b;border-radius:3px;background:repeating-linear-gradient(35deg,#bca17a 0 3px,#685035 3px 6px);box-shadow:1px 1px 2px #000}.light-switch-sign::before{left:27px}.light-switch-sign::after{right:27px}
.light-switch-hint{display:block;font:600 7px/1.5 'DM Sans',sans-serif;letter-spacing:.13em;margin-top:9px;color:#cfb68b}
.intro-light-switch:hover .light-switch-cap{filter:brightness(1.12)}

.intro-light-switch:active .light-switch-cap,.intro-switch-pressed .light-switch-cap{transform:translateZ(3px) translateY(5px);box-shadow:inset 0 2px 4px #ffd0c766,inset 0 -3px 6px #2b0105,0 2px 0 #40060a,0 3px 6px #000a}
.intro-started .intro-light-switch{opacity:0;visibility:hidden;transform:scale(1.242) translateY(-8px);transition:opacity .4s,transform .4s,visibility 0s .4s}
.intro-light-switch:focus-visible{outline:2px solid #ecd39b;outline-offset:12px;border-radius:22px}
#kumaneko-intro:not(.intro-started) .intro-audio{display:none}
@media(max-width:600px){.intro-light-switch{top:26px;left:20px;width:118px}.light-switch-base{width:88px;height:88px;border-radius:22px;margin-bottom:26px}.light-switch-cap{width:64px;height:64px}.light-switch-cap svg{width:33px;height:33px}.light-switch-sign{font-size:16px}.light-switch-hint{font-size:6px}.intro-topline{left:50%;transform:translateX(-50%);text-align:center}}
@media(prefers-reduced-motion:reduce){.intro-light-switch,.light-switch-cap,.light-switch-sign{transition:none}.intro-light-switch:hover .light-switch-sign{transform:rotateX(0deg)}}

.intro-audio{position:absolute;right:clamp(18px,3vw,48px);top:calc(clamp(18px,3vh,36px) + 46px);z-index:5;background:#0003;border:1px solid #b7a87c30;border-radius:5px;color:#aba598;padding:8px 12px;font:10px DM Sans,sans-serif;cursor:pointer}.intro-audio:focus-visible{outline:1px solid #d0bd8d;outline-offset:4px}.intro-zooming .intro-audio{opacity:0;pointer-events:none}

/* Pressione morbida e assestamento del cartello. */
.light-switch-cap{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,filter .25s}
.intro-switch-pressed .light-switch-base{animation:intro-button-squash .52s both}
.intro-switch-pressed .light-switch-sign{animation:intro-sign-swing .65s both}
.intro-started .intro-light-switch{transition:opacity .35s .32s,transform .45s .32s,visibility 0s .78s}
@keyframes intro-button-squash{0%{transform:rotateX(0deg) rotateY(0deg) scale(1)}35%{transform:rotateX(2deg) rotateY(0deg) scale(1.04,.94)}70%{transform:rotateX(-1deg) rotateY(0deg) scale(.985,1.025)}100%{transform:rotateX(0deg) rotateY(0deg) scale(1)}}
@keyframes intro-sign-swing{0%{transform:rotateX(0deg)}30%{transform:rotateX(22deg) rotateZ(.4deg)}65%{transform:rotateX(-12deg) rotateZ(-.2deg)}100%{transform:rotateX(0deg)}}
@media(prefers-reduced-motion:reduce){.intro-switch-pressed .light-switch-base,.intro-switch-pressed .light-switch-sign{animation:none}.intro-started .intro-light-switch{transition:none}}

/* Oscillazione lieve del cartello sospeso. */
@keyframes intro-sign-idle{0%,100%{transform:rotateX(-14deg) rotateZ(-.2deg)}50%{transform:rotateX(14deg) rotateZ(.2deg)}}
@media(prefers-reduced-motion:reduce){.light-switch-sign{animation:none}}

/* Finitura da oggetto animato: ottone satinato e smalto verde bombato. */
.light-switch-base{border-radius:30px;background:linear-gradient(135deg,#f0d49a 0%,#b49a64 8%,#77633f 20%,#443c2b 48%,#8b744b 82%,#d8b877);box-shadow:inset 0 2px 3px #fff2c9bb,inset 2px 0 4px #e9cf9555,inset 0 -4px 5px #21190f,0 6px 0 #564428,0 8px 0 #231c13,0 17px 25px #000c}
.light-switch-cap{position:relative;background:radial-gradient(ellipse at 34% 18%,#f6aaa1 0%,#e7746a 14%,#c62a2c 35%,#8b0e16 64%,#4b060c 90%);box-shadow:inset 0 3px 5px #ffdad1bb,inset 0 -6px 9px #350207,0 5px 0 #56080e,0 8px 0 #300409,0 12px 12px #000b}
.light-switch-cap::before{content:'';position:absolute;inset:5px 12px 49%;border-radius:50%;background:linear-gradient(#ffffff55,#ffffff00);transform:rotate(-12deg);pointer-events:none}
.light-switch-sign{backface-visibility:hidden;transform-style:preserve-3d}

/* Story plaque and copy share the same height and transition beat. */
.intro-copy{display:flex;align-items:stretch;gap:24px;width:min(930px,92vw);perspective:900px}
.intro-message-stack{display:grid;flex:1;min-width:0;align-items:center}
.intro-message-stack>div{grid-area:1/1;transition:opacity .38s ease,transform .7s cubic-bezier(.22,1,.36,1),filter .4s;transform-origin:50% 70%}
.intro-message-ready{opacity:0;transform:translateY(18px) rotateX(-18deg);filter:blur(4px)}
.intro-ready .intro-message-loading{opacity:0;transform:translateY(-18px) rotateX(18deg);filter:blur(4px)}
.intro-ready .intro-message-ready{opacity:1;transform:none;filter:none;transition-delay:.16s}
.intro-story-sign{position:relative;flex:none;width:var(--story-sign-size,120px);border:2px solid #b89a5a;border-radius:18px;background:radial-gradient(ellipse at 25% 10%,#46486c,#1a1b35 55%,#0a0b1c);box-shadow:inset 0 2px 2px #f9e4a177,inset 0 -4px 6px #02020c,0 5px 0 #68532e,0 7px 0 #141520,0 12px 22px #0008;transform-style:preserve-3d}
.intro-story-sign::before{content:'';position:absolute;inset:6px;border:1px solid #d3ba7955;border-radius:11px;pointer-events:none}
.intro-story-sign svg{position:absolute;inset:8%;width:84%;height:84%;filter:drop-shadow(0 3px 2px #0006);transition:opacity .35s,transform .75s cubic-bezier(.22,1,.36,1);transform-origin:50% 65%}
.intro-press-icon{opacity:0;transform:rotateY(-90deg) scale(.7)}
.intro-ready .intro-panda-icon{opacity:0;transform:rotateY(90deg) scale(.7)}
.intro-ready .intro-press-icon{opacity:1;transform:rotateY(0) scale(1);transition-delay:.16s}
.intro-ready .intro-story-sign{animation:intro-plaque-settle .85s both}
.intro-ready .intro-demo-hand{animation:intro-finger-press 2.4s .9s ease-in-out infinite;transform-origin:60px 80px}
.intro-ready .intro-demo-button{animation:intro-button-demo 2.4s .9s ease-in-out infinite}
.intro-demo-rays{opacity:0}.intro-ready .intro-demo-rays{animation:intro-press-rays 2.4s .9s ease-in-out infinite}
@keyframes intro-plaque-settle{0%,100%{transform:rotateY(0)}45%{transform:rotateY(-14deg) scale(.96)}75%{transform:rotateY(5deg) scale(1.02)}}
@keyframes intro-finger-press{0%,100%{transform:translateY(-5px) rotate(-4deg)}40%,55%{transform:translateY(3px) rotate(0)}}
@keyframes intro-button-demo{0%,100%{transform:translateY(0)}40%,55%{transform:translateY(3px)}}
@keyframes intro-press-rays{0%,30%,70%,100%{opacity:0}40%,55%{opacity:1}}
@media(max-width:600px){.intro-copy{gap:12px;width:94vw}.intro-copy .intro-caption{font-size:clamp(11px,3.1vw,16px);line-height:1.5}.intro-copy .intro-subtitle{font-size:6px;letter-spacing:.13em;margin-top:10px}.intro-story-sign{border-radius:13px}}
@media(prefers-reduced-motion:reduce){.intro-message-stack>div,.intro-story-sign svg{transition:none}.intro-ready .intro-story-sign,.intro-ready .intro-demo-hand,.intro-ready .intro-demo-button,.intro-ready .intro-demo-rays{animation:none}}

.intro-active body>footer{visibility:hidden}
.intro-active.intro-page-reveal body>header,.intro-active.intro-page-reveal body>.width-toggle{visibility:visible;z-index:10002;opacity:var(--intro-nav-opacity,0)}

.intro-copy{width:max-content;max-width:92vw}.intro-message-stack{flex:0 1 auto}
@media(max-width:600px){.intro-copy{width:94vw;max-width:94vw}.intro-message-stack{flex:1}}

/* Matching enamel-and-brass controls. */
.intro-skip,.intro-audio{min-width:126px;min-height:38px;border:2px solid #b89a5a;border-radius:12px;background:radial-gradient(ellipse at 25% 10%,#46486c,#1a1b35 55%,#0a0b1c);color:#eeddb4;box-shadow:inset 0 2px 2px #f9e4a177,inset 0 -3px 5px #02020c,0 4px 0 #68532e,0 6px 0 #141520,0 10px 18px #0008;font:600 10px/1.4 'DM Sans',sans-serif;letter-spacing:.04em;transition:transform .22s cubic-bezier(.2,1.5,.4,1),filter .2s}
.intro-skip::after,.intro-audio::after{content:'';position:absolute;inset:4px;border:1px solid #d3ba7955;border-radius:7px;pointer-events:none}
.intro-audio{top:calc(clamp(18px,3vh,36px) + 53px)}
.intro-skip:hover,.intro-audio:hover{background:radial-gradient(ellipse at 25% 10%,#53557d,#23254a 55%,#10112d);color:#fff0c9;border-color:#d0b579;filter:brightness(1.08);transform:translateY(-1px)}
.intro-skip:active,.intro-audio:active{transform:translateY(3px) scale(.98)}
.intro-skip:focus-visible,.intro-audio:focus-visible{outline:2px solid #f1d99e;outline-offset:5px}
@media(max-width:600px){.intro-skip,.intro-audio{min-width:104px;min-height:34px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.intro-skip,.intro-audio{transition:none}}

html.intro-pending{background:#000!important}
html.intro-pending body{visibility:hidden!important}
html.intro-pending:before{content:"";position:fixed;inset:0;background:#000;z-index:2147483647}