/* ============================================================
   Vicini di Casa v3 — Scene illustrate animate (SVG inline)
   ============================================================ */
svg.scene { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow-lg); background: #dcecfb; }
.scene .leg {transform-box:fill-box; transform-origin: 50% 0; }
.scene .la { animation: legSwing .75s ease-in-out infinite alternate; }
.scene .lb { animation: legSwing .75s ease-in-out infinite alternate-reverse; }
@keyframes legSwing { from { transform: rotate(calc(var(--amp, 26) * -1deg)); } to { transform: rotate(calc(var(--amp, 26) * 1deg)); } }
.scene .arm {transform-box:fill-box; transform-origin: 50% 0; animation: armSwing .75s ease-in-out infinite alternate-reverse; }
@keyframes armSwing { from { transform: rotate(calc(var(--amp, 20) * -.8deg)); } to { transform: rotate(calc(var(--amp, 20) * .8deg)); } }
.scene .cl { animation: cloudDrift var(--dur, 70s) linear var(--delay, 0s) infinite; }
@keyframes cloudDrift { from { transform: translateX(-220px); } to { transform: translateX(780px); } }
.scene .fly { animation: fly var(--dur, 30s) linear var(--delay, 0s) infinite; }
@keyframes fly {
  0% { transform: translate(-60px, var(--y, 60px)); }
  25% { transform: translate(170px, calc(var(--y, 60px) - 14px)); }
  50% { transform: translate(350px, calc(var(--y, 60px) + 6px)); }
  75% { transform: translate(530px, calc(var(--y, 60px) - 12px)); }
  100% { transform: translate(720px, var(--y, 60px)); }
}
.scene .wl {transform-box:fill-box; transform-origin: 100% 100%; animation: wingL var(--f, .45s) ease-in-out infinite alternate; }
.scene .wr {transform-box:fill-box; transform-origin: 0 100%; animation: wingR var(--f, .45s) ease-in-out infinite alternate; }
@keyframes wingL { from { transform: rotate(20deg); } to { transform: rotate(-26deg); } }
@keyframes wingR { from { transform: rotate(-20deg); } to { transform: rotate(26deg); } }
.scene .tw { animation: twinkle 3s ease-in-out var(--delay, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.scene .peek { animation: peek 6s ease-in-out var(--delay, 0s) infinite; }
@keyframes peek { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-2px); } }
.scene .sway {transform-box:fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes flow { to { stroke-dashoffset: -26; } }

/* Hero della home: la scena sostituisce la vecchia illustrazione */
.hero-visual .scene { max-width: 600px; }
.hero-illustration { width: 100%; max-width: 600px; filter: none; }

/* Hero delle pagine interne: testo + scena */
.page-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; }
.page-hero-text p:not(.breadcrumb) { max-width: 560px; }
.page-hero-text h1 { max-width: 640px; }
.page-hero-art { min-width: 0; }
.page-hero-art .scene { max-width: 540px; margin-left: auto; }
.page-hero { padding-bottom: 96px; }
@media (max-width: 860px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .page-hero-art .scene { margin: 0 auto; max-width: 440px; }
  .page-hero { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene { animation: none !important; transition: none !important; }
}
.hero-visual { width: 100%; }
.hero-visual > div { width: 100%; }
.scene .win { fill: #dcecfb; }
.map-wrap { margin-bottom: 20px; }
.map-wrap .scene { max-width: 100%; }

/* ---- Animazioni specifiche delle scene (generate) ---- */
@keyframes sunArc{0%{opacity:0;transform:translate(40px,290px)}2.0%{opacity:1;transform:translate(40px,250px)}6.4%{opacity:1;transform:translate(96px,191px)}10.8%{opacity:1;transform:translate(152px,138px)}15.2%{opacity:1;transform:translate(208px,96px)}19.6%{opacity:1;transform:translate(264px,69px)}24.0%{opacity:1;transform:translate(320px,60px)}28.4%{opacity:1;transform:translate(376px,69px)}32.8%{opacity:1;transform:translate(432px,96px)}37.2%{opacity:1;transform:translate(488px,138px)}41.6%{opacity:1;transform:translate(544px,191px)}46.0%{opacity:1;transform:translate(600px,250px)}48.0%{opacity:0;transform:translate(600px,290px)}100%{opacity:0;transform:translate(40px,290px)}}
@keyframes moonArc{0%{opacity:0;transform:translate(40px,290px)}54.0%{opacity:1;transform:translate(40px,250px)}58.4%{opacity:1;transform:translate(96px,191px)}62.8%{opacity:1;transform:translate(152px,138px)}67.2%{opacity:1;transform:translate(208px,96px)}71.6%{opacity:1;transform:translate(264px,69px)}76.0%{opacity:1;transform:translate(320px,60px)}80.4%{opacity:1;transform:translate(376px,69px)}84.8%{opacity:1;transform:translate(432px,96px)}89.2%{opacity:1;transform:translate(488px,138px)}93.6%{opacity:1;transform:translate(544px,191px)}98.0%{opacity:1;transform:translate(600px,250px)}100.0%{opacity:0;transform:translate(600px,290px)}100%{opacity:0;transform:translate(40px,290px)}}

.s-home .sky-night{animation:night 44s linear infinite}
.s-home .shade{animation:shade 44s linear infinite}
.s-home .dusk{animation:dusk 44s linear infinite}
.s-home .stars{animation:night 44s linear infinite}
.s-home .sun{animation:sunArc 44s linear infinite}
.s-home .moon{animation:moonArc 44s linear infinite}
.s-home .lit,.s-home .glow{animation:night 44s linear infinite}
.s-home .day-only{animation:dayOnly 44s linear infinite}
@keyframes night{0%,38%{opacity:0}52%,86%{opacity:1}100%{opacity:0}}
@keyframes shade{0%,38%{opacity:0}52%,86%{opacity:.32}100%{opacity:0}}
@keyframes dusk{0%,40%{opacity:0}46%{opacity:.55}54%{opacity:0}88%{opacity:0}94%{opacity:.5}100%{opacity:0}}
@keyframes dayOnly{0%,42%{opacity:1}52%,88%{opacity:0}98%,100%{opacity:1}}
.s-home .lift{animation:lift 26s ease-in-out infinite}
@keyframes lift{0%,8%{transform:translateY(0)}20%,30%{transform:translateY(84px)}42%,52%{transform:translateY(168px)}64%,72%{transform:translateY(84px)}86%,100%{transform:translateY(0)}}
.s-home .door{transform-box:fill-box;transform-origin:0 50%;animation:doorOpen 26s ease-in-out infinite}
@keyframes doorOpen{0%,33%{transform:scaleX(1)}37%,43%{transform:scaleX(.12)}47%,51%{transform:scaleX(1)}54%,60%{transform:scaleX(.12)}64%,100%{transform:scaleX(1)}}
.s-home .w1{animation:w1 26s linear infinite}
@keyframes w1{0%{transform:translateX(250px);opacity:0}2%{opacity:1}36%{transform:translateX(14px);opacity:1}40%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:0}}
.s-home .w2{animation:w2 26s linear infinite}
@keyframes w2{0%,53%{transform:translateX(0);opacity:0}55%{opacity:1}94%{transform:translateX(-240px);opacity:1}97%,100%{transform:translateX(-250px);opacity:0}}
.s-home .w3{animation:w3 34s linear infinite}
@keyframes w3{from{transform:translateX(-40px)}to{transform:translateX(690px)}}
.s-home .w4{animation:w4 42s linear -12s infinite}
@keyframes w4{from{transform:translateX(690px)}to{transform:translateX(-40px)}}
.s-home .win{animation:winDay 44s linear infinite}
@keyframes winDay{0%,40%{fill:#dcecfb}52%,86%{fill:#bcd3ee}100%{fill:#dcecfb}}


.s-pescia .pdoor{transform-box:fill-box;transform-origin:0 50%;animation:pdoor 20s ease-in-out infinite}
@keyframes pdoor{0%,100%{transform:scaleX(1)}2%,8%{transform:scaleX(.12)}12%{transform:scaleX(1)}}
.s-pescia .tw2{animation:twinkle 2.4s ease-in-out var(--delay,0s) infinite}
.s-pescia .petal{animation:fall 9s linear var(--delay,0s) infinite}
@keyframes fall{from{transform:translate(0,-20px) rotate(0);opacity:0}10%{opacity:.9}to{transform:translate(40px,300px) rotate(240deg);opacity:0}}


.s-monte .mdoor{transform-box:fill-box;transform-origin:0 50%;animation:mdoor 24s ease-in-out infinite}
@keyframes mdoor{0%,5%{transform:scaleX(1)}9%,15%{transform:scaleX(.12)}19%,54%{transform:scaleX(1)}58%,64%{transform:scaleX(.12)}68%,100%{transform:scaleX(1)}}
.s-monte .m1{animation:m1 24s linear infinite}
@keyframes m1{0%,10%{transform:translateX(0);opacity:0}12%{opacity:1}44%{transform:translateX(250px);opacity:1}47%{opacity:0}100%{opacity:0;transform:translateX(250px)}}
.s-monte .m2{animation:m2 24s linear infinite}
@keyframes m2{0%,48%{transform:translateX(250px);opacity:0}50%{opacity:1}86%{transform:translateX(18px);opacity:1}90%,100%{transform:translateX(0);opacity:0}}
.s-monte .jet{animation:flow 1.1s linear infinite;stroke-dasharray:5 6}
.s-monte .drip{animation:drip 1.6s ease-in var(--delay,0s) infinite}
@keyframes drip{from{transform:translateY(-14px);opacity:0}30%{opacity:1}to{transform:translateY(16px);opacity:0}}
.steam{animation:steam 5s ease-in var(--delay,0s) infinite}
@keyframes steam{0%{transform:translateY(0) scaleX(.9);opacity:0}25%{opacity:.75}100%{transform:translateY(-46px) scaleX(1.3);opacity:0}}
.ripple{transform-box:fill-box;transform-origin:50% 50%;animation:ripple 3.4s ease-out var(--delay,0s) infinite}
@keyframes ripple{from{transform:scale(.3);opacity:.8}to{transform:scale(1.5);opacity:0}}


.s-monsu .g1{animation:g1 22s linear infinite}
@keyframes g1{0%,6%{transform:translateX(0);opacity:0}9%{opacity:1}44%{transform:translateX(232px);opacity:1}49%,100%{transform:translateX(250px);opacity:0}}
.s-monsu .g2{animation:g2 22s linear infinite}
@keyframes g2{0%,52%{transform:translateX(250px);opacity:0}56%{opacity:1}92%{transform:translateX(18px);opacity:1}96%,100%{transform:translateX(0);opacity:0}}
.s-monsu .gdoor{transform-box:fill-box;transform-origin:0 50%;animation:gdoor 22s ease-in-out infinite}
@keyframes gdoor{0%,3%{transform:scaleX(1)}6%,12%{transform:scaleX(.12)}16%,100%{transform:scaleX(1)}}
.s-monsu .cavelight{animation:cave 5s ease-in-out infinite alternate}
@keyframes cave{from{opacity:.65}to{opacity:1}}


.s-pist .grow{transform-box:fill-box;transform-origin:50% 100%;animation:grow 9s ease-in-out var(--delay,0s) infinite alternate}
@keyframes grow{from{transform:scale(.82)}to{transform:scale(1.04)}}
.s-pist .water{animation:waterfall .9s linear var(--delay,0s) infinite}
@keyframes waterfall{from{transform:translate(0,0);opacity:1}to{transform:translate(26px,38px);opacity:0}}
.s-pist .can{transform-box:fill-box;transform-origin:100% 100%;animation:can 6s ease-in-out infinite}
@keyframes can{0%,100%{transform:rotate(0)}40%,70%{transform:rotate(-24deg)}}
.s-pist .butterfly{animation:butterfly 16s ease-in-out infinite}
@keyframes butterfly{0%{transform:translate(0,0)}25%{transform:translate(140px,-30px)}50%{transform:translate(260px,10px)}75%{transform:translate(130px,-40px)}100%{transform:translate(0,0)}}
.s-pist .wing-b{transform-box:fill-box;transform-origin:50% 50%;animation:flapb .35s ease-in-out infinite alternate}
@keyframes flapb{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
.s-pist .glint{animation:glint 4s ease-in-out var(--delay,0s) infinite}
@keyframes glint{0%,100%{opacity:.15}50%{opacity:.55}}
.s-pist .barrow{animation:barrow 18s ease-in-out infinite}
@keyframes barrow{0%,100%{transform:translateX(0)}50%{transform:translateX(120px)}}


.s-sudi .wave{transform-box:fill-box;transform-origin:50% 100%;animation:wave 1.4s ease-in-out var(--delay,0s) infinite alternate}
@keyframes wave{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.s-sudi .heart{animation:heart 6s ease-in var(--delay,0s) infinite}
@keyframes heart{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-90px) scale(1.1);opacity:0}}
.s-sudi .keys{transform-box:fill-box;transform-origin:50% 0;animation:keys 3.2s ease-in-out infinite alternate}
@keyframes keys{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.s-sudi .e1{animation:e1 18s linear infinite}
@keyframes e1{0%{transform:translateX(230px);opacity:0}3%{opacity:1}40%,100%{transform:translateX(52px);opacity:1}}
.s-sudi .e1b{animation:pop 18s ease-out infinite}
@keyframes pop{0%,40%{opacity:0;transform:scale(.4)}46%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.4)}}


.s-serv .plat{animation:plat 10s ease-in-out infinite}
@keyframes plat{0%,100%{transform:translateY(0)}50%{transform:translateY(-120px)}}
.s-serv .paint{transform-box:fill-box;transform-origin:50% 100%;animation:paintUp 10s ease-in-out infinite}
@keyframes paintUp{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(.9)}}
.s-serv .gear{animation:spin 8s linear infinite}
.s-serv .gear2{animation:spin 8s linear reverse infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.s-serv .tick{stroke-dasharray:30;stroke-dashoffset:30;animation:tick 12s ease-out var(--delay,0s) infinite}
@keyframes tick{0%{stroke-dashoffset:30}10%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:30}}
.s-serv .paintarm{transform-box:fill-box;transform-origin:3% 58%;animation:paintarm 1.5s ease-in-out infinite alternate}
@keyframes paintarm{from{transform:translateY(10px) rotate(5deg)}to{transform:translateY(-14px) rotate(-5deg)}}


.s-trasp .lens{animation:lens 12s ease-in-out infinite}
@keyframes lens{0%,100%{transform:translate(0,0)}25%{transform:translate(120px,40px)}50%{transform:translate(210px,-20px)}75%{transform:translate(90px,60px)}}
.s-trasp .barx{transform-box:fill-box;transform-origin:50% 100%;animation:bars 5s ease-in-out var(--delay,0s) infinite alternate}
@keyframes bars{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.s-trasp .doc{animation:docs 7s ease-in-out var(--delay,0s) infinite alternate}
@keyframes docs{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.s-trasp .chk{stroke-dasharray:26;stroke-dashoffset:26;animation:tick2 8s ease-out var(--delay,0s) infinite}
@keyframes tick2{0%{stroke-dashoffset:26}12%,84%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:26}}
.s-trasp .shine{animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,100%{transform:translateX(-30px);opacity:0}40%,60%{opacity:.5}50%{transform:translateX(230px)}}


.s-faq .bubble{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:bubble 12s ease-out var(--delay,0s) infinite}
@keyframes bubble{0%{opacity:0;transform:scale(.3) translateY(8px)}6%{opacity:1;transform:scale(1.08) translateY(0)}9%,26%{opacity:1;transform:scale(1)}32%,100%{opacity:0;transform:scale(.8) translateY(-10px)}}
.s-faq .phone{transform-box:fill-box;transform-origin:50% 100%;animation:ring 3s ease-in-out infinite}
@keyframes ring{0%,60%,100%{transform:rotate(0)}64%{transform:rotate(-12deg)}68%{transform:rotate(12deg)}72%{transform:rotate(-10deg)}76%{transform:rotate(8deg)}80%{transform:rotate(0)}}


.s-cont .pin{animation:pinbob 2.6s ease-in-out var(--delay,0s) infinite alternate}
@keyframes pinbob{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.s-cont .mail{animation:mail 8s ease-in-out infinite}
@keyframes mail{0%{transform:translate(0,0) rotate(0);opacity:0}6%{opacity:1}50%{transform:translate(300px,-34px) rotate(8deg);opacity:1}56%{transform:translate(318px,-10px) rotate(0);opacity:0}100%{opacity:0;transform:translate(318px,-10px)}}
.s-cont .path{stroke-dasharray:4 9;animation:flow 1.6s linear infinite}
.s-cont .wavep{animation:wavep 3s ease-out var(--delay,0s) infinite}
@keyframes wavep{from{transform:scale(.4);opacity:.9}to{transform:scale(1.5);opacity:0}}


.s-priv .shield{transform-box:fill-box;transform-origin:50% 50%;animation:shield 4.5s ease-in-out infinite}
@keyframes shield{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.s-priv .lock{transform-box:fill-box;transform-origin:50% 100%;animation:lockc 6s ease-in-out infinite}
@keyframes lockc{0%,20%{transform:translateY(0)}30%{transform:translateY(-3px)}38%,100%{transform:translateY(0)}}
.s-priv .shackle{transform-box:fill-box;transform-origin:100% 100%;animation:shackle 6s ease-in-out infinite}
@keyframes shackle{0%,15%{transform:translateY(-8px) rotate(-18deg)}28%,100%{transform:translateY(0) rotate(0)}}
.s-priv .key{animation:key 6s ease-in-out infinite}
@keyframes key{0%{transform:translate(-90px,20px) rotate(-20deg);opacity:0}10%{opacity:1}20%{transform:translate(0,0) rotate(0);opacity:1}28%,100%{transform:translate(0,0);opacity:0}}
.s-priv .halo{transform-box:fill-box;transform-origin:50% 50%;animation:ripple 3.6s ease-out var(--delay,0s) infinite}


.s-map .town-pin{animation:pinbob 2.6s ease-in-out var(--delay,0s) infinite alternate}
@keyframes pinbob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.s-map .route{stroke-dasharray:3 9;animation:flow 1.8s linear infinite}
.s-map .pulse-ring{transform-box:fill-box;transform-origin:50% 50%;animation:ripple 3.2s ease-out var(--delay,0s) infinite}
.s-map .river{stroke-dasharray:14 10;animation:flow 6s linear infinite}
.s-map .mscale{transform-box:fill-box;transform-origin:50% 100%;animation:grow 7s ease-in-out var(--delay,0s) infinite alternate}
@keyframes grow{from{transform:scale(.85)}to{transform:scale(1.05)}}