/* Apertura animata: fotografia originale e onde vettoriali leggere. */
.cs-hero:after{z-index:1}
.cs-hero .hero-content{z-index:3}
.cs-hero .cs-hero-media{transform:scale(1.1);transform-origin:60% 50%}
.cs-home .cs-hero .hero-image{animation:none;transform:none}
.cs-water{position:absolute;inset:auto 0 0;height:240px;overflow:hidden;z-index:2;pointer-events:none;mask-image:linear-gradient(90deg,#0002,#000 60%)}
.cs-water-layer{position:absolute;left:0;bottom:-45px;width:200%;max-width:none;height:100%;fill:#0c75916b}
.cs-water-2{bottom:-75px;fill:#98e0e735}
.cs-water-3{bottom:-110px;fill:#042a49ba}
.cs-title-line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.cs-title-line>span{display:block}
.cs-hero-tools{display:flex;align-items:center;gap:22px;flex-shrink:0}
.cs-motion-toggle{display:inline-flex;align-items:center;gap:9px;border:1px solid #ffffff70;background:#082d4875;border-radius:25px;color:#fff;font-size:.72rem;font-weight:600;line-height:1;min-height:36px;padding:9px 13px;cursor:pointer}
.cs-motion-toggle[hidden]{display:none}
.cs-motion-toggle:hover{background:#ffffff25;border-color:#fff}
.cs-motion-icon{font-size:.95rem;min-width:13px;text-align:center}
.cs-motion-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
@media(prefers-reduced-motion:no-preference){
  .cs-motion-ready .cs-hero-media{animation:cs-ocean-pan 12s ease-in-out infinite alternate}
  .cs-motion-ready .cs-water-1{animation:cs-wave-flow 8s linear infinite}
  .cs-motion-ready .cs-water-2{animation:cs-wave-flow 12s linear infinite reverse}
  .cs-motion-ready .cs-water-3{animation:cs-wave-flow 18s linear infinite}
  .cs-motion-ready .cs-title-line>span{animation:cs-title-rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .cs-motion-ready .cs-title-line:nth-child(2)>span{animation-delay:.18s}
  .cs-motion-ready .cs-hero-bottom{animation:cs-intro-arrive .85s .48s ease-out both}
  .cs-motion-ready .cs-focus-tabs{animation:cs-intro-arrive .85s .65s ease-out both}
}
/* Pausa volontaria e pausa quando la prima schermata non e visibile. */
.cs-motion-paused .cs-hero-media,.cs-motion-paused .cs-water-layer,
.cs-motion-away .cs-hero-media,.cs-motion-away .cs-water-layer{animation-play-state:paused}
@keyframes cs-ocean-pan{from{transform:scale(1.1) translate3d(-1.8%,-.5%,0)}to{transform:scale(1.2) translate3d(1.8%,.5%,0)}}
@keyframes cs-wave-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cs-title-rise{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
@keyframes cs-intro-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.cs-hero-tools{gap:0}.cs-hero-topline{align-items:center;gap:12px}.cs-water{height:280px}.cs-motion-toggle{min-height:36px;padding:8px 11px}.cs-hero-topline .eyebrow{max-width:240px}}
@media(max-width:600px){.cs-hero-topline .eyebrow{max-width:205px}.cs-water{height:320px;mask-image:linear-gradient(90deg,#0005,#000)}.cs-water-1{fill:#0c75915a}.cs-water-2{fill:#98e0e72b}.cs-title-line{overflow:visible}.cs-hero h1{font-size:clamp(3.25rem,10.8vw,4.2rem)}}
@media(prefers-reduced-motion:reduce){.cs-hero-media,.cs-water-layer,.cs-title-line>span,.cs-hero-bottom,.cs-focus-tabs{animation:none!important;transform:none!important}.cs-motion-toggle{display:none!important}.cs-hero .cs-hero-media{transform:scale(1.04)!important}}
@media print{.cs-motion-toggle,.cs-water{display:none!important}.cs-hero-media,.cs-title-line>span,.cs-hero-bottom,.cs-focus-tabs{animation:none!important;transform:none!important;opacity:1!important}}