/*
 * Hero d'apertura della home (blocks/hero.php, classe .hero--home), caricato solo in home.
 * Smartphone e tablet in verticale: a tutto schermo (100svh, senza salti della barra degli indirizzi),
 * ingresso in sequenza, zoom lento della foto, parallasse leggero (hero.js), onde animate e invito a scorrere.
 * Desktop: invariato. Movimento ridotto: tutto fermo e visibile.
 */
.hero__scroll, .hero__waves { display: none; }

@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
  .hero--home {
    --hero-bar: 0px;      /* barra di navigazione fissa in basso (bottom-bar.css) */
    --hero-wave: 46px;
    --hero-y: 0px;        /* scorrimento, da hero.js */
    --hero-p: 0;
    background: #0d2a3d;
  }
  .hero--home .hero__slide {
    min-height: calc(100vh - var(--hero-bar));
    min-height: calc(100svh - var(--hero-bar));
    align-items: flex-end;
    padding: calc(var(--header-h) + 24px) 0 calc(var(--hero-wave) + 96px);
  }
  /* sfumatura: cielo libero in alto, base scura sotto il testo (contrasto AA del bianco) */
  .hero--home .hero__slide::before {
    background:
      linear-gradient(180deg, rgba(4, 20, 33, 0.5) 0%, rgba(4, 20, 33, 0) 22%),
      linear-gradient(0deg, rgba(4, 20, 33, 0.9) 0%, rgba(4, 20, 33, 0.72) 32%, rgba(4, 20, 33, 0.28) 58%, rgba(4, 20, 33, 0) 78%);
  }
  .hero--home .hero__media { transform: translate3d(0, calc(var(--hero-y) * 0.4), 0); will-change: transform; }
  .hero--home .hero__img { object-position: 50% 50%; }
  .hero--home .hero__content {
    gap: 16px;
    transform: translate3d(0, calc(var(--hero-y) * -0.12), 0);
    opacity: calc(1 - var(--hero-p) * 1.8);
  }
  .hero--home .hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 0.8125rem; letter-spacing: 0.14em; }
  .hero--home .hero__eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--color-sky, #6ec1e4); transform-origin: left; }
  .hero--home .hero__title {
    font-size: clamp(2.75rem, 12.5vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  }
  .hero--home .hero__word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .hero--home .hero__word > span { display: inline-block; }
  .hero--home .hero__text { font-size: 1.0625rem; max-width: 34ch; }
  .hero--home .hero__actions { margin-top: 6px; }

  /* controlli dello slider a sinistra, invito a scorrere a destra, sopra le onde */
  .hero--home .hero__controls { bottom: calc(var(--hero-wave) + 18px); justify-content: flex-start; gap: 8px; }
  .hero--home .hero__prev, .hero--home .hero__next, .hero--home .hero__pause {
    color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .hero--home .hero__prev:hover, .hero--home .hero__next:hover, .hero--home .hero__pause:hover { background: var(--color-accent); border-color: var(--color-accent); }
  .hero--home .hero__dots { gap: 0; }
  .hero--home .hero__dot { width: 44px; height: 44px; }
  .hero--home .hero__dot::before { inset: 19px 9px; border-radius: 3px; transition: background-color 0.3s, transform 0.3s; }
  .hero--home .hero__dot.is-active::before { transform: none; background: #fff; }

  .hero--home .hero__scroll {
    position: absolute; right: var(--gutter); bottom: calc(var(--hero-wave) + 12px); z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 44px; padding: 4px 0;
    color: #fff; text-decoration: none; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }
  .hero__scroll-line { position: relative; width: 2px; height: 38px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
  .hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(-100%); }
  .hero--home .hero__scroll:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }

  /* onde: due strati che scorrono in direzioni opposte; il primo piano ha il colore della sezione successiva */
  .hero--home .hero__waves {
    display: block; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
    height: var(--hero-wave); overflow: hidden; pointer-events: none;
  }
  .hero__waves-back, .hero__waves-front {
    position: absolute; left: 0; bottom: 0; width: 200%; height: 100%;
    -webkit-mask: url("/assets/img/decor/hero-wave.svg") 0 100% / 25% 100% repeat-x;
    mask: url("/assets/img/decor/hero-wave.svg") 0 100% / 25% 100% repeat-x;
  }
  .hero__waves-back { height: 100%; background: rgba(255, 255, 255, 0.4); transform: translateX(-12.5%); }
  .hero__waves-front { height: 70%; background: #fff; }

  /* tablet in verticale: onde e testi un po' più ampi */
  @media (min-width: 641px) {
    .hero--home { --hero-wave: 70px; }
    .hero--home .hero__slide { padding-bottom: calc(var(--hero-wave) + 120px); }
    .hero--home .hero__text { font-size: 1.25rem; max-width: 30em; }
    .hero--home .hero__eyebrow { font-size: 0.9375rem; }
  }
}

/* barra fissa in basso presente: l'hero riempie lo spazio sopra di essa */
@media (max-width: 900px) {
  body:has(.bottom-bar) .hero--home { --hero-bar: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* --- animazioni (solo se il movimento è consentito) ------------------------ */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px), (prefers-reduced-motion: no-preference) and (max-width: 1024px) and (orientation: portrait) {
  .hero--home .hero__slide.is-active .hero__img { animation: hero-kenburns 20s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
  .hero--home .hero__slide.is-active .hero__eyebrow { animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  .hero--home .hero__slide.is-active .hero__eyebrow::before { animation: hero-line 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.3s both; }
  .hero--home .hero__slide.is-active .hero__word > span { animation: hero-word 1s cubic-bezier(0.16, 0.8, 0.2, 1) 0.35s both; }
  .hero--home .hero__slide.is-active .hero__word:nth-child(2) > span { animation-delay: 0.47s; }
  .hero--home .hero__slide.is-active .hero__word:nth-child(3) > span { animation-delay: 0.59s; }
  .hero--home .hero__slide.is-active .hero__word:nth-child(4) > span { animation-delay: 0.71s; }
  .hero--home .hero__slide.is-active .hero__word:nth-child(n+5) > span { animation-delay: 0.83s; }
  .hero--home .hero__slide.is-active .hero__text { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both; }
  .hero--home .hero__slide.is-active .hero__actions { animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both; }
  .hero--home .hero__controls, .hero--home .hero__scroll { animation: hero-fade 0.8s ease 1.2s both; }
  .hero__scroll-line::after { animation: hero-scroll-line 2.2s cubic-bezier(0.65, 0, 0.35, 1) 1.6s infinite; }
  .hero__waves-back { animation: hero-waves 16s linear infinite reverse; }
  .hero__waves-front { animation: hero-waves 11s linear infinite; }
}
@keyframes hero-kenburns { from { transform: scale(1.22) translate3d(0, 2%, 0); } to { transform: scale(1.04); } }
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-line { from { transform: scaleX(0); } to { transform: none; } }
@keyframes hero-word { from { transform: translate3d(0, 108%, 0) rotate(4deg); } to { transform: none; } }
@keyframes hero-scroll-line { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@keyframes hero-waves { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .hero--home .hero__media, .hero--home .hero__content { transform: none; opacity: 1; will-change: auto; }
}