@layer reset, base, layout, transitions;

@layer transitions {
  :root {
    --originPosUnit: 25%;
  }

  @keyframes grow {
    from {
      scale: 0;
    }
    to {
      scale: 1;
    }
  }

  figure {
    view-transition-name: figure;
  }
  figcaption {
    view-transition-name: figureCaption;
  }

  ::view-transition-old(figure),
  ::view-transition-new(figure) {
    transform-origin: 100% var(--originPosUnit);
  }

  ::view-transition-new(figure) {
    animation: 400ms ease-out both grow;
  }
}

@layer layout {
  figure {
    position: relative;
    margin: 4px;

    & img {
      position: absolute;
      inset: 0;
    }

    & figcaption {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      font-size: clamp(3rem, 4vw + 3.25rem, 4rem);
      white-space: nowrap;
      background-image: radial-gradient(
        farthest-corner circle at 0% 0% in oklch,
        oklch(100% 0.25 160) 0%,
        26%,
        oklch(75% 0.5 180) 0% 0%,
        46%,
        oklch(75% 0.5 210) 0% 0%,
        60%,
        oklch(75% 0.5 230) 0% 0%,
        82%,
        oklch(75% 0.5 260) 0% 0%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-stroke: 2px #000;
      color: transparent;
      mix-blend-mode: difference;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 900;
      font-family: "Josefin Sans";
      text-shadow: 1px 1px 0 color-mix(in oklch, #fff, transparent 10%),
        2px 2px 0 color-mix(in oklch, #fff, transparent 20%),
        3px 3px 0 color-mix(in oklch, #fff, transparent 30%),
        4px 4px 0 color-mix(in oklch, #fff, transparent 40%),
        5px 5px 0 color-mix(in oklch, #fff, transparent 50%),
        6px 6px 0 color-mix(in oklch, #fff, transparent 60%),
        7px 7px 0 color-mix(in oklch, #fff, transparent 70%),
        8px 8px 0 color-mix(in oklch, #fff, transparent 80%),
        9px 9px 0 color-mix(in oklch, #fff, transparent 80%);
    }
  }

  .thumbnails {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;

    & li {
      aspect-ratio: 4 / 3;
    }
  }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ul {
    list-style: none outside none;
  }

  img {
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
}

@layer base {
  body {
    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
    background-color: #110d14;
    color: #fff;
    display: grid;
    place-content: start center;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }
  .tutorials {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3f517e;
    padding: .5rem;
    display: grid;
    place-content: center;
    transition: all .28s linear;
    
    &:hover {
      background:#4161b2;
    }
    
    & svg {
      display: block;
      width: 100%;
      height: 100%;
      filter: invert(1);
    }
  }
}