/* ฉากเปิดกาชาโถ → ดวงวิญญาณ (jarcut.js) · ภาพเจนทั้งหมด CSS แค่วาง/ย่อ/หมุน/จาง/ย้อมสี
   คลาส: intro โถแรกลอยลง · lev โถลอย (★4) · dark+chain+rift (★5) · gold ฝนแสงทอง · broken โถแตก · souls ดวงวิญญาณขึ้น
   #rvcut (z 40) ทับฉากนี้ (z 38) ตอนเปิดดวง ★4/★5 */
#jarcut { position: fixed; inset: 0; z-index: 38; overflow: clip; /* clip = เลื่อนด้วย scrollIntoView/focus ไม่ได้ (hidden เคยโดนเลื่อนจนฉากเบี้ยว) */ background: #05030c; cursor: pointer; font-family: Mitr, sans-serif; color: #fff; user-select: none; animation: jc-in .3s ease-out; --tc: #a89a86; }
#jarcut.out { opacity: 0; transition: opacity .35s; pointer-events: none; }
#jarcut .lm { background: var(--im) center / contain no-repeat; }
#jarcut .j-stage i, #jarcut .j-trail { background-position: center; background-size: contain; background-repeat: no-repeat; }
#jarcut .tn { background: var(--tc); -webkit-mask: var(--im) center / contain no-repeat; mask: var(--im) center / contain no-repeat; } /* mask ความสว่างบน iOS หลุดเป็นสี่เหลี่ยมทึบเมื่อกว้างเกิน ~200px = ใช้ภาพ -a (ความโปร่งใสอบแล้ว) */
#jarcut .j-bg { position: absolute; inset: -4%; background: center / cover no-repeat; opacity: .22; filter: saturate(.8) brightness(.6); transition: opacity .5s, filter .5s; }
#jarcut .j-stage { position: absolute; inset: 0; transition: opacity .5s; }
#jarcut .j-stage > * { position: absolute; left: 50%; top: 58%; pointer-events: none; }

/* โถ */
#jarcut .j-jar { height: 36vh; translate: -50% -50%; aspect-ratio: .8; display: grid; place-items: center; }
#jarcut .j-jar img { grid-area: 1 / 1; max-height: 100%; max-width: 100%; object-fit: contain; }
#jarcut .j-ck { opacity: 0; transition: opacity .25s; }
#jarcut .j-jar.cracked .j-ck { opacity: 1; }
#jarcut .j-cf { grid-area: 1 / 1; width: 140%; aspect-ratio: 3; opacity: 0; }
#jarcut .j-jar { animation: jc-bob 2.4s ease-in-out infinite; }
#jarcut .j-jar.jin { animation: jc-jin .55s cubic-bezier(.2, 1.5, .4, 1), jc-bob 2.4s ease-in-out .55s infinite; }
#jarcut .j-jar.wob1 { animation: jc-wob .4s ease-in-out; }
#jarcut .j-jar.wob2 { animation: jc-wob .25s ease-in-out 3; }
#jarcut .j-jar.beat { animation: jc-beat .9s ease-in-out 3; }
#jarcut .j-jar.jdesc { animation: jc-desc 1.1s cubic-bezier(.2, .9, .3, 1), jc-bob 2.4s ease-in-out 1.1s infinite; }
#jarcut .j-jar.cflash .j-cf { animation: jc-cf .5s ease-out forwards; }
#jarcut.intro .j-jar { animation: jc-drop .9s cubic-bezier(.3, 1.3, .5, 1), jc-bob 2.4s ease-in-out .9s infinite; }
#jarcut.lev .j-jar { animation: jc-lev 1.1s ease-in-out forwards, jc-wob .18s linear infinite; }

/* แสงหลังโถ ย้อมสีตามระดับโถ */
#jarcut .j-glow { width: 62vh; aspect-ratio: 1; translate: -50% -50%; opacity: .55; animation: jc-spin 14s linear infinite; transition: background .4s; }
#jarcut .j-glow.surge { animation: jc-surge 1.1s ease-in forwards, jc-spin 4s linear infinite; }
#jarcut[data-jar="1"] .j-glow { opacity: .25; }
#jarcut[data-jar="5"] .j-glow { width: 80vh; opacity: .8; }

/* วงเวทใต้โถ (หมุนตลอด · ทุบแรงขึ้นหมุนเร็วขึ้น) */
#jarcut .j-sig { width: min(78vh, 86vw); aspect-ratio: 1; top: 70%; translate: -50% -50%; scale: 1 .32; opacity: .55; animation: jc-spinT 9s linear infinite; } /* หมุนใน transform แล้วค่อยบีบ (scale) = จานแบนหมุนบนพื้น */
#jarcut .j-sig2 { width: min(52vh, 60vw); opacity: .45; animation-direction: reverse; animation-duration: 6s; }
#jarcut[data-jar="4"] .j-sig, #jarcut[data-jar="5"] .j-sig { opacity: .85; animation-duration: 4s; }
#jarcut[data-jar="5"] .j-sig { filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.2); }
#jarcut.charge .j-sig { animation-duration: 1s; opacity: 1; }
#jarcut.charge .j-glow { animation: jc-surge .5s ease-in forwards, jc-spin 2s linear infinite; }
/* แตกครั้งสุดท้าย: เสาแสงพุ่งขึ้นฟ้า + คลื่นกระแทก 2 วง + กล้องดันเข้า */
#jarcut .j-beam { width: 24vh; height: 120vh; top: 64%; translate: -50% -100%; transform-origin: 50% 100%; background-size: 100% 100%; opacity: 0; }
#jarcut .j-wave { width: 40vh; aspect-ratio: 1; translate: -50% -50%; opacity: 0; background-color: transparent; }
#jarcut.boom .j-beam { animation: jc-beam 1.6s cubic-bezier(.2, .8, .3, 1) forwards; }
#jarcut.boom .j-wave.w1 { animation: jc-wave .9s ease-out forwards; }
#jarcut.boom .j-wave.w2 { animation: jc-wave 1.1s ease-out .18s forwards; }
#jarcut.boom .j-stage { animation: jc-zoom 1.2s cubic-bezier(.2, .9, .3, 1); }
#jarcut.broken .j-sig { opacity: .3; animation-duration: 14s; }

/* แตก: เศษโถ + แฟลชสีระดับ */
#jarcut .j-shards { width: 70vh; aspect-ratio: 1.3; translate: -50% -50%; background: center / contain no-repeat; opacity: 0; }
#jarcut .j-shards.go { animation: jc-shards .8s ease-out forwards; }
#jarcut .j-pop { width: 70vh; aspect-ratio: 1; translate: -50% -50%; opacity: 0; }
#jarcut .j-pop.go { animation: jc-pop .9s ease-out forwards; }
#jarcut .j-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--fc, #fff) 45%, #fff); }
#jarcut .j-flash.go { animation: jc-flash .55s ease-out; }
#jarcut.shake1 { animation: jc-shake .35s; }
#jarcut.shake2 { animation: jc-bigshake .55s; }

/* ★5: จอดับ · โซ่ทองรัด · ฟ้าเปิด · ฝนแสงทอง */
#jarcut.dark .j-bg { opacity: 0; }
#jarcut.dark .j-glow { opacity: 0; }
#jarcut .j-chain { width: 52vh; aspect-ratio: 1; translate: -50% -50%; opacity: 0; scale: 1.8; transition: opacity .35s, scale .45s cubic-bezier(.3, 1.4, .5, 1); }
#jarcut.chain .j-chain { opacity: 1; scale: 1; animation: jc-pulse .45s ease-in-out infinite; }
#jarcut .j-rift { width: 46vh; aspect-ratio: .66; top: 0; translate: -50% -14%; opacity: 0; scale: .2 1; transition: opacity .5s, scale .7s cubic-bezier(.2, .9, .3, 1); }
#jarcut.rift .j-rift { opacity: 1; scale: 1; }
#jarcut.gold .j-bg { opacity: .32; filter: saturate(1.2) brightness(.9) sepia(.35); }
#jarcut .j-rain { position: absolute; inset: 0; left: 0; top: 0; display: none; }
#jarcut.gold .j-rain { display: block; }
#jarcut .j-mote { position: absolute; left: var(--x); top: -8vh; width: calc(5vh * var(--s)); aspect-ratio: .76; animation: jc-rain 2.6s linear var(--d) infinite; }

/* โถแตกแล้ว → ดวงวิญญาณ */
#jarcut.broken .j-jar, #jarcut.broken .j-glow, #jarcut.broken .j-chain { opacity: 0; transition: opacity .15s; animation: none; }
#jarcut.souls .j-soul { opacity: 1; }
#jarcut.gold.broken .j-rift { opacity: .35; }
#jarcut .j-souls { position: absolute; left: 50%; top: 44%; translate: -50% -50%; width: min(94vw, 150vh); display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2vh 1.6vw; pointer-events: none; }
#jarcut .j-souls.two { display: grid; grid-template-columns: repeat(5, min(15vw, 17vh)); justify-content: center; width: auto; }
#jarcut .j-souls.two .j-soul { width: 100%; }
#jarcut .j-soul { position: relative; width: min(17vw, 21vh); aspect-ratio: .82; border: 0; padding: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; color: inherit; font: inherit; }
#jarcut.souls .j-soul { pointer-events: auto; }
/* ลูกไฟ soul-N เดิม + เอฟเฟกต์เพิ่ม: j-wisp เปลวไหว · j-ghost เปลวซ้อนสว่างไหวสวนจังหวะ · j-heat ไอร้อนเต้นตามแรงไฟ · j-flare แฉกแสงหมุน · j-spk สะเก็ดลอยขึ้น · j-sp สะเก็ดจาก fly() */
#jarcut .j-soul .j-wisp, #jarcut .j-soul .j-ghost { position: absolute; left: 50%; top: 50%; width: 96%; translate: -50% -50%; transform-origin: 50% 62%; }
#jarcut .j-soul .j-wisp { animation: jc-flick .46s ease-in-out calc(var(--k) * -70ms) infinite alternate, jc-float 2s ease-in-out calc(var(--k) * -230ms) infinite; }
#jarcut .j-soul .j-ghost { opacity: .75; mix-blend-mode: screen; pointer-events: none; animation: jc-lick .34s ease-in-out calc(var(--k) * -90ms) infinite alternate, jc-float 2s ease-in-out calc(var(--k) * -230ms) infinite; }
#jarcut .j-soul[data-r="4"] .j-wisp, #jarcut .j-soul[data-r="5"] .j-wisp, #jarcut .j-soul[data-r="4"] .j-ghost, #jarcut .j-soul[data-r="5"] .j-ghost { width: 118%; }
#jarcut .j-soul .j-heat { position: absolute; left: 50%; top: 50%; width: 175%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; animation: jc-heat .42s ease-in-out calc(var(--k) * -110ms) infinite alternate; }
#jarcut .j-soul .j-flare { position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; translate: -50% -50%; opacity: .32; pointer-events: none; animation: jc-spin 7s linear infinite; }
#jarcut .j-soul[data-r="4"] .j-flare, #jarcut .j-soul[data-r="5"] .j-flare { width: 175%; opacity: .6; animation-duration: 4s; }
#jarcut .j-soul.landed .j-flare { animation: jc-flarehit .55s ease-out, jc-spin 7s linear infinite; }
#jarcut .j-soul .j-spk { position: absolute; left: calc(32% + var(--i) * 18%); top: 34%; width: 24%; aspect-ratio: 1; opacity: 0; pointer-events: none; animation: jc-rise 1.25s ease-out calc(var(--i) * -.42s + var(--k) * -130ms) infinite; }
#jarcut .j-sparks { position: absolute; inset: 0; pointer-events: none; }
#jarcut .j-sp { position: absolute; aspect-ratio: 1; opacity: 0; }
/* บิน (jarcut.js fly · Web Animations): หางยึดหัวที่กลางดวง หมุนชี้ย้อนทิศบิน ย้อมสีตามดาว */
#jarcut .j-soul .j-trail { position: absolute; left: 50%; top: 50%; width: 46%; height: 300%; transform-origin: 50% 0; background: color-mix(in srgb, var(--tc) 55%, #fff); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 0; pointer-events: none; }
#jarcut .j-soul[data-r="4"] .j-trail, #jarcut .j-soul[data-r="5"] .j-trail { width: 60%; height: 420%; }
/* รัศมีหลังดวง + วงเวท ★4/★5 + แสงตอนลงจอด */
#jarcut .j-soul .j-halo { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none; }
#jarcut .j-soul .j-ring { position: absolute; left: 50%; top: 50%; width: 175%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none; }
#jarcut .j-soul .j-land { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--tc) 50%, #fff); }
#jarcut .j-soul.landed .j-halo { animation: jc-halo-in .5s ease-out forwards, jc-spin 9s linear infinite; }
#jarcut .j-soul[data-r="1"].landed .j-halo { animation: jc-halo-in1 .5s ease-out forwards, jc-spin 9s linear infinite; }
#jarcut .j-soul.landed .j-ring { animation: jc-halo-in .6s ease-out forwards, jc-spin 6s linear infinite reverse; }
#jarcut .j-soul.landed .j-land { animation: jc-pop .7s ease-out; }
#jarcut .j-soul[data-r="4"].landed .j-land, #jarcut .j-soul[data-r="5"].landed .j-land { width: 340%; animation-duration: 1s; }
#jarcut .j-soul.landed .j-wisp, #jarcut .j-soul.landed .j-ghost { animation: jc-flick .46s ease-in-out infinite alternate, jc-landbob .5s cubic-bezier(.2, 1.6, .4, 1), jc-float 2s ease-in-out .5s infinite; }
#jarcut .j-soul:hover .j-wisp { scale: 1.08; }

/* ข้อความ + ปุ่ม */
#jarcut .j-hint { position: absolute; left: 0; right: 0; bottom: 15%; text-align: center; font-size: clamp(16px, 2.6vh, 24px); text-shadow: 0 2px 6px #000; opacity: 0; pointer-events: none; }
#jarcut .j-hint.on { animation: jc-hint .4s ease-out forwards, jc-blink 1.6s ease-in-out .4s infinite; }
#jarcut .j-hint b { color: var(--tc); filter: brightness(1.4); }
#jarcut .j-skip { position: absolute; top: 14px; right: 16px; border: 0; background: rgba(0, 0, 0, .45); color: #fff; font: 600 14px Mitr, sans-serif; padding: 6px 14px; border-radius: 16px; cursor: pointer; }

@keyframes jc-in { from { opacity: 0; } }
@keyframes jc-drop { from { translate: -50% -140%; opacity: 0; } 60% { opacity: 1; } }
@keyframes jc-jin { from { scale: .3; opacity: 0; } }
@keyframes jc-bob { 50% { transform: translateY(-1.6vh); } }
@keyframes jc-wob { 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
@keyframes jc-beat { 15% { scale: 1.08; } 30% { scale: 1; } 45% { scale: 1.05; } }
@keyframes jc-lev { to { translate: -50% -68%; } }
@keyframes jc-desc { from { translate: -50% -190%; scale: .5; opacity: 0; } 30% { opacity: 1; } }
@keyframes jc-cf { 0% { opacity: 0; scale: .5; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.3; } }
@keyframes jc-spin { to { rotate: 360deg; } }
@keyframes jc-spinT { to { transform: rotate(360deg); } }
@keyframes jc-surge { to { opacity: 1; scale: 1.5; } }
@keyframes jc-shards { 0% { opacity: 1; scale: .45; rotate: 0deg; } 100% { opacity: 0; scale: 1.9; rotate: 18deg; } }
@keyframes jc-pop { 0% { opacity: 1; scale: .2; } 100% { opacity: 0; scale: 1.5; } }
@keyframes jc-flash { from { opacity: .9; } to { opacity: 0; } }
@keyframes jc-shake { 20% { translate: -10px 6px; } 40% { translate: 9px -6px; } 60% { translate: -6px 4px; } 80% { translate: 3px -2px; } }
@keyframes jc-bigshake { 10% { translate: -22px 12px; } 25% { translate: 20px -14px; } 40% { translate: -16px 10px; } 55% { translate: 12px -8px; } 70% { translate: -7px 5px; } 85% { translate: 3px -2px; } }
@keyframes jc-pulse { 50% { scale: 1.04; filter: brightness(1.3); } }
@keyframes jc-rain { from { translate: 0 0; opacity: 0; } 15% { opacity: 1; } to { translate: -4vw 116vh; opacity: .2; } }
@keyframes jc-halo-in { from { opacity: 0; scale: .3; } to { opacity: .7; } }
@keyframes jc-halo-in1 { from { opacity: 0; scale: .3; } to { opacity: .3; } }
@keyframes jc-landbob { from { scale: 1.5; } }
@keyframes jc-beam { 0% { opacity: 0; transform: scaleY(0) scaleX(.6); } 15% { opacity: 1; transform: scaleY(1) scaleX(1.3); } 100% { opacity: 0; transform: scaleY(1.1) scaleX(.3); } }
@keyframes jc-wave { 0% { opacity: 1; scale: .2; } 100% { opacity: 0; scale: 4; } }
@keyframes jc-zoom { 0% { scale: 1; } 12% { scale: 1.07; } 100% { scale: 1; } }
@keyframes jc-float { 50% { translate: -50% -58%; } }
@keyframes jc-flick { from { transform: scale(1.03, .96) skewX(-2.5deg); } to { transform: scale(.97, 1.06) skewX(2.5deg); } }
@keyframes jc-lick { from { transform: scale(1.1, 1) skewX(5deg); opacity: .4; } to { transform: scale(.94, 1.2) skewX(-5deg); opacity: .85; } }
@keyframes jc-heat { from { opacity: .4; scale: .9; } to { opacity: .85; scale: 1.1; } }
@keyframes jc-flarehit { from { scale: 2.1; opacity: 1; } }
@keyframes jc-rise { 0% { opacity: 0; transform: translateY(20%) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-240%) translateX(calc((var(--i) - 1) * 70%)) scale(.25); } }
@keyframes jc-hint { from { opacity: 0; translate: 0 10px; } to { opacity: 1; } }
@keyframes jc-blink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #jarcut .j-mote { display: none; } }