/* Cosa costruisco — carosello 3D a cilindro. Il piano è fermo mentre si scorre, l'anello gira. */
.page-build{--R:400px;--cw:320px;--chh:510px}
.ring-track{position:relative;height:calc(100vh + 6*24vh);height:calc(100svh + 6*24svh)}
.ring-snaps{position:absolute;inset:0;pointer-events:none}.ring-snaps i{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start}

.ring-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#f6f1e3}
.ring-bg{position:absolute;inset:-3%;z-index:0;pointer-events:none}.ring-bg picture,.ring-bg img{width:100%;height:100%;display:block}.ring-bg img{object-fit:cover;object-position:70% 60%}
.ring-bg picture{position:relative;z-index:0}.ring-bg .ora{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:70% 60%;opacity:0;will-change:opacity}
.ring-bg:after{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(90deg,#faf8f2e6 0%,#faf8f2b0 30%,#faf8f200 55%);opacity:calc(1 - var(--night,0))}.ring-bg:before{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(90deg,#101a2ccc 0%,#101a2c80 32%,#101a2c00 58%);opacity:var(--night,0);pointer-events:none}
.ring-sole{position:absolute;z-index:1;left:80%;top:24%;width:96px;height:96px;margin:-48px;will-change:transform}.ring-sole img{width:100%;height:100%;display:block}.ring-sole:before{content:'';position:absolute;inset:-110%;border-radius:50%;background:radial-gradient(closest-side,#ffe6b070,#ffe6b000)}
.ring-intro{position:absolute;z-index:3;left:max(40px,calc(50% - 680px));top:50%;transform:translateY(calc(-44% + var(--idy,0px)));width:min(380px,29vw)}
.ring-intro h1{font-size:clamp(38px,3.7vw,58px);font-weight:700;letter-spacing:-3px;line-height:.98;margin:0 0 22px;color:color-mix(in oklab,#0d302d,#f6f2e6 calc(var(--ink,0)*100%))}
.ring-lead{font-size:18px;line-height:1.5;color:color-mix(in oklab,#46544f,#e6e2d4 calc(var(--ink,0)*100%));margin:0 0 30px}
.ring-controls{display:flex;align-items:center;gap:14px}
.ring-btn{width:48px;height:48px;border-radius:50%;background:#faf8f2d9;border:1px solid #193f3533;font-size:20px;color:#193f35;box-shadow:0 8px 20px -14px #1d3a3380;transition:transform .2s,background .2s}.ring-btn:hover{background:#193f35;color:#faf8f2;transform:translateY(-2px)}
.ring-count{margin:0;font-size:14px;color:color-mix(in oklab,#46544f,#e6e2d4 calc(var(--ink,0)*100%));min-width:170px}.ring-count b{font-size:22px;font-weight:600;color:color-mix(in oklab,#193f35,#f6f2e6 calc(var(--ink,0)*100%));margin-right:2px}.ring-count span{display:block;font-size:17px;font-weight:500;color:#193f35;margin-top:2px}
.ring-hint{font-size:12px;letter-spacing:.4px;color:color-mix(in oklab,#5d6a60,#d4d0c2 calc(var(--ink,0)*100%));margin:18px 0 0}
.ring-view{position:absolute;z-index:2;left:66%;top:calc(50% + var(--rdy,0px));scale:var(--rs,1);width:var(--cw);height:var(--chh);margin:calc(var(--chh)/-2) 0 0 calc(var(--cw)/-2);perspective:1500px;perspective-origin:50% 42%;outline:none;cursor:grab;touch-action:pan-y}
.ring-view:active{cursor:grabbing}.ring-view:focus-visible{outline:none}.ring-view:focus-visible .svc.is-front{box-shadow:0 0 0 3px #ae7827,0 30px 50px -34px #1d3a33a0}
.ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.svc{--f:0;--pop:0;position:absolute;inset:0;padding:34px 30px 30px;padding-top:128px;border-radius:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(calc(var(--i)*360deg/7)) translateZ(calc(var(--R) + var(--pop)*26px));display:flex;flex-direction:column;box-shadow:0 30px 50px -34px #1d3a33a0,inset 0 1px 0 #ffffffa0;user-select:none}
.svc:after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:#f3eee0;opacity:calc((1 - var(--f))*.74);pointer-events:none}
.svc.panna{background:#fffdf7;color:#16362f;border:1px solid #dfe5d4}.svc.salvia{background:#e2e9d8;color:#16362f}.svc.bosco{background:#26493a;color:#f4f2e7}.svc.ocra{background:#ecd8b0;color:#2a2717}
.svc-n{font-size:15px;font-weight:600;letter-spacing:1px;opacity:.7;margin-top:auto}
.svc h3{font-size:34px;font-weight:600;letter-spacing:-1.2px;line-height:1.05;margin:6px 0 14px}
.svc-what{font-size:15px;line-height:1.55;margin:0}.svc-what b{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:600;opacity:.7;margin-bottom:6px}
/* La frase del cliente: una bolla di chat che esce dalla scheda quando arriva davanti */
.svc-quote{--f:0;--pop:0;position:absolute;left:24px;top:30px;width:calc(var(--cw) - 48px);z-index:2;display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:16px 16px 16px 5px;background:#fffdf7;color:#153830;box-shadow:0 calc(var(--pop)*22px + 6px) calc(var(--pop)*26px + 10px) -12px #0a1f1680;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:calc(var(--cw)/2 - 24px) calc(var(--chh)/2 - 30px);transform:rotateY(calc(var(--i)*360deg/7)) translateZ(calc(var(--R) + 6px + var(--pop)*122px)) translate(calc(var(--pop)*-22px),calc(var(--pop)*-18px)) rotateZ(calc(var(--pop)*-2deg));opacity:calc(.12 + .88*var(--f));pointer-events:none;will-change:transform}

.svc-quote i{flex:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#eef2e6 27%,transparent 30%),radial-gradient(ellipse at 50% 124%,#dfe8d0 46%,transparent 49%),#a9ba9f}
.svc-quote p{margin:0;font-size:16px;line-height:1.4;font-weight:500}
.svc-shadow{position:absolute;left:36px;top:44px;width:250px;height:52px;border-radius:50%;background:radial-gradient(closest-side,#04120b99,#04120b00);filter:blur(6px);opacity:calc(var(--pop)*.8);transform:translate3d(calc(var(--pop)*8px),calc(var(--pop)*18px),0);pointer-events:none}
.svc.bosco .svc-shadow{background:radial-gradient(closest-side,#000c,#0000)}
.page-build .topbar nav a[aria-current=page]:after{transform:none}
@media(max-width:1100px){.ring-view{left:68%}.page-build{--cw:280px;--chh:470px}.ring-intro{width:min(330px,30vw)}}
@media(max-width:760px){
 .page-build{--cw:258px;--chh:390px}
 .ring-track{height:calc(100svh + 6*20svh)}
 .ring-bg:after{background:linear-gradient(180deg,#faf8f2e6 0%,#faf8f2a0 34%,#faf8f200 55%)}
 .ring-intro{left:20px;right:20px;top:100px;transform:none;width:auto}.ring-intro h1{font-size:min(36px,8.8vw);letter-spacing:-1.6px;margin-bottom:10px}.ring-lead{font-size:14px;margin-bottom:12px}.ring-hint{display:none}
 .ring-controls{position:absolute;left:0;right:0;top:calc(100svh - 150px);justify-content:center;padding-right:64px} /* a destra resta lo spazio per il pulsante WhatsApp */.ring-count{text-align:center;min-width:150px}
 .ring-view{left:50%;top:auto;bottom:128px;margin:0 0 0 calc(var(--cw)/-2);perspective:950px}
 .ring-sole{display:none} /* sul telefono il sole finiva sopra il testo */
 .svc{padding:24px 22px 22px;padding-top:112px;border-radius:22px}.svc-quote{left:18px;top:22px;width:calc(var(--cw) - 36px);transform-origin:calc(var(--cw)/2 - 18px) calc(var(--chh)/2 - 22px)}.svc h3{font-size:27px}.svc-what{font-size:13.5px}.svc-quote p{font-size:14px}.svc-shadow{width:200px;left:28px}
}
@media(max-width:760px) and (max-height:900px){.ring-lead{display:none}}
@media(max-width:760px) and (max-height:780px){.ring-intro .eyebrow{display:none}.ring-intro h1{font-size:min(30px,8.2vw)}} /* telefoni bassi: resta solo il titolo */
@media(max-width:760px) and (max-height:700px){.page-build .ring-view{scale:.8;transform-origin:50% 100%}} /* iPhone SE e simili: schede più piccole, ancorate in basso, sotto il titolo */ /* sui telefoni normali il fumetto della scheda copriva l'introduzione */
/* Finestre basse da computer: il testo a sinistra si stringe per stare tra il menu e il fondo. */
@media(min-width:761px) and (max-height:760px){.ring-intro h1{font-size:clamp(32px,3.2vw,46px);letter-spacing:-2px;margin-bottom:14px}.ring-lead{font-size:16px;margin-bottom:18px}.ring-hint{display:none}}
@media(min-width:761px) and (max-height:600px){.ring-intro h1{font-size:30px;letter-spacing:-1.4px;margin-bottom:10px}.ring-lead{font-size:14px;line-height:1.45;margin-bottom:12px}.ring-btn{width:40px;height:40px;font-size:17px}}
.reduced .ring-track{height:auto}.reduced .ring-stage{position:relative;height:auto;padding:130px 24px 60px}.reduced .ring-intro{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:560px;margin-bottom:30px}.reduced .ring-controls,.reduced .ring-hint{display:none}
.reduced .ring-view{position:relative;left:auto;top:auto;margin:0;width:auto;height:auto;perspective:none;cursor:auto}.reduced .ring{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;transform:none!important}
.reduced .svc{position:relative;transform:none;opacity:1;min-height:300px}.reduced .svc-quote{display:none}.reduced .svc .sr-only{position:static;width:auto;height:auto;clip:auto;font-size:15px;font-weight:500;margin-bottom:12px}.reduced .svc{padding-top:30px}.reduced .svc-shadow{display:none}
html.reduced:has(.page-build){scroll-snap-type:none}
.ring-count span{color:color-mix(in oklab,#193f35,#f6f2e6 calc(var(--ink,0)*100%))}.ring-intro .eyebrow{color:color-mix(in oklab,#4d575c,#d9d6c8 calc(var(--ink,0)*100%))}
@media(max-width:760px){.ring-bg:before{background:linear-gradient(180deg,#101a2ccc 0%,#101a2c70 34%,#101a2c00 55%)}}
.reduced .ring-bg .ora{display:none}
.ring-intro{text-shadow:0 0 22px color-mix(in oklab,#faf8f2,#0c1424 calc(var(--ink,0)*100%))}

/* v09: giornata continua (mattina → pomeriggio → tramonto → sera → notte), stelle e luna su livelli propri */
html{overscroll-behavior-x:none}body{overscroll-behavior-x:none}
.ring-bg .ora-low{z-index:1}
.l-stelle{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;will-change:opacity}
.l-stelle img{width:100%;height:100%;object-fit:cover;object-position:70% 60%;display:block;filter:drop-shadow(0 0 3px #fff4cf) drop-shadow(0 0 9px #ffe6a6b0);animation:dcc-twinkle 3.2s ease-in-out infinite alternate;animation-play-state:paused}
.is-night .l-stelle img{animation-play-state:running}
@keyframes dcc-twinkle{0%{opacity:.78}45%{opacity:1}70%{opacity:.86}100%{opacity:1}}
.ring-luna{position:absolute;z-index:3;left:79%;top:20%;width:112px;height:112px;margin:-56px;opacity:0;pointer-events:none;will-change:transform,opacity}
.ring-luna img{position:relative;width:100%;height:100%;display:block;filter:drop-shadow(0 0 10px #fffbe8) drop-shadow(0 0 26px #fff3c9aa)}
.ring-luna:before{content:'';position:absolute;inset:-130%;border-radius:50%;background:radial-gradient(closest-side,#fff8dc55,#fff8dc00)}
@media(max-width:760px){.ring-luna{left:82%;top:31%;width:62px;height:62px;margin:-31px}}
.reduced .l-stelle,.reduced .ring-luna{display:none}

/* v12: l'oggetto in plastilina esce dalla scheda (un piano tra la scheda e la frase del cliente)
   e si mette al lavoro quando la scheda arriva davanti */
.page-build{--ow:190px;--ob:296px;--ol:166px}
.svc-obj{--f:0;--pop:0;position:absolute;left:calc(var(--cw) - var(--ol));bottom:calc(var(--chh) - var(--ob));width:var(--ow);z-index:2;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 transform-origin:calc(var(--ol) - var(--cw)/2) calc(100% - var(--ob) + var(--chh)/2);
 transform:rotateY(calc(var(--i)*360deg/7)) translateZ(calc(var(--R) + 3px + var(--pop)*74px)) translate(calc(var(--pop)*16px),calc(var(--pop)*-6px)) scale(calc(1 + var(--pop)*.1));opacity:calc(.1 + .9*var(--f));will-change:transform}
.obj-art{position:relative;width:100%;aspect-ratio:var(--ar)}
.obj-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.work .obj-art{animation:obj-float 3.4s ease-in-out infinite alternate}
@keyframes obj-float{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.svc-obj-shadow{position:absolute;left:calc(var(--cw) - 150px);top:calc(var(--ob) - 22px);width:150px;height:30px;border-radius:50%;background:radial-gradient(closest-side,#04120b52 0%,#04120b26 45%,#04120b00 100%);opacity:calc(.25 + var(--pop)*.6);transform:translate3d(calc(var(--pop)*8px),calc(var(--pop)*12px),0) scale(calc(1 + var(--pop)*.3));pointer-events:none}
.svc.bosco .svc-obj-shadow{background:radial-gradient(closest-side,#000a,#0000)}
.obj-art [data-q]{position:absolute;translate:-50% -50%;pointer-events:none;opacity:0}.obj-art img[data-q]{height:auto;display:block}
.o-glow,.o-ring,.o-wave,.o-flash{aspect-ratio:1;border-radius:50%}
.o-glow{mix-blend-mode:screen;background:radial-gradient(closest-side,#fffbe8f2 0%,#ffe6a899 35%,#ffd07a00 100%)}
.o-ring,.o-wave{border:3px solid #d4aa6b;box-shadow:0 0 10px #ffd98a99}
.o-flash{mix-blend-mode:screen;background:radial-gradient(closest-side,#fffffff2 0%,#fff6dccc 30%,#fff0c000 100%)}
/* le animazioni partono solo sulla scheda davanti */
.work .o-glow{animation:obj-glow 2.8s ease-in-out infinite;animation-delay:calc(var(--d,0)*1s)}
.work .o-spark{animation:obj-spark 1.9s ease-in-out infinite;animation-delay:calc(var(--d)*1s)}
.work .o-hand{animation:obj-click 2.8s cubic-bezier(.45,0,.3,1) infinite}
.work .o-ring{animation:obj-ringpulse 2.8s ease-out infinite}
.work .o-wave{animation:obj-wave 3.6s ease-out infinite;animation-delay:calc(var(--d,0)*1s)}
.shake.work .obj-img{animation:obj-shake 3.6s linear infinite;transform-origin:50% 90%}
.work .o-tick{animation:obj-tick 3.6s ease-out infinite}
.work .o-paper{animation:obj-paper 3.6s ease-in-out infinite}
.work .o-chat{animation:obj-chat 2.4s ease-out infinite;animation-delay:calc(var(--d)*1s)}
.work .o-drop{animation:obj-funnel 1.8s cubic-bezier(.5,0,.8,.6) infinite;animation-delay:calc(var(--d)*1s)}
.work .o-slide{animation:obj-slide 2.4s ease-in-out infinite;animation-delay:calc(var(--d)*1s)}
.svc-obj[style*="--i:5"].work .o-tick{animation:obj-check 2.7s ease-out infinite;animation-delay:calc(var(--d)*1s)}
.work .o-flash{animation:obj-flash 3s ease-out infinite}
.work .o-heart{animation:obj-heart 3s ease-out infinite;animation-delay:calc(var(--d)*1s)}
@keyframes obj-glow{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}
@keyframes obj-spark{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
@keyframes obj-click{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}46%{transform:translate(-148%,-150%) scale(1)}52%{transform:translate(-148%,-150%) scale(.84)}58%{transform:translate(-148%,-150%) scale(1)}84%{opacity:1}100%{opacity:0;transform:translate(-148%,-150%)}}
@keyframes obj-ringpulse{0%,50%{opacity:0;transform:scale(.5)}53%{opacity:1;transform:scale(.7)}82%,100%{opacity:0;transform:scale(1.7)}}
@keyframes obj-wave{0%{opacity:0;transform:scale(.55)}4%{opacity:.95}30%,100%{opacity:0;transform:scale(1.35)}}
@keyframes obj-shake{0%,30%,100%{transform:rotate(0)}3%,9%,15%,21%{transform:rotate(-2.2deg)}6%,12%,18%,24%{transform:rotate(2.2deg)}27%{transform:rotate(-1deg)}}
@keyframes obj-tick{0%,34%{opacity:0;transform:scale(.3)}41%{opacity:1;transform:scale(1.18)}47%{transform:scale(1)}88%{opacity:1}100%{opacity:0}}
@keyframes obj-paper{0%,44%{opacity:0;transform:translate(0,0) rotate(0)}50%{opacity:1}86%{opacity:1;transform:translate(150%,-120%) rotate(14deg)}100%{opacity:0;transform:translate(170%,-140%) rotate(18deg)}}
@keyframes obj-chat{0%{opacity:0;transform:translate(0,20%) scale(.4)}15%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:1;transform:translate(0,-170%) scale(1)}100%{opacity:0;transform:translate(0,-230%) scale(.9)}}
@keyframes obj-funnel{0%{opacity:0;transform:translateY(0) rotate(-10deg)}15%{opacity:1}70%{opacity:1;transform:translateY(170%) rotate(8deg) scale(.85)}85%,100%{opacity:0;transform:translateY(195%) scale(.6)}}
@keyframes obj-slide{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}60%{transform:translate(260%,112%)}78%{opacity:1;transform:translate(290%,234%) scale(.9)}90%,100%{opacity:0;transform:translate(290%,234%) scale(.9)}}
@keyframes obj-check{0%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.18)}16%{transform:scale(1)}78%{opacity:1}92%,100%{opacity:0}}
@keyframes obj-flash{0%{opacity:0;transform:scale(.4)}5%{opacity:1;transform:scale(1)}22%,100%{opacity:0;transform:scale(1.35)}}
@keyframes obj-heart{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1;transform:translate(0,-20%) scale(1)}80%{opacity:1;transform:translate(12%,-230%) scale(1)}100%{opacity:0;transform:translate(16%,-280%) scale(.9)}}
@media(max-width:1100px){.page-build{--ow:170px;--ob:270px;--ol:146px}.svc-obj-shadow{width:130px;left:calc(var(--cw) - 132px)}}
@media(max-width:760px){.page-build{--ow:128px;--ob:212px;--ol:108px}.svc-obj-shadow{width:100px;height:22px;left:calc(var(--cw) - 100px)}}
.reduced .svc-obj,.reduced .svc-obj-shadow{display:none}

@media(max-width:760px){.ring-view{scale:1;top:auto}}