/* Google Fontsのインポート */
@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&display=swap');

/* カスタムプロパティの定義 */
:root {
  --size-limit: min(1vw, 15px);
  --card-column: 4;
  --transition-default: 0.4s;
  --card-size: calc(var(--size-limit) * 50 / var(--card-column));
  --shadow-color: rgba(0, 0, 0, 0.5);
}

/* 940px未満、540px以上の場合のスタイル */
@media screen and (max-width: 940px) {
  :root {
    --card-column: 2;
  }
}

/* 540px未満の場合のスタイル */
@media screen and (max-width: 540px) {
  :root {
    --card-column: 1;
  }
}

/* リセット */
* {
  margin: 0;
}

/* 基本レイアウト */
body {
  min-width: 100vw;
  min-height: 100vh;
  font-family: "Jaro", sans-serif;
}

.main-view {
  min-width: 100vw;
  min-height: 90vh;
  padding: 5vh 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* カードレイアウト */
.card-wraper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: calc(var(--size-limit) * 90);
  height: auto;
  /* gap: calc(var(--size-limit) * 12 / var(--card-column)); */
}

.card {
  display: flex;
  align-items: flex-end;
  justify-content: center;   
  width: calc(var(--card-size)*1.24);
  height: calc((var(--card-size)*1.414)*1.24);
  padding: calc(var(--size-limit) * 8 / var(--card-column));
  perspective: 1600px;
  color: white;
  margin: calc(var(--size-limit) * 6 / var(--card-column));
}

/* 背景画像 */
.minecraft-img {
  background: url("assets/background.avif") no-repeat center/cover;
}

.dungeons-img {
  background: url("assets/ar87v.jpg") no-repeat center/cover;
}

.legends-img {
  background: url("assets/Legends-PMP_Hero-Art_FullBleedA_Desktop_2880x1320.jpg") no-repeat center/cover;
}

.bg-img{
  position: absolute;
  inset: 0;
  z-index: -100;
  transition: var(--transition-default);
  border-radius: 8px;
  box-shadow: 0 16px 32px -12px var(--shadow-color);
}

.card:hover .bg-img {
  transform: rotate3d(1, 0, 0, 30deg) translateY(16px);
  box-shadow: 0 64px 64px -24px var(--shadow-color);
}

/* ポップアップ画像 */
.minecraft-chara{
  background: url("assets/character.png") no-repeat center bottom/contain;
}

.dungeons-chara{
  background: url("assets/ar87s_chara.png") no-repeat center bottom/contain;
}

.legends-chara{
  background: url("assets/MinecraftLegends_DeluxeSkinPack_Net_2880x1320_1.png") no-repeat center bottom/contain;
}

.pop-img {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2em;
  inset: 0;
  z-index: -99;
  transform: translateY(calc((var(--size-limit) * 6) / var(--card-column)));
  opacity: 0;
  transition: var(--transition-default);
}

.card:hover .pop-img {
  transform: translate3d(0, calc((var(--size-limit) * -6) / var(--card-column)), 0);
  opacity: 1;
}

/* Minecraftロゴ */
.game-logo {
  width: 100%;
  transition: var(--transition-default);
}

.card:hover .game-logo {
  transform: translate3d(0, calc(var(--size-limit) * -12 / var(--card-column)), calc(var(--size-limit) * 140 / var(--card-column)));
}