/* ==========================================================================
   01 · Cover
   Referensi: assets/image-reference/1.00 cover.png (frame 412 × 917)
   Urutan masuk (800ms per elemen, tumpang tindih):
   bunga 0ms → geometri 400ms → teks 800ms (nama per huruf) → clue scroll 1800ms
   ========================================================================== */

.cover {
  /* 20rem (320px) sesuai desain; mengecil di layar pendek supaya tidak menabrak teks */
  --flower-size: min(20rem, 100% - 2 * var(--gutter), 44svh);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem var(--gutter) 2.5rem;
}

/* --- Geometri kiri atas (bentuknya di components/geometry.css) -------- */

.cover__geometry {
  position: relative;
  z-index: 1;
}

/* --- Bunga matahari: selalu di tengah layar --------------------------- */

.cover__flower {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.cover__flower-bloom {
  width: var(--flower-size);
  aspect-ratio: 1;
}

/* Ukuran gambar mengikuti wadahnya, jadi bunga selalu tepat di tengah
   dan berputar pada titik pusatnya sendiri. */
.cover__flower img {
  width: 100%;
  height: 100%;
}

/* --- Sapaan + nama tamu ----------------------------------------------- */

.cover__guest {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  /* Sisakan ruang untuk clue scroll vertikal di kanan (lebar ±2.75rem dari tepi) */
  padding-right: max(0rem, 2.75rem - var(--gutter));
}

.cover__salutation {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.cover__guest-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9.95vw, 2.5625rem); /* ±2.56rem (41px) di frame 412 */
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* --- Clue scroll (tambahan, tidak ada di desain) ------------------------ */
/* Teks vertikal di tepi kanan, sejajar bawah nama tamu, panah mantul ke bawah.
   Ditap juga bisa: langsung pindah ke section berikutnya. */

.cover__scroll-hint {
  position: absolute;
  right: 0.75rem;
  bottom: 2.5rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  color: var(--color-ink);
}

.cover__scroll-text {
  writing-mode: vertical-rl;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.cover__scroll-arrow {
  font-size: 1.25rem;
  animation: scroll-nudge 1.2s var(--ease-snap) infinite;
  animation-play-state: paused;
}

.cover.is-active .cover__scroll-arrow {
  animation-play-state: running;
}

@keyframes scroll-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0.5rem);
  }
  60% {
    transform: translateY(0.375rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover__scroll-arrow {
    animation: none;
  }
}