/* =====================================================================
   TTEnvelope — gate amplop empat sisi (Tito & Tari)
   Ketuk amplop → segel terangkat → sisi atas, bawah, kiri, kanan
   berayun keluar (3D) → kartu undangan naik dari dalam.

   Semua durasi & jeda dikalikan --k (tempo):
     1   = sedang        (±2 detik)
     1.5 = lambat        (±3 detik)  ← bawaan
     2   = sangat lambat (±4 detik)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Dasar & token
   --------------------------------------------------------------------- */
.tt-env {
  --k: 1.5;
  --swing: cubic-bezier(.6, 0, .22, 1);   /* ayunan sisi amplop */
  --ease: cubic-bezier(.22, 1, .36, 1);   /* kurva utama Tito & Tari */
  --seal: clamp(96px, min(31.8vw, 15.5vh), 132px);
  --cx: 50%;                              /* titik temu keempat sisi */
  --cy: 45.02%;
  --env-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --env-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--env-lining);
  color: var(--env-text);
  font-family: var(--env-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 1s var(--ease), visibility 1s;
}
.tt-env[hidden] { display: none; }
.tt-env:focus { outline: none; }
.tt-env *,
.tt-env *::before,
.tt-env *::after { box-sizing: border-box; }
.tt-env.is-leaving { opacity: 0; visibility: hidden; }
.tt-env.is-instant,
.tt-env.is-instant * { transition: none !important; }

html.tt-env-locked,
html.tt-env-locked body { overflow: hidden; }

/* ---------------------------------------------------------------------
   2. Palet warna (ganti dengan opsi `palette` atau kelas)
   --------------------------------------------------------------------- */
.tt-env,
.tt-env--hutan {
  --env-top: #2B3C32;
  --env-side: #223129;
  --env-bottom: #1C2A22;
  --env-back: #34483C;            /* sisi dalam kertas amplop */
  --env-lining: #111915;          /* bagian dalam amplop */
  --env-lining-pat: rgba(255, 255, 255, .045);
  --env-hi: rgba(255, 255, 255, .12);   /* sorotan motif timbul */
  --env-lo: rgba(0, 0, 0, .42);         /* bayangan motif timbul */
  --env-text: #D9C59B;
  --env-text-muted: rgba(217, 197, 155, .74);
  --env-wax: #CDB487;
  --env-wax-dark: #8F774C;
  --env-wax-hi: #FFF6E0;
  --env-gloss: rgba(255, 250, 235, .55);
  --env-acc: #3D5A45;             /* warna tombol & aksen kartu */
  --env-acc-soft: rgba(61, 90, 69, .35);
  --env-focus: #E2D3B0;
}
.tt-env--anggur {
  --env-top: #7B3B42;
  --env-side: #521F25;
  --env-bottom: #4A1B21;
  --env-back: #B98184;
  --env-lining: #2A0E12;
  --env-lining-pat: rgba(255, 255, 255, .05);
  --env-hi: rgba(255, 255, 255, .13);
  --env-lo: rgba(0, 0, 0, .4);
  --env-text: #F0DCCF;
  --env-text-muted: rgba(240, 220, 207, .76);
  --env-wax: #E7D6CB;
  --env-wax-dark: #A88B7B;
  --env-wax-hi: #FFFFFF;
  --env-gloss: rgba(255, 255, 255, .6);
  --env-acc: #6E2A31;
  --env-acc-soft: rgba(110, 42, 49, .35);
  --env-focus: #F0DCCF;
}
.tt-env--marun {                  /* marun dengan aksen emas */
  --env-top: #7A1F2B;
  --env-side: #5E1520;
  --env-bottom: #561320;
  --env-back: #9C4A54;
  --env-lining: #2B0B11;
  --env-lining-pat: rgba(216, 182, 106, .06);
  --env-hi: rgba(255, 255, 255, .12);
  --env-lo: rgba(0, 0, 0, .42);
  --env-text: #E3C98E;
  --env-text-muted: rgba(227, 201, 142, .78);
  --env-wax: #D4B062;
  --env-wax-dark: #8E6E2E;
  --env-wax-hi: #FFF4D6;
  --env-gloss: rgba(255, 246, 220, .55);
  --env-acc: #7A1F2B;
  --env-acc-soft: rgba(122, 31, 43, .35);
  --env-focus: #E3C98E;
}
.tt-env--pasir {
  --env-top: #DCCFB6;
  --env-side: #D0C1A5;
  --env-bottom: #C8B898;
  --env-back: #E9E0CD;
  --env-lining: #A8977A;
  --env-lining-pat: rgba(255, 255, 255, .18);
  --env-hi: rgba(255, 255, 255, .6);
  --env-lo: rgba(90, 70, 40, .3);
  --env-text: #2E4535;
  --env-text-muted: rgba(46, 69, 53, .8);
  --env-wax: #4E6B53;
  --env-wax-dark: #24372A;
  --env-wax-hi: rgba(255, 255, 255, .55);
  --env-gloss: rgba(255, 255, 255, .35);
  --env-acc: #3D5A45;
  --env-acc-soft: rgba(61, 90, 69, .35);
  --env-focus: #2E4535;
}
/* Palet putih — kertas amplop putih, teks & segel lilin navy (tema "Putih & Navy") */
.tt-env--putih {
  --env-top: #FFFFFF;
  --env-side: #F3F5F9;
  --env-bottom: #F8F9FC;
  --env-back: #E8EDF5;
  --env-lining: #DDE3EE;
  --env-lining-pat: rgba(59, 18, 24, .06);
  --env-hi: rgba(255, 255, 255, .95);
  --env-lo: rgba(59, 18, 24, .13);
  --env-text: #3B1218;
  --env-text-muted: rgba(59, 18, 24, .62);
  --env-wax: #7A1F2B;
  --env-wax-dark: #2B0B11;
  --env-wax-hi: rgba(255, 255, 255, .5);
  --env-gloss: rgba(255, 255, 255, .38);
  --env-acc: #7A1F2B;
  --env-acc-soft: rgba(122, 31, 43, .35);
  --env-focus: #7A1F2B;
}
.tt-env--putih .tt-env__flap--top .tt-env__face--front { filter: drop-shadow(0 8px 14px rgba(59, 18, 24, .14)); }
.tt-env--putih .tt-env__flap--bottom .tt-env__face--front { filter: drop-shadow(0 -6px 12px rgba(59, 18, 24, .1)); }
.tt-env--putih .tt-env__flap--left .tt-env__face--front { filter: drop-shadow(6px 0 12px rgba(59, 18, 24, .1)); }
.tt-env--putih .tt-env__flap--right .tt-env__face--front { filter: drop-shadow(-6px 0 12px rgba(59, 18, 24, .1)); }
.tt-env--putih .tt-env__card { box-shadow: 0 30px 60px rgba(59, 18, 24, .18); }
.tt-env--putih .tt-env__seal svg { filter: drop-shadow(0 10px 14px rgba(59, 18, 24, .3)); }

/* ---------------------------------------------------------------------
   3. Lapisan dalam + definisi motif
   --------------------------------------------------------------------- */
.tt-env__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.tt-env__lining {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.tt-env__pat { stroke: var(--env-lining-pat); }
.tt-env__hi { stroke: var(--env-hi); }
.tt-env__lo { stroke: var(--env-lo); }

/* ---------------------------------------------------------------------
   4. Kartu undangan (muncul dari dalam amplop)
   --------------------------------------------------------------------- */
.tt-env__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tt-env__card {
  width: min(334px, 100%);
  margin: auto;
  padding: 34px 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  color: #3B1218;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(56px) scale(.94);
  transition:
    transform calc(.95s * var(--k)) var(--ease) calc(1.05s * var(--k)),
    opacity calc(.7s * var(--k)) ease calc(1.05s * var(--k)),
    visibility 0s linear calc(1.05s * var(--k));
}
.tt-env.is-opening .tt-env__card {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.tt-env__arch {
  width: 76px;
  height: 100px;
  padding: 5px;
  display: flex;
  border: 1px solid var(--env-acc);
  border-radius: 38px 38px 4px 4px;
}
.tt-env__arch-in {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  border: 1px solid var(--env-acc-soft);
  border-radius: 33px 33px 2px 2px;
  font-family: var(--env-serif);
  font-style: italic;
  line-height: 1;
  color: var(--env-acc);
}
.tt-env__arch-l { font-size: 30px; }
.tt-env__arch-amp { font-size: 15px; margin: 0 2px; padding-top: 7px; }
.tt-env__eyebrow {
  margin: 22px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--env-acc);
}
.tt-env__names {
  margin: 10px 0 0;
  font-family: var(--env-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.tt-env__date {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6B4A4E;
}
.tt-env__rule {
  width: 40px;
  height: 1px;
  margin: 22px 0;
  background: rgba(59, 18, 24, .2);
}
.tt-env__to {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B4A4E;
}
.tt-env__guest {
  margin: 8px 0 0;
  font-family: var(--env-serif);
  font-size: 28px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.tt-env__note {
  margin: 8px 0 0;
  max-width: 250px;
  font-size: 13px;
  line-height: 1.5;
  color: #6B4A4E;
}
.tt-env__cta {
  margin-top: 24px;
  min-height: 48px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--env-acc);
  color: #FFFFFF;
  font-family: var(--env-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s var(--ease), filter .25s;
}
.tt-env__cta:active { transform: scale(.97); }
.tt-env__cta:focus-visible { outline: 2px solid #3B1218; outline-offset: 3px; }
.tt-env.is-pointer .tt-env__cta:focus-visible { outline: none; }  /* dibuka dengan sentuh/klik */
@media (hover: hover) { .tt-env__cta:hover { filter: brightness(.88); } }

/* ---------------------------------------------------------------------
   5. Empat sisi amplop (3D)
   Urutan tumpukan di DOM: kiri, kanan, bawah, atas.
   --------------------------------------------------------------------- */
.tt-env__flaps {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1400px;
  perspective-origin: var(--cx) var(--cy);
  pointer-events: none;
}
.tt-env__flap {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform calc(1.15s * var(--k)) var(--swing) calc(var(--d) * var(--k));
}
.tt-env__flap--top { --d: .25s; transform-origin: 50% 0; transform: rotateX(0deg); }
.tt-env__flap--bottom { --d: .45s; transform-origin: 50% 100%; transform: rotateX(0deg); }
.tt-env__flap--left { --d: .62s; transform-origin: 0 50%; transform: rotateY(0deg); }
.tt-env__flap--right { --d: .62s; transform-origin: 100% 50%; transform: rotateY(0deg); }

.tt-env.is-opening .tt-env__flap--top { transform: rotateX(180deg); }
.tt-env.is-opening .tt-env__flap--bottom { transform: rotateX(-180deg); }
.tt-env.is-opening .tt-env__flap--left { transform: rotateY(-180deg); }
.tt-env.is-opening .tt-env__flap--right { transform: rotateY(180deg); }

.tt-env__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity calc(.45s * var(--k)) ease calc((var(--d) + .72s) * var(--k));
}
.tt-env.is-opening .tt-env__face { opacity: 0; }
.tt-env__flap--top .tt-env__face--back,
.tt-env__flap--bottom .tt-env__face--back { transform: rotateX(180deg); }
.tt-env__flap--left .tt-env__face--back,
.tt-env__flap--right .tt-env__face--back { transform: rotateY(180deg); }

/* Bayangan mengikuti bentuk sisi (filter di induk, clip di anak) */
.tt-env__flap--top .tt-env__face--front { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .38)); }
.tt-env__flap--bottom .tt-env__face--front { filter: drop-shadow(0 -6px 12px rgba(0, 0, 0, .3)); }
.tt-env__flap--left .tt-env__face--front { filter: drop-shadow(6px 0 12px rgba(0, 0, 0, .32)); }
.tt-env__flap--right .tt-env__face--front { filter: drop-shadow(-6px 0 12px rgba(0, 0, 0, .32)); }

.tt-env__paper {
  position: absolute;
  inset: 0;
}
.tt-env__emboss {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Bentuk sisi — ujung membulat di titik temu (cx 50%, cy ±45%) */
.tt-env__flap--top .tt-env__face--front .tt-env__paper {
  background: var(--env-top);
  clip-path: polygon(0 0, 100% 0, 53.85% 45.73%, 51.92% 46.45%, 50% 46.68%, 48.08% 46.45%, 46.15% 45.73%);
}
.tt-env__flap--top .tt-env__face--back .tt-env__paper {
  background: var(--env-back);
  clip-path: polygon(0 100%, 100% 100%, 53.85% 54.27%, 51.92% 53.55%, 50% 53.32%, 48.08% 53.55%, 46.15% 54.27%);
}
.tt-env__flap--bottom .tt-env__face--front .tt-env__paper {
  background: var(--env-bottom);
  clip-path: polygon(0 100%, 46.15% 46.92%, 48.08% 45.94%, 50% 45.62%, 51.92% 45.94%, 53.85% 46.92%, 100% 100%);
}
.tt-env__flap--bottom .tt-env__face--back .tt-env__paper {
  background: var(--env-back);
  clip-path: polygon(0 0, 46.15% 53.08%, 48.08% 54.06%, 50% 54.38%, 51.92% 54.06%, 53.85% 53.08%, 100% 0);
}
.tt-env__flap--left .tt-env__face--front .tt-env__paper,
.tt-env__flap--right .tt-env__face--back .tt-env__paper {
  clip-path: polygon(0 0, 50.77% 42.89%, 52.31% 43.96%, 52.82% 45.02%, 52.31% 46.09%, 50.77% 47.16%, 0 100%);
}
.tt-env__flap--right .tt-env__face--front .tt-env__paper,
.tt-env__flap--left .tt-env__face--back .tt-env__paper {
  clip-path: polygon(100% 0, 49.23% 42.89%, 47.69% 43.96%, 47.18% 45.02%, 47.69% 46.09%, 49.23% 47.16%, 100% 100%);
}
.tt-env__flap--left .tt-env__face--front .tt-env__paper,
.tt-env__flap--right .tt-env__face--front .tt-env__paper { background: var(--env-side); }
.tt-env__flap--left .tt-env__face--back .tt-env__paper,
.tt-env__flap--right .tt-env__face--back .tt-env__paper { background: var(--env-back); }

/* Teks pada sisi amplop */
.tt-env__label {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tt-env__label--top { top: 11.8%; }
.tt-env__label--bottom { bottom: 13.6%; }   /* tumbuh ke atas bila nama tamu panjang */
.tt-env__label-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--env-text-muted);
}
.tt-env__label-names {
  margin: 10px 0 0;
  font-family: var(--env-serif);
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--env-text);
}
.tt-env__label-guest {
  margin: 8px 0 0;
  max-width: min(86%, 420px);
  font-family: var(--env-serif);
  font-size: clamp(21px, 6.7vw, 26px);
  line-height: 1.1;
  color: var(--env-text);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   6. Ajakan ketuk, cincin, segel lilin
   --------------------------------------------------------------------- */
.tt-env__hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cy) + var(--seal) / 2 + 26px);
  z-index: 3;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--env-text-muted);
  pointer-events: none;
  transition: opacity calc(.3s * var(--k)) ease;
}
.tt-env.is-opening .tt-env__hint { opacity: 0; }

.tt-env__seal,
.tt-env__ring {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--seal);
  height: var(--seal);
  margin: calc(var(--seal) / -2) 0 0 calc(var(--seal) / -2);
  pointer-events: none;
}
.tt-env__ring {
  z-index: 3;
  border: 1.5px solid var(--env-text);
  border-radius: 50%;
  animation: tt-env-ring 2.4s ease-out infinite;
}
.tt-env.is-opening .tt-env__ring { display: none; }

.tt-env__seal {
  z-index: 4;
  transition:
    transform calc(.55s * var(--k)) var(--ease),
    opacity calc(.45s * var(--k)) ease calc(.12s * var(--k));
}
.tt-env.is-opening .tt-env__seal {
  transform: translateY(-34px) scale(1.16) rotate(-12deg);
  opacity: 0;
}
.tt-env__seal-in {
  position: relative;
  width: 100%;
  height: 100%;
  animation: tt-env-breathe 3.2s ease-in-out infinite;
}
.tt-env__seal svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}
.tt-env__gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--env-gloss), rgba(255, 255, 255, 0) 58%);
}
.tt-env__wax { fill: var(--env-wax); }
.tt-env__wax-ring { stroke: var(--env-wax-dark); opacity: .5; }
.tt-env__wax-ring2 { stroke: var(--env-wax-hi); opacity: .6; }
.tt-env__wax-lo { stroke: var(--env-wax-dark); }
.tt-env__wax-hi { stroke: var(--env-wax-hi); }

/* Area ketuk: seluruh amplop */
.tt-env__hit {
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tt-env__hit[hidden] { display: none; }
.tt-env__hit:focus { outline: none; }
.tt-env__hit:focus-visible {
  outline: 2px solid var(--env-focus);
  outline-offset: -12px;
  border-radius: 30px;
}

@keyframes tt-env-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes tt-env-ring {
  0% { transform: scale(.92); opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ---------------------------------------------------------------------
   7. Gerak dikurangi — sisi amplop cukup memudar
   (kelas .is-reduced dipasang JS saat prefers-reduced-motion aktif)
   --------------------------------------------------------------------- */
.tt-env.is-reduced .tt-env__flap { transition: none; }
.tt-env.is-reduced.is-opening .tt-env__flap--top,
.tt-env.is-reduced.is-opening .tt-env__flap--bottom { transform: rotateX(0deg); }
.tt-env.is-reduced.is-opening .tt-env__flap--left,
.tt-env.is-reduced.is-opening .tt-env__flap--right { transform: rotateY(0deg); }
.tt-env.is-reduced .tt-env__face { transition: opacity .35s ease 0s; }
.tt-env.is-reduced .tt-env__seal { transition: opacity .3s ease 0s; }
.tt-env.is-reduced.is-opening .tt-env__seal { transform: none; }
.tt-env.is-reduced .tt-env__card {
  transform: none;
  transition: opacity .45s ease .15s, visibility 0s linear .15s;
}

@media (prefers-reduced-motion: reduce) {
  .tt-env__seal-in,
  .tt-env__ring { animation: none; }
  .tt-env { transition-duration: .2s; }
}