---
import { Image } from 'astro:assets';
import { t, type Lingua } from '../i18n';
import tramonto from '../assets/storia-tramonto.jpg';

interface Props { lang: Lingua }
const { lang } = Astro.props;
const d = t(lang);
---
<!-- La storia come colonna d'acqua che sale: gli anni sono tacche di livello,
     non pallini su una linea. La colonna si riempie mentre si scorre. -->
<section class="gb-sezione gb-sopra gb-storia" id="storia">
  <div class="gb-wrap">
    <div class="gb-storia__apertura">
      <div>
        <p class="gb-etichetta">{d.storia.etichetta}</p>
        <h2 class="gb-titolo gb-anim">{d.storia.titolo}</h2>
        <p class="gb-occhio gb-anim-sfuma">{d.storia.sommario}</p>
      </div>
      <figure class="gb-storia__foto gb-anim-sfuma">
        <Image
          src={tramonto}
          alt={d.immagini.storiaAlt}
          widths={[360, 560, 900]}
          sizes="(max-width: 900px) 100vw, 45vw"
          format="avif"
          quality={68}
          loading="lazy"
        />
      </figure>
    </div>

    <ol class="gb-storia__colonna">
      <div class="gb-storia__livello" aria-hidden="true"><span></span></div>
      {d.storia.voci.map((v) => (
        <li class="gb-storia__tacca">
          <time datetime={v.anno}>{v.anno}</time>
          <p>{v.testo}</p>
        </li>
      ))}
    </ol>
  </div>
</section>

<style>
  .gb-storia__apertura {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
  }

  .gb-storia__foto { margin: 0; }
  .gb-storia__foto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--gb-raggio);
    filter: saturate(0.9);
  }

  @media (max-width: 900px) {
    .gb-storia__apertura { grid-template-columns: 1fr; align-items: start; }
  }

  .gb-storia__colonna {
    list-style: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    position: relative;
  }

  /* Il tubo di livello, con dentro l'acqua che sale. */
  .gb-storia__livello {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(4rem, 9vw, 7rem);
    width: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--gb-inchiostro) 9%, transparent);
  }
  .gb-storia__livello span {
    display: block;
    height: 100%;
    border-radius: 3px;
    transform-origin: top center;
    background: linear-gradient(180deg, var(--gb-fronda), var(--gb-acqua) 55%, var(--gb-profondo));
  }

  @supports (animation-timeline: view()) {
    /* Il tratto va da quando la colonna si affaccia dal basso a quando comincia
       a uscire dall'alto. `entry`/`exit` esistono sempre, mentre `contain` si
       degrada a zero quando la colonna e' piu' corta della finestra: era il
       motivo per cui il livello restava fisso. */
    .gb-storia__livello span {
      animation: gb-riempi linear both;
      animation-timeline: view();
      animation-range: entry 25% exit 0%;
    }
  }

  .gb-storia__tacca {
    display: grid;
    grid-template-columns: clamp(4rem, 9vw, 7rem) 1fr;
    gap: 0 clamp(1.75rem, 4vw, 3rem);
    align-items: baseline;
    padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
    border-bottom: 1px solid color-mix(in srgb, var(--gb-inchiostro) 8%, transparent);
  }
  .gb-storia__tacca:last-child { border-bottom: 0; }

  .gb-storia__tacca time {
    font-family: var(--gb-dato);
    font-weight: 600;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    letter-spacing: -0.02em;
    color: var(--gb-inchiostro);
    line-height: 1;
  }

  .gb-storia__tacca p {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    color: var(--gb-inchiostro-tenue);
  }

  @supports (animation-timeline: view()) {
    .gb-storia__tacca p, .gb-storia__tacca time {
      animation: gb-sfuma linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }

  @media (max-width: 700px) {
    .gb-storia__livello { left: 0; }
    .gb-storia__tacca { grid-template-columns: 1fr; gap: var(--gb-sp-1); padding-left: var(--gb-sp-3); }
  }
</style>