---
import { Image } from 'astro:assets';
import { t, type Lingua } from '../i18n';
import biopiscina from '../assets/hero-lago.jpg';

interface Props { lang: Lingua }
const { lang } = Astro.props;
const d = t(lang);
---
<section class="gb-sezione gb-sotto gb-anime" id="anime">
  <div class="gb-wrap">
    <p class="gb-etichetta">{d.anime.etichetta}</p>
    <h2 class="gb-titolo gb-anim">{d.anime.titolo}</h2>
    <p class="gb-occhio gb-anim-sfuma">{d.anime.sommario}</p>
  </div>

  <!-- Una sola fotografia, divisa dalla linea d'acqua. Sopra sta il giardino,
       sotto sta l'acqua: nella foto non si distingue dove finisca il lavoro di
       una societa' e cominci quello dell'altra, ed e' il punto. -->
  <div class="gb-anime__scena">
    <Image
      class="gb-anime__foto"
      src={biopiscina}
      alt={d.immagini.giardinoAlt}
      widths={[600, 900, 1400, 2000]}
      sizes="100vw"
      format="avif"
      quality={64}
      loading="lazy"
    />
    <div class="gb-anime__acqua" aria-hidden="true"></div>
    <div class="gb-anime__linea" aria-hidden="true"></div>

    <div class="gb-wrap gb-anime__griglia">
      <article class="gb-anima gb-anima--giardino gb-anim-sfuma">
        <p class="gb-anima__lato">{d.anime.giardino.nome}</p>
        <h3>{d.anime.giardino.societa}</h3>
        <p class="gb-anima__piva">{d.anime.giardino.piva}</p>
        <p class="gb-anima__testo">{d.anime.giardino.testo}</p>
        <a class="gb-anima__azione" href={d.anime.giardino.href} rel="noopener">
          {d.anime.giardino.azione}
        </a>
      </article>

      <article class="gb-anima gb-anima--acqua gb-anim-sfuma">
        <p class="gb-anima__lato">{d.anime.acqua.nome}</p>
        <h3>{d.anime.acqua.societa}</h3>
        <p class="gb-anima__piva">{d.anime.acqua.piva}</p>
        <p class="gb-anima__testo">{d.anime.acqua.testo}</p>
        <a class="gb-anima__azione" href={d.anime.acqua.href} rel="noopener">
          {d.anime.acqua.azione}
        </a>
      </article>
    </div>
  </div>
</section>

<style>
  .gb-anime { padding-bottom: 0; }
  .gb-anime .gb-occhio { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

  .gb-anime__scena {
    position: relative;
    isolation: isolate;
    min-height: 40rem;
    display: flex;
    align-items: center;
  }

  .gb-anime__foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
  }

  .gb-anime__acqua {
    position: absolute;
    inset: 50% 0 0 0;
    z-index: -1;
    backdrop-filter: saturate(1.3) hue-rotate(-6deg) blur(1px) brightness(0.55);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--gb-abisso) 15%, transparent) 0%,
      color-mix(in srgb, var(--gb-abisso) 78%, transparent) 55%,
      var(--gb-abisso) 100%
    );
  }

  .gb-anime__linea {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    z-index: -1;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, var(--gb-fronda) 25%, #fff 50%, var(--gb-acqua) 75%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--gb-acqua) 45%, transparent);
  }

  @supports (animation-timeline: view()) {
    .gb-anime__linea {
      animation: gb-scorri-linea linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }

  /* Le due schede stanno una sopra e una sotto la linea, sfalsate. */
  .gb-anime__griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: stretch;
    width: 100%;
    padding-block: clamp(2rem, 6vw, 4rem);
  }

  /* Le due schede hanno la stessa altezza (la griglia le stira entrambe) e lo
     sfalsamento ai lati della linea si fa traslandole, non con i margini:
     con i margini ognuna si dimensionava sul proprio testo. */
  .gb-anima {
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border-radius: var(--gb-raggio);
    backdrop-filter: blur(14px) saturate(1.2);
    display: flex;
    flex-direction: column;
  }

  .gb-anima--giardino {
    /* `translate` e non `transform`: la rivelazione a scorrimento anima
       transform e cancellerebbe lo sfalsamento. Le due proprieta' si compongono. */
    translate: 0 clamp(-3.5rem, -4vw, -1rem);
    background: color-mix(in srgb, var(--gb-schiuma) 96%, transparent);
    color: var(--gb-inchiostro);
    border-top: 3px solid var(--gb-giardino);
  }

  .gb-anima--acqua {
    translate: 0 clamp(1rem, 4vw, 3.5rem);
    background: color-mix(in srgb, var(--gb-abisso) 93%, transparent);
    color: var(--gb-schiuma);
    border-top: 3px solid var(--gb-acqua);
  }

  .gb-anima__lato {
    font-family: var(--gb-dato);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0 0 var(--gb-sp-1);
  }
  .gb-anima--giardino .gb-anima__lato { color: var(--gb-giardino); }
  .gb-anima--acqua .gb-anima__lato { color: var(--gb-acqua); }

  .gb-anima h3 {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-variation-settings: 'wdth' 92;
    margin-bottom: 0.15rem;
  }

  .gb-anima__piva {
    font-family: var(--gb-dato);
    font-size: 0.78rem;
    margin: 0 0 var(--gb-sp-2);
    opacity: 0.72;
  }

  .gb-anima__testo { margin: 0 0 var(--gb-sp-3); font-size: 0.98rem; }
  .gb-anima__azione { margin-top: auto; align-self: flex-start; }
  .gb-anima--giardino .gb-anima__testo { color: var(--gb-inchiostro-tenue); }
  .gb-anima--acqua .gb-anima__testo { color: #c3d6dd; }

  .gb-anima__azione {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    transition: transform 260ms var(--gb-onda), opacity 260ms var(--gb-onda);
  }
  .gb-anima--giardino .gb-anima__azione { color: var(--gb-giardino); }
  .gb-anima--acqua .gb-anima__azione { color: var(--gb-acqua); }
  .gb-anima__azione:hover { transform: translateX(4px); }
  .gb-anima__azione::after { content: ' \2192'; }

  @media (max-width: 860px) {
    .gb-anime__scena { min-height: 0; display: block; padding-top: 18rem; }
    .gb-anime__foto { height: 22rem; inset: 0 0 auto 0; }
    .gb-anime__acqua { inset: 14rem 0 0 0; }
    .gb-anime__linea { top: 14rem; }
    .gb-anime__griglia { grid-template-columns: 1fr; }
    .gb-anima--giardino, .gb-anima--acqua { translate: none; }
  }
</style>