:root {
  --system-color-canvas: oklch(0% 0 0 / 90%);
  --system-color-shadow: oklch(0% 0 0 / 38.5%);
  --system-color-dark: oklch(0% 0 0);
  --system-color-light: oklch(100% 0 0);
  --system-color-label: oklch(67.03% 0.023 79.03);
  --system-color-text-shadow: oklch(0% 0 0 / 20%);
  --system-color-card-border: oklch(0% 0 0 / 50%);
  --system-color-card-polyphemus: oklch(39.58% 0.013 81.76);
  --system-color-card-andromeda: oklch(39.22% 0.016 214.52);
  --system-color-card-cerberus: oklch(23.19% 0.036 48.15);
  --system-color-card-nyx: oklch(35.95% 0.024 18.46);
  --system-color-card-horse: oklch(35.25% 0.027 142.94);
  --system-color-gem-orange: oklch(71.92% 0.056 38.8 / 20%);
  --system-color-gem-blue: oklch(78.19% 0.06 187.95 / 20%);
  --system-color-gem-red: oklch(69.69% 0.072 6.59 / 20%);
  --system-color-gem-purple: oklch(71.26% 0.104 327.17 / 20%);
  --system-color-gem-green: oklch(72.3% 0.162 149.93 / 20%);
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}





  .hand {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-animation: opening 1.2s ease-in 1;
    animation: opening 1.2s ease-in 1;
    

    padding:50px;


  


    /* ✑ transparent curtain that appears between the cards on the table and the one in your hand, when you click on one of them */
    
    /* ✑ if one card is hovered, the others cards move backwards and lose their saturation */
    &:has(section:not(.hand__polyphemus-clone, .hand__andromeda-clone, .hand__#cerberus-clone, .hand__nyx-clone, .hand__horse-clone):hover)
      section:not(:hover) {
      z-index: -1;

      -webkit-filter: grayscale(95%);
      filter: grayscale(95%);
    }

    &:has(section:not(.hand__polyphemus-clone, .hand__andromeda-clone, .hand__cerberus-clone, .hand__nyx-clone, .hand__horse-clone):hover)
      .hand__polyphemus:not(:hover) {
      -webkit-transform: translateX(50%) translateY(13%) rotate(-14deg)
        scale(0.9);
      transform: translateX(50%) translateY(13%) rotate(-14deg) scale(0.9);
    }

    &:has(section:not(.hand__polyphemus-clone, .hand__andromeda-clone, .hand__cerberus-clone, .hand__nyx-clone, .hand__horse-clone):hover)
      .hand__andromeda:not(:hover) {
      -webkit-transform: translateX(35%) translateY(3%) rotate(-7deg) scale(0.9);
      transform: translateX(35%) translateY(3%) rotate(-7deg) scale(0.9);
    }

    &:has(section:not(.hand__polyphemus-clone, .hand__andromeda-clone, .hand__cerberus-clone, .hand__nyx-clone, .hand__horse-clone):hover)
      .hand__cerberus:not(:hover) {
      -webkit-transform: translateY(-2%) scale(0.9);
      transform: translateY(-2%) scale(0.9);
    }

    &:has(section:not(.hand__polyphemus-clone, .hand__andromeda-clone, .hand__cerberus-clone, .hand__nyx-clone, .hand__horse-clone):hover)
      .hand__nyx:not(:hover) {
      -webkit-transform: translateX(-35%) translateY(3%) rotate(7deg) scale(0.9);
      transform: translateX(-35%) translateY(3%) rotate(7deg) scale(0.9);
    }

    &:has(section:not(.hand__polyphemus-clone, .hand__andromeda-clone, .hand__cerberus-clone, .hand__nyx-clone, .hand__horse-clone):hover)
      .hand__horse:not(:hover) {
      -webkit-transform: translateX(-50%) translateY(13%) rotate(14deg)
        scale(0.9);
      transform: translateX(-50%) translateY(13%) rotate(14deg) scale(0.9);
    }

    section {
      width: 46vmin;
      aspect-ratio: 5/7;

      border-radius: 5%;
      overflow: hidden;

      background-color: var(--system-color-shadow);
      box-shadow: 0vmin 0.8vmin 3.2vmin var(--system-color-card-border),
        0vmin 1.6vmin 6.4vmin var(--system-color-card-border);

      transition: all 0.8s ease-out;

      article {
        width: 90%;
        height: 65%;

        border-radius: 5% 5% 0 0;
        position: absolute;
        inset: 5% auto auto 5%;

        background-color: var(--system-color-dark);
        box-shadow: inset 0vmin 0vmin 12vmin -6vmin var(--system-color-dark);

        -moz-image-rendering: pixelated;
        -ms-image-rendering: pixelated;
        -o-image-rendering: pixelated;
        image-rendering: pixelated;

        &::before,
        &::after {
          content: "";
          position: absolute;
          z-index: 1;
        }

        &::before {
          width: 110%;
          height: 35%;

          inset: 70% auto auto -5%;

          -webkit-filter: drop-shadow(
            0vmin 2vmin 2vmin var(--system-color-shadow)
          );
          filter: drop-shadow(0vmin 2vmin 2vmin var(--system-color-shadow));
        }
      }

      aside {
        width: 90%;
        height: 35%;

        position: absolute;
        inset: auto auto 5% 5%;
        border-radius: 14% 14% 5% 5%;

        background-color: white;
        
        &::before,
        &::after {
          content: "";
          position: absolute;
          z-index: 1;
        }
      }

      :is(&.hand__polyphemus-clone, &.hand__andromeda-clone, &.hand__cerberus-clone, &.hand__nyx-clone, &.hand__horse-clone) {
        z-index: 3;
        display: none;
        position: absolute;

        /* ☛ brings up the clicked card in your hand */
        &.card--visible {
          display: block;
          -webkit-animation: card-zoom 0.8s ease-out forwards;
          animation: card-zoom 0.8s ease-out forwards;
        }
      }

      /* ✑ vanish the card clicked from the board */
      &.card--hidden {
        animation: vanish-from-the-board 0.5s ease-in forwards;
      }

      :is(&.hand__polyphemus, &.hand__polyphemus-clone) {
        -webkit-transform: translateX(50%) translateY(0) rotate(-14deg);
        transform: translateX(50%) translateY(0) rotate(-14deg);

        background-image: linear-gradient(to right, rgb(181, 37, 230),rgb(12, 238, 215));

        &:hover {
          -webkit-transform: translateX(50%) translateY(0) rotate(-14deg)
            scale(1.1);
          transform: translateX(50%) translateY(0) rotate(-14deg) scale(1.1);
        }

        > article {
          background: url("https://i.ibb.co/NT5wvhm/iotim1.jpg")
            no-repeat 50% 0%;
          -webkit-background-size: 100%;
          background-size: 100%;

          
        }

        > aside {
          &::before {
            width: 36%;
            height: 66%;

            inset: 59% auto auto 32%;
            

           
            -webkit-background-size: 100%;
            background-size: 100%;
          }

          &::after {
            width: 66%;
            height: 66%;

            inset: 4% auto auto 17%;

             background-image: url("https://i.postimg.cc/s2FN2nMN/iottex1.png");
            -webkit-background-size: 100%;
            background-size: 100%;
          }

          
        }
      }

      :is(&.hand__andromeda, &.hand__andromeda-clone) {
        -webkit-transform: translateX(35%) translateY(-10%) rotate(-7deg);
        transform: translateX(35%) translateY(-10%) rotate(-7deg);
        background-image: linear-gradient(to right, rgb(181, 37, 230),rgb(12, 238, 215));

        &:hover {
          -webkit-transform: translateX(35%) translateY(-10%) rotate(-7deg)
            scale(1.1);
          transform: translateX(35%) translateY(-10%) rotate(-7deg) scale(1.1);
        }

        > article {
          background: url("https://i.ibb.co/YB2t3Qt/iotim2.jpg")
            no-repeat 50% 0%;
          -webkit-background-size: 100%;
          background-size: 100%;

          &::before {
            width: 110%;
            height: 35%;

            inset: 70% auto auto -5%;

            
            -webkit-background-size: 100%;
            background-size: 100%;
          }

          &::after {
            width: 18%;
            height: 18%;

            inset: -6% auto auto -6%;

            
            -webkit-background-size: 100%;
            background-size: 100%;

            -webkit-filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-blue)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-blue))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-blue))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-blue));
            filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-blue)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-blue))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-blue))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-blue));
          }
        }

        > aside {
          &::after {
            width: 66%;
            height: 66%;

            inset: 4% auto auto 16.5%;
            background-image: url("https://i.postimg.cc/fb259Bys/iottex2.png");

            
            -webkit-background-size: 100%;
            background-size: 100%;
          }
        }
      }

      :is(&.hand__cerberus, &.hand__cerberus-clone) {
        -webkit-transform: translateY(-15%);
        transform: translateY(-15%);
        background-image: linear-gradient(to right, rgb(181, 37, 230),rgb(12, 238, 215));

        &:hover {
          -webkit-transform: translateY(-15%) scale(1.1);
          transform: translateY(-15%) scale(1.1);
        }

        > article {
          background: url("https://i.ibb.co/qMRmn5r/iotim3.jpg")
            no-repeat 50% 0%;
          -webkit-background-size: 100%;
          background-size: 100%;

          &::before {
            width: 110%;
            height: 35%;

            inset: 70% auto auto -5%;

           
            -webkit-background-size: 100%;
            background-size: 100%;
          }

          &::after {
            width: 18%;
            height: 18%;

            inset: -6% auto auto -6%;

            
            -webkit-background-size: 100%;
            background-size: 100%;

            -webkit-filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-red)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-red))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-red))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-red));
            filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-red)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-red))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-red))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-red));
          }
        }

        > aside {
          &::after {
            width: 66%;
            height: 66%;

            inset: 4% auto auto 16.8%;
            background-image: url("https://i.postimg.cc/zB4jdvTP/iottex3.png");

            
            -webkit-background-size: 100%;
            background-size: 100%;
          }

          &::before {
            width: 36%;
            height: 66%;

            inset: 59% auto auto 32%;
            

            
            -webkit-background-size: 100%;
            background-size: 100%;
          }
        }
      }

      :is(&.hand__nyx, &.hand__nyx-clone) {
        -webkit-transform: translateX(-35%) translateY(-10%) rotate(7deg);
        transform: translateX(-35%) translateY(-10%) rotate(7deg);
        background-image: linear-gradient(to right, rgb(181, 37, 230),rgb(12, 238, 215));

        &:hover {
          -webkit-transform: translateX(-35%) translateY(-10%) rotate(7deg)
            scale(1.1);
          transform: translateX(-35%) translateY(-10%) rotate(7deg) scale(1.1);
        }

        > article {
          background: var(--system-color-dark)
            url("https://i.ibb.co/d2zr98R/iotim4.jpg")
            no-repeat 20% 10%;
          -webkit-background-size: 88%;
          background-size: 100%;

          &::before {
            width: 110%;
            height: 35%;

            inset: 70% auto auto -5%;

                        -webkit-background-size: 100%;
            background-size: 100%;
          }

          &::after {
            width: 18%;
            height: 18%;

            inset: -6% auto auto -6%;

           
            -webkit-background-size: 100%;
            background-size: 100%;

            -webkit-filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-purple)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-purple))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-purple))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-purple));
            filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-purple)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-purple))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-purple))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-purple));
          }
        }

        > aside {
          &::after {
            width: 66%;
            height: 66%;

            inset: 4% auto auto 17.2%;
             background-image: url("https://i.postimg.cc/Hxrz4X8y/iottex4.png");

           
            -webkit-background-size: 100%;
            background-size: 100%;
          }
        }
      }

      :is(&.hand__horse, &.hand__horse-clone) {
        -webkit-transform: translateX(-50%) rotate(14deg);
        transform: translateX(-50%) rotate(14deg);

        background-image: linear-gradient(to right, rgb(181, 37, 230),rgb(12, 238, 215));

        &:hover {
          transform: translateX(-50%) rotate(14deg) scale(1.1);
        }

        > article {
          background: url("https://i.ibb.co/N7nPKrj/iotim5.jpg")
            no-repeat 0% 0%;
          -webkit-background-size: 100%;
          background-size: 100%;

          &::before {
            width: 110%;
            height: 35%;

            inset: 70% auto auto -5%;

            
            -webkit-background-size: 100%;
            background-size: 100%;
          }

          &::after {
            width: 18%;
            height: 18%;

            inset: -6% auto auto -6%;

            
            -webkit-background-size: 100%;
            background-size: 100%;

            -webkit-filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-green)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-green))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-green))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-green));
            filter: drop-shadow(
                0.6vmin 0vmin 0.8vmin var(--system-color-gem-green)
              )
              drop-shadow(-0.6vmin 0vmin 0.8vmin var(--system-color-gem-green))
              drop-shadow(0vmin 0.6vmin 0.8vmin var(--system-color-gem-green))
              drop-shadow(0vmin -0.6vmin 0.8vmin var(--system-color-gem-green));
          }
        }

        > aside {
          &::after {
            width: 66%;
            height: 66%;

            inset: 4% auto auto 16.9%;

            background-image: url("https://i.postimg.cc/sxSJbzcf/iottex5.png");
            -webkit-background-size: 100%;
            background-size: 100%;
          }
        }
      }
    }
  }


/*
  ▀▄▀▄▀▄▀▄▀▄▀▄ ANIMATIONS ▀▄▀▄▀▄▀▄▀▄▀▄
  */

@keyframes opening {
  from {
    opacity: 0;
    filter: grayscale(100%);
  }

  to {
    opacity: 1;
    filter: grayscale(0%);
  }
}

@keyframes curtain-up {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.7;
  }
}

@keyframes card-zoom {
  from {
    opacity: 0;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.45);
  }
}

@keyframes vanish-from-the-board {
  to {
    opacity: 0;
  }
}

/*** ◰ media queries ***/
/** accessibility **/
@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}