@import "../../css/helpers";

.section {
  display: flex;
  justify-content: center;

  .pin {
    display: flex;
    align-items: center;
    position: sticky;
    height: 100vh;
    top: 0;
    width: 100%;
  }

  .cyllinder {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    perspective: 90vh;

    .item {
      position: absolute;
      z-index: -1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      text-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
      width: 100%;

      .title {
        position: relative;
        z-index: 10;
        width: 100%;
        position: relative;
        font-weight: 900;
        text-align: center;
        white-space: nowrap;
        font-size: 3.5vw;
        pointer-events: none;
      }

      .credits {
        position: absolute;
        font-size: tovw(14px, "desktop", 7px);
        background: var(--color-white);
        color: #ff4d00;
        text-transform: uppercase;
        transform: translateX(-50%);
        margin-top: tovw(20px, "desktop", 10px);
        padding: tovw(4px) tovw(5px);
        line-height: 1;
        border-radius: tovw(2px);
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-jetbrains-mono);

        @media screen and (max-width: 800px) {
          font-size: tovw(8px, "mobile");
          padding: tovw(2px, "mobile") tovw(4px, "mobile");
          margin-top: tovw(8px, "mobile");
          min-width: fit-content;
        }

        span {
          color: var(--color-black);
        }

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: tovw(6px, "desktop", 4px);
          height: tovw(9px, "desktop", 6px);
          transform: translate(-700%, -50%);
          background-image: url("data:image/svg+xml,%3Csvg width='6' height='9' viewBox='0 0 6 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.59827 4.53004L0.0201411 8.99221L0.0201415 0.0678713L5.59827 4.53004Z' fill='%23EFEFEF'/%3E%3C/svg%3E%0A");
          background-repeat: no-repeat;
          background-size: contain;

          @media screen and (max-width: 800px) {
            width: tovw(8px, "mobile");
            height: tovw(8px, "mobile");
            left: 30%;
          }
        }
      }

      .image {
        border-radius: tovw(10px, "desktop", 6px);
        border: tovw(1px, 'desktop', 1px) solid rgba(255, 255, 255, 0.4);

        width: 100%;
      }

      .info {
        --scale: 1.8;

        min-width: 350px;
        max-width: 50vw;
        width: 100%;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(var(--scale));
        z-index: 5;
      }

      .link {
        pointer-events: none;
      }

      &[data-state="active"] {
        z-index: 10;

        .link {
          pointer-events: auto;
        }

        .info {
          --scale: 1;
          --transition-duration: 0.4s;

          transition: transform var(--transition-duration)
              var(--custom-ease-out),
            opacity var(--transition-duration) ease-in-out;
          opacity: 1;
        }
      }
    }
  }
}
