/* =====================================================================
   SURAT INTERAKTIF — amplop yang harus dibuka dulu
   ---------------------------------------------------------------------
   Keadaan diatur lewat kelas pada .letterbox:
     (bawaan)      surat tampil apa adanya — inilah yang dilihat
                   browser tanpa JavaScript
     .is-sealed    amplop tertutup, surat disembunyikan
     .is-breaking  segel patah / lilin padam
     .is-pulling   kertas naik keluar dari amplop
     .is-open      amplop menghilang, surat terbaca penuh
   ===================================================================== */

/* Tanpa JavaScript, panggungnya tidak pernah ditampilkan. */
.letterbox .lx-stage{display:none}
/* Harus 'flex', bukan 'block' — kalau block, penengahan dari
   align-items:center di bawah ikut hilang dan amplopnya menepi. */
.letterbox.is-sealed .lx-stage{display:flex}
.letterbox.is-sealed #lxLetter{display:none}

.lx-stage{
  display:flex;flex-direction:column;align-items:center;
  padding:18px 0 6px;
  perspective:1400px;
}

/* --------------------------------------------------------------
   Amplop
   -------------------------------------------------------------- */
.lx-env{
  position:relative;
  width:min(320px,86vw);
  aspect-ratio:3/2;
  border:0;padding:0;background:none;cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .6s ease,opacity .6s ease;
}
.lx-env:focus-visible{outline:3px solid var(--accent);outline-offset:8px;border-radius:12px}

/* Badan belakang — tempat kertas bersandar */
.lx-back{
  position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--accent) 82%,#fff),
    color-mix(in srgb,var(--accent) 58%,#fff));
  box-shadow:var(--shadow-md);
}

/* Kertas surat yang mengintip lalu naik keluar */
.lx-paper{
  position:absolute;left:9%;right:9%;top:8%;
  /* Ujung bawahnya harus tetap di dalam amplop (8% + 90% = 98%),
     kalau tidak kertasnya terlihat menjulur di bawah amplop. */
  height:90%;
  display:flex;flex-direction:column;justify-content:flex-start;gap:9px;
  padding:16px 15px;
  background:#fffdf8;border-radius:5px;
  box-shadow:0 -3px 14px rgba(90,40,60,.14);
  transform:translateY(0);
  transition:transform .85s cubic-bezier(.25,.9,.3,1);
  z-index:2;
}
.lx-paper i{
  display:block;height:5px;border-radius:3px;
  background:color-mix(in srgb,var(--accent) 22%,#e6dcd6);
}
.lx-paper i:nth-child(1){width:52%}
.lx-paper i:nth-child(2){width:92%}
.lx-paper i:nth-child(3){width:86%}
.lx-paper i:nth-child(4){width:94%}
.lx-paper i:nth-child(5){width:40%}

/* Kantong depan — menutupi bagian bawah kertas */
.lx-front{
  position:absolute;inset:0;border-radius:10px;z-index:3;
  background:linear-gradient(200deg,
    color-mix(in srgb,var(--accent) 74%,#fff),
    color-mix(in srgb,var(--accent) 92%,#000 4%));
  /* Sudut atasnya HARUS menyentuh 0%. Kalau dimulai dari 17%, ada dua
     celah segitiga di kiri-atas dan kanan-atas yang tidak tertutup
     penutup maupun kantong — dan kertas putih di belakangnya
     mengintip lewat situ, terlihat seperti baji putih besar. */
  clip-path:polygon(0 100%,0 0,50% 62%,100% 0,100% 100%);
}
/* Sedikit cahaya di tepi bawah supaya kantongnya tidak terlihat rata.
   (Percobaan sebelumnya memakai dua gradasi diagonal sebagai garis
   lipatan — di kotak yang tidak persegi, garisnya melebar jadi baji
   putih besar. Jangan diulang.) */
.lx-front::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(255,255,255,.14),transparent 42%);
}

/* Penutup atas */
.lx-flap{
  position:absolute;left:0;right:0;top:0;height:66%;z-index:4;
  background:linear-gradient(175deg,
    color-mix(in srgb,var(--accent) 52%,#fff),
    color-mix(in srgb,var(--accent) 78%,#fff));
  filter:drop-shadow(0 2px 3px rgba(90,40,60,.16));
  clip-path:polygon(0 0,100% 0,50% 94%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform .7s cubic-bezier(.5,-0.2,.3,1.2);
  backface-visibility:hidden;
}

/* --------------------------------------------------------------
   Segel lilin
   -------------------------------------------------------------- */
.lx-seal{
  position:absolute;left:50%;top:58%;z-index:6;
  width:58px;height:58px;translate:-50% -50%;
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb,var(--accent2) 70%,#fff),
    color-mix(in srgb,var(--accent) 88%,#3a0d1c));
  box-shadow:0 5px 14px rgba(90,30,50,.34),inset 0 -2px 6px rgba(0,0,0,.2);
  color:#fff;font-size:1.35rem;line-height:1;
  cursor:grab;touch-action:none;
  transition:transform .3s ease,opacity .45s ease;
}
.lx-seal.is-static{cursor:inherit}
.lx-seal-mark{pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.25)}
/* Panah kecil yang berdenyut, penanda arah geser */
.lx-seal-drag{
  position:absolute;left:100%;top:50%;translate:6px -50%;
  width:26px;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 70%,transparent);
  animation:lxNudge 1.6s ease-in-out infinite;
}
.lx-seal-drag::after{
  content:"";position:absolute;right:0;top:50%;
  width:8px;height:8px;translate:1px -50%;rotate:45deg;
  border-top:2px solid color-mix(in srgb,var(--accent) 70%,transparent);
  border-right:2px solid color-mix(in srgb,var(--accent) 70%,transparent);
}
@keyframes lxNudge{0%,100%{opacity:.25;translate:6px -50%}50%{opacity:.9;translate:12px -50%}}

.is-dragging .lx-seal{cursor:grabbing;transition:none}

/* Goyangan kecil saat pengunjung mengetuk, bukan menggeser */
.lx-seal.is-nudge{animation:lxSealNudge .5s ease}
@keyframes lxSealNudge{
  0%,100%{transform:none}
  30%{transform:translateX(14px) rotate(7deg)}
  60%{transform:translateX(-5px) rotate(-3deg)}
}

/* --------------------------------------------------------------
   Lilin
   -------------------------------------------------------------- */
.lx-candle{
  position:absolute;left:50%;top:56%;z-index:6;translate:-50% -50%;
  width:20px;height:74px;
}
.lx-wax{
  position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:6px;
  background:linear-gradient(90deg,#fff6f0,#f3ddd4 60%,#e6c9bf);
  box-shadow:0 4px 10px rgba(90,40,60,.25);
}
.lx-wick{position:absolute;left:50%;top:16px;translate:-50% 0;width:2px;height:8px;background:#4a3b33;border-radius:1px}
.lx-flame{
  position:absolute;left:50%;top:-4px;translate:-50% 0;
  width:16px;height:24px;
  background:radial-gradient(ellipse at 50% 72%,#fff3b0,#ffb703 55%,#f4791f);
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  filter:drop-shadow(0 0 10px rgba(255,170,40,.65));
  transform-origin:bottom center;
  animation:lxFlicker 1.1s ease-in-out infinite;
}
@keyframes lxFlicker{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12,.9) rotate(4deg)}}
.lx-smoke{
  position:absolute;left:50%;top:2px;translate:-50% 0;
  width:12px;height:26px;opacity:0;
  border-left:2px solid rgba(180,168,175,.75);
  border-radius:50%;
}
/* Nyala goyang waktu mikrofon menangkap tiupan */
.is-blowing .lx-flame{animation:lxBend .28s ease-in-out infinite}
@keyframes lxBend{0%,100%{transform:rotate(-26deg) scale(.9,1.05)}50%{transform:rotate(-40deg) scale(.7,1.1)}}

/* --------------------------------------------------------------
   Urutan gerakan
   -------------------------------------------------------------- */
/* 1 · segel patah / lilin padam */
.is-breaking .lx-seal{transform:translate(84px,26px) rotate(38deg);opacity:0}
.is-breaking .lx-seal-drag{display:none}
.is-breaking .lx-flame{opacity:0;transition:opacity .3s ease;animation:none}
.is-breaking .lx-smoke{animation:lxSmoke 1.3s ease-out both}
@keyframes lxSmoke{0%{opacity:0;transform:scale(.6)}30%{opacity:.85}100%{opacity:0;transform:translateY(-30px) scale(1.5)}}

/* 2 · penutup terbuka */
.is-breaking .lx-flap{transform:rotateX(-174deg)}

/* 3 · kertas naik keluar */
.is-pulling .lx-paper{transform:translateY(-64%)}

/* 4 · amplop menyingkir, surat tampil */
.is-open .lx-stage{
  animation:lxStageOut .55s ease forwards;
  pointer-events:none;
}
@keyframes lxStageOut{to{opacity:0;transform:translateY(-16px) scale(.94);height:0;padding:0;margin:0}}
.letterbox.is-open #lxLetter{
  display:block;
  animation:lxLetterIn .7s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes lxLetterIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

/* Surat difokuskan lewat skrip setelah amplopnya terbuka, supaya
   pembaca layar ikut berpindah. Cincin fokusnya tidak perlu terlihat. */
#lxLetter:focus{outline:none}

.lx-hint{
  margin:20px 0 0;text-align:center;
  font-size:.88rem;color:var(--ink-soft);
  min-height:1.4em;transition:color .25s ease;
}
.is-breaking /* Surat difokuskan lewat skrip setelah amplopnya terbuka, supaya
   pembaca layar ikut berpindah. Cincin fokusnya tidak perlu terlihat. */
#lxLetter:focus{outline:none}

.lx-hint{color:var(--accent);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .lx-env,.lx-paper,.lx-flap,.lx-seal,.lx-flame,.lx-smoke{transition:none;animation:none}
  .is-open .lx-stage{animation:none;display:none}
  .letterbox.is-open #lxLetter{animation:none}
}