/* majlis.click — kesan 3D untuk semua tema Premium: kad condong (tilt.js) & gores dedah tarikh (scratch.js).
   Hanya transform/opacity; dimuat untuk kad Premium (dan pratonton pemilik). */
/* ============ KAD CONDONG (tilt.js): gerbang nama condong ikut telefon, kilauan bergerak ============ */
.has-tilt .card > .hero { perspective: 900px; }
.arch.tilt-on { will-change: rotate; }
.tilt-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; opacity: 0; }
.tilt-sheen i { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; will-change: translate;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .24) 48%, rgba(255, 255, 255, .06) 54%, transparent 62%); }

/* ============ GORES DEDAH TARIKH (scratch.js) ============ */
.scratch { position: relative; display: flex; justify-content: center; }
.scratch .datebar { opacity: 0; transition: opacity .3s ease; }
.scratch.is-ready .datebar, .scratch.is-revealed .datebar { opacity: 1; }
.scratch-foil { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; border-radius: 12px; touch-action: none; cursor: grab;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16); transition: opacity .55s ease, scale .55s ease; }
.scratch-foil.is-gone { opacity: 0; scale: 1.06; pointer-events: none; }
/* kilauan melintas kerajang sehingga tetamu mula menggores (kawasan kecil, murah) */
.scratch.is-ready:not(.is-touched):not(.is-revealed)::after { content: ''; position: absolute; z-index: 3; inset: -8px -12px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%) no-repeat; background-size: 260% 100%;
  animation: scratch-shine 3s ease-in-out .8s infinite; background-position: 130% 0; }
@keyframes scratch-shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
.scratch-bit { position: absolute; left: 50%; top: 50%; width: 7px; height: 11px; margin: -5px 0 0 -3px; z-index: 4; pointer-events: none; }
.scratch-skip { display: block; margin: 6px auto 0; padding: 6px 12px; border: 0; background: none; color: var(--text-mute); font: 500 12px/1 var(--f-body, sans-serif);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .scratch.is-ready::after { display: none; }
}