@import url("/index-desktop.css") (min-width: 750px) and (min-height: 500px);
@import url("/index-mobile.css") (max-width: 749px) or (max-height: 499px);


body#app {
  &[data-hide-non-intersecting] {
    > main > section:not(:first-of-type) {
      opacity: 0;
      scale: 0.8;
      transform: 0 3rem;
      transition-property: opacity, scale, transform;
      transition-duration: 0.8s;
    }
  }


  > main:is([data-page="index"] *) {
    > section {
      &[data-intersected] {
        opacity: 1;
        scale: 1;
        transform: 0 0;
      }


      &.about {
        overflow: hidden;


        > .carousel {
          --translate-z: 37.5rem;
          --translate-negative-z: calc(var(--translate-z) * -1);
          --rotate-x: -4deg;
          --rotation-offset: 3deg;

          margin-bottom: var(--spacing-regular);
          perspective: 100rem;
          isolation: isolate;


          > .cards {
            display: grid;
            grid-template-areas: "card";
            place-content: center;
            transform: rotateX(var(--rotate-x)) translateZ(var(--translate-negative-z));
            transform-origin: center center var(--translate-negative-z);
            transform-style: preserve-3d;
            animation: rotate;
            animation-duration: calc(var(--cards) * 5s);
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-fill-mode: forwards;

            &:has(.card:nth-child(1):last-child) { --cards: 1; }
            &:has(.card:nth-child(2):last-child) { --cards: 2; }
            &:has(.card:nth-child(3):last-child) { --cards: 3; }
            &:has(.card:nth-child(4):last-child) { --cards: 4; }
            &:has(.card:nth-child(5):last-child) { --cards: 5; }
            &:has(.card:nth-child(6):last-child) { --cards: 6; }
            &:has(.card:nth-child(7):last-child) { --cards: 7; }
            &:has(.card:nth-child(8):last-child) { --cards: 8; }


            > .card {
              grid-area: card;
              box-shadow: 0 0 var(--width-of-maximum-borders) black;
              border-radius: var(--radius-of-borders);
              padding: var(--spacing-regular);
              display: grid;
              grid-auto-flow: row;
              justify-items: center;
              background: radial-gradient(
                circle at 50% 25%,
                rgba(255, 255, 255, 0.9),
                var(--background-color)
              );
              -webkit-backdrop-filter: blur(0.333rem);
              backdrop-filter: blur(0.333rem);
              transform: rotateY(var(--rotate-y)) translateZ(var(--translate-z));
              color: black;

              &:nth-child(1) {
                --background-color: #1F618DCC;
                --rotate-y: calc(360deg / var(--cards) * 0 + var(--rotation-offset));
              }

              &:nth-child(2) {
                --background-color: #1ABC9CCC;
                --rotate-y: calc(360deg / var(--cards) * 1 + var(--rotation-offset));
              }

              &:nth-child(3) {
                --background-color: #D4AC0DCC;
                --rotate-y: calc(360deg / var(--cards) * 2 + var(--rotation-offset));
              }

              &:nth-child(4) {
                --background-color: #8E44ADCC;
                --rotate-y: calc(360deg / var(--cards) * 3 + var(--rotation-offset));
              }

              &:nth-child(5) {
                --background-color: #E67E22CC;
                --rotate-y: calc(360deg / var(--cards) * 4 + var(--rotation-offset));
              }

              &:nth-child(6) {
                --background-color: #1E8449CC;
                --rotate-y: calc(360deg / var(--cards) * 5 + var(--rotation-offset));
              }

              &:nth-child(7) {
                --background-color: #C0392BCC;
                --rotate-y: calc(360deg / var(--cards) * 6 + var(--rotation-offset));
              }

              &:nth-child(8) {
                --background-color: #6E2C00CC;
                --rotate-y: calc(360deg / var(--cards) * 7 + var(--rotation-offset));
              }


              > svg {
                --size: 4.2rem;
                margin-bottom: var(--spacing-minimum);
                width: var(--size);
                height: var(--size);


                + strong {
                  font-size: 2.8rem;
                }
              }


              > strong {
                font-size: 3.6rem;
                line-height: 1.5;


                > sup {
                  font-size: 2rem;
                }
              }


              > span {
                font-size: 2rem;
                line-height: 1.5;
              }
            }
          }
        }


        > p {
          margin-top: 3.2rem;
          font-size: 2.4rem;
          text-align: center;
          text-wrap: balance;
        }
      }


      &:is(.categories, .events-and-games, .membership, .location) {
        padding-bottom: 4.8rem;
      }


      &:is(.events-and-games, .location) {
        display: grid;


        > article {
          box-shadow: 0 0 var(--width-of-maximum-borders) black;
          border-radius: var(--radius-of-borders);
          padding: var(--spacing-regular);
          background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9));
          -webkit-backdrop-filter: blur(0.333rem);
          backdrop-filter: blur(0.333rem);
          display: grid;
          align-content: start;
          gap: var(--spacing-regular);
          color: black;

          > .hero {
            margin: -1.2rem;
            margin-bottom: 0;
            border-radius: calc(var(--radius-of-borders) - var(--width-of-maximum-borders));
            height: 20rem;
            overflow: hidden;

            &::after {
              content: "";
              border-radius: inherit;
              position: absolute;
              inset: 0;
              box-shadow: inset 0 0 var(--width-of-maximum-borders) black;
            }

            &.link {
              cursor:pointer;

              @media (hover: hover) and (pointer: fine) {
                &:hover::after {
                  background: rgba(0, 0, 0, 0.1);
                }
              }

              &:active::after {
                background: rgba(0, 0, 0, 0.2);
              }
            }


            > img {
              width: 100%;
              max-width: none;
              height: 100%;
              object-fit: cover;

              &:is(article.events *) {
                margin-bottom: auto;
                object-position: center top;
              }
            }
          }


          > hgroup {
            display: grid;
            grid-auto-flow: column;
            justify-content: start;
            align-items: center;
            gap: var(--spacing-regular);


            > svg {
              --size: 2.4rem;
              width: var(--size);
              height: var(--size);
            }


            > h2 {

            }
          }


          > p {
            font-size: 1.7rem;
            line-height: 1.6;
            text-wrap: balance;
            word-break: break-word;
            hyphens: auto;
          }


          > a {
            width: fit-content;
            font-size: 1.7rem;
            margin-top: auto;
          }
        }
      }


      &:is(.categories, .membership, .location) {
        display: grid;
        grid-auto-flow: row;
        background: rgba(255, 255, 255, 0.15);


        > ul {
          display: grid;
          justify-content: center;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          grid-auto-rows: 1fr;

          @media (min-width: 1024px) {
            grid-template-columns: repeat(5, 1fr);
          }


          > li {
            --icon-size: 3.6rem;
            --icon-center-offset: calc(var(--icon-size) / 2 + var(--spacing-regular));

            list-style: none;
            box-shadow: 0 0 var(--width-of-maximum-borders) black;
            border-radius: var(--radius-of-borders);
            padding: var(--spacing-regular);
            background-color: rgba(255, 255, 255, 0.666);
            background-image: radial-gradient(
              circle at var(--icon-center-offset) var(--icon-center-offset),
              rgba(255, 255, 255, 0.333) 10%,
              var(--icon-dimmed-color, rgba(150, 150, 150, 0.333))
            );
            -webkit-backdrop-filter: blur(0.333rem);
            backdrop-filter: blur(0.333rem);
            rotate: var(--rotation, 0);
            display: grid;
            grid-auto-flow: row;
            justify-content: start;
            align-content: start;
            gap: var(--spacing-regular);
            color: black;
            text-wrap: balance;
            word-break: break-word;
            hyphens: auto;

            @supports (background: color-mix(in sRGB, red 33%, blue 33%)) {
              --icon-dimmed-color: color-mix(in sRGB, var(--icon-color), white 33%);
            }

            &.games-party {
              --icon-color: #C0392B;
              --rotation: 1deg;
            }

            &.games-strategy {
              --icon-color: #1ABC9C;
              --rotation: -2deg;
            }

            &.games-kenner {
              --icon-color: #D4AC0D;
              --rotation: 1.5deg;
            }

            &.games-social-deduction {
              --icon-color: #1F618D;
              --rotation: -2.5deg;
            }

            &.games-pen-and-paper {
              --icon-color: #8E44AD;
              --rotation: 1deg;
            }

            &.feature-access {
              --icon-color: #6E2C00;
              --rotation: -1.5deg;
            }

            &.feature-lending {
              --icon-color: #A93226;
              --rotation: 2deg;
            }

            &.feature-votings {
              --icon-color: #F39C12;
              --rotation: -1deg;
            }

            &.feature-community {
              --icon-color: #229954;
              --rotation: 2deg;
            }

            &.feature-apps {
              --icon-color: #2874A6;
              --rotation: -1deg;
            }


            > svg {
              width: var(--icon-size);
              height: var(--icon-size);
              fill: var(--icon-color, black);
            }


            > span {
              font-size: 2rem;
              line-height: 1.3;
            }
          }
        }
      }


      &.media {
        > .card {
          margin-inline: auto;
          box-shadow: 0 0 var(--width-of-maximum-borders) black;
          border-radius: var(--radius-of-borders);
          padding: 0.4rem;
          background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9));
          -webkit-backdrop-filter: blur(0.333rem);
          backdrop-filter: blur(0.333rem);
          line-height: 0;
          cursor: pointer;

          &::after {
            content: "";
            border-radius: calc(var(--radius-of-borders) - var(--width-of-maximum-borders));
            position: absolute;
            inset: 0.4rem;
            box-shadow: inset 0 0 var(--width-of-maximum-borders) black;
            pointer-events: none;
          }

          @media (hover: hover) and (pointer: fine) {
            &:hover::after {
              background: rgba(0, 0, 0, 0.1);
            }
          }

          &:active::after {
            background: rgba(0, 0, 0, 0.2);
          }


          > img {
            border-radius: calc(var(--radius-of-borders) - var(--width-of-maximum-borders));
            width: 100%;
            max-width: 64rem;
          }
        }
      }


      &.location {
        > article {
          > .hero {
            height: 28rem;

            &:is(article.map *) {
              cursor: pointer;

              &:hover::after {
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.1);
                z-index: 1;
              }

              &:active::after {
                background: rgba(0, 0, 0, 0.2);
              }
            }
          }
        }
      }


      &.sponsors {
        > .logo {
          margin-inline: auto;
          box-shadow: 0 0 var(--width-of-maximum-borders) black;
          border-radius: var(--radius-of-borders);
          padding-block: 0.6rem;
          padding-inline: 1.2rem;
          width: fit-content;
          background: rgba(255, 255, 255, 0.75);
          cursor: pointer;

          @media (hover: hover) and (pointer: fine) {
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}


@keyframes rotate {
  0% {
    transform: rotateX(var(--rotate-x)) rotateY(0) translateZ(var(--translate-negative-z));
  }

  100% {
    transform: rotateX(var(--rotate-x)) rotateY(-360deg) translateZ(var(--translate-negative-z));
  }
}