/* majlis.click — Kad 3D Plus (demo Nov 2026): pintu boleh ditolak dengan jari, cahaya di celah, condong ikut tangan.
   Aktif hanya bila open3d-plus.js menambah .op-plus pada pembuka pintu / pagar / tingkap 3D. Transform & opacity sahaja. */
.op-plus { touch-action: none; --push: 0; --dir: 1; }
/* pintu sedikit ke dalam jenang: condongan menampakkan kedalaman (skala tutup jurang perspektif) */
.op-plus .op3-way { transform: translateZ(-34px) scale(1.031); }
.op-plus .op3-leaf.op-l { transform: rotateY(calc(var(--push) * 38deg * var(--dir))); transition: transform .75s cubic-bezier(.34, 1.45, .5, 1); }
.op-plus .op3-leaf.op-r { transform: rotateY(calc(var(--push) * -38deg * var(--dir))); transition: transform .75s cubic-bezier(.34, 1.45, .5, 1); }
.op-plus .op3-light { opacity: calc(var(--push) * .95); transition: opacity .5s ease; transform: translateZ(-70px) scale(1.064); }
.op-plus.is-live .op3-leaf, .op-plus.is-live .op3-light, .op-plus.is-live .op3-seam { transition: none; }

/* jalur cahaya di celah pintu */
.op3-seam { position: absolute; left: 50%; top: 3%; bottom: 1%; width: 2px; margin-left: -1px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(transparent, var(--op3-glow) 10%, #fff 50%, var(--op3-glow) 90%, transparent);
  box-shadow: 0 0 10px 3px var(--op3-glow), 0 0 26px 8px color-mix(in srgb, var(--op3-glow) 45%, transparent);
  opacity: calc(.32 + var(--push) * 2); transform: translateZ(-6px) scaleX(calc(1 + var(--push) * 6)); transition: opacity .5s ease, transform .5s ease; }
.op3-seam::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; box-shadow: inherit; animation: op3p-pulse 2.6s ease-in-out infinite; }
@keyframes op3p-pulse { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
.op-plus.is-opening .op3-seam { opacity: 0; transition: opacity .6s ease; }

/* dibuka dengan ketukan: kembalikan masa asal open3d.css */
.op-plus.is-opening .op3-leaf { transition: transform calc(1.75s * var(--op3-k)) cubic-bezier(.6, .02, .28, 1) calc(.42s * var(--op3-k)); }
.op-plus.is-opening .op3-shade { transition: opacity calc(1.4s * var(--op3-k)) ease calc(.6s * var(--op3-k)); }
.op-plus.is-opening .op3-light { transition: opacity calc(1.1s * var(--op3-k)) ease calc(.6s * var(--op3-k)); }

/* selepas ditolak: terus sambung, tanpa jeda asal */
.op-plus.was-pushed.is-opening .op3-leaf { transition-duration: calc(1.3s * var(--op3-k)); transition-delay: 0s; transition-timing-function: cubic-bezier(.25, .6, .3, 1); }
.op-plus.was-pushed.is-opening .op3-light, .op-plus.was-pushed.is-opening .op3-shade { transition-delay: 0s; }
.op-plus.was-pushed.is-opening .op3-cam { transition-delay: calc(.55s * var(--op3-k)); }
.op-plus.was-pushed.is-opening .op-seal { transition-delay: 0s; }

/* mohor bergerak sedikit ikut tolakan, pudar bila hampir lepas */
.op-plus .op-seal { opacity: calc(1 - var(--push) * 1.6); }

/* petunjuk: ketuk atau tolak */
.op-plus .op-hint { display: inline-flex; align-items: center; gap: 10px; }
.op-plus .op-hint::before, .op-plus .op-hint::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; animation: op3p-arw 1.6s ease-in-out infinite; }
.op-plus .op-hint::before { transform: rotate(45deg); --ax: -4px; }
.op-plus .op-hint::after { transform: rotate(-135deg); --ax: 4px; }
@keyframes op3p-arw { 50% { translate: var(--ax) 0; opacity: .45; } }
.op-plus.is-drag .op-foot { opacity: 0; }

/* ayunan rehat kamera (compositor); JS ambil alih bila tetikus / giroskop digunakan */
.op-plus .op3-cam { animation: op3p-sway 9s ease-in-out infinite; }
.op-plus.is-tilt .op3-cam, .op-plus.is-opening .op3-cam, .op-plus.is-drag .op3-cam { animation: none; }
@keyframes op3p-sway { 0%, 100% { rotate: 0.3 1 0 -1.4deg; } 50% { rotate: -0.3 1 0 1.4deg; } }
/* nafas pintu */
.op-plus.is-breath:not(.is-drag):not(.is-opening) .op3-leaf.op-l { animation: op3p-breath-l 1.3s ease-in-out; }
.op-plus.is-breath:not(.is-drag):not(.is-opening) .op3-leaf.op-r { animation: op3p-breath-r 1.3s ease-in-out; }
@keyframes op3p-breath-l { 50% { rotate: y calc(2.6deg * var(--dir)); } }
@keyframes op3p-breath-r { 50% { rotate: y calc(-2.6deg * var(--dir)); } }

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