<script setup lang="ts">
import CharacterList from "@/components/CharacterList.vue";
import CharacterItem from "@/components/CharacterItem.vue";
</script>

<template>
  <main>
    <CharacterList>
      <CharacterItem class="viktor" href="/viktor/">
        <template #image>
          <img src="@/assets/viktor-portrait.png" alt="Viktor Portrait" />
        </template>

        <template #name>Viktor Kraastav</template>
      </CharacterItem>

      <CharacterItem class="sebin" href="/sebin/">
        <template #image>
          <img src="@/assets/sebin-portrait.png" alt="Sebin Portrait" />
        </template>

        <template #name>Sebin Nyshkim</template>
      </CharacterItem>

      <CharacterItem class="jarek" href="/jarek/">
        <template #image>
          <img src="@/assets/jarek-portrait.png" alt="Jarek Portrait" />
        </template>

        <template #name>Jarek Vakhtang</template>
      </CharacterItem>
    </CharacterList>
  </main>
</template>

<style lang="scss">
.sebin,
.viktor,
.jarek {
  &:before,
  &:after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    transition: all 0.2s ease-in-out;

    filter: saturate(0%);

    z-index: -1;
  }

  &:hover {
    &:before,
    &:after {
      filter: saturate(100%);
    }
  }
}

.sebin {
  font-family: "Exo", sans-serif;

  &:before {
    background-image: radial-gradient(
        circle at bottom right,
        #800f0f 5%,
        transparent 50%
      ),
      radial-gradient(circle at top left, #195673 5%, #170821 100%);
  }

  &:after {
    background-image: url(@/assets/subtle-prism.svg);
    mix-blend-mode: multiply;
  }
}

.viktor {
  font-family: "Secular One", serif;

  &:before {
    background-color: #e7c7b1;
  }

  a {
    color: #493428;
  }

  img {
    background-color: #2d4c5a;
  }
}

.jarek {
  font-family: "Rubik Dirt", sans-serif;

  &:before {
    background-color: #6b682f;
  }
}
</style>
