/* ===== Halaman Memories ===== */
body.memories-page {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #4a000a;       /* merah maroon */
  background-image: radial-gradient(circle at 50% 0%, #6b0f1f 0%, #4a000a 55%, #2d0006 100%);
  background-attachment: fixed;
}

.memories {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 24px 90px;
  text-align: center;
}

.memories-title {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: clamp(54px, 7vw, 88px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffffff;
}

.memories-sub {
  margin-top: 6px;
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

/* ===== Susunan polaroid ===== */
.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 250px));
  justify-content: center;
  gap: 48px 36px;
  width: 100%;
  margin-top: 56px;
}

.polaroid {
  width: 100%;
  padding: 14px 14px 0;
  background-color: #F8F7F3;       /* krem, sama dengan homepage */
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--r));     /* kemiringan tiap polaroid */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  outline: none;
  animation: polaroidDrop 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) calc(var(--i) * 0.1s + 0.2s) backwards;
}

.polaroid:hover,
.polaroid:focus-visible {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55);
}

.polaroid.revealed {
  cursor: default;
}

/* Jatuh bergantian saat halaman dibuka */
@keyframes polaroidDrop {
  from {
    opacity: 0;
    transform: translateY(-70px) rotate(calc(var(--r) * 3)) scale(0.9);
  }
}

/* ===== Area foto ===== */
.polaroid-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(145deg, #8B3A4A, #4a000a);   /* tampil kalau foto belum ada */
}

.polaroid-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) brightness(0.45) sepia(0.7);          /* kondisi "belum dicuci" */
  transform: scale(1.12);
  transition: filter 2.4s ease, transform 2.4s ease;
}

.polaroid.revealed .polaroid-photo img {
  filter: none;                                            /* foto jernih */
  transform: scale(1);
}

/* Lapisan penutup */
.cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  background-color: rgba(60, 0, 14, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.cover-icon {
  font-size: 46px;
  line-height: 1;
}

.cover-text {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.polaroid.revealed .cover {
  opacity: 0;
  visibility: hidden;
}

/* Tulisan di bawah foto */
.polaroid-caption {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 2px;
  color: #8B3A4A;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease 0.8s, transform 1s ease 0.8s;   /* muncul setelah foto mulai jernih */
}

.polaroid.revealed .polaroid-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Penghitung ===== */
.memories-progress {
  margin-top: 56px;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.memories-end {
  margin-top: 8px;
  min-height: 24px;
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 15px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.memories-end.show {
  opacity: 1;
}

/* ===== Tombol kembali ke gift ===== */
.memories-back {
  margin-top: 28px;
  padding: 8px 34px;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: #8B3A4A;
  background-color: #F8F7F3;
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;              /* tersembunyi dan tidak bisa diklik sampai 12/12 */
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease, visibility 0.9s ease;
}

.memories-back.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.memories-back.show:hover {
  transform: scale(1.08);
}

/* ===== Responsif ===== */
@media (max-width: 1240px) {
  .polaroid-grid { grid-template-columns: repeat(3, minmax(0, 260px)); }
}

@media (max-width: 900px) {
  .polaroid-grid { grid-template-columns: repeat(2, minmax(0, 260px)); gap: 44px 30px; }
}

/* HP: dua kolom, polaroid lebih kecil */
@media (max-width: 600px) {
  .memories { padding: 32px 16px 60px; }
  .memories-title { font-size: clamp(40px, 12vw, 64px); }
  .memories-sub { font-size: 13px; }

  .polaroid-grid { gap: 30px 14px; margin-top: 36px; }
  .polaroid { padding: 8px 8px 0; }

  .cover-icon { font-size: 30px; }
  .cover-text { font-size: 18px; letter-spacing: 2px; }

  .polaroid-caption {
    height: 44px;
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: 1px;
    text-align: center;
  }

  .memories-progress { margin-top: 36px; font-size: 24px; }
  .memories-back { font-size: 24px; padding: 8px 28px; }
}

@media (hover: none) {
  .polaroid:hover { transform: rotate(var(--r)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid { animation: none; }
  .polaroid-photo img { transition: none; }
}