/* ============================================
   COLLECTIONS — collections.css
   ============================================ */


/* ── BODY ── */
body {
  background-color: #2a3828;
  background-image: url('/images/1-g.gif');
  background-repeat: repeat;
  cursor: url("images/pointer.png"), auto;
  font-family: Georgia, serif;
  min-height: 100vh;
}

::selection {
  color: red;
  background-color: gold;
}

.page-wrapper {
  position: relative;
}


/* ── HEADER ── */
.touhou3 {
  color: #ccf;
  background: rgb(221, 0, 0);
  padding: 12px;
  border-image-slice: 12;
  border-image-width: 12px;
  border-image-repeat: round;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEUAAACZmf/aJORuAAAAAXRSTlMAQObYZgAAAFRJREFUeNpjQAD7////QAgDBgYeBsOZM3sYjKKifBhMly5dw2A6c+YaBiMGBh8GQwaGHgazBsYcMAHmQiRMGxjXgAgC6sBGgQ0FGw+2CGIlwgVwAACQHyhXCFDEKwAAAABJRU5ErkJggg==");
}

.coll-desc {
  position: absolute;
  display: flex;
  right: 19%;
  top: -3%;
  max-width: 200px;
  rotate: 10deg;
  transform: scale(1);
}

.coll-header a {
  font-family: "Great News", cursive;
  display: flex;
  position: relative;
  text-align: center;
  margin: 81px;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.coll-title {
  position: absolute;
  font-size: clamp(24px, 4vw, 100px);
  color: #ff0000;
  white-space: nowrap;
}

.title-gif {
  display: none;
  position: absolute;
  width: 20em;
  opacity: 0;
  z-index: 1;
  filter: drop-shadow(5px 5px 5px #222);
}

.coll-link:hover .title-gif {
  display: block;
  opacity: 1;
}

.coll-link:hover .coll-title {
  opacity: 0;
}


/* ── WRAPPER (contenedor de los objetos) ── */
.wrapper {
  display: block;
  position: relative;
  width: 1400px;
  height: 800px;
  transform: scale(1);
  transform-origin: top left;
}

@media (max-width: 1400px) {
  .wrapper { transform: scale(0.85); }
}

@media (max-width: 1100px) {
  .wrapper { transform: scale(0.65);}
  .coll-desc {right: 11%; top: -3%;}
}

@media (max-width: 800px) {
  .wrapper { transform: scale(0.45); }
  .coll-desc {right: 3%; top: -3%;transform: scale(0.45)}
}

@media (max-width: 500px) {
  .wrapper { transform: scale(0.3); }
  .coll-desc {right: -11%; top: -3%; transform: scale(0.3)}
}

@media (max-width: 340px) {
  .wrapper { transform: scale(0.3); }
  .coll-desc {display: none;}
}



/* ── ITEMS (cada objeto flotante) ── */
.item {
  position: absolute; /* se posiciona dentro de .wrapper */
  display: grid
}

.item img {
  width: 100%;
  height: auto;
  transition: filter 0.3s ease;
}


/* ── ETIQUETA AL HACER HOVER ── */
.board-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 25px;
  color: red;
  background-color: yellow;
  text-shadow: 
    3px 3px 0 #1a1a3a,
    -1px -1px 0 #1a1a3a,
    1px -1px 0 #1a1a3a,
    -1px 1px 0 #1a1a3a;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.item:hover img {
  filter: hue-rotate(90deg) brightness(0.9);
  transform: rotate(10deg);
}

.item:hover .board-label {
  opacity: 1;
  filter: drop-shadow( 0px 8px 0px rgba(0,24,255,0.7));
}

/* ── POSICIONES Y TAMAÑOS DE CADA ITEM ── */

.vinilos   { 
  position: absolute;
  top: -3%;
  left: 5%;
  width: 25%;
  rotate: -3deg;
  filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, 0.37));
}

.pokemon   { 
  position: absolute;
  top: 0%;
  left: 33%;
  width: 19%;
  rotate: 0deg;
  filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, 0.37));
}

.perfume   { 
  position: absolute;
  top: 0%;
  left: 51%;
  width: 19%;
  rotate: 5deg;
  filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, 0.37));
}

.tattoos   { 
  position: absolute;
  top: 47%;
  left: 9%;
  width: 20%;
  rotate: -10deg;
  filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, 0.37));
}

.plushie   { 
  position: absolute;
  top: 44%;
  left: 33%;
  width: 17%;
  rotate: 6deg;
  filter: drop-shadow( 0px 0px 8px rgba(0, 0, 0, 0.37));
}

/* ── HOVER ESPECIAL: PERFUMES ── */
.perfumes:hover img {
  opacity: 0.5;
  transform: rotate(20deg);
}

.vinyls:hover img {
  opacity: 0.5;
  transform: rotate(20deg);
}

@media (prefers-reduced-motion: none) {
  
}


/* @media (max-width: 768px) {
  .wrapper {
    position: relative;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    justify-content: center;
  }
  .item {
    position: relative; 
    width: 30vw;
    top: auto;
    left: auto;
  }
} */