/* COLLECTION PAGE */

body {
  background-color: #fffcfe;
}

::selection {
  color: #ffc4d4;
}

html {
  scroll-behavior: smooth;
}

.collection-page {
  position: relative;
  width: 1000px;
  min-height: 1424px;
  margin: 10px auto 70px;
  color: #8a7070;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  line-height: 1.6;
}

/* doily background */

.collection-doily {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1150px;
  height: auto;
  display: block;
  transform: translateX(-50%);
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}



/* hime */

.collection-hime {
  position: absolute;
  top: 300px;
  left: -400px;

  width: 550px;
  height: auto;

  display: block;

  filter:
    saturate(.55)
    drop-shadow(0 8px 14px rgba(194,153,170,.15));

  transform-origin: center bottom;

  animation:
    himeFloat 14s ease-in-out infinite;

  pointer-events: none;
  z-index: 2;
}

@keyframes himeFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* hime speech bubble */

.hime-speech {
  position: absolute;

  top: 75px;
  left: -390px;

  width: 390px;
  height: 230px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  pointer-events: none;
  z-index: 3;

}

.hime-speech-doily {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  filter:
    saturate(.5)
    drop-shadow(0 7px 13px rgba(194,153,170,.12));

  z-index: 0;
}

.hime-speech p {
  position: relative;

  width: 245px;

  margin: 0;

  color: #9f7f87;

  font-family: Verdana, sans-serif;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .25px;
  text-align: center; 

  z-index: 1;
}





/* cabinet */

.collection-cabinet {
  position: relative;
  width: 900px;
  height: 1444px;
  margin: -20px auto 0;
  z-index: 1;
}

.cabinet-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(194,153,170,.18));
  pointer-events: none;
  z-index: 1;
}


/* collection items */

.collection-item {
  position: absolute;
  z-index: 2;

  transition:
    z-index 0s .4s;
}

.collection-item:hover {
  z-index: 9999;

  transition-delay: 0s;
}

.collection-image {
  width: auto;
  height: auto;
  display: block;
  cursor: url("/img/key2.png"), auto;

  filter:
    saturate(.84)
    drop-shadow(0 4px 4px rgba(160,140,145,.12))
    drop-shadow(0 10px 18px rgba(160,140,145,.18));

  transition:
    transform .6s ease,
    filter .6s ease;
}

.collection-item:hover .collection-image {
  transform: translateY(-3px);

  filter:
    saturate(.96)
    drop-shadow(0 6px 6px rgba(160,140,145,.16))
    drop-shadow(0 14px 22px rgba(160,140,145,.24));
}


/* hover notes */

.collection-note {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);

  width: 160px;
  padding: 6px 9px;

  box-sizing: border-box;

  background: #fffafd;

  border-width: 5px;
  border-style: solid;
  border-image: url("/img/laceborder.png") 8 fill round;

  color: #9d858c;
  text-align: center;

  opacity: 0;

  transform:
    translateX(-50%)
    translateY(3px);

  transition:
    opacity .4s ease,
    transform .4s ease;

  pointer-events: none;
  z-index: 10000;

  box-shadow:
    0 0 6px
    rgba(245,213,232,.18);
}

.collection-item:hover .collection-note {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}

.collection-note h3 {
  margin: 0 0 2px;

  color: #b78394;

  font-family: "rainy hearts", cursive;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.25;
}

.collection-note p {
  margin: 0;

  font-size: 8px;
  line-height: 1.45;
}


/* hachi hover note */

.hachi .collection-note {
  left: calc(50% - 35px);

  transform:
    translateX(-50%)
    translateY(3px);
}

.hachi:hover .collection-note {
  transform:
    translateX(-50%)
    translateY(0);
}


/* melo mug hover note */

.mymelody-mug .collection-note {
  left: calc(50% - 35px);

  transform:
    translateX(-50%)
    translateY(3px);
}

.mymelody-mug:hover .collection-note {
  transform:
    translateX(-50%)
    translateY(0);
}



/* top shelf — charmmy kitty */

.charmmy-kitty {
  left: 165px;
  bottom: 1048px;
}

.charmmy-kitty .collection-image {
  width: 100px;
}











/* top shelf — korilakkuma bunny */

.kori-bunny {
  left: 285px;
  bottom: 1045px;
}

.kori-bunny .collection-image {
  width: 125px;
}




/* top shelf — my melody chiikawa */

.chiikawa-melody {
  left: 420px;
  bottom: 1050px;
}

.chiikawa-melody .collection-image {
  width: 88px;
}







/* top shelf — chiikawa */

.chiikawa-plush {
  left: 520px;
  bottom: 1050px;
}

.chiikawa-plush .collection-image {
  width: 85px;
}





/* top shelf — buru */

.buru {
  right: 165px;
  bottom: 1062px;
}

.buru .collection-image {
  width: 100px;
}

/* second shelf — chii */

.soothing-chii {
  left: 110px;
  bottom: 793px;
}

.soothing-chii .collection-image {
  height: 245px;
}


/* second shelf — chobits manga */

.chobits-book {
  left: 240px;
  bottom: 805px;
}

.chobits-book .collection-image {
  height: 130px;
}



.sleeping-chii {
  left: 350px;
  bottom: 793px;
}

.sleeping-chii .collection-image {
  height: 105px;
}




/* second shelf — strawberry my melody */

.strawberry-melody {
  left: 455px;
  bottom: 800px;
}

.strawberry-melody .collection-image {
  height: 110px;
}









/* second shelf — masyumaros */

.masyu-chef {
  left: 580px;
  bottom: 803px;
}

.masyu-chef .collection-image {
  height: 100px;
}

.masyu-maid {
  left: 670px;
  bottom: 803px;
}

.masyu-maid .collection-image {
  height: 90px;
}

/* third shelf — nana and hachi */

.nana {
  left: 145px;
  bottom: 544px;
}

.nana .collection-image {
  height: 105px;
}

.hachi {
  left: 190px;
  bottom: 544px;
}

.hachi .collection-image {
  height: 105px;
}




/* third shelf — nana manga */

.nana-manga {
  left: 270px;
  bottom: 548px;
}

.nana-manga .collection-image {
  height: 130px;
}













/* third shelf — my melody mug */

.mymelody-mug {
  left: 375px;
  bottom: 548px;
}

.mymelody-mug .collection-image {
  width: 85px;
}







/* third shelf — sakura rilakkuma */

.sakura-kuma {
  right: 330px;
  bottom: 544px;
}

.sakura-kuma .collection-image {
  height: 110px;
}



/* third shelf — azusa */

.azusa-figure {
  right: 225px;
  bottom: 544px;
}

.azusa-figure .collection-image {
  height: 160px;
}








/* third shelf — mugi */

.mugi-figure {
  right: 150px;
  bottom: 536px;
}

.mugi-figure .collection-image {
  height: 175px;
}





/* bottom shelf — illit album */

.illit-album {
  left: 145px;
  bottom: 275px;
}

.illit-album .collection-image {
  height: 130px;
}



/* bottom shelf — cardcaptor sakura */

.sakura-nendo {
  left: 255px;
  bottom: 275px;
}

.sakura-nendo .collection-image {
  height: 120px;
}

.tomoyo-nendo {
  left: 325px;
  bottom: 275px;
}

.tomoyo-nendo .collection-image {
  height: 120px;
}

/* bottom shelf — maid-sama */

.maidsama-manga {
  left: 405px;
  bottom: 275px;
}

.maidsama-manga .collection-image {
  height: 130px;
}











/* bottom shelf — my melody strawberry mug */

.strawberry-mug {
  right: 275px;
  bottom: 275px;
}

.strawberry-mug .collection-image {
  width: 105px;
}



/* bottom shelf — neighbourhood story */

.neighbourhood-story {
  right: 165px;
  bottom: 275px;
}

.neighbourhood-story .collection-image {
  height: 130px;
}