@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Dancing+Script:wght@600&family=Libre+Baskerville:ital@0;1&display=swap');

:root {
  --primary-light: #ffffff;
  --primary-dark: #222222;
  --white: #efefef;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* Edge lama */
}

html::-webkit-scrollbar {
  display: none;                    /* Chrome, Edge, Safari */
}

/* ===== Header ===== */
#header {
  min-height: 100vh;
  min-height: 100svh;
  background-color: #F8F7F3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Navbar ===== */
.navbar {
  width: 100%;
  background-color: #4a000a;
}

.nav-container {
  max-width: none;
  padding: 0 40px;
}

.nav-links {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 20px 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.nav-links a:hover {
  color: #F8F7F3;
}

/* ===== Hero ===== */
.hero {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 60px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-text h1 {
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: clamp(70px, 10vw, 150px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: left;
  color: #8B3A4A;
}

.hero-text h1 span {
  display: block;
  opacity: 0;
}

.hero-text h1 span:nth-child(1) { margin-left: 1.05em; }   /* "Happy" di atas T */
.hero-text h1 span:nth-child(3) { margin-left: 0.7em; }    /* "My Love" di bawah R */

/* ===== Kue ===== */
.hero-cake {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.cake {
  width: 400px;
  height: auto;
  cursor: pointer;
  opacity: 0;
  transform-origin: bottom center;
}

.cake-hint {
  margin-top: 24px;
  font-family: 'Amatic SC', cursive;
  font-size: 32px;
  letter-spacing: 2px;
  color: #8B3A4A;
  opacity: 0;
}

/* ===== Choose Your Gift ===== */
#gift {
  display: none;                   /* tersembunyi dan tidak bisa di-scroll */
  min-height: 100vh;
  align-items: center;
  padding: 80px 0;
  background-color: #4a000a;       /* marun gelap */
  overflow-x: hidden;
}

#gift.unlocked {
  display: flex;                   /* tampil setelah kue diklik */
}

#gift h2 {
  font-family: 'Amatic SC', cursive;
  font-weight: 600;
  font-size: clamp(50px, 7vw, 90px);
  text-align: center;
  color: #ffffff;
  margin-bottom: 100px;
  position: relative;
  top: -60px;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.gift-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: transform 0.4s ease;
}

.gift-item:hover {
  transform: translateY(-14px) scale(1.06);
}

.gift-img {
  font-size: 150px;                /* ukuran emoji, ganti jika pakai gambar */
  line-height: 1;
}

.gift-img img {
  width: 220px;
  height: auto;
}

.gift-label {
  margin-top: 30px;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
}

/* Muncul satu per satu saat section terlihat */
#gift.show .gift-item {
  animation: fadeUp 1s ease forwards;
}

#gift.show .gift-item:nth-child(1) { animation-delay: 0.2s; }
#gift.show .gift-item:nth-child(2) { animation-delay: 0.5s; }
#gift.show .gift-item:nth-child(3) { animation-delay: 0.8s; }

/* ===== Keyframes umum ===== */
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-120px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(120px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

/* ===== Animasi hero ===== */
.hero-text h1 span:nth-child(1) {
  animation: slideFromLeft 2s ease forwards;
  animation-delay: 0.2s;
}

.hero-text h1 span:nth-child(2) {
  animation: slideFromRight 2s ease forwards;
  animation-delay: 1s;
}

.hero-text h1 span:nth-child(3) {
  animation: slideFromLeft 2s ease forwards;
  animation-delay: 1.8s;
}

.cake {
  animation:
    fadeUp 2s ease 1.5s forwards,
    wiggle 1s ease-in-out 3.5s infinite;
}

.cake-hint {
  animation: fadeUp 2s ease 3s forwards;
}

/* ===== Balon dan love melayang ke atas ===== */
.float-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
}

.float-item {
  position: absolute;
  bottom: -140px;
  animation: floatUp var(--dur) ease-in forwards;
}

@keyframes floatUp {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(var(--sway), -65vh) rotate(8deg);
  }
  100% {
    transform: translate(calc(var(--sway) * -1), -135vh) rotate(-8deg);
    opacity: 1;
  }
}

/* Balon */
.balloon {
  width: 50px;
  height: 62px;
  background-color: var(--color);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.balloon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 55px;
  background-color: #9a9a9a;
}

.balloon::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 10px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  transform: rotate(20deg);
}

/* Love */
.heart {
  font-size: var(--size);
  line-height: 1;
  color: var(--color);
}

/* ===== Kartu Pesan (modal) ===== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.65);   /* latar gelap di belakang kartu */
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding: 44px 48px;
  background-color: #8B3A4A;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Garis tipis putus-putus di dalam kartu */
.modal-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  pointer-events: none;
}

.modal-title {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 22px;
}

.modal-text {
  font-family: 'Libre Baskerville', serif;
  font-size: 15px;
  line-height: 1.75;
  text-align: justify;
  color: #ffffff;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.modal-close:hover {
  color: #ffffff;
}


@keyframes cardPop {
  from { opacity: 0; transform: translateY(90px) scale(0.6) rotate(-4deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes textUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Love melayang di belakang kartu */
.modal-hearts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.modal-heart {
  position: absolute;
  bottom: -50px;
  font-size: var(--size);
  line-height: 1;
  color: var(--color);
  opacity: 0;
  animation: modalHeartUp var(--dur) linear forwards;
}

@keyframes modalHeartUp {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translateY(-115vh) rotate(25deg); opacity: 0.8; }
}

/* ===== Animasi amplop pembuka pesan ===== */
.envelope {
  position: absolute;
  width: min(320px, 80vw);
  aspect-ratio: 3 / 2;
  perspective: 800px;
  pointer-events: none;
  opacity: 0;
}

.envelope > div {
  position: absolute;
}

.env-back {
  inset: 0;
  background-color: #6e2a38;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.env-letter {
  left: 9%;
  width: 82%;
  bottom: 8px;
  height: 75%;
  background-color: #F8F7F3;
  border-radius: 6px;
  z-index: 2;
}

.env-front {
  inset: 0;
  background-color: #a14a5c;
  border-radius: 8px;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
}

.env-flap {
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background-color: #b85a6e;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  z-index: 4;
}

.env-seal {
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  line-height: 1;
  color: #ffd6dd;
  z-index: 5;
}

/* Urutan animasi saat pesan dibuka */
.modal.open .envelope {
  animation:
    envPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both,   /* amplop muncul */
    envLeave 0.6s ease 1.8s forwards;                          /* amplop hilang */
}

.modal.open .env-flap {
  animation: flapOpen 0.7s ease 0.9s forwards;                 /* tutup terbuka */
}

.modal.open .env-seal {
  animation: sealFade 0.3s ease 0.9s forwards;                 /* segel hilang */
}

.modal.open .env-letter {
  animation: letterRise 0.7s ease 1.4s forwards;               /* surat naik */
}

@keyframes envPop {
  from { opacity: 0; transform: translateY(80px) scale(0.5) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes flapOpen {
  0%   { transform: rotateX(0deg);   z-index: 4; }
  49%  { z-index: 4; }
  50%  { z-index: 1; }
  100% { transform: rotateX(180deg); z-index: 1; }
}

@keyframes sealFade {
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
}

@keyframes letterRise {
  to { transform: translateY(-70px); }
}

@keyframes envLeave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(60px) scale(0.7); }
}

/* Kartu pesan muncul setelah amplop selesai */
.modal.open .modal-card {
  animation:
    cardPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 2s both,    /* muncul memantul */
    cardFloat 4s ease-in-out 2.9s infinite;                    /* lalu melayang pelan */
}

.modal.open .modal-title { animation: textUp 0.8s ease 2.6s both; }
.modal.open .modal-text  { animation: textUp 0.8s ease 2.9s both; }

/* ===== Tampilan HP ===== */
@media (max-width: 520px) {
  .modal-card { padding: 36px 24px; }
}

/* ===================== RESPONSIF ===================== */

/* Tablet dan laptop kecil */
@media (max-width: 1000px) {
  .nav-container { padding: 0 24px; }

  .hero { padding: 0 32px; gap: 24px; }
  .cake { width: min(400px, 38vw); }          /* kue mengecil mengikuti layar */

  #gift h2 { top: -30px; margin-bottom: 70px; }
  .gift-grid { gap: 24px; }
  .gift-img { font-size: 110px; }
  .gift-img img { width: 160px; }
  .gift-label { font-size: 40px; }
}

/* HP dan tablet kecil */
@media (max-width: 760px) {
  /* Navbar */
  .nav-container { padding: 0 16px; }
  .nav-links {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 16px 0;
    font-size: 14px;
  }

  /* Hero: teks di atas, kue di bawah */
  .hero {
    min-height: calc(100vh - 54px);
    min-height: calc(100svh - 54px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 32px 20px;
  }
  .hero-text h1 { font-size: clamp(56px, 17vw, 110px); letter-spacing: 2px; }
  .cake { width: min(320px, 72vw); }
  .cake-hint { margin-top: 16px; font-size: 26px; text-align: center; }

  /* Choose your gift: tiga pilihan tetap sebaris */
  #gift { min-height: 100vh; min-height: 100svh; padding: 60px 0; }
  #gift h2 { top: 0; margin-bottom: 40px; font-size: clamp(40px, 12vw, 64px); }
  .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .gift-img { font-size: 80px; }
  .gift-img img { width: 100px; }
  .gift-label { margin-top: 16px; font-size: 32px; letter-spacing: 1px; }
}

/* HP kecil */
@media (max-width: 520px) {
  .gift-img { font-size: 56px; }
  .gift-img img { width: 70px; }
  .gift-label { font-size: 22px; letter-spacing: 0.5px; }

  /* Kartu pesan */
  .modal { padding: 16px; }
  .modal-card { max-height: 86vh; max-height: 86svh; overflow-y: auto; }
  .modal-title { font-size: 16px; }
  .modal-text { font-size: 14px; text-align: left; }
  .modal-close { top: 10px; right: 12px; width: 40px; height: 40px; font-size: 32px; }
}

/* Layar sentuh: hindari efek hover yang "menempel" */
@media (hover: none) {
  .gift-item:hover { transform: none; }
}