/* majlis.click — kesan animasi Premium (hanya aktif bila body.fx-on, ditambah oleh fx.js) */
.fx-canvas { position: fixed; inset: 0; z-index: 55; pointer-events: none; }

/* Animasi masuk */
.fx-on .fx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.fx-on .fx-reveal.fx-in { opacity: 1; transform: none; }

/* Sampul: elemen muncul berperingkat, nama berkilau lembut */
@keyframes fxRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fxGlow { from { filter: drop-shadow(0 0 0 transparent); } to { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); } }
.fx-on .cover-inner > * { animation: fxRise 1s cubic-bezier(.2,.7,.2,1) both; }
.fx-on .cover-inner > *:nth-child(2) { animation-delay: .35s; }
.fx-on .cover-inner > *:nth-child(3) { animation-delay: .6s; }
.fx-on .cover-inner > *:nth-child(4) { animation-delay: .8s; }
.fx-on .arch-cover .script { animation: fxGlow 3.2s ease-in-out 1s infinite alternate; }
@keyframes fxBtnGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); } }
.fx-on #open-card { animation: fxRise 1s cubic-bezier(.2,.7,.2,1) .9s both, fxBtnGlow 2.4s ease-in-out 2s infinite; }

/* Bunga penjuru sampul beralun (tema Mutiara & Melur) */
@keyframes fxSwayTL { from { rotate: -3deg; } to { rotate: 3deg; } }
.fx-on.t-mutiara .cover::before, .fx-on.t-melur .cover::before,
.fx-on.t-mutiara .cover::after, .fx-on.t-melur .cover::after { animation: fxSwayTL 5.5s ease-in-out infinite alternate; }
.fx-on.t-mutiara .cover::before, .fx-on.t-melur .cover::before { transform-origin: 0 0; }
.fx-on.t-mutiara .cover::after, .fx-on.t-melur .cover::after { transform-origin: 100% 100%; animation-duration: 6.5s; animation-delay: -2s; }

/* Bunga hiasan tetap di tepi skrin, beralun dan bergerak ikut skrol */
.fx-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
.fx-on .fx-deco { display: block; }
.fx-on .card { position: relative; z-index: 1; }
.fx-d { position: absolute; width: 150px; height: 150px; opacity: .5; }
@keyframes fxSway { from { rotate: -5deg; } to { rotate: 5deg; } }
.fx-d1 { left: -36px; top: 18%; animation: fxSway 6s ease-in-out infinite alternate; transform-origin: 0 50%; }
.fx-d2 { right: -36px; bottom: 16%; transform: rotate(180deg); animation: fxSway 7s ease-in-out -3s infinite alternate; transform-origin: 100% 50%; }

/* Sentuhan & hover */
.fx-on .btn-gold, .fx-on .btn-dark, .fx-on .btn-line, .fx-on .icon-btn { transition: transform .2s ease, box-shadow .25s ease, background-color .2s, color .2s; }
.fx-on .btn-gold:hover, .fx-on .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 40%, transparent); }
.fx-on .btn-gold:active, .fx-on .btn-dark:active, .fx-on .btn-line:active { transform: scale(.97); }
.fx-on .g-item img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.fx-on .g-item:hover img { transform: scale(1.07); }
.fx-on .wish, .fx-on .item { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { .fx-on .wish:hover, .fx-on .item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); } }
@keyframes fxTick { 0% { transform: scale(1.08); } 40%, 100% { transform: scale(1); } }
.fx-on .cd:last-child b { animation: fxTick 1s ease-out infinite; }
.fx-on .story-dot { animation: fxBtnGlow 3s ease-in-out infinite; }

/* Pratonton kad Percuma: lencana */
.fx-teaser {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 66;
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(42,34,51,0.92); color: #FAF7FC; font: 600 12.5px var(--f-body); text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.fx-teaser:hover { background: #2A2233; color: #fff; }
.fx-teaser b { color: #EADCFB; }

@media (prefers-reduced-motion: reduce) {
  .fx-canvas, .fx-deco { display: none !important; }
  .fx-on .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fx-on * { animation: none !important; }
}

/* ---------- Animasi pembukaan: dahan & bunga mekar dari penjuru (bloom.js) ---------- */
@keyframes bloomPop { 0% { opacity: 0; transform: scale(0) rotate(-28deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes bloomDraw { to { stroke-dashoffset: 0; } }
@keyframes bloomSway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.bloom { position: fixed; inset: 0; z-index: 56; pointer-events: none; overflow: hidden; transition: opacity 1.2s ease; }
.bloom.rest { z-index: 0; }
.bloom.gone { opacity: 0; }
.bl { position: absolute; width: min(56vw, 270px); aspect-ratio: 1; transition: opacity 1.5s ease; }
.bl-in { width: 100%; height: 100%; transform-origin: 0 0; }
.bl svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Ornamen dilukis untuk penjuru kiri atas; penjuru lain dicerminkan */
.bl-tl { left: -4px; top: -4px; }
.bl-tr { right: -4px; top: -4px; transform: scaleX(-1); }
.bl-br { right: -4px; bottom: -4px; transform: scale(-1, -1); }
.bl-bl { left: -4px; bottom: -4px; transform: scaleY(-1); }
.has-preview .bl-tl, .has-preview .bl-tr { top: 56px; }
.bloom.settled .bl-tl, .bloom.settled .bl-br { opacity: 0; }
.bloom.settled .bl-tr, .bloom.settled .bl-bl { opacity: calc(var(--page-orn-op, .2) * 1.7); }
.bloom.rest .bl-in { animation: bloomSway 7s ease-in-out infinite alternate; }
.bloom.rest .bl-bl .bl-in { animation-duration: 8.5s; animation-delay: -3s; }
/* Ornamen statik & hiasan tepi digantikan oleh versi beranimasi */
body.has-bloom::before, body.has-bloom::after, body.has-bloom .fx-deco { display: none; }
@media (min-width: 700px) { .bl { width: 320px; } }