/* majlis.click — Kad 3D: pembukaan dengan perspektif sebenar (pintu, tingkap, pagar, kotak, buku, sampul).
   Hanya transform + opacity (lancar di telefon). Seni WebP & warna daripada tema-{kunci}.css:
   --op3-room (di belakang pintu), --op3-wall (dinding berlubang), --op3-leaf (daun pintu kiri; kanan dicerminkan),
   --op3-back (sisi dalam daun), --op3-edge (warna tebal pintu), --op3-glow (cahaya), --dx/--dy/--dw/--dh (lubang pintu, % pentas) */

/* --op3-k: pendarab kelajuan pintu (1 = asal; tema boleh set cth. 1.45 untuk lebih perlahan & lembut) */
.op-3d { --op3-k: 1; --op3-room: none; --op3-wall: none; --op3-leaf: none; --op3-back: #3a2f28; --op3-edge: #8a6a40; --op3-glow: rgba(255, 244, 214, .95);
  --dx: 17%; --dy: 33%; --dw: 66%; --dh: 60%; }
/* Pintu, pagar & tingkap: perlahan & lembut untuk semua tema (21 Okt 2026) */
.op-door3d, .op-gate3d, .op-shutter3d { --op3-k: 1.45; }
.op-3d .op-stage { perspective: 1100px; perspective-origin: 50% 58%; }
.op3-cam { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 62%;
  transition: transform calc(1.5s * var(--op3-k)) cubic-bezier(.55, 0, .45, 1) calc(1.45s * var(--op3-k)); will-change: transform; }
/* Bilik jauh di belakang (-240px) supaya daun pintu / kotak / sampul yang berpusing tidak menembusinya; skala 1.22 kekalkan saiz asal */
.op3-room { position: absolute; inset: 0; background: var(--op3-room) no-repeat center / 100% 100%; transform: translateZ(-240px) scale(1.22); }
.op3-light { position: absolute; left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh);
  background: radial-gradient(ellipse 60% 55% at 50% 58%, var(--op3-glow), transparent 72%); opacity: 0; transform: translateZ(-30px);
  transition: opacity calc(1.1s * var(--op3-k)) ease calc(.6s * var(--op3-k)); }
.op3-wall { position: absolute; inset: 0; background: var(--op3-wall) no-repeat center / 100% 100%; transform: translateZ(0); pointer-events: none; }

/* Lubang pintu & dua daun 3D */
.op3-way { position: absolute; left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh); transform-style: preserve-3d; transform: translateZ(-1px); }
.op3-leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; will-change: transform;
  transition: transform calc(1.75s * var(--op3-k)) cubic-bezier(.6, .02, .28, 1) calc(.42s * var(--op3-k)); }
.op3-leaf.op-l { left: 0; transform-origin: 0 50%; }
.op3-leaf.op-r { right: 0; transform-origin: 100% 50%; }
.op3-face, .op3-back, .op3-shade { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.op3-face { background: var(--op3-leaf) no-repeat center / 100% 100%; }
.op-r .op3-face { transform: scaleX(-1); }
.op3-back { background: var(--op3-back); transform: rotateY(180deg); }
.op3-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .42)); opacity: 0; transition: opacity calc(1.4s * var(--op3-k)) ease calc(.6s * var(--op3-k)); }
.op-r .op3-shade { background: linear-gradient(270deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .42)); }
.op3-edge { position: absolute; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, var(--op3-edge), color-mix(in srgb, var(--op3-edge) 70%, #000)); }
.op-l .op3-edge { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.op-r .op3-edge { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
/* Tajuk di dinding atas pintu (hilang bila pintu mula terbuka) */
.op3-title { position: absolute; left: 8%; right: 8%; top: calc(var(--dy) * var(--op3-tt, .14)); height: calc(var(--dy) * var(--op3-th, .62)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; transform: translateZ(1px); transition: opacity calc(.5s * var(--op3-k)) ease calc(.2s * var(--op3-k)); pointer-events: none; }
.op3-title .op-names { font-size: clamp(30px, 10vw, 44px); color: var(--op3-tink, var(--op-ink)); }
.op3-title .op-kicker { color: var(--op3-tkick, var(--op-accent)); }
.op-3d.is-opening .op3-title { opacity: 0; }
.op-3d .op-seal { left: calc(var(--dx) + var(--dw) / 2); top: calc(var(--dy) + var(--dh) * .52); width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.op-3d .op-mono { font-size: 26px; }

/* Pintu (masuk ke dalam) & pagar */
.op-door3d.is-opening .op3-leaf.op-l, .op-gate3d.is-opening .op3-leaf.op-l { transform: rotateY(96deg); }
.op-door3d.is-opening .op3-leaf.op-r, .op-gate3d.is-opening .op3-leaf.op-r { transform: rotateY(-96deg); }
/* Tingkap (keluar ke arah tetamu): daun di hadapan dinding */
.op-shutter3d .op3-way { transform: translateZ(1px); }
.op-shutter3d.is-opening .op3-leaf.op-l { transform: rotateY(-118deg); }
.op-shutter3d.is-opening .op3-leaf.op-r { transform: rotateY(118deg); }
.op-3d.is-opening .op3-shade { opacity: 1; }
.op-3d.is-opening .op3-light { opacity: 1; }
/* Kamera melangkah masuk melalui pintu */
.op-door3d.is-opening .op3-cam, .op-gate3d.is-opening .op3-cam, .op-shutter3d.is-opening .op3-cam { transform: translateZ(520px); }

/* ============ KOTAK: penutup terangkat & terbalik ke belakang ============ */
.op-box3d { --bw: min(66vw, 340px); --bh: calc(var(--bw) * .5); --lh: calc(var(--bw) * .14); --bd: calc(var(--bw) * .7);
  --op3-front: none; --op3-lidtop: none; --op3-lidfront: none; --op3-inside: #2a0d14; --op3-gem: none; }
.op3-box { position: absolute; left: 50%; top: 56%; width: var(--bw); height: var(--bh); margin-left: calc(var(--bw) / -2);
  transform-style: preserve-3d; transform: rotateX(-24deg); }
.op3-bfront { position: absolute; inset: 0; background: var(--op3-front) no-repeat center / 100% 100%; transform: translateZ(calc(var(--bd) / 2)); }
.op3-inside { position: absolute; left: 0; right: 0; top: 0; height: var(--bd); background: radial-gradient(ellipse at 50% 50%, var(--op3-glow), var(--op3-inside) 70%);
  transform-origin: 50% 0; transform: translateZ(calc(var(--bd) / 2)) rotateX(-90deg); }
.op3-gem { position: absolute; left: 50%; top: 0; width: calc(var(--bw) * .42); height: calc(var(--bw) * .42); margin-left: calc(var(--bw) * -.21);
  background: var(--op3-gem) no-repeat center / contain; opacity: 0; transform: translate3d(0, 10%, 0) scale(.6);
  transition: transform 1.2s cubic-bezier(.2, .8, .3, 1) 1.05s, opacity .6s ease 1.05s; }
.op3-lid { position: absolute; left: -2%; right: -2%; top: calc(var(--lh) * -1); height: var(--lh); transform-style: preserve-3d;
  transform-origin: 50% 0 calc(var(--bd) / -2 - 4px); transition: transform 1.3s cubic-bezier(.55, -.2, .35, 1) .38s; will-change: transform; }
.op3-lfront { position: absolute; inset: 0; background: var(--op3-lidfront) no-repeat center / 100% 100%; transform: translateZ(calc(var(--bd) / 2 + 4px)); }
.op3-ltop { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--bd) + 8px); background: var(--op3-lidtop) no-repeat center / 100% 100%;
  transform-origin: 50% 0; transform: translateZ(calc(var(--bd) / 2 + 4px)) rotateX(-90deg); }
.op-box3d .op-seal { left: 50%; top: calc(56% - var(--lh) / 2); z-index: 12; }
.op3-tag { position: absolute; left: 50%; top: calc(56% + var(--bh) + 64px); transform: translateX(-50%); padding: 8px 18px; border-radius: 3px;
  background: var(--op-paper); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); transition: opacity .4s ease .2s; white-space: nowrap; }
.op3-tag .op-names { font: 34px/1.1 var(--op-font); color: var(--op-ink); }
.op-box3d.is-opening .op3-lid { transform: rotateX(118deg) translateY(-6%); }
.op-box3d.is-opening .op3-gem { opacity: 1; transform: translate3d(0, -115%, 60px) scale(1); }
.op-box3d.is-opening .op3-tag { opacity: 0; }
.op-box3d.is-opening .op3-light { opacity: 1; }
.op-box3d .op3-light { left: 10%; top: 30%; width: 80%; height: 40%; }
.op-box3d.is-opening .op3-cam { transform: translate3d(0, 8%, 380px); transition-delay: 1.7s; }

/* ============ BUKU: kulit depan terbuka macam buku sebenar ============ */
.op-book3d { --kw: min(70vw, 330px); --kh: calc(var(--kw) * 1.38); --op3-cover: none; --op3-endpaper: #f3ead8; --op3-pagebg: #fbf6ea; }
.op3-book { position: absolute; left: 50%; top: 50%; width: var(--kw); height: var(--kh); margin: calc(var(--kh) / -2) 0 0 calc(var(--kw) / -2);
  transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-10deg); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1) .2s; }
.op3-pages { position: absolute; top: 1.5%; bottom: 1.5%; right: -10px; width: 12px; background: repeating-linear-gradient(90deg, #efe6d2 0 1px, #fbf6ea 1px 3px);
  border-radius: 0 3px 3px 0; box-shadow: 4px 6px 14px rgba(0, 0, 0, .22); }
.op3-page { position: absolute; inset: 1.5% 0 1.5% 0; background: var(--op3-pagebg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 0 12%; box-shadow: inset 12px 0 18px -12px rgba(0, 0, 0, .25); }
.op3-page .op-kicker { font: 600 11px/1.4 var(--f-label, var(--f-body, sans-serif)); letter-spacing: .26em; text-transform: uppercase; color: var(--op-accent); }
.op3-page .op-names { font: 40px/1.1 var(--op-font); color: var(--op-ink); }
.op3-cover { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 50%; transition: transform 1.7s cubic-bezier(.6, .02, .3, 1) .45s; will-change: transform; }
.op3-cfront, .op3-cback { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; }
.op3-cfront { background: var(--op3-cover) no-repeat center / 100% 100%; box-shadow: 6px 10px 24px rgba(0, 0, 0, .3); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18%; }
.op3-ctitle { font: 30px/1.1 var(--op-font); color: var(--op-mono-c); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); text-align: center; padding: 0 12%; }
.op3-cback { background: var(--op3-endpaper); transform: rotateY(180deg); }
.op-book3d .op-seal { top: 44%; }
.op-book3d.is-opening .op3-book { transform: rotateX(0) rotateY(0); }
.op-book3d.is-opening .op3-cover { transform: rotateY(-172deg); }
.op-book3d.is-opening .op3-cam { transform: translateZ(420px); transition-delay: 1.75s; }

/* ============ SAMPUL: berpusing ke hadapan, penutup terbuka, surat naik ============ */
.op-env3d { --ew: min(78vw, 360px); --eh: calc(var(--ew) * .66); --op3-env: none; --op3-liner: none; --op3-envback: #e9e0cc; }
.op3-env { position: absolute; left: 50%; top: 55%; width: var(--ew); height: var(--eh); margin: calc(var(--eh) / -2) 0 0 calc(var(--ew) / -2);
  transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(14deg) rotateZ(-3deg); animation: op3-float 3.2s ease-in-out infinite;
  transition: transform 1s cubic-bezier(.3, 0, .2, 1); }
@keyframes op3-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.op3-eback { position: absolute; inset: 0; background: var(--op3-envback); border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.op3-letter { position: absolute; left: 6%; right: 6%; top: 6%; height: 92%; background: var(--op-paper); border-radius: 2px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding-top: 9%; gap: 6px; text-align: center; transition: transform 1.2s cubic-bezier(.3, .1, .2, 1) 1.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.op3-letter .op-kicker { font: 600 10px/1.4 var(--f-label, var(--f-body, sans-serif)); letter-spacing: .24em; text-transform: uppercase; color: var(--op-accent); }
.op3-letter .op-names { font: 30px/1.1 var(--op-font); color: var(--op-ink); }
.op3-pocket { position: absolute; inset: 0; background: var(--op3-env) no-repeat center / 100% 100%; transform: translateZ(1px); }
.op3-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; transform-style: preserve-3d; transform-origin: 50% 0; transform: translateZ(2px);
  transition: transform .9s cubic-bezier(.5, 0, .3, 1) .55s; }
.op3-f1, .op3-f2 { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.op3-f1 { background: var(--op3-envback); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06); }
.op3-f1::after { content: ''; position: absolute; inset: 0; background: var(--op3-env) no-repeat 50% 0 / 100% 172%; }
.op3-f2 { background: var(--op3-liner) no-repeat center / cover; transform: rotateY(180deg) rotateZ(180deg); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.op-env3d .op-seal { top: 58%; width: 78px; height: 78px; margin: -39px 0 0 -39px; translate: 0 0 6px; }
.op-env3d .op-mono { font-size: 20px; }
.op-env3d.is-opening .op3-env { animation: none; transform: none; }
/* penutup terbuka berada di belakang surat (z -2px) supaya surat yang naik tidak dilindungi lapiknya */
.op-env3d.is-opening .op3-flap { transform: translateZ(-2px) rotateX(-178deg); }
.op-env3d.is-opening .op3-letter { transform: translate3d(0, -60%, 1px); }
.op-env3d.is-opening .op3-cam { transform: translate3d(0, 22%, 360px); transition-delay: 2s; }

@media (prefers-reduced-motion: reduce) {
  .op3-env { animation: none; }
}