/* The home's hero (site/_showcase), after alioth's showcase carousel. Everywhere: the text, then
   a row of pictures to swipe, each titled under it. On a wide screen that allows motion and
   has scroll-driven animations, the section pins while the scroll moves the pictures right to
   left and rolls their titles up; the page goes on when the last one has passed. No script. */
@layer components {
  body.site { overflow-x: clip; } /* the showcase is full-bleed; clip, not hidden, keeps it sticky */

  /* In Grella's violet, under the violet header with no seam: white titles read over pictures and
     gaps alike. Fixed colours in either mode, as a printed piece would be. */
  .showcase {
    --gutter: var(--site-edge); /* the header's edge */
    --showcase-violet: #6448e8;
    --showcase-ink: oklch(22.1% 0.031 292.3);
    --focus-ring: 2px solid #fff;

    margin-inline: var(--bleed);
    padding-block: var(--block-space-double);
    color: #fff;
    background: var(--showcase-violet);

    & .headline__facts { color: rgb(255 255 255 / 0.7); }

    /* White on the violet, ink on hover: a violet button would vanish here. */
    & .btn {
      --btn-background: #fff;
      --btn-color: var(--showcase-violet);
      --btn-border: #fff;
      --btn-hover-background: var(--showcase-ink);
      --btn-hover-color: #fff;
      --btn-hover-border: var(--showcase-ink);
    }
  }

  /* Meets the header: undoes main's top padding, and .site-page section's margin (site.css). */
  .site-page > .showcase { margin-block-start: calc(-1 * var(--block-space-double)); }

  .showcase__track {
    display: grid;
    grid-template-columns: repeat(7, min(80vw, 26rem));
    gap: var(--block-space-double) var(--inline-space-double);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding: 0 var(--gutter) var(--block-space);
    scrollbar-width: none;
  }

  /* The text spans the row and stays in view while the pictures are swiped under it. */
  .showcase__intro {
    grid-column: 1 / -1;
    position: sticky;
    inset-inline-start: 0;
    max-inline-size: min(calc(100vw - 2 * var(--gutter)), 44rem);

    & > p:has(.btn) { margin-block-start: var(--block-space-double); }
  }

  /* Three short lines, each its own, no markers: scanned, not read. */
  .showcase__points {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    margin: var(--block-space) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-x-large);
    line-height: 1.3;
    letter-spacing: -0.015em;

    & li { max-inline-size: none; }
  }

  .showcase__slide {
    margin: 0;
    scroll-snap-align: start;

    & .site-image { border-radius: var(--radius-large); }

    & figcaption {
      margin-block-start: var(--block-space-half);
      font-size: var(--text-large);
      font-weight: 700;
      letter-spacing: -0.02em;
    }
  }

  /* The prize card on a violet block, the shape of a picture. */
  .showcase__slide--card {
    & .site-hero__card {
      display: grid;
      place-items: center;
      inline-size: 100%;
      max-inline-size: none;
      aspect-ratio: 4 / 3;
      padding: var(--block-space);
      background: var(--showcase-ink); /* the card's own lavender stands out on ink, not on violet */
      border-radius: var(--radius-large);

      & .pile { inline-size: 62%; }
      & > figcaption { display: none; } /* the slide's own title says it */
    }

    & .prize-card .site-image { display: none; } /* no photo inside a picture */
  }

  .showcase__titles, .showcase__word, .showcase__scroll, .showcase__progress { display: none; }

  .showcase__cta { margin: var(--block-space) 0 0; }

  @media (min-width: 52rem) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .showcase {
        block-size: 450vh; /* the length of the scroll that plays it */
        view-timeline: --showcase block;
      }

      .showcase__pin {
        position: sticky;
        inset-block-start: 0;
        display: flex;
        align-items: center;
        block-size: 100vh;
        overflow: clip;
        background: var(--showcase-violet);
      }

      .showcase { padding-block: 0; }

      /* A deeper violet veil on each picture, so the white title over it always reads and the
         pictures sit in the brand's colour. */
      .showcase__slide:not(.showcase__slide--card)::after {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        aspect-ratio: 4 / 3;
        background: color-mix(in srgb, oklch(38% 0.2 283) 45%, transparent);
        border-radius: var(--radius-large);
        pointer-events: none;
      }

      /* Intro 100vw, seven slides of 44vw with 8vw between, and room for the last to centre:
         492vw, so the track travels 392vw and slide n is centred at (80 + 52(n-1)) / 392. */
      .showcase__track {
        display: flex;
        align-items: center;
        gap: 8vw;
        inline-size: max-content;
        overflow: visible;
        padding: 0 28vw 0 0;
        animation: showcase-track linear both;
        animation-timeline: --showcase;
        animation-range: contain;
      }

      .showcase__intro {
        flex: 0 0 100vw;
        position: static;
        max-inline-size: none;
        padding-inline: var(--gutter) calc(var(--gutter) + 10vw);

        & h1 { font-size: clamp(3.5rem, 2rem + 6vw, 8rem); }
      }

      .showcase__slide {
        flex: 0 0 44vw;

        & figcaption { /* the rolling titles show it; it stays for assistive technology */
          position: absolute;
          inline-size: 1px;
          block-size: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
      }

      /* The titles, one line tall, rolling up as each picture reaches the centre: white on the ink,
         and on each picture through its violet veil. */
      .showcase__titles {
        display: block;
        position: absolute;
        inset-inline: 0;
        inset-block-start: 50%;
        translate: 0 -50%;
        --slot: 1.6em; /* taller than the glyphs: accents and descenders stay inside their own slot */

        block-size: var(--slot);
        overflow: clip;
        font-size: clamp(2.5rem, 1rem + 4.75vw, 6.75rem);
        font-weight: 800;
        line-height: var(--slot);
        letter-spacing: -0.045em;
        text-align: center;
        white-space: nowrap;
        color: #fff;
        text-shadow: 0 0.04em 0.4em rgb(0 0 0 / 0.25);
        pointer-events: none;

        & ol {
          margin: 0;
          padding: 0;
          list-style: none;
          animation: showcase-titles linear both;
          animation-timeline: --showcase;
          animation-range: contain;
        }

        & ol > li { block-size: var(--slot); max-inline-size: none; } /* beats .site-page li (site.css loads later): centred on the screen, not in a 40rem measure */
      }

      /* A giant word behind everything, drifting slower than the pictures. */
      .showcase__word {
        display: block;
        position: absolute;
        inset-block-start: 4vh;
        inset-inline-start: 55vw;
        margin: 0;
        font-size: 22vw;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.06em;
        white-space: nowrap;
        color: rgb(255 255 255 / 0.05);
        z-index: -1;
        animation: showcase-word linear both;
        animation-timeline: --showcase;
        animation-range: contain;
      }

      .showcase__scroll {
        display: block;
        position: absolute;
        inset-inline-start: var(--gutter);
        inset-block-end: 6vh;
        margin: 0;
        writing-mode: vertical-rl;
        rotate: 180deg;
        font-size: var(--text-x-small);
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgb(255 255 255 / 0.55);
      }

      /* The button comes up under the last picture as it centres, halfway between the picture's
         foot and the progress line; out of the flow, so that picture stays level with the others.
         The picture (44vw wide, 4:3, so 33vw tall) is centred in the 100vh pin and the line sits
         3vh from its foot: from the picture's top, the midpoint is 23.5vh + 24.75vw. */
      .showcase__slide { position: relative; }

      .showcase__cta {
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(23.5vh + 24.75vw);
        margin: 0;
        text-align: center;
        animation: showcase-cta linear both;
        animation-timeline: --showcase;
        animation-range: contain;
      }

      .showcase__progress {
        display: block;
        position: absolute;
        inset-inline: 25vw;
        inset-block-end: 3vh; /* under the button the last picture brings */
        block-size: 1px;
        background: rgb(255 255 255 / 0.25);

        &::after {
          content: "";
          position: absolute;
          inset: -0.5px 0;
          background: #fff;
          transform-origin: left;
          animation: showcase-progress linear both;
          animation-timeline: --showcase;
          animation-range: contain;
        }
      }
    }
  }

  @keyframes showcase-cta {
    0%, 94% { opacity: 0; visibility: hidden; translate: 0 calc(-50% + 1rem); }
    100% { opacity: 1; visibility: visible; translate: 0 -50%; } /* -50%: centred on its line */
  }

  @keyframes showcase-track { to { translate: -392vw 0; } }

  /* Each title holds while its picture is near the centre, at (80 + 52(n-1)) / 392, and rolls up
     between pictures. */
  @keyframes showcase-titles {
    0%, 12% { translate: 0 1.6em; opacity: 0; }
    16.4%, 24.4% { translate: 0 0; opacity: 1; }
    29.7%, 37.7% { translate: 0 -1.6em; opacity: 1; }
    42.9%, 50.9% { translate: 0 -3.2em; opacity: 1; }
    56.2%, 64.2% { translate: 0 -4.8em; opacity: 1; }
    69.5%, 77.5% { translate: 0 -6.4em; opacity: 1; }
    82.7%, 90.7% { translate: 0 -8.0em; opacity: 1; }
    96.0%, 100.0% { translate: 0 -9.6em; opacity: 1; }
  }

  @keyframes showcase-word { to { translate: -60vw 0; } }

  @keyframes showcase-progress { from { scale: 0 1; } to { scale: 1 1; } }
}