/* =========================================================
   TOKEN — palet & tipografi
   ========================================================= */
:root{
  --navy-deep:  #0A1128;
  --navy:       #10193B;
  --navy-light: #1C2A57;
  --gold:       #C9A648;
  --gold-soft:  #E4D5A0;
  --off-white:  #F5F0E4;
  --off-white-dim: #B9B3A3;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
}

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

html{ scroll-behavior: smooth; }

body{
  position: relative;
  background: var(--navy-deep);
  color: var(--off-white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

section, footer{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
}

/* =========================================================
   DEKORASI LATAR — bintang berkedip & debu emas
   ========================================================= */
.bg-decoration{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,166,72,0.08), transparent 55%);
}

.stars{ position: absolute; inset: 0; }

.stars--small::before,
.stars--small::after,
.stars--gold::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
}

.stars--small::before{
  box-shadow:
    4vw 8vh 0 0 #F5F0E4, 15vw 4vh 0 0 #F5F0E4, 27vw 14vh 0 0 #F5F0E4,
    38vw 6vh 0 0 #F5F0E4, 49vw 18vh 0 0 #F5F0E4, 61vw 9vh 0 0 #F5F0E4,
    72vw 22vh 0 0 #F5F0E4, 84vw 12vh 0 0 #F5F0E4, 93vw 28vh 0 0 #F5F0E4,
    8vw 34vh 0 0 #F5F0E4, 20vw 41vh 0 0 #F5F0E4, 33vw 30vh 0 0 #F5F0E4,
    45vw 46vh 0 0 #F5F0E4, 57vw 38vh 0 0 #F5F0E4, 68vw 50vh 0 0 #F5F0E4,
    79vw 42vh 0 0 #F5F0E4, 90vw 55vh 0 0 #F5F0E4, 5vw 60vh 0 0 #F5F0E4,
    17vw 66vh 0 0 #F5F0E4, 29vw 58vh 0 0 #F5F0E4, 41vw 70vh 0 0 #F5F0E4,
    53vw 63vh 0 0 #F5F0E4, 64vw 74vh 0 0 #F5F0E4, 76vw 68vh 0 0 #F5F0E4,
    87vw 78vh 0 0 #F5F0E4, 11vw 84vh 0 0 #F5F0E4, 23vw 90vh 0 0 #F5F0E4,
    35vw 82vh 0 0 #F5F0E4, 47vw 94vh 0 0 #F5F0E4, 59vw 88vh 0 0 #F5F0E4,
    70vw 96vh 0 0 #F5F0E4, 82vw 90vh 0 0 #F5F0E4, 95vw 95vh 0 0 #F5F0E4;
  animation: twinkle 4.5s ease-in-out infinite;
}

.stars--small::after{
  box-shadow:
    10vw 5vh 0 0 #F5F0E4, 24vw 20vh 0 0 #F5F0E4, 36vw 11vh 0 0 #F5F0E4,
    50vw 25vh 0 0 #F5F0E4, 63vw 16vh 0 0 #F5F0E4, 75vw 30vh 0 0 #F5F0E4,
    88vw 20vh 0 0 #F5F0E4, 3vw 45vh 0 0 #F5F0E4, 18vw 52vh 0 0 #F5F0E4,
    31vw 48vh 0 0 #F5F0E4, 44vw 56vh 0 0 #F5F0E4, 56vw 44vh 0 0 #F5F0E4,
    69vw 60vh 0 0 #F5F0E4, 81vw 48vh 0 0 #F5F0E4, 92vw 65vh 0 0 #F5F0E4,
    6vw 72vh 0 0 #F5F0E4, 19vw 79vh 0 0 #F5F0E4, 32vw 75vh 0 0 #F5F0E4,
    46vw 86vh 0 0 #F5F0E4, 58vw 80vh 0 0 #F5F0E4, 71vw 92vh 0 0 #F5F0E4,
    84vw 84vh 0 0 #F5F0E4, 97vw 88vh 0 0 #F5F0E4;
  animation: twinkle 4.5s ease-in-out infinite 2.2s;
}

.stars--gold::before{
  width: 3px; height: 3px;
  box-shadow:
    9vw 15vh 0 0 #C9A648, 26vw 9vh 0 0 #C9A648, 42vw 24vh 0 0 #C9A648,
    60vw 13vh 0 0 #C9A648, 77vw 27vh 0 0 #C9A648, 14vw 40vh 0 0 #C9A648,
    35vw 55vh 0 0 #C9A648, 52vw 47vh 0 0 #C9A648, 71vw 58vh 0 0 #C9A648,
    88vw 42vh 0 0 #C9A648, 22vw 70vh 0 0 #C9A648, 48vw 78vh 0 0 #C9A648,
    65vw 85vh 0 0 #C9A648, 82vw 72vh 0 0 #C9A648, 5vw 92vh 0 0 #C9A648;
  animation: twinkle-gold 5.5s ease-in-out infinite 1s;
}

@keyframes twinkle{
  0%, 100%{ opacity: 0.15; }
  50%{ opacity: 0.9; }
}

@keyframes twinkle-gold{
  0%, 100%{ opacity: 0.25; }
  50%{ opacity: 0.75; }
}

.dust{
  position: absolute;
  width: 32vw;
  max-width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,166,72,0.16), transparent 70%);
  filter: blur(4px);
}

.dust--1{ top: -6vw; left: -6vw; animation: drift-1 34s ease-in-out infinite alternate; }
.dust--2{ bottom: 5vh; right: -8vw; animation: drift-2 40s ease-in-out infinite alternate; }
.dust--3{ top: 45vh; left: 40vw; animation: drift-3 46s ease-in-out infinite alternate; opacity: 0.7; }

@keyframes drift-1{ from{ transform: translate(0,0); } to{ transform: translate(4vw, 6vh); } }
@keyframes drift-2{ from{ transform: translate(0,0); } to{ transform: translate(-5vw, -4vh); } }
@keyframes drift-3{ from{ transform: translate(0,0); } to{ transform: translate(3vw, -5vh); } }

/* =========================================================
   Elemen dekoratif berulang (pembatas kecil bertema)
   ========================================================= */
.ornament{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto 1.25rem;
}

.ornament span{
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

.ornament i{
  font-style: normal;
  font-size: 0.85rem;
  color: var(--gold);
}

/* =========================================================
   BAGIAN 1 — HERO
   ========================================================= */
.hero{ flex-direction: column; text-align: center; }

.hero-inner{ max-width: 40rem; }

.hero-eyebrow{
  font-weight: 400;
  font-size: clamp(0.75rem, 1.6vw, 0.95rem);
  letter-spacing: 0.04em;
  color: var(--gold-soft);
  margin-bottom: 1.5rem;
}

.hero-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: 1.08;
  color: var(--off-white);
  text-wrap: balance;
}

.hero-title2{
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.6rem, 9vw, 3rem);
  line-height: 1.08;
  color: var(--off-white);
  text-wrap: balance;
}

.hero-paragraph{
  margin-top: 1.5rem;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--off-white-dim);
  font-weight: 300;
  max-width: 32rem;
  margin-inline: auto;
}

.scroll-cue{
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem;
}

.scroll-cue-line{
  display: block;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue-pulse 2.2s ease-in-out infinite;
}

@keyframes cue-pulse{
  0%, 100%{ opacity: 0.25; transform: scaleY(0.7); }
  50%{ opacity: 1; transform: scaleY(1); }
}

/* =========================================================
   Judul & sub-judul bersama
   ========================================================= */
.section-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  color: var(--off-white);
  text-align: center;
}

.section-sub{
  margin-top: 0.9rem;
  text-align: center;
  color: var(--off-white-dim);
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  margin-bottom: 3.5rem;
  max-width: 34rem;
  margin-inline: auto;
}

.reveal{
  width: 100%;
  max-width: 72rem;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* =========================================================
   BAGIAN 2 — AMPLOP INTERAKTIF
   ========================================================= */
.envelope-section{ flex-direction: column; }

.envelope-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1400px;
}

.envelope{
  position: relative;
  width: min(320px, 82vw);
  aspect-ratio: 3 / 2;
  cursor: pointer;
}

.envelope:focus-visible{ outline: 2px solid var(--gold); outline-offset: 6px; }

.env-back{
  position: absolute; inset: 0;
  background: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 3px;
  z-index: 1;
}

.env-front{
  position: absolute; inset: 0;
  background: var(--navy-light);
  clip-path: polygon(0 100%, 100% 100%, 50% 42%);
  border-radius: 0 0 3px 3px;
  z-index: 3;
}

.env-flap{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 58%;
  background: linear-gradient(160deg, var(--navy-light), var(--navy));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.85s cubic-bezier(.62,.06,.36,1), z-index 0s 0.4s;
  z-index: 4;
  border-top: 1px solid var(--gold);
}

.env-seal{
  position: absolute;
  top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--navy-deep);
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  z-index: 5;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.env-card{
  position: absolute;
  left: 50%;
  top: 46%;
  width: 88%;
  max-height: min(58vh, 420px);
  transform: translate(-50%, 0) scale(0.96);
  background: var(--off-white);
  color: var(--navy-deep);
  border-radius: 2px;
  padding: 1.8rem 1.5rem 1.6rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0;
  z-index: 0;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1) 0.25s,
              opacity 0.6s ease 0.25s,
              z-index 0s 0.25s;
}

.env-card-quote{
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--gold);
  line-height: 0.4;
  margin-bottom: 0.6rem;
}

.env-card-scroll{
  max-height: calc(min(58vh, 420px) - 5rem);
  overflow-y: auto;
  padding-right: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.env-card-scroll::-webkit-scrollbar{ width: 4px; }
.env-card-scroll::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 4px; }

.env-card-text{
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 2.2vw, 1.12rem);
  line-height: 1.6;
  text-align: left;
}

.env-card-sign{
  margin-top: 1.2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--navy-light);
  text-align: right;
}

.envelope.is-open .env-flap{
  transform: rotateX(180deg);
  z-index: 1;
  transition: transform 0.85s cubic-bezier(.62,.06,.36,1), z-index 0s 0s;
}

.envelope.is-open .env-seal{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
}

.envelope.is-open .env-card{
  transform: translate(-50%, -60%) scale(1);
  opacity: 1;
  z-index: 6;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1) 0.35s,
              opacity 0.7s ease 0.35s,
              z-index 0s 0.35s;
}

.envelope-hint{
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--off-white-dim);
}

/* =========================================================
   BAGIAN 3 — FOTO SPESIAL & PESAN PENUTUP
   ========================================================= */
.special-photo-section{ flex-direction: column; }

.photo-showcase{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: 3rem;
}

.photo-frame{
  flex: 0 1 340px;
  width: min(340px, 82vw);
  padding: 0.6rem;
  background: linear-gradient(160deg, var(--navy-light), var(--navy));
  border: 1px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}

.photo-frame-mat{ padding: 0.9rem; background: var(--off-white); }

.photo-frame-img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.photo-caption{
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--gold-soft);
}

.closing-message{
  flex: 1 1 320px;
  max-width: 30rem;
}

.closing-message p{
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: var(--off-white-dim);
  margin-bottom: 1.1rem;
}

.closing-message-final{
  color: var(--off-white) !important;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.3vw, 1.25rem) !important;
}

/* =========================================================
   BAGIAN 4 — MUSIC PLAYER / FOOTER
   ========================================================= */
.player-section{ flex-direction: column; padding-bottom: 5rem; }

.player-label{
  text-align: center;
  color: var(--off-white-dim);
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  margin-bottom: 2.25rem;
}

.player{
  width: min(420px, 90vw);
  margin: 0 auto;
  background: linear-gradient(165deg, var(--navy-light), var(--navy));
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

.player-info{ text-align: center; margin-bottom: 1.25rem; }

.player-track-title{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  color: var(--off-white);
}

.player-track-artist{
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--off-white-dim);
}

.player-progress{
  height: 3px;
  border-radius: 2px;
  background: rgba(245,240,228,0.15);
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.player-progress-fill{
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.15s linear;
}

.player-time{
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--off-white-dim);
  margin-bottom: 1.5rem;
}

.player-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.player-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-soft);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.player-btn:hover{ background: rgba(201,166,72,0.12); transform: translateY(-1px); }
.player-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.player-btn--main{
  width: 3.4rem;
  height: 3.4rem;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
}

.player-btn--main:hover{ background: var(--gold-soft); }

.footer-credit{
  margin-top: 3rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--off-white-dim);
  opacity: 0.7;
}

/* =========================================================
   Tablet & mobile
   ========================================================= */
@media (max-width: 640px){
  section, footer{ padding: 4.5rem 1.25rem; }
  .photo-showcase{ flex-direction: column; }
  .closing-message{ text-align: center; }
}

/* =========================================================
   Preferensi gerak berkurang
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal, .env-flap, .env-card, .env-seal, .scroll-cue-line,
  .stars--small::before, .stars--small::after, .stars--gold::before,
  .dust--1, .dust--2, .dust--3{
    transition: none !important;
    animation: none !important;
  }
}