/* Blue Destination - animazioni allo scroll + tema mare/barche (Motion).
   Lo stato iniziale "nascosto" si applica SOLO con JS attivo (html.js-anim) per non
   nascondere i contenuti se il JS non carica. Rispetta prefers-reduced-motion. */

/* Barra avanzamento scroll (oceano) */
.bd-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#05bfdb,#088395,#0a4d68);transform:scaleX(0);transform-origin:0 50%;z-index:3000;pointer-events:none}

/* Reveal: stato iniziale (solo con JS) */
html.js-anim [data-reveal],
html.js-anim .section-header,
html.js-anim .boat-card,
html.js-anim .feature-card,
html.js-anim .shop-card,
html.js-anim .news-card,
html.js-anim .review-card,
html.js-anim .section-description,
html.js-anim .destinations-content,
html.js-anim .contact-info,
html.js-anim .contact-form-wrapper{opacity:0;transform:translateY(32px);will-change:opacity,transform}
html.js-anim [data-reveal="left"]{transform:translateX(-40px)}
html.js-anim [data-reveal="right"]{transform:translateX(40px)}
html.js-anim [data-reveal="zoom"]{transform:scale(.94)}

/* Hero: leggero zoom dell'immagine di sfondo per il parallax */
html.js-anim .hero .video-fallback-image{transform:scale(1.08);will-change:transform}
html.js-anim .hero .hero-content{will-change:transform,opacity}
/* indicatore scroll sopra l'onda */
.hero .scroll-indicator{z-index:6}
html.js-anim .hero .scroll-indicator{bottom:110px}

/* Onde animate come divisori di sezione */
.bd-wave{line-height:0;pointer-events:none}
.bd-wave svg{display:block;width:100%;height:90px}
.bd-wave-divider{position:relative;margin-top:-90px;z-index:5}
.bd-wave-anim path{animation:bdWaveShift 16s ease-in-out infinite alternate}
@keyframes bdWaveShift{from{transform:translateX(0)}to{transform:translateX(-46px)}}

/* Velatura "oceano" animata sopra l'overlay del hero */
.hero .video-overlay::after{content:"";position:absolute;inset:0;background:radial-gradient(1100px 520px at 50% 120%,rgba(5,191,219,.28),transparent 60%);opacity:.8;animation:bdSheen 9s ease-in-out infinite alternate}
@keyframes bdSheen{from{opacity:.45;transform:translateY(0)}to{opacity:.85;transform:translateY(-14px)}}

/* Float dolce (per eventuali badge marini) */
.bd-float{animation:bdFloat 6s ease-in-out infinite}
@keyframes bdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion: reduce){
  html.js-anim [data-reveal],
  html.js-anim .section-header,
  html.js-anim .boat-card,
  html.js-anim .feature-card,
  html.js-anim .shop-card,
  html.js-anim .news-card,
  html.js-anim .review-card,
  html.js-anim .section-description,
  html.js-anim .destinations-content,
  html.js-anim .contact-info,
  html.js-anim .contact-form-wrapper{opacity:1!important;transform:none!important}
  .bd-wave-anim path,.bd-float,.hero .video-overlay::after{animation:none!important}
  .bd-scroll-progress{display:none}
}