/* ==========================================================================
   MERCH — carrusel 3D (fondo negro, tipo aparador)
   ========================================================================== */

.merch {
  position: relative;
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(64px, 8vw, 120px);
  overflow: hidden;
  /* Misma retícula de puntitos que las secciones blancas, en gris oscuro */
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 79, 163, .08), transparent 70%),
    radial-gradient(circle, #3A3A42 1.3px, transparent 1.9px);
  background-size: 100% 100%, 150px 150px;
  background-position: center, center center;
  background-attachment: scroll, fixed;
}
@media (max-width: 767px) {
  .merch { background-size: 100% 100%, 90px 90px; background-attachment: scroll, scroll; }
}
.merch__head { margin-bottom: clamp(16px, 3vw, 40px); }
.merch__head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}
.merch .section-title { color: var(--paper); }

/* --------------------------------------------------------------------------
   ESCENARIO 3D
   -------------------------------------------------------------------------- */
.merch__stage {
  position: relative;
  height: clamp(400px, 56vw, 760px);
  perspective: 1400px;
  touch-action: pan-y;               /* el dedo arrastra de lado y aún deja hacer scroll */
  user-select: none;
  -webkit-user-select: none;
}
.merch__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;            /* la capa no debe tapar a las playeras */
}
.tee { pointer-events: auto; }

.tee {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(280px, 46vw, 680px);
  aspect-ratio: 1;
  margin: calc(clamp(280px, 46vw, 680px) / -2) 0 0 calc(clamp(280px, 46vw, 680px) / -2);
  transform-style: preserve-3d;
  will-change: transform;
}
@media (max-width: 767px) {
  .tee { width: 84vw; margin: -42vw 0 0 -42vw; }
}

/* La playera sin fondo, flotando. Se inclina siguiendo el mouse (--tx/--ty) */
.tee__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(calc(var(--ty, 0) * -18deg)) rotateY(calc(var(--tx, 0) * 22deg)) scale(var(--s, 1));
  transition: transform .6s var(--ease-out);
  animation: tee-float 5s ease-in-out infinite;
}
.tee.is-hover .tee__inner { --s: 1.06; transition: transform .15s linear; }
@keyframes tee-float {
  50% { translate: 0 -10px; }
}
.tee .media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  background: none;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)) brightness(calc(1 - var(--dim, 0)));
  transition: filter .3s;
}
/* Placeholder mientras llega el PNG */
.tee .media:not(.is-loaded) { outline: 1px dashed rgba(242, 240, 235, .35); outline-offset: -1px; }

/* Sombra en el "piso" */
.tee__shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -4%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent);
  filter: blur(6px);
  opacity: calc(1 - var(--dim, 0) * 1.5);
}

/* --------------------------------------------------------------------------
   POLAROIDS (fotos del artista usando la playera)
   -------------------------------------------------------------------------- */
.merch__worn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}
.polaroid {
  position: absolute;
  margin: 0;
  width: clamp(110px, 14vw, 210px);
  padding: 8px 8px 30px;
  background: #F4F2EE;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out);
}
.polaroid .media { aspect-ratio: 4 / 5 !important; }
.polaroid--0 { left: 4%;  top: 6%;    transform: translateY(30px) rotate(-12deg); }
.polaroid--1 { right: 4%; bottom: 4%; transform: translateY(30px) rotate(9deg); }
.merch__worn.is-on .polaroid { opacity: 1; }
.merch__worn.is-on .polaroid--0 { transform: rotate(-7deg); }
.merch__worn.is-on .polaroid--1 { transform: rotate(5deg); transition-delay: .12s; }
@media (max-width: 767px) {
  .polaroid { width: 26vw; padding: 5px 5px 18px; }
  .polaroid--0 { left: 0; top: -2%; }
  .polaroid--1 { right: 0; bottom: -2%; }
}

/* --------------------------------------------------------------------------
   INFO + CONTROLES
   -------------------------------------------------------------------------- */
.merch__info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: clamp(20px, 3vw, 40px);
}
.merch__nav { display: flex; gap: 6px; }
.merch__nav .lightbox__btn { color: var(--paper); }
.merch__store {
  padding: 12px 18px;
  background: var(--paper);
  color: var(--ink);
  transition: background-color .25s, color .25s;
}
.merch__store:hover { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tee__inner, .polaroid { transition: none; }
  .tee.is-center .tee__inner::before { animation: none; }
}