/* ==========================================================
   POTINHO: pote de vidro com motivos dobrados
   ========================================================== */

.potinho {
  display: grid;
  gap: 1.6rem;
  justify-items: center;
}

.potinho__esquerda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.potinho__pote {
  position: relative;
  width: min(62vw, 230px);
  border-radius: 24px;
}

.pote { width: 100%; height: auto; overflow: visible; }

.pote__vidro {
  fill: rgba(255, 255, 255, .28);
  stroke: rgba(39, 71, 163, .32);
  stroke-width: 2.5;
}

.pote__brilho {
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 6;
  stroke-linecap: round;
}

.potinho__pote:hover .pote { transform: rotate(-2deg); }
.pote { transition: transform .25s ease; }

.balancando .pote { animation: pote-balanca .5s ease; }

@keyframes pote-balanca {
  25% { transform: rotate(-5deg); }
  60% { transform: rotate(4deg); }
}

/* o papelzinho que sai voando do pote */
.potinho__voador {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 34px;
  height: 18px;
  margin-left: -17px;
  border-radius: 2px;
  background: var(--cor);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
  animation: papel-voa .55s cubic-bezier(.3, .7, .4, 1) forwards;
}

@keyframes papel-voa {
  to { transform: translate(30px, -120px) rotate(200deg) scale(1.3); opacity: 0; }
}

.potinho__contador { text-align: center; }

.potinho__bilhete {
  width: 100%;
  max-width: 24rem;
  min-height: 9rem;
  display: grid;
  align-items: center;
}

.potinho__vazio { text-align: center; font-size: .95rem; opacity: .75; }

.potinho__papel {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .05), transparent 18%, transparent 48%, rgba(0, 0, 0, .06) 50%, transparent 54%),
    var(--cor, #fff1a3);
  border-radius: 3px;
  box-shadow: var(--sombra-papel);
  transform-origin: 50% 0;
  animation: desdobrar .7s cubic-bezier(.3, .7, .3, 1.15) both;
}

.potinho__papel .mao { font-size: clamp(1.05rem, 4.6vw, 1.2rem); line-height: 1.85; color: var(--caneta); }
.potinho__papel .dica { margin-top: .6rem; color: var(--tinta-suave); }

@keyframes desdobrar {
  from { opacity: 0; transform: perspective(600px) rotateX(-75deg) scaleY(.4); }
  60% { opacity: 1; }
  to { transform: perspective(600px) rotateX(0) rotate(-1deg); }
}

@media (min-width: 720px) {
  .potinho { grid-template-columns: auto 1fr; align-items: center; gap: 3rem; }
}