@charset "utf-8";

.monster-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.monster-modal__inner {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}
.monster-modal__inner::before {
  content: '';
  opacity: .9;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: #f5aa00;
}

.monster-modal .egg,
.monster-modal .eggHead,
.monster-modal .eggFoot,
.monster-modal .shadow,
.monster-modal .light {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
}
.monster-modal .egg,
.monster-modal .eggHead,
.monster-modal .eggFoot {
  width: 240px;
  margin-left: -120px;
  background: 0 0 / auto 100% no-repeat;
}
.monster-modal .egg {
  z-index: 2;
  height: 300px;
  margin-top: -150px;
  background-image: url(../images/egg/egg.svg);
}

.monster-modal[data-egg-color='7'] .egg,
.monster-modal[data-egg-color='7'] .eggHead,
.monster-modal[data-egg-color='7'] .eggFoot {
  background-position-x: 50%;
}

.monster-modal[data-egg-color='10'] .egg,
.monster-modal[data-egg-color='10'] .eggHead,
.monster-modal[data-egg-color='10'] .eggFoot {
  background-position-x: 100%;
}

.is-animated .egg,
.is-animated .shadow {
  opacity: 1;
}

.monster-modal .crack {
  position: absolute;
  left: 0;
  width: 0%;
  top: 0;
  bottom: 0;
  background: url(../images/egg/egg_crack.svg) 0 0 / auto 100% no-repeat;
}

.monster-modal .eggHead {
  z-index: 2;
  height: 200px;
  margin-top: -170px;
  background-image: url(../images/egg/egg_head.svg);
}

.monster-modal .eggFoot {
  z-index: 4;
  height: 160px;
  margin-top: -10px;
  background-image: url(../images/egg/egg_foot.svg);
}

.monster-modal .shadow {
  width: 180px;
  height: 90px;
  margin: 120px 0 0 -90px;
  border-radius: 50%;
  background: #e6e6e6;
  mix-blend-mode: multiply;
  transform-origin: 50% 100%;
}

.monster-modal .light {
  top: 0;
  z-index: 3;
  width: 980px;
  height: calc(75px + 50vh);
  margin-left: -490px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, calc(50% + 75px) 100%, calc(50% - 75px) 100%);
}

.sectionMonster {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.monster-modal .card,
.monster-modal .text,
.monster-modal .btn {
  opacity: 0;
  position: relative;
  z-index: 1;
}
.monster-modal .text {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 -15px;
  padding-bottom: 17px;
  letter-spacing: .1em;
  color: #fff;
  font-size: 32px;
  line-height: calc(38 / 32);
  font-feature-settings: 'palt' 1;
}
.monster-modal .text::before,
.monster-modal .text::after {
  content: '';
  width: 78px;
  height: 93px;
  margin: 0 15px -17px;
  background: url(../images/egg/monster_get_deco.svg) 50% 100% / contain no-repeat;
}
.monster-modal .text::after {
  transform: rotateY(180deg);
}

.monster-modal .get {
  width: 246px;
  margin-left: 15px;
}

.monster-modal .card {
  perspective: 1000px;
  width: 400px;
  margin: 32px auto 0;
}

.monster-modal .btn {
  display: block;
  width: 370px;
  margin: 60px auto 0;
}

.is-animated .egg {
  transform-origin: 50% 100%;
  animation: anim-egg01 1s forwards,
    anim-egg02 2s 1s forwards,
    anim-egg03 1s 4s 3 forwards,
    anim-hide 0s 10s forwards;
}
.is-animated .shadow {
  animation: anim-shadow01 1s linear forwards,
    anim-shadow02 2s 1s forwards,
    anim-shadow03 1s 4s 3 forwards;
}
.is-animated .crack {
  animation: anim-crack 2s 7s forwards steps(6);
}
.is-animated .eggHead {
  animation: anim-show 0s 10s forwards,
    anim-eggHead 5s 10s forwards;
}
.is-animated .eggFoot {
  animation: anim-show 0s 10s forwards,
    anim-fadeOut 2s 13s forwards;
}
.is-animated .light {
  animation: anim-light 5s 10s forwards;
}
.is-animated .sectionEgg {
  animation: anim-fadeOut 2s 12s linear forwards;
}
.is-animated .sectionMonster {
  animation: anim-fadeIn 2s 12s linear forwards;
}
.is-animated .card {
  animation: anim-card 3s 14s cubic-bezier(.65, 0, .35, 1) forwards;
}
.is-animated .card img {
  animation: anim-cardImg 1s 14s 2.5 linear forwards;
}
.is-animated .text {
  animation: anim-text .3s 17s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
.is-animated .btn {
  animation: anim-fadeIn .5s 17s forwards;
}

@keyframes anim-hide {
  0%, 100% {
    opacity: 0;
  }
}
@keyframes anim-show {
  0%, 100% {
    opacity: 1;
  }
}
@keyframes anim-fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anim-egg01 {
  0% {
    transform: translateY(-100vh);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes anim-egg02 {
  0%, 30%, 60% {
    transform: translateY(0) scale(1.05, .95);
  }
  20%, 50% {
    transform: translateY(-60px) scale(.95, 1.05);
  }
  70%, 100% {
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes anim-egg03 {
  0%, 40%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-15deg);
  }
  30% {
    transform: rotate(15deg);
  }
}

@keyframes anim-shadow01 {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes anim-shadow02 {
  0%, 30%, 60% {
    transform: scale(1.05, .95);
  }
  20%, 50% {
    transform: scale(.925, 1.025);
  }
  70%, 100% {
    transform: scale(1, 1);
  }
}
@keyframes anim-shadow03 {
  0%, 40%, 100% {
    transform: skewX(0deg);
  }
  10% {
    transform: skewX(10deg);
  }
  30% {
    transform: skewX(-10deg);
  }
}

@keyframes anim-crack {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes anim-eggHead {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-60px);
  }
}

@keyframes anim-light {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .95;
  }
}

@keyframes anim-card {
  0% {
    opacity: 0;
    transform: translateZ(-2000px);
  }
  60%, 100% {
    opacity: 1;
  }
  100% {
    transform: translateZ(0);
  }
}

@keyframes anim-cardImg {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

@keyframes anim-text {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  20%, 100% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@media screen and (max-width: 767px) {
  .sectionEgg {
    --maxSizeNum: 640 * 100vh;
  }

  .monster-modal .egg,
  .monster-modal .eggHead,
  .monster-modal .eggFoot {
    width: min(240 / 640 * 100vw, 240 / var(--maxSizeNum));
    margin-left: max(-120 / 640 * 100vw, -120 / var(--maxSizeNum));
  }
  .monster-modal .egg {
    height: min(300 / 640 * 100vw, 300 / var(--maxSizeNum));
    margin-top: max(-150 / 640 * 100vw, -150 / var(--maxSizeNum));
  }

  .monster-modal .eggHead {
    height: min(200 / 640 * 100vw, 200 / var(--maxSizeNum));
    margin-top: max(-170 / 640 * 100vw, -170 / var(--maxSizeNum));
  }

  .monster-modal .eggFoot {
    height: min(160 / 640 * 100vw, 160 / var(--maxSizeNum));
    margin-top: max(-10 / 640 * 100vw, -10 / var(--maxSizeNum));
  }

  .monster-modal .shadow {
    width: min(180 / 640 * 100vw, 180 / var(--maxSizeNum));
    height: min(90 / 640 * 100vw, 90 / var(--maxSizeNum));
    margin: min(120 / 640 * 100vw, 120 / var(--maxSizeNum)) 0 0 max(-90 / 640 * 100vw, -90 / var(--maxSizeNum));
  }

  .monster-modal .light {
    width: min(1100 / 640 * 100vw, 1100 / var(--maxSizeNum));
    height: min(50% + (75 / 640 * 100vw), 50% + (75 / var(--maxSizeNum)));
    min-height: min(600 / 640 * 100vw, 600 / var(--maxSizeNum));
    margin-left: max(-550 / 640 * 100vw, -550 / var(--maxSizeNum));
    clip-path: polygon(0 0, 100% 0, min(50% + (75 / 640 * 100vw), 50% + (75 / var(--maxSizeNum))) 100%, max(50% - (75 / 640 * 100vw), 50% - (75 / var(--maxSizeNum))) 100%);
    top: auto;
    bottom: max(50% - (75 / 640 * 100vw), 50% - (75 / var(--maxSizeNum)));
  }

  .sectionMonster {
    --maxSizeNum: 800 * 100vh;
  }

  .monster-modal .text {
    width: min(564 / 640 * 100vw, 564 / var(--maxSizeNum));
    margin: 0 auto;
    padding-bottom: min(117 / 640 * 100vw, 117 / var(--maxSizeNum));
    font-size: min(32 / 640 * 100vw, 32 / var(--maxSizeNum));
  }
  .monster-modal .text::before,
  .monster-modal .text::after {
    position: absolute;
    bottom: 0;
    width: min(78 / 640 * 100vw, 78 / var(--maxSizeNum));
    height: min(93 / 640 * 100vw, 93 / var(--maxSizeNum));
    margin: 0;
  }
  .monster-modal .text::before {
    left: 0;
  }
  .monster-modal .text::after {
    right: 0;
  }

  .monster-modal .get {
    position: absolute;
    left: min(163 / 640 * 100vw, 163 / var(--maxSizeNum));
    bottom: min(17 / 640 * 100vw, 17 / var(--maxSizeNum));
    width: min(246 / 640 * 100vw, 246 / var(--maxSizeNum));
    margin: 0;
  }

  .monster-modal .card {
    width: min(450 / 640 * 100vw, 450 / var(--maxSizeNum));
    margin-top: min(33 / 640 * 100vw, 33 / var(--maxSizeNum));
  }

  .monster-modal .btn {
    width: min(370 / 640 * 100vw, 370 / var(--maxSizeNum));
    margin-top: min(60 / 640 * 100vw, 60 / var(--maxSizeNum));
  }
}