/* =============================================
   memoryjar.css — memory jar page
   ============================================= */

/* --- single white card wraps everything --- */
.jar-page-card {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem 2rem 1.5rem;
}

/* --- page title --- */
.jar-title-section {
  text-align: center;
  margin-bottom: 1.25rem;
}

.jar-title-section h1 {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.jar-subtitle {
  font-size: 0.9rem;
  opacity: 0.65;
  margin: 0;
}

/* --- jar stage --- */
.jar-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem;
}

.jar-svg {
  width: 240px;
  max-width: 70vw;
  filter: drop-shadow(0 4px 12px rgba(255, 150, 200, 0.22));
  user-select: none;
}

@keyframes jar-shake {
  0%   { transform: rotate(0deg)  translateX(0);   }
  15%  { transform: rotate(-5deg) translateX(-5px); }
  30%  { transform: rotate(5deg)  translateX(5px);  }
  45%  { transform: rotate(-4deg) translateX(-4px); }
  60%  { transform: rotate(4deg)  translateX(3px);  }
  75%  { transform: rotate(-2deg) translateX(-2px); }
  90%  { transform: rotate(2deg)  translateX(1px);  }
  100% { transform: rotate(0deg)  translateX(0);   }
}

.jar-svg.shaking {
  animation: jar-shake 0.5s ease;
}

/* --- pull button --- */
.jar-btn {
  margin-top: 0.9rem;
  background: #ffd6ea;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.5rem;
  font-family: "Verdana", sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  color: #5a2040;
  transition: background 0.15s, transform 0.1s;
}

.jar-btn:hover    { background: #ffb8d9; }
.jar-btn:active   { transform: scale(0.96); }
.jar-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* --- note slot --- */
.note-slot {
  min-height: 0;
  padding: 0.75rem 0 0.5rem;
}

@keyframes unroll {
  0%   { transform: scaleY(0.02) translateY(-30px); opacity: 0;   }
  30%  { transform: scaleY(0.15) translateY(-10px); opacity: 0.4; }
  65%  { transform: scaleY(1.06) translateY(3px);   opacity: 1;   }
  82%  { transform: scaleY(0.97) translateY(-1px);  opacity: 1;   }
  100% { transform: scaleY(1)    translateY(0);     opacity: 1;   }
}

.note-paper {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
  padding: 1.1rem 1.3rem 0.9rem;
  width: 100%;
  box-sizing: border-box;
  transform-origin: top center;
  animation: unroll 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  border-top: 3px solid var(--note-color, #ffd6ea);
}

.note-text {
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0 0 0.85rem;
  color: #333;
}

.note-text a {
  color: #c0507a;
  text-decoration: underline dotted;
}

.note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: 0.6rem;
}

.note-alter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.note-pfp {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffd6ea;
  flex-shrink: 0;
}

.note-alter-name {
  font-size: 0.75rem;
  opacity: 0.65;
}

.note-date {
  font-size: 0.72rem;
  opacity: 0.45;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .jar-page-card { padding: 1.25rem 1rem; margin: 1rem auto; }
  .jar-svg { width: 190px; }
}