.hr{position:relative;height:500vh;background:#03060c;color:#fff}
.hr-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint;isolation:isolate}
.hr-layer{position:absolute;inset:0;will-change:transform,opacity;transform-origin:50% 50%}
.hr-layer img,.hr-layer picture{display:block;width:100%;height:100%;object-fit:cover}
.hr-it,.hr-cl,.hr-cb,.hr-seq,.hr-lb,.hr-bp,.hr-ho,.hr-black{opacity:0;visibility:hidden}
.hr-cl,.hr-cb{pointer-events:none}
.hr-seq{width:100%;height:100%;display:block}
.hr-black{background:#000}
.hr-vig{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,6,12,.82) 0%,rgba(3,6,12,.35) 42%,rgba(3,6,12,0) 70%),radial-gradient(ellipse at 50% 120%,rgba(3,6,12,.7),rgba(3,6,12,0) 60%)}
.hr-copy{position:absolute;inset:0;display:flex;align-items:center;padding:0 clamp(1.25rem,6vw,6rem);pointer-events:none}
.hr-t{position:absolute;left:clamp(1.25rem,6vw,6rem);right:clamp(1.25rem,6vw,6rem);max-width:min(46rem,92vw);opacity:0;visibility:hidden;will-change:transform,opacity,filter}
.hr-t1{opacity:1;visibility:visible}
.hr-t.is-on{pointer-events:auto}
.hr-label{font-family:var(--fm,monospace);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#78d7ff;margin:0 0 1rem;opacity:.9}
.hr-h{font-family:var(--fd,inherit);font-weight:800;font-size:clamp(2.3rem,6.2vw,5.6rem);line-height:1.02;letter-spacing:-.02em;margin:0;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.55);text-wrap:balance}
.hr-h .y{color:#ffd600;text-shadow:0 0 28px rgba(255,214,0,.35)}
.hr-h .c{color:#78d7ff;text-shadow:0 0 28px rgba(120,215,255,.35)}
.hr-sub{margin:1.1rem 0 0;max-width:34rem;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.55;color:rgba(255,255,255,.78)}
.hr-t .hs-cta{display:inline-flex;margin-top:1.6rem}
.hr-cta-static{display:none!important}
.hr-prog{position:absolute;left:clamp(1.25rem,6vw,6rem);right:clamp(1.25rem,6vw,6rem);bottom:1.4rem;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.hr-prog i{display:block;height:100%;background:linear-gradient(90deg,#78d7ff,#ffd600);transform:scaleX(0);transform-origin:0 50%}
.hr-hint{position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);margin:0;font-family:var(--fm,monospace);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media (max-width:768px){
.hr{height:320vh}
.hr-vig{background:linear-gradient(180deg,rgba(3,6,12,.9) 0%,rgba(3,6,12,.55) 38%,rgba(3,6,12,0) 62%,rgba(3,6,12,.5) 100%)}
.hr-copy{align-items:flex-start}
.hr-t{top:calc(4.6rem + 3vh);max-width:none}
.hr-label{margin-bottom:.6rem}
.hr-h{font-size:clamp(2rem,10vw,3rem)}
.hr-sub{font-size:.95rem}
}
.hr-static{height:auto}
.hr-static .hr-stage{position:relative;height:100vh;height:100svh}
.hr-static .hr-layer{will-change:auto;transform:none!important}
.hr-static .hr-t:not(.hr-t1),.hr-static .hr-prog,.hr-static .hr-hint,.hr-static .hr-it,.hr-static .hr-cb,.hr-static .hr-ho,.hr-static .hr-cl,.hr-static .hr-seq,.hr-static .hr-black,.hr-static .hr-bp{display:none}
.hr-static .hr-t1{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;pointer-events:auto}
.hr-static .hr-cta-static{display:inline-flex!important}
@media (prefers-reduced-motion:reduce){
.hr{height:auto}
.hr .hr-stage{position:relative;height:100vh;height:100svh}
.hr .hr-t:not(.hr-t1),.hr .hr-prog,.hr .hr-hint,.hr .hr-it,.hr .hr-cb,.hr .hr-ho,.hr .hr-cl,.hr .hr-seq,.hr .hr-black,.hr .hr-bp{display:none}
.hr .hr-t1{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;pointer-events:auto}
.hr .hr-cta-static{display:inline-flex!important}
}

.hr-cl img,.hr-cb img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.hr-lb{pointer-events:none;overflow:hidden}
.hr-lbl{position:absolute;left:0;top:0;opacity:0;font-family:var(--fd,inherit);font-weight:800;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 0 8px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9);will-change:transform}
.hr-copy{padding-top:5.5rem}
@media (max-width:768px){.hr-t{top:calc(5.75rem + 4vh)}}
.hr-static .hr-lb{display:none}
@media (prefers-reduced-motion:reduce){.hr .hr-lb{display:none}}
@media (max-width:768px){.hr-bp{background:#010b1c}.hr-bp img{position:absolute;left:4%;top:50%;width:92%;height:auto;transform:translateY(-50%);object-fit:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);mask-composite:intersect}}
@media (min-width:1025px){html[lang="de"] #nav .nav-links,html[lang="fr"] #nav .nav-links{gap:1rem}html[lang="de"] #nav .nav-links a,html[lang="fr"] #nav .nav-links a{white-space:nowrap;font-size:.68rem}}
/* LCP 2026-10-23: stato iniziale (p=0) delle nuvole gia' in CSS, identico a render(0) di hero-scroll.js
   (opacity .6, translate3d(0,30%,0) scale(1.1)): l'immagine LCP si dipinge senza attendere il JS; poi il JS la governa via style inline. */
@media (prefers-reduced-motion:no-preference){.hr:not(.hr-static) .hr-cl{opacity:.6;visibility:visible;transform:translate3d(0,30%,0) scale(1.1)}}