@layer base, gallery;

@layer gallery {
  .gallery {
    --card-size: min(80vw, 350px);
    --nav-btn-size: 40px;
    --nav-btn-bg: var(--canvas-lines);
    --nav-btn-txt: var(--canvas-txt);
    --nav-btn-txt-hover: dodgerblue;
    --marker-size: 12px;
    --marker-bg: var(--canvas-lines);
    --marker-bg-hover: var(--canvas-txt);
    --marker-bg-current: dodgerblue;
    --card-shadow-1: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 10%));
    --card-shadow-2: light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
    --card-shadow-3: light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));

    position: fixed;
    inset: 0;
    display: grid;
    grid-auto-rows: var(--card-size);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    anchor-name: --a-gallery;
    scroll-marker-group: after;

    &::before,
    &::after {
      content: "";
      height: 50vh;
    }

    &:focus-visible {
      outline: 2px dashed var(--nav-btn-txt-hover);
      outline-offset: -4px;
    }

    @supports selector(::scroll-marker-group) {
      &::scroll-marker-group {
        position: absolute;
        position-anchor: --a-gallery;
        inline-size: min(50vw, 800px);
        block-size: var(--nav-btn-size);
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        flex-wrap: wrap balance;
        gap: 0.25rem;
        top: calc(anchor(top) + 1rem);
        left: calc(anchor(left) - 1rem);
        right: calc(anchor(right) - 1rem);
      }
    }

    figure {
      margin: 0 auto;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      view-timeline-name: --card-view;
      view-timeline-axis: block;

      div {
        padding: 1rem 1rem 3rem;
        border-radius: 3px;
        background: #fff;
        border: 1px solid #e8e8e8;
        box-shadow:
          0 2px 4px var(--card-shadow-1),
          0 8px 16px var(--card-shadow-2),
          0 20px 35px var(--card-shadow-3);
        animation: --k-fly-through linear both;
        animation-timeline: --card-view;
        animation-range: cover 20% exit 0%;
      }

      /* landscape/square: fit width; portrait: fit height. Ratio comes from the width/height attributes */
      img {
        display: block;
        width: var(--card-size);
        height: auto;

        &.portrait {
          width: auto;
          height: var(--card-size);
        }
      }

      &::scroll-marker {
        content: "";
        block-size: var(--marker-size);
        aspect-ratio: 1;
        background-color: var(--marker-bg);
        border-radius: 9in;
        transition: background-color 150ms ease-in-out, outline 150ms ease-in-out;
      }
      &::scroll-marker:hover {
        background-color: var(--marker-bg-hover);
      }
      &::scroll-marker:focus-visible {
        outline: 1px dashed var(--marker-bg-hover);
        outline-offset: 4px;
      }
      &::scroll-marker:target-current {
        background-color: var(--marker-bg-current);
        pointer-events: none;
      }
    }

    /* prev/next: native ::scroll-button in Chromium */
    &::scroll-button(*) {
      position: absolute;
      position-anchor: --a-gallery;
      top: calc(anchor(top) + 1rem);
    }
    &::scroll-button(block-start) {
      content: "❮" / "Previous photo";
      left: calc(anchor(left) + 5rem);
    }
    &::scroll-button(block-end) {
      content: "❯" / "Next photo";
      right: calc(anchor(right) + 5rem);
    }
  }

  /* Button look is written twice on purpose: a browser that does not understand
     ::scroll-button drops any selector list containing it, which would also drop the fallback. */
  .gallery::scroll-button(*) {
    width: var(--nav-btn-size);
    aspect-ratio: 1;
    font: inherit;
    font-size: 1.4rem;
    background-color: var(--nav-btn-bg);
    display: grid;
    place-content: center;
    color: var(--nav-btn-txt);
    border: none;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 150ms ease-in-out, scale 150ms ease-in-out, color 150ms ease-in-out, outline 150ms ease-in-out;
    outline: 1px dashed transparent;
    z-index: 999;
  }
  .gallery::scroll-button(*):not(:disabled):hover,
  .gallery::scroll-button(*):not(:disabled):focus-visible {
    opacity: 1;
    scale: 1.1;
    color: var(--nav-btn-txt-hover);
  }
  .gallery::scroll-button(*):not(:disabled):focus-visible {
    outline-color: var(--nav-btn-bg);
    outline-offset: 4px;
  }
  .gallery::scroll-button(*):disabled {
    opacity: 0.15;
    cursor: default;
  }

  .gallery-nav button {
    width: 40px;
    aspect-ratio: 1;
    font: inherit;
    font-size: 1.4rem;
    background-color: var(--canvas-lines);
    display: grid;
    place-content: center;
    color: var(--canvas-txt);
    border: none;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 150ms ease-in-out, scale 150ms ease-in-out, color 150ms ease-in-out, outline 150ms ease-in-out;
    outline: 1px dashed transparent;
    z-index: 999;

    &:not(:disabled):hover,
    &:not(:disabled):focus-visible {
      opacity: 1;
      scale: 1.1;
      color: dodgerblue;
    }
    &:not(:disabled):focus-visible {
      outline-color: var(--canvas-lines);
      outline-offset: 4px;
    }
    &:disabled {
      opacity: 0.15;
      cursor: default;
    }
  }

  .gallery-nav button {
    position: fixed;
    top: 1rem;
    &.prev { left: 5rem; }
    &.next { right: 5rem; }
  }

  @keyframes --k-fly-through {
    0% {
      scale: 0;
      opacity: 0;
      rotate: random(22deg, 0deg);
      pointer-events: none;
    }
    40%,
    60% {
      scale: 1;
      opacity: 1;
      rotate: 0deg;
    }
    90% {
      opacity: 0;
    }
    100% {
      scale: 3;
      opacity: 0;
      rotate: random(-22deg, 0deg);
      pointer-events: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gallery { scroll-behavior: auto; }
    .gallery figure div { animation: none; }
  }
}

@layer base {
  * {
    box-sizing: border-box;
  }
  :root {
    color-scheme: light dark;
    --canvas-bg: light-dark(rgb(248 244 238), rgb(24 24 27));
    --canvas-txt: light-dark(rgb(10 10 10), rgb(245 245 245));
    --canvas-lines: light-dark(rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.25));
  }
  body {
    background-color: var(--canvas-bg);
    color: var(--canvas-txt);
    min-height: 100svh;
    margin: 0;
    font-family: system-ui, sans-serif;
  }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}