:root{
  --cream:#f5efe6;
  --paper:#fbf6ec;
  --ink:#1a1410;
  --ink-soft:#3a2a1f;
  --gold:#c9a961;
  --rose:#b85450;
  --deep:#0f0a08;
  --tape:rgba(201,169,97,.45);
  --shadow:0 18px 40px -15px rgba(0,0,0,.35);
  --grid:rgba(26,20,16,.06);
}
html[data-theme="dark"]{
  --cream:#15110d;
  --paper:#1d1813;
  --ink:#f1e7d6;
  --ink-soft:#d8c9b0;
  --gold:#e0bf76;
  --rose:#e07b6e;
  --deep:#080604;
  --tape:rgba(224,191,118,.35);
  --shadow:0 18px 40px -10px rgba(0,0,0,.7);
  --grid:rgba(241,231,214,.06);
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--cream); color:var(--ink); font-family:'Cormorant Garamond', serif; transition:background .6s ease, color .6s ease;}
.font-display{ font-family:'Playfair Display', serif; }
.font-hand{ font-family:'Caveat', cursive; }
.font-marker{ font-family:'Permanent Marker', cursive; }
.font-sans{ font-family:'Inter', sans-serif; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--ink); color:var(--cream); padding:.6rem 1rem;
  font-family:'Inter',sans-serif; font-size:.75rem; letter-spacing:.2em;
}
.skip-link:focus{ left:8px; }

/* Performance: render off-screen sections lazily.
   Browsers will skip layout/paint for sections far from viewport. */
.cv-auto{
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* All <img> get smooth fade-in once loaded (used with [data-loaded]) */
img{ max-width:100%; height:auto; }
img.lazy-img{ opacity:0; transition:opacity .5s ease; background:color-mix(in oklab, var(--ink) 8%, var(--paper)); }
img.lazy-img[data-loaded="1"]{ opacity:1; }

/* ===== SCROLL PROGRESS ===== */
#progressBar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--rose), var(--gold));
  z-index:90;
}

/* ===== CHAPTER NAV ===== */
#chapterNav{
  position:fixed; right:1.2rem; top:50%; transform:translateY(-50%);
  z-index:55; display:flex; flex-direction:column; gap:.85rem;
}
#chapterNav a{
  width:10px; height:10px; border-radius:50%;
  background:transparent; border:1.5px solid var(--ink);
  opacity:.4; transition:all .3s ease; position:relative;
}
#chapterNav a:hover{ opacity:1; transform:scale(1.3); }
#chapterNav a.active{ background:var(--rose); border-color:var(--rose); opacity:1; transform:scale(1.4); }
#chapterNav a span{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.3em;
  white-space:nowrap; color:var(--ink); opacity:0;
  background:var(--paper); padding:4px 10px; transition:opacity .3s;
  text-transform:uppercase;
}
#chapterNav a:hover span, #chapterNav a:focus-visible span{ opacity:1; }

/* ===== TOP CONTROLS ===== */
.ctrl-btn{
  width:46px; height:46px; border-radius:999px;
  background:color-mix(in oklab, var(--ink) 85%, transparent);
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(10px); border:1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  cursor:pointer; transition:transform .3s; position:relative;
}
.ctrl-btn:hover{ transform:scale(1.1) rotate(-5deg); }
#controls{
  position:fixed; bottom:1.2rem; right:1.2rem; z-index:60;
  display:flex; flex-direction:column; gap:.6rem;
}
#audioBtn.playing .pulse{
  position:absolute; inset:-4px; border-radius:999px;
  border:1px solid var(--gold); animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(.9); opacity:.8; }
  100%{ transform:scale(1.5); opacity:0; }
}

#curtain{ position:fixed; inset:0; z-index:100; display:flex; pointer-events:auto; }
.curtain-half{
  width:50%; height:100%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 2px, transparent 2px 28px),
    linear-gradient(180deg,#7a0d0d 0%,#a01818 40%,#5c0808 100%);
  box-shadow: inset 0 0 120px rgba(0,0,0,0.6);
  transition: transform 2.4s cubic-bezier(.7,0,.3,1), filter 1s ease;
  position:relative; will-change: transform;
}
#curtain.closing .curtain-half{
  transition: transform 2.8s cubic-bezier(.22,.9,.27,1.02), filter 1.2s ease;
}
.curtain-half::after{
  content:""; position:absolute; top:0; bottom:0; width:40px;
  background:linear-gradient(90deg, rgba(0,0,0,.6), transparent);
}
.curtain-half.left::after{ right:-40px; transform:scaleX(-1); }
.curtain-half.right::after{ left:-40px; }
#curtain.open .curtain-half.left{ transform:translateX(-100%); }
#curtain.open .curtain-half.right{ transform:translateX(100%); }
#curtain.gone{ display:none; }

#curtainDim{
  position:fixed; inset:0; background:radial-gradient(ellipse at center, rgba(20,8,4,.55) 0%, rgba(0,0,0,.92) 100%);
  z-index:99; opacity:0; pointer-events:none;
  transition: opacity .9s ease;
  backdrop-filter: blur(0px);
}
#curtainDim.show{ opacity:1; backdrop-filter: blur(6px); }

#curtain.closing::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at top, rgba(255,210,140,.18), transparent 60%);
  animation: vignettePulse 2.6s ease-in-out;
}
@keyframes vignettePulse{ 0%{ opacity:0; } 30%{ opacity:1; } 100%{ opacity:0; } }

.curtain-content{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#f7e7c4; text-align:center;
  text-shadow:0 4px 30px rgba(0,0,0,.6); padding:2rem;
}
.open-btn{
  margin-top:2rem; padding:.9rem 2.5rem; border:1px solid #f7e7c4;
  letter-spacing:.4em; font-family:'Inter',sans-serif; font-size:.75rem;
  background:transparent; color:#f7e7c4; cursor:pointer;
  transition:all .4s ease;
}
.open-btn:hover{ background:#f7e7c4; color:#5c0808; letter-spacing:.6em; }
.open-btn:focus-visible{ outline:2px solid #f7e7c4; outline-offset:4px; }

.curtain-content > *{
  opacity:0; transform:translateY(24px); will-change:transform,opacity,filter;
  animation: ccIn 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
.curtain-content > *:nth-child(1){ animation-delay:.25s; }
.curtain-content > *:nth-child(2){ animation-delay:.55s; }
.curtain-content > *:nth-child(3){ animation-delay:.95s; }
.curtain-content > *:nth-child(4){ animation-delay:1.35s; }
.curtain-content > *:nth-child(5){ animation-delay:1.7s; }
@keyframes ccIn{ to{ opacity:1; transform:none; filter:none; } }
.curtain-content.exit > *{
  animation: ccOut .55s cubic-bezier(.6,0,.7,1) forwards !important;
  animation-delay: 0s !important;
}
.curtain-content.exit > *:nth-child(2){ animation-delay:.05s !important; }
.curtain-content.exit > *:nth-child(3){ animation-delay:.1s !important; }
.curtain-content.exit > *:nth-child(4){ animation-delay:.15s !important; }
.curtain-content.exit > *:nth-child(5){ animation-delay:.18s !important; }
@keyframes ccOut{ to{ opacity:0; transform:translateY(-24px) scale(.97); filter:blur(6px); } }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.stu:focus-visible, .sb-photo:focus-visible, .polaroid:focus-visible,
.gb-entry:focus-visible, button:focus-visible, a:focus-visible{
  outline:2px solid var(--rose); outline-offset:3px; border-radius:2px;
}

.sparkle{
  position:fixed; pointer-events:none; z-index:96; width:10px; height:10px;
  border-radius:50%; background:radial-gradient(circle, #fff, var(--gold) 60%, transparent 70%);
  animation: sparkleOut .9s ease-out forwards;
}
@keyframes sparkleOut{
  0%{ transform:translate(-50%,-50%) scale(.4); opacity:1; }
  100%{ transform:translate(var(--dx,0), var(--dy,0)) scale(1.4); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .floating-petal, .star, .shoot, .marquee-track, .trail-dot{ display:none !important; }
}

.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.2s ease, transform 1.2s ease; }
.reveal.in{ opacity:1; transform:none; }

.hero{
  min-height:100vh; position:relative; overflow:hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--gold) 18%, var(--cream)) 0%, var(--cream) 60%);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%);
}
.floating-petal{
  position:absolute; width:14px; height:14px; border-radius:50% 0;
  background:var(--rose); opacity:.6;
  animation: fall linear infinite; will-change: transform;
}
@keyframes fall{
  0%{ transform:translateY(-10vh) rotate(0); opacity:0; }
  10%{ opacity:.6; }
  100%{ transform:translateY(110vh) rotate(720deg); opacity:0; }
}
.scroll-indicator{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

.polaroid{
  background:#fff; padding:12px 12px 50px; box-shadow:var(--shadow);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.2);
  position:relative;
}
html[data-theme="dark"] .polaroid{ background:#f3eada; }
.polaroid:hover{ transform:translateY(-8px) rotate(0deg) scale(1.04); z-index:5; }
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:sepia(.1) saturate(.95); }
.polaroid .cap{ font-family:'Caveat',cursive; text-align:center; font-size:1.25rem; margin-top:8px; color:#3a2a1f; }
.polaroid::before{
  content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:80px; height:22px; background:var(--tape);
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}

.scrapbook{
  position:relative;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--rose) 8%, transparent), transparent 40%),
    radial-gradient(circle at 80% 90%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 40%),
    var(--paper);
}
.scrapbook::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in oklab, var(--ink) 8%, transparent) 31px 32px);
}
.sb-item{ position:relative; transition:transform .5s cubic-bezier(.2,.9,.3,1.2); }
.sb-item:hover{ transform:rotate(0deg) scale(1.05) translateY(-6px); z-index:10; }
.sb-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.sb-photo{ background:#fff; padding:10px; box-shadow:var(--shadow); cursor:pointer; }
html[data-theme="dark"] .sb-photo{ background:#f3eada; }
.sb-photo .lbl{ font-family:'Caveat',cursive; text-align:center; padding:6px 0 2px; color:#3a2a1f; font-size:1.1rem; }
.sb-tape{
  position:absolute; width:90px; height:24px; background:var(--tape);
  box-shadow:0 2px 6px rgba(0,0,0,.1); top:-10px; left:30%;
  transform:rotate(-8deg); pointer-events:none;
}
.sticky{
  background:#fff59a; padding:1.4rem; font-family:'Caveat',cursive;
  color:#3a2a1f; font-size:1.4rem; line-height:1.2;
  box-shadow:var(--shadow); transform:rotate(-4deg);
  transition:transform .4s ease;
}
.sticky:hover{ transform:rotate(0) scale(1.05); }
.sticky.pink{ background:#ffb8c1; }
.sticky.blue{ background:#b8e0ff; }
.sticky.green{ background:#c8f0c0; }
.doodle{
  position:absolute; font-family:'Permanent Marker',cursive;
  color:var(--rose); pointer-events:none; opacity:.7;
}

.tl-track{
  position:absolute; left:50%; top:0; bottom:0; width:3px;
  background:color-mix(in oklab, var(--gold) 25%, transparent);
  transform:translateX(-50%);
}
.tl-fill{
  position:absolute; left:50%; top:0; width:3px;
  background:linear-gradient(180deg, var(--rose), var(--gold));
  transform:translateX(-50%); height:0%;
  box-shadow: 0 0 20px var(--gold);
  transition: height .3s linear;
}
.tl-dot{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%; background:var(--cream);
  border:3px solid var(--gold); top:50%;
  transition: all .5s ease;
}
.tl-item.in .tl-dot{ background:var(--rose); border-color:var(--rose); box-shadow:0 0 0 8px color-mix(in oklab, var(--rose) 18%, transparent); }
.tl-card{
  background:var(--paper); padding:1.4rem; box-shadow:var(--shadow);
  border-top:3px solid var(--gold); position:relative;
  transition:transform .4s ease;
}
.tl-card:hover{ transform:translateY(-4px); }
.tl-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; margin-bottom:.8rem; }
.tl-card .arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:0; height:0; border:10px solid transparent;
}
.tl-card.left .arrow{ right:-20px; border-left-color:var(--paper); }
.tl-card.right .arrow{ left:-20px; border-right-color:var(--paper); }

.stu{ position:relative; cursor:pointer; transition:transform .4s ease; }
.stu:hover{ transform:translateY(-6px); }
.stu .frame{
  aspect-ratio:3/4; overflow:hidden; background:#222;
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); position:relative;
}
.stu img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) contrast(1.05); transition:filter .6s ease, transform .8s ease; }
.stu:hover img{ filter:none; transform:scale(1.05); }
.stu .frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6));
  opacity:0; transition:opacity .4s;
}
.stu:hover .frame::after{ opacity:1; }
.stu .name{ font-family:'Playfair Display',serif; font-size:.95rem; margin-top:.6rem; }

.quote-card{
  background:var(--paper); padding:2rem; box-shadow:var(--shadow);
  border-left:3px solid var(--gold); position:relative;
  transition:transform .4s ease;
}
.quote-card:hover{ transform:translateY(-4px); }
.quote-card::before{
  content:"\201C"; position:absolute; top:-20px; left:10px;
  font-family:'Playfair Display',serif; font-size:6rem; color:var(--gold); opacity:.5; line-height:1;
}

.ending{ background:radial-gradient(ellipse at center, #1a1410 0%, #050302 100%); color:#f5efe6; position:relative; overflow:hidden; }
.star{ position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; animation: twinkle 3s infinite ease-in-out; }
@keyframes twinkle{ 0%,100%{opacity:.2} 50%{opacity:1} }
.shoot{ position:absolute; width:120px; height:1px; background:linear-gradient(90deg, transparent, #fff); animation: shoot 4s linear infinite; opacity:0; }
@keyframes shoot{
  0%{ transform:translate(-100px,0) rotate(-20deg); opacity:0;}
  10%{opacity:1;}
  100%{ transform:translate(120vw, 30vh) rotate(-20deg); opacity:0;}
}

.marquee{ overflow:hidden; }
.marquee-track{ display:flex; gap:2rem; animation: scroll 40s linear infinite; will-change: transform; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

#modal,#lightbox,#guestbookModal{ position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:80; display:none;
  align-items:center; justify-content:center; padding:2rem; backdrop-filter:blur(8px);}
#modal.show,#lightbox.show,#guestbookModal.show{ display:flex; }
#modal .box,#guestbookModal .box{ background:var(--paper); color:var(--ink); max-width:480px; width:100%; padding:2rem; animation: pop .4s ease; }
@keyframes pop{ from{transform:scale(.9); opacity:0} to{transform:scale(1);opacity:1} }
#lightbox img{ max-width:90vw; max-height:80vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:pop .3s ease; }
#lightbox .lb-cap{ position:absolute; bottom:2rem; left:0; right:0; text-align:center; color:#f5efe6; font-family:'Caveat',cursive; font-size:1.5rem; padding:0 1rem;}
#lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); color:#fff; background:transparent; border:0;
  font-size:2.5rem; cursor:pointer; padding:1rem; opacity:.6; transition:opacity .3s;
}
#lightbox .lb-nav:hover{ opacity:1; }
#lightbox .lb-prev{ left:1rem;} #lightbox .lb-next{ right:1rem;}
#lightbox .lb-close{
  position:absolute; top:1.5rem; right:1.5rem; color:#fff; background:transparent; border:0;
  font-size:1.5rem; cursor:pointer;
}

.trail-dot{
  position:fixed; width:8px; height:8px; border-radius:50%;
  background:var(--rose); pointer-events:none; z-index:99;
  mix-blend-mode:multiply; opacity:.6;
  transition:transform .15s ease, opacity .8s ease;
}
html[data-theme="dark"] .trail-dot{ mix-blend-mode:screen; }

.gb-entry{
  background:#fff59a; padding:1rem 1.2rem; font-family:'Caveat',cursive;
  color:#3a2a1f; font-size:1.2rem; line-height:1.2; box-shadow:var(--shadow);
  word-break:break-word;
}
.gb-entry.pink{ background:#ffb8c1; } .gb-entry.blue{ background:#b8e0ff; } .gb-entry.green{ background:#c8f0c0; }
.gb-entry .who{ font-family:'Inter',sans-serif; font-size:.7rem; letter-spacing:.2em; opacity:.6; margin-top:.4rem; text-transform:uppercase;}

::selection{ background:var(--rose); color:var(--cream); }

.parallax{ will-change: transform; }

@media (max-width: 768px){
  #chapterNav{ display:none; }
  .trail-dot{ display:none; }
}

/* On touch / coarse pointer devices, no cursor trail (saves a lot of DOM churn) */
@media (hover:none){
  .trail-dot{ display:none !important; }
}

/* ===== DARK MODE FIXES — pastikan elemen tetap terlihat ===== */

/* Footer: selalu kontras (bg gelap + teks terang di kedua mode) */
.site-footer{
  background:#0f0a08;
  color:#f5efe6;
  opacity:.85;
}
html[data-theme="dark"] .site-footer{
  background:#000;
  color:#f1e7d6;
  border-top:1px solid rgba(224,191,118,.15);
}

/* Kartu di dark mode: tambahkan border halus supaya terpisah dari bg */
html[data-theme="dark"] .tl-card,
html[data-theme="dark"] .quote-card,
html[data-theme="dark"] #modal .box,
html[data-theme="dark"] #guestbookModal .box{
  border:1px solid rgba(224,191,118,.18);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.8);
}
html[data-theme="dark"] .tl-card.left .arrow{ border-left-color:var(--paper); filter:drop-shadow(1px 0 0 rgba(224,191,118,.18)); }
html[data-theme="dark"] .tl-card.right .arrow{ border-right-color:var(--paper); filter:drop-shadow(-1px 0 0 rgba(224,191,118,.18)); }

/* Tombol "TULIS PESAN" di dark mode: ink jadi terang, jadi balik warnanya */
html[data-theme="dark"] #openGuestbook{
  background:var(--rose);
  color:#fff;
}
html[data-theme="dark"] #openGuestbook:hover{
  background:var(--gold);
  color:var(--deep);
}

/* Chapter nav dot label: pastikan latar tidak menyatu dengan bg */
html[data-theme="dark"] #chapterNav a span{
  background:var(--paper);
  color:var(--ink);
  border:1px solid rgba(224,191,118,.2);
}

/* Tl-dot inner: di dark mode --cream ikut gelap, beri isi terang supaya kontras */
html[data-theme="dark"] .tl-dot{
  background:var(--paper);
}

/* Input di guestbook modal: border-current bisa pudar; pertegas */
html[data-theme="dark"] #gbName,
html[data-theme="dark"] #gbMsg{
  border-color:rgba(241,231,214,.4);
  color:var(--ink);
}
html[data-theme="dark"] #gbName::placeholder,
html[data-theme="dark"] #gbMsg::placeholder{
  color:rgba(241,231,214,.45);
}

/* Marquee teks tetap kontras di dark (rose jadi salmon terang -> pakai teks gelap) */
html[data-theme="dark"] .marquee{
  color:var(--deep) !important;
}

/* Hero subhead "2024 — 2026" & label kecil tracking pakai rose/gold sudah aman.
   Tapi opacity .60 pada label kecil di dark bisa terlalu pudar -> naikkan. */
html[data-theme="dark"] .opacity-60{ opacity:.78; }
html[data-theme="dark"] .opacity-70{ opacity:.85; }

/* Stu name & polaroid cap -> .polaroid .cap & .sb-photo .lbl pakai #3a2a1f (gelap)
   tapi background-nya juga #f3eada (krem) di dark, jadi sudah aman. Pastikan saja. */
html[data-theme="dark"] .polaroid .cap,
html[data-theme="dark"] .sb-photo .lbl{ color:#3a2a1f; }