/*
⠀⠀⠀⠀⠀⠀⠀⢀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣰⠋⣷⠀⠀⠀⠀⠀ ⠀⠀⢀⡼⢲⠀⠀⠀⠀⠀⠀⠀⠀ ⢀⡖⢳⠄⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣸⠃⢀⣿⠖⢳⡆⠀⠀⠀⢀⡞⠀⣸⣠⠤⡄⠀⠀⠀⠀⢠⡟⠁⣸⣤⠶⡄⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢰⡇⣴⡟⠁⠀⡼⠁⠀⠀⠀⡾⢀⣴⠏⠀⢠⠇⠀⠀⠀⠀⡾⢀⣴⠋⠀⢰⠇⠀⠀⠀⠀⠀⠀
⠀⠀⣀⠴⠋⠉⠘⢹⡇⢀⡼⠳⠤⣤⡤⠒⠣⢟⡇⠀⢠⣏⣀⡀⣠⠴⠚⠣⢯⡇⠀⣠⢯⣄⣀⠀⠀⠀⠀⠀
⠀⡼⠃⢀⣄⠀⠀⠘⠓⠋⠀⢠⡞⠁⠀⠀⠀⠘⢧⠴⠋⠀⢠⠟⠁⠀⠀⠀⠘⠧⠞⠁⠀⠀⠈⠙⢦⡀⠀⠀
⢸⡇⠀⠈⠉⠀⠀⠀⠀⠀⢠⣏⡀⠐⠟⠃⠀⠀⠀⠀⠀⢠⣏⠀⠘⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠹⡄⠀
⠀⠙⠦⣤⣀⣤⠤⠀⠀⠀⠈⠳⣄⡀⠀⠀⢀⠀⠀⠀⠀⠀⠻⢆⣀⢀⡀⣀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⣿⠀
⠀⠀⠀⢻⡀⠀⡀⠀⠀⠀⠀⠀⠀⢻⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⢹⡉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀   ⠀⡿⣄
⠀⠀⠀⢨⠇⢀⡿⠀⠀⢀⣀⡤⠄⠈⣧⠀⢲⠀⠀⠀⠀⢀⡀⠀⠈⣷⠀⢸⡀⠀⠀⠀⣀⡀⠀⠀⠀ ⠀⣡⠟
⠀⠀⠀⠙⠒⢯⣀⣠⠴⠻⢧⣄⠤⠼⢥⣴⠋⠀⢀⡴⡟⠉⢀⣀⣸⡧⣴⠋⢀⣀⡴⣟⣁⣀⣀⡠⠴⠊⠁⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠉⠁⠀⠉⠉⠉⠀⠀⠀⠈⠉⠉⠀⠀⠈⠉⠁
*/

/* pista de dança (reaproveita .CoolStuff__Overlay do cool-stuff.css) */
.CoolStuff__Overlay--dance {
  padding: 0;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("../../images/backgrounds/background-001.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* o overlay base usa luminosity na 2ª camada, o que deixaria a foto cinza */
  background-blend-mode: normal;
}

.CoolStuff__DanceBallWrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.CoolStuff__DanceBall {
  display: block;
  width: 110px;
  height: auto;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.7));
}

.CoolStuff__DanceRadio {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 14px;
}

.CoolStuff__DanceRadioLabel {
  font-family: "m5x7";
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  margin: 0;
}

.CoolStuff__DanceRadioLabel a {
  color: var(--hot-pink);
}

.CoolStuff__DanceRadioPlayer {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 35px;
  opacity: 0.8;
}

.CoolStuff__DanceParty {
  position: relative;
  z-index: 1;
  flex: 1;
  --w-scale: 0.9;
}

/* wrapper: posição + passeio lento; img: rebolado rápido (transforms separados) */
.CoolStuff__DanceGifWrap {
  position: absolute;
  --tx: -50%;
  --ty: -50%;
  --wander-duration: 12s;
  animation: CoolStuff__danceWander var(--wander-duration) ease-in-out infinite;
  touch-action: none;
  cursor: grab;
}

.CoolStuff__DanceGifWrap.is-dragging {
  animation-play-state: paused;
  z-index: 10 !important;
  cursor: grabbing;
}

.CoolStuff__DanceGifWrap:nth-child(3n + 1) {
  --wander-duration: 9s;
}
.CoolStuff__DanceGifWrap:nth-child(3n + 2) {
  --wander-duration: 13s;
}
.CoolStuff__DanceGifWrap:nth-child(3n) {
  --wander-duration: 16s;
}

@keyframes CoolStuff__danceWander {
  0% {
    transform: translate(var(--tx), var(--ty)) translate(0px, 0px);
  }
  20% {
    transform: translate(var(--tx), var(--ty)) translate(8px, -6px);
  }
  40% {
    transform: translate(var(--tx), var(--ty)) translate(-5px, -9px);
  }
  60% {
    transform: translate(var(--tx), var(--ty)) translate(-9px, 5px);
  }
  80% {
    transform: translate(var(--tx), var(--ty)) translate(6px, 8px);
  }
  100% {
    transform: translate(var(--tx), var(--ty)) translate(0px, 0px);
  }
}

.CoolStuff__DanceGif {
  display: block;
  /* --user-scale: redimensionar com rodinha/pinça (dance-party.js) */
  width: calc(var(--w, 100px) * var(--w-scale, 1) * var(--user-scale, 1));
  height: auto;
  transform: rotate(-8deg);
  animation: CoolStuff__danceWiggle 0.7s ease-in-out infinite alternate;
  animation-delay: var(--dance-delay, 0s);
}

/* o sobe-desce faz até sprite simétrico parecer que mexe */
@keyframes CoolStuff__danceWiggle {
  from {
    transform: translateY(0) rotate(-6deg) scale(1);
  }
  to {
    transform: translateY(-4px) rotate(6deg) scale(1.04);
  }
}

@media (max-width: 599px) {
  .CoolStuff__DanceParty {
    --w-scale: 0.8;
  }
}

/* 41 vagas. --w e z-index crescem pra baixo (perspectiva); as das bordas
   ancoram na borda (--tx/--ty 0) pra nunca serem cortadas.
   fileira de cima: 7, em volta do globo */
.CoolStuff__DanceGifWrap:nth-child(1) {
  z-index: 1;
  top: 20px;
  left: 20px;
  --w: 104px;
  --tx: 0%;
  --ty: 0%;
}
.CoolStuff__DanceGifWrap:nth-child(2) {
  z-index: 1;
  top: 20px;
  left: 12%;
  --w: 109px;
  --ty: 0%;
  --dance-delay: 0.1s;
}
.CoolStuff__DanceGifWrap:nth-child(3) {
  z-index: 1;
  top: 20px;
  left: 22%;
  --w: 114px;
  --ty: 0%;
  --dance-delay: 0.2s;
}
.CoolStuff__DanceGifWrap:nth-child(4) {
  z-index: 1;
  top: 20px;
  left: 32%;
  --w: 106px;
  --ty: 0%;
  --dance-delay: 0.2s;
}
.CoolStuff__DanceGifWrap:nth-child(5) {
  z-index: 1;
  top: 20px;
  left: 68%;
  --w: 111px;
  --ty: 0%;
  --dance-delay: 0.3s;
}
.CoolStuff__DanceGifWrap:nth-child(6) {
  z-index: 1;
  top: 20px;
  left: 79%;
  --w: 104px;
  --ty: 0%;
  --dance-delay: 0.5s;
}
.CoolStuff__DanceGifWrap:nth-child(7) {
  z-index: 1;
  top: 20px;
  right: 20px;
  --w: 113px;
  --tx: 0%;
  --ty: 0%;
  --dance-delay: 0.4s;
}

/* fileiras do meio: 9 / 8 / 8 */
.CoolStuff__DanceGifWrap:nth-child(8) {
  z-index: 2;
  top: 32%;
  left: 20px;
  --w: 114px;
  --tx: 0%;
  --dance-delay: 0.3s;
}
.CoolStuff__DanceGifWrap:nth-child(9) {
  z-index: 2;
  top: 32%;
  left: 17%;
  --w: 120px;
  --dance-delay: 0.15s;
}
.CoolStuff__DanceGifWrap:nth-child(10) {
  z-index: 2;
  top: 32%;
  left: 28%;
  --w: 125px;
  --dance-delay: 0.25s;
}
.CoolStuff__DanceGifWrap:nth-child(11) {
  z-index: 2;
  top: 32%;
  left: 39%;
  --w: 130px;
  --dance-delay: 0.05s;
}
.CoolStuff__DanceGifWrap:nth-child(12) {
  z-index: 2;
  top: 32%;
  left: 50%;
  --w: 134px;
  --tx: -50%;
  --dance-delay: 0.35s;
}
.CoolStuff__DanceGifWrap:nth-child(13) {
  z-index: 2;
  top: 32%;
  left: 61%;
  --w: 130px;
  --dance-delay: 0.4s;
}
.CoolStuff__DanceGifWrap:nth-child(14) {
  z-index: 2;
  top: 32%;
  left: 72%;
  --w: 125px;
  --dance-delay: 0.2s;
}
.CoolStuff__DanceGifWrap:nth-child(15) {
  z-index: 2;
  top: 32%;
  left: 83%;
  --w: 120px;
  --dance-delay: 0.1s;
}
.CoolStuff__DanceGifWrap:nth-child(16) {
  z-index: 2;
  top: 32%;
  right: 20px;
  --w: 114px;
  --tx: 0%;
  --dance-delay: 0.3s;
}
.CoolStuff__DanceGifWrap:nth-child(17) {
  z-index: 2;
  top: 50%;
  left: 20px;
  --w: 141px;
  --tx: 0%;
  --dance-delay: 0.15s;
}
.CoolStuff__DanceGifWrap:nth-child(18) {
  z-index: 2;
  top: 50%;
  left: 19%;
  --w: 148px;
  --dance-delay: 0.45s;
}
.CoolStuff__DanceGifWrap:nth-child(19) {
  z-index: 2;
  top: 50%;
  left: 31%;
  --w: 155px;
  --dance-delay: 0.05s;
}
.CoolStuff__DanceGifWrap:nth-child(20) {
  z-index: 2;
  top: 50%;
  left: 44%;
  --w: 158px;
  --tx: 0%;
  --dance-delay: 0.05s;
}
.CoolStuff__DanceGifWrap:nth-child(21) {
  z-index: 2;
  top: 50%;
  left: 56%;
  --w: 158px;
  --tx: 0%;
  --dance-delay: 0.05s;
}
.CoolStuff__DanceGifWrap:nth-child(22) {
  z-index: 2;
  top: 50%;
  left: 69%;
  --w: 155px;
  --dance-delay: 0.4s;
}
.CoolStuff__DanceGifWrap:nth-child(23) {
  z-index: 2;
  top: 50%;
  left: 81%;
  --w: 148px;
  --dance-delay: 0.2s;
}
.CoolStuff__DanceGifWrap:nth-child(24) {
  z-index: 2;
  top: 50%;
  right: 20px;
  --w: 141px;
  --tx: 0%;
  --dance-delay: 0.35s;
}
.CoolStuff__DanceGifWrap:nth-child(25) {
  z-index: 2;
  top: 68%;
  left: 20px;
  --w: 167px;
  --tx: 0%;
  --dance-delay: 0.15s;
}
.CoolStuff__DanceGifWrap:nth-child(26) {
  z-index: 2;
  top: 68%;
  left: 19%;
  --w: 174px;
  --dance-delay: 0.05s;
}
.CoolStuff__DanceGifWrap:nth-child(27) {
  z-index: 2;
  top: 68%;
  left: 31%;
  --w: 181px;
  --dance-delay: 0.4s;
}
.CoolStuff__DanceGifWrap:nth-child(28) {
  z-index: 2;
  top: 68%;
  left: 44%;
  --w: 185px;
  --tx: 0%;
  --dance-delay: 0.2s;
}
.CoolStuff__DanceGifWrap:nth-child(29) {
  z-index: 2;
  top: 68%;
  left: 56%;
  --w: 185px;
  --tx: 0%;
  --dance-delay: 0.35s;
}
.CoolStuff__DanceGifWrap:nth-child(30) {
  z-index: 2;
  top: 68%;
  left: 69%;
  --w: 181px;
  --dance-delay: 0.15s;
}
.CoolStuff__DanceGifWrap:nth-child(31) {
  z-index: 2;
  top: 68%;
  left: 81%;
  --w: 174px;
  --dance-delay: 0.05s;
}
.CoolStuff__DanceGifWrap:nth-child(32) {
  z-index: 2;
  top: 68%;
  right: 20px;
  --w: 167px;
  --tx: 0%;
  --dance-delay: 0.05s;
}

/* fileira de baixo: 9, na frente */
.CoolStuff__DanceGifWrap:nth-child(33) {
  z-index: 3;
  bottom: 20px;
  left: 20px;
  --w: 151px;
  --tx: 0%;
  --ty: 0%;
  --dance-delay: 0.25s;
}
.CoolStuff__DanceGifWrap:nth-child(34) {
  z-index: 3;
  bottom: 20px;
  left: 19%;
  --w: 158px;
  --ty: 0%;
  --dance-delay: 0.4s;
}
.CoolStuff__DanceGifWrap:nth-child(35) {
  z-index: 3;
  bottom: 20px;
  left: 31%;
  --w: 165px;
  --ty: 0%;
  --dance-delay: 0.1s;
}
.CoolStuff__DanceGifWrap:nth-child(36) {
  z-index: 3;
  bottom: 20px;
  left: 44%;
  --w: 171px;
  --ty: 0%;
  --dance-delay: 0.35s;
}
.CoolStuff__DanceGifWrap:nth-child(37) {
  z-index: 3;
  bottom: 20px;
  left: 56%;
  --w: 171px;
  --tx: 0%;
  --ty: 0%;
  --dance-delay: 0.15s;
}
.CoolStuff__DanceGifWrap:nth-child(38) {
  z-index: 3;
  bottom: 20px;
  left: 69%;
  --w: 165px;
  --ty: 0%;
  --dance-delay: 0.45s;
}
.CoolStuff__DanceGifWrap:nth-child(39) {
  z-index: 3;
  bottom: 20px;
  left: 81%;
  --w: 158px;
  --ty: 0%;
  --dance-delay: 0.1s;
}
.CoolStuff__DanceGifWrap:nth-child(40) {
  z-index: 3;
  bottom: 20px;
  right: 20px;
  --w: 151px;
  --tx: 0%;
  --ty: 0%;
  --dance-delay: 0.25s;
}
.CoolStuff__DanceGifWrap:nth-child(41) {
  z-index: 3;
  bottom: 20px;
  left: 50%;
  --w: 160px;
  --ty: 0%;
  --dance-delay: 0.2s;
}

/* rastro do cursor: notas musicais (dance-party.js) */
.dance-trail-note {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  font-family: sans-serif;
  will-change: transform, opacity;
  animation: danceTrailPop ease-out forwards;
}

@keyframes danceTrailPop {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.3);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy))
      rotate(var(--spin)) scale(1);
    opacity: 0;
  }
}

/* bandeja com todos os dançarinos, arrastados pra pista */
.DanceTray {
  width: 100%;
  margin-top: 18px;
}

.DanceTray__Controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0;
}

.DanceTray__Btn {
  font-family: "m5x7";
  font-size: 22px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px outset var(--soft-yellow);
  padding: 8px 22px;
  transition: color 0.2s ease;
}

.DanceTray__Btn:hover {
  color: #ff2fd6;
}

.DanceTray__Btn:active {
  border-style: inset;
}

.DanceTray__Hint {
  font-family: "m5x7";
  font-size: 24px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* .container > x vence o .container > * { position: relative } do global */
.container > .DanceBack {
  position: absolute;
  top: 24px;
  right: 20px;
  z-index: 6;
  font-family: "m5x7";
  font-size: 20px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  opacity: 0.75;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

@media (min-width: 600px) {
  .container > .DanceBack {
    right: 50px;
  }
}

.container > .DanceBack:hover {
  opacity: 1;
  color: #ff2fd6;
}

/* pendurado embaixo do container */
.container > .DanceTray__PinnedButtons {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  justify-content: center;
}

/* celular: só a pista (os gifs dela continuam arrastáveis) */
@media (max-width: 599px) {
  .DanceTray,
  .container > .DanceTray__PinnedButtons {
    display: none;
  }
}

.DanceTray__Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 8px;
  max-height: 110px;
  overflow-y: auto;
  padding: 8px;
  border: 2px outset var(--soft-yellow);
  background: rgba(0, 0, 0, 0.3);
  transition:
    box-shadow 0.15s ease,
    background 0.15s ease;
  scrollbar-color: #888 #000;
  scrollbar-width: thin;
}

.DanceTray__Grid::-webkit-scrollbar {
  width: 10px;
  border-radius: 0;
}

.DanceTray__Grid::-webkit-scrollbar-corner {
  background-color: #000;
  border-radius: 0;
}

.DanceTray__Grid::-webkit-scrollbar-track {
  background-color: #000;
  border-radius: 0;
}

.DanceTray__Grid::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 0;
}

/* dançarino arrastado de volta pra bandeja (soltar = remover) */
.DanceTray.is-drop-target .DanceTray__Grid {
  background: rgba(255, 47, 214, 0.15);
  box-shadow: 0 0 20px 4px rgba(255, 47, 214, 0.5) inset;
}

.DanceTray__Item {
  width: 82px;
  height: 82px;
  object-fit: contain;
  cursor: grab;
  background: rgba(255, 255, 255, 0.05);
  touch-action: none;
}

.DanceTray__Item:active {
  cursor: grabbing;
}

.DanceTray__Ghost {
  position: fixed;
  top: 0;
  left: 0;
  width: 82px;
  height: 82px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.DanceTray__Ghost.is-over-floor {
  filter: drop-shadow(0 0 12px #ff2fd6);
}