/* ======== 
   IMPORTS & BASE CONFIGURATION
 ======== */
@import url('/config/variables.css');
@import url('/config/shared.css');

* {
  text-transform: uppercase;
}

body {
  font-size: var(--fs-10);
  user-select: none;
  min-height: 100vh;
  background: var(--cl-black-light) center / var(--sz-200) no-repeat url(/assets/loader.svg);

  &.loaded {
    background-image: none;
  }
}

/* ======== 
   TYPOGRAPHY BASE
 ======== */
h1,
h2,
h3,
h4,
span,
button,
select {
  font-size: var(--fs-10);
  color: var(--cl-white);
  line-height: var(--sz-100);
  letter-spacing: var(--letter-space);
  margin: 0;
  display: flex;
  white-space: nowrap;
  transition: color var(--transition) ease-in-out;
}

/* ======== 
   TOOLBAR
 ======== */
.toolbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding: var(--sz-500);
  flex-wrap: wrap;
  z-index: 1000;

  h1 {
    position: fixed;
    top: var(--sz-400);
    right: var(--sz-400);
    text-align: left;
    cursor: pointer;
    z-index: 2000;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;

    img {
      width: var(--logo-size);
    }

    span {
      display: inline-block;
      margin-top: -.75rem;
      color: var(--cl-grey-light);
    }
  }

  .actions {
    justify-content: flex-start;
  }

  .spacer {
    min-width: 250px;
  }

  .active-filters {
    position: relative;
    left: auto;
    bottom: auto;
    flex-grow: 1;
    order: 4;
    transform: translateY(0%);
    z-index: 0;
  }

  .filter,
  .actions,
  .active-filters {
    opacity: var(--opacity-0);
    transition: opacity var(--transition) ease-in-out;
  }

  &.active {

    .filter,
    .actions,
    .active-filters {
      opacity: var(--opacity-100);
    }
  }
}

/* ======== 
   LAYOUT STRUCTURE
 ======== */
main {
  width: 100%;
  padding: var(--section-padding);
}

/* ======== 
   GRID SYSTEM - CARD LAYOUT
 ======== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-size) + 2rem), 1fr));
  gap: var(--card-gap);
  align-items: flex-start;
  justify-items: start;
  transform: translateX(var(--sz-150));

  /* GRID ITEM (CARD) */
  li {
    position: relative;
    padding-inline: 0;
    opacity: var(--opacity-0);
    transition: opacity var(--transition);
    transform: translateY(calc(var(--card-margin) * -1)) rotate(-3deg);

    /* CARD STATES */
    &.even {
      transform: translateY(var(--card-margin)) rotate(3deg);
    }

    &.loaded {
      opacity: var(--opacity-100);
    }

    &.active::before {
      opacity: var(--opacity-100);
      transform: translate(-50%, -50%);
    }

    &.error {
      opacity: var(--opacity-100);

      .thumb {
        background: var(--negative);
      }
    }

    &.ignore {
      &::after {
        opacity: var(--opacity-100) !important;
      }

      .thumb {
        opacity: var(--opacity-100) !important;
      }
    }

    /* RARITY STYLES */
    &.rarity-5 .thumb {
      background: var(--gradient-gold);
    }

    /* CONSTELLATION/REFINEMENT STATES */
    &.constellation-none,
    &.refinement-none {
      &::after {
        opacity: var(--opacity-0);
      }

      .thumb {
        opacity: var(--opacity-25);
      }
    }

    /* CARD DECORATORS */
    /* Card shadow */
    &::after {
      content: '';
      position: absolute;
      aspect-ratio: var(--card-ratio);
      left: 0;
      top: var(--sz-200);
      height: 100%;
      width: var(--card-size);
      background-image: url('/assets/card.svg');
      background-size: contain;
      background-repeat: no-repeat;
      z-index: var(--z-below);
      filter: blur(var(--blur-md));
      opacity: var(--opacity-75);
      transition: opacity var(--transition) ease-in-out;
    }

    /* CARD LABEL */
    h2 {
      color: var(--cl-grey-medium);
      line-height: var(--sz-200);
      transform: translateY(0%) translateX(-2px) rotate(-87.5deg);
      transform-origin: bottom left;
      position: absolute;
      bottom: var(--sz-100);
      left: calc(var(--card-size) + var(--sz-100));
      letter-spacing: 6px;
      transition: opacity var(--transition);
    }

    /* CARD THUMBNAIL */
    .thumb {
      width: var(--card-size);
      background: var(--gradient-purple);
      overflow: hidden;
      position: relative;
      mask: url("/assets/card.svg") 0 0 / 100% no-repeat;
      transition: opacity var(--transition);

      /* Character image */
      img {
        width: 100%;
        aspect-ratio: var(--card-ratio);
        object-fit: contain;
        opacity: var(--opacity-0);
        transition: opacity var(--transition) ease-in-out, transform var(--transition) ease-in-out;
        mask-image: linear-gradient(180deg,
            hsla(0, 0%, 0%, 1) 0%,
            hsla(0, 0%, 0%, 1) 50%,
            hsla(0, 0%, 0%, 0) 95%);

        &.loaded {
          opacity: var(--opacity-100);
        }

        &.best {
          opacity: var(--opacity-10);
          position: absolute;
          inset: 0;
          z-index: var(--z-below);
          background-size: cover;
        }
      }

      /* Character info overlay */
      .info {
        position: absolute;
        bottom: var(--sz-200);
        left: 0;
        width: 100%;
        padding: var(--sz-100) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        opacity: var(--opacity-0);
        transform: translateY(var(--sz-100));
        transition: opacity var(--transition) ease-in-out, transform var(--transition) ease-in-out;

        h3 {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          span {
            width: var(--sz-200);
            aspect-ratio: 1;
            background: center / contain no-repeat;

            &:last-child {
              margin-top: var(--sz-25);
            }
          }
        }
      }
    }

    /* HOVER STATE */
    &:hover {
      cursor: pointer;

      &::after {
        opacity: var(--opacity-75);
      }

      .thumb {
        opacity: var(--opacity-100);

        img {
          transform: scale(1.1);
        }

        .info {
          opacity: var(--opacity-100);
          transform: translateY(0);
          transition-delay: 300ms;
        }
      }
    }
  }
}

/* ======== 
   CHARACTER DETAIL MODAL
 ======== */
.character-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 0%;
  z-index: var(--z-modal);
  display: flex;
  background-color: var(--overlay-75);
  backdrop-filter: blur(var(--blur-md));
  opacity: var(--opacity-0);
  transition: opacity var(--transition) ease-in-out;

  .loader::before {
    background-color: var(--cl-white);
    mask-image: url('/assets/loader.svg');
  }

  .modal-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;

    .modal-content-wrapper {
      position: relative;
      aspect-ratio: 16 / 9;
      width: 100%;
      max-width: 1440px;
      border-radius: var(--sz-200);
      background-color: var(--overlay-75);
      overflow: hidden;
    }
  }

  &.show {
    width: 100%;
    height: 100%;
    opacity: var(--opacity-100);

    .modal-container {
      padding: 5vh 7.5vw;
    }
  }
}

/* MODAL CLOSE BUTTON */
.modal-close {
  position: absolute;
  top: var(--sz-200);
  right: var(--sz-200);
  z-index: var(--z-elevated);
  width: var(--sz-200);
  height: var(--sz-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-24);
  color: var(--cl-white-50);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
  background: var(--overlay-25);
  transition: all var(--transition) ease-in-out;

  &:hover {
    background: var(--overlay-50);
    color: var(--cl-white);
  }
}

/* LOADING STATE */
.detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--fs-12);
  color: var(--cl-grey-medium);
  letter-spacing: 4px;
}

/* MODAL CONTENT AREA */
.detail-content-area {
  position: relative;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;

  .detail-content-overlay {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    /* Bottom-right gradient for goals readability */
    background: linear-gradient(135deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
  }

  &.rarity-5 {
    .detail-content-overlay {
      background:
        linear-gradient(135deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%),
        linear-gradient(230deg, rgba(0,0,0,0) 55%, var(--cl-card-gold-end) 100%);
    }
  }

  &.rarity-4 {
    background-size: auto 90%;

    .detail-content-overlay {
      background:
        linear-gradient(135deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%),
        linear-gradient(230deg, rgba(0,0,0,0) 50%, var(--cl-card-purple-end) 100%);
    }
  }
}

/* ======== 
   CHARACTER DETAIL INFO
 ======== */
.detail-hero-info {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: var(--sz-400);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sz-400);

  /* MAIN INFO SECTION */
  .main {
    .detail-hero-info-main {
      margin-bottom: var(--sz-200);

      .hero-meta {
        display: flex;
        align-items: center;
        gap: var(--sz-25);
        margin-bottom: var(--sz-25);

        .element-icon {
          width: var(--sz-200);
          height: var(--sz-200);
          background-size: contain;
          background-position: center;
        }

        .constellation-badge {
          display: inline-block;
          line-height: 1.5rem;
          padding: 0 var(--sz-50);
          font-size: var(--fs-10);
          color: var(--cl-white);
          letter-spacing: var(--letter-space);
          border-radius: var(--sz-150);
          background-color: var(--overlay-25);
          backdrop-filter: blur(var(--blur-md));

          &.warning {
            color: var(--cl-warning);
          }
        }
      }

      .detail-hero-name {
        max-width: 20rem;
        font-size: var(--fs-48);
        font-weight: var(--fw-sb);
        line-height: 1;
        color: var(--cl-white);
        letter-spacing: 0;
        font-weight: 700;
        white-space: normal;
      }
    }

    /* SIGNATURE WEAPON SECTION */
    .signature-weapon-section {
      margin-bottom: var(--sz-200);

      h2 {
        margin-bottom: var(--sz-50);
        font-size: var(--fs-10);
        color: var(--cl-white-50);
        letter-spacing: var(--letter-space);
      }

      .signature-weapon-card {
        position: relative;
        display: flex;
        align-items: center;
        padding: var(--sz-75) 4rem var(--sz-75) var(--sz-100);
        border-radius: var(--sz-100);
        background-color: var(--overlay-25);
        backdrop-filter: blur(var(--blur-md));
        transform: translateX(calc(var(--sz-100) * -1));

        .signature-weapon-image {
          position: absolute;
          top: 50%;
          right: 0;
          width: 4rem;
          aspect-ratio: 0.6;
          object-fit: contain;
          order: 2;
          transform: translateY(-50%);
        }

        .signature-weapon-info {
          h3 {
            font-size: var(--fs-12);
            color: var(--cl-white);
            letter-spacing: var(--letter-space);
          }

          .signature-weapon-meta {
            display: flex;
            gap: var(--sz-25);

            .signature-weapon-refinement {
              display: flex;
              align-items: center;
              gap: var(--sz-25);
              font-size: var(--fs-10);
              font-weight: 500;
              color: var(--cl-white-50);

              &.warning {
                color: var(--cl-warning);
              }
            }
          }
        }
      }
    }

    /* CHARACTER STATISTICS */
    .detail-stats {
      .stat-item {
        display: flex;
        align-items: center;
        gap: var(--sz-100);

        &:not(:last-of-type) {
          margin-bottom: var(--sz-50);
        }

        .stat-label {
          width: 5rem;
          font-size: var(--fs-10);
          line-height: var(--sz-100);
          color: var(--cl-white-50);
          letter-spacing: var(--letter-space);
        }

        .stat-value {
          display: flex;
          align-items: center;
          font-size: var(--fs-10);
          color: var(--cl-white);
          letter-spacing: var(--letter-space);

          .stat-icon {
            display: inline-block;
            width: var(--sz-100);
            height: var(--sz-100);
            margin-left: var(--sz-25);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }

  /* TEAMS SECTION */
  .sub {
    .teams-section {
      .teams-grid {
        display: flex;
        gap: var(--sz-400);

        .team-card {
          .team-name {
            margin-bottom: var(--sz-75);
            font-size: var(--fs-10);
            color: var(--cl-white-50);
            letter-spacing: var(--letter-space);
            text-align: right;
          }

          .team-members {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--sz-50);

            .rarity-5 {
              background: var(--gradient-gold);
            }

            .rarity-4 {
              background: var(--gradient-purple);
            }

            .team-member {
              position: relative;
              width: 4rem;
              cursor: pointer;
              transition: transform 0.2s ease;

              &:first-child {
                transform: rotate(-5deg);

                &:hover {
                  transform: scale(1.05) rotate(-5deg);
                }
              }

              &:last-child {
                transform: rotate(5deg);

                &:hover {
                  transform: scale(1.05) rotate(5deg);
                }
              }

              &:hover {
                transform: scale(1.05);
              }

              /* Card shadow */
              &::after {
                content: '';
                position: absolute;
                top: var(--sz-100);
                left: 0;
                z-index: var(--z-below);
                width: var(--card-size);
                height: 100%;
                aspect-ratio: var(--card-ratio);
                background-image: url('/assets/card.svg');
                background-size: contain;
                background-repeat: no-repeat;
                filter: blur(var(--blur-md));
                opacity: var(--opacity-75);
                transition: opacity var(--transition) ease-in-out;
              }

              /* Member portrait container */
              .team-member-image-wrap {
                aspect-ratio: var(--card-ratio);
                border-radius: var(--sz-25);
                mask: url("/assets/card.svg") 0 0 / 100% no-repeat;
                overflow: hidden;
              }

              /* Member portrait image */
              .team-member-image {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: 0% 20%;
                mask-image: linear-gradient(180deg,
                    hsla(0, 0%, 0%, 1) 0%,
                    hsla(0, 0%, 0%, 1) 50%,
                    hsla(0, 0%, 0%, 0) 95%);
              }

              /* Member name */
              .team-member-name {
                display: none;
                margin-top: var(--sz-25);
                font-size: var(--fs-8);
                color: var(--cl-white-50);
                letter-spacing: var(--letter-space);
              }
            }
          }
        }
      }
    }
  }
}

/* ======== 
   RESPONSIVE - MOBILE (<= 480px)
 ======== */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    transform: translateX(var(--sz-25));

    li h2 {
      letter-spacing: 3px;
    }
  }

  nav {
    top: var(--sz-100);
    right: var(--sz-100);
    max-width: 75vw;
  }

  .logo {
    top: var(--sz-200);
    right: var(--sz-200);
  }

  .modal-container {
    padding: 2rem 1rem;

    .modal-content-wrapper {
      border-radius: var(--sz-100);
    }
  }

  .detail-hero-info {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sz-400) var(--sz-100);

    .main,
    .sub {
      width: 100%;
    }

    .sub .teams-section .teams-grid {
      flex-direction: column;
    }
  }
}

/* ======== 
   RESPONSIVE - TABLET (481px - 768px)
 ======== */
@media (min-width: 481px) and (max-width: 768px) {
  .logo {
    top: var(--sz-200);
    right: var(--sz-200);
  }

  nav {
    right: var(--sz-100);
    max-width: 60vw;
  }

  .modal-container {
    padding: 3rem 2rem;

    .modal-content-wrapper {
      border-radius: var(--sz-150);
    }
  }

  .detail-hero-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sz-200);

    .main,
    .sub {
      width: 100%;
    }
  }
}