/* คัตซีน ★4/★5 ตอนเปิดกาชา (rvcut.js) · ภาพเจนทั้งหมด CSS แค่วาง/ย่อ/หมุน/จาง/ย้อมเงา
   เฟส: p1 ดาวตก · p2 กระแทก+ชาร์จ · p3 แตก · p4 เงาฮีโร่ · p5 เปิดสี (★4)
        ★5 ต่อ: g1 หยุด+จอดับ+เงาทอง · g2 เสาแสงฟาด+คลื่น · g3 เปิดสี+ซูม · g4 ดาว+ชื่อ */
#rvcut { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #05030c; cursor: pointer; font-family: Mitr, sans-serif; color: #fff; animation: rc-in .25s ease-out; }
#rvcut.out { opacity: 0; transition: opacity .35s; pointer-events: none; }
#rvcut .cv { position: absolute; inset: 0; transition: transform 1.6s cubic-bezier(.2, .8, .3, 1); }
#rvcut :where(.cv > i, .cv > div) { position: absolute; left: 50%; top: 56%; pointer-events: none; background-position: center; background-size: contain; background-repeat: no-repeat; }
#rvcut .lm { background: var(--im) center / contain no-repeat; }
#rvcut .c-bg { inset: -4%; background-size: cover; opacity: .18; filter: saturate(.6) brightness(.6); transition: opacity .4s, filter .4s; }

/* p1: ดาวตกจากมุมขวาบนลงกลาง · ขยับด้วย translate (พิกัดจอ ก่อน rotate) ระยะ x:y = 1:1.5 เสมอ (จอแนวตั้งย่อตามความกว้าง) → หางเอียง 33.7° ตรงทางพุ่งทุกขนาดจอ
   หางเป็นภาพเจน gacha-comet หัวอยู่ 85.8% ของความสูงภาพ = จุดกลางลูกแสง */
#rvcut { --fx: min(40vh, 42vw); }
#rvcut .c-orb { width: 18vh; aspect-ratio: 1; margin: -9vh 0 0 -9vh; opacity: 0; }
#rvcut .c-trail { width: 14vh; height: 72vh; margin: -61.8vh 0 0 -7vh; transform-origin: 50% 85.8%; rotate: 33.7deg; background-size: 100% 100%; opacity: 0; }
#rvcut .c-hit { width: min(60vh, 80vw); aspect-ratio: 1.85; translate: -50% -42%; opacity: 0; }
#rvcut.p1 .c-orb { animation: rc-fall .7s cubic-bezier(.5, 0, .85, .45) forwards; }
#rvcut.p1 .c-trail { animation: rc-trail .7s cubic-bezier(.5, 0, .85, .45) forwards; }

/* p2: กระแทก → วงเวทติด หมุนเร็วขึ้น · ประกายดูดเข้า · ลูกแสงพองเต้น */
#rvcut .c-floor, #rvcut .c-floor5 { width: min(120vh, 110vw); aspect-ratio: 2.4; margin: 0; translate: -50% -30%; background-size: 100% 100%; opacity: 0; }
#rvcut .c-sig { width: min(70vh, 80vw); aspect-ratio: 1; translate: -50% -50%; opacity: 0; }
#rvcut .c-sig2 { width: min(44vh, 52vw); }
#rvcut .c-motes { inset: 0; left: 0; top: 0; }
#rvcut .c-mote { position: absolute; left: 50%; top: 56%; width: calc(7vh * var(--s)); aspect-ratio: .76; margin: calc(-3.5vh * var(--s)) 0 0 calc(-2.7vh * var(--s)); opacity: 0; }
#rvcut.p2 .c-orb { opacity: 1; animation: rc-charge 1.5s ease-in forwards; }
#rvcut.p2 .c-floor { animation: rc-floor .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
#rvcut.p2 .c-sig { animation: rc-pop .5s cubic-bezier(.2, 1.4, .4, 1) forwards, rc-spin 1.4s linear infinite; }
#rvcut.p2 .c-sig2 { animation: rc-pop .5s cubic-bezier(.2, 1.4, .4, 1) forwards, rc-spin 1s linear infinite reverse; }
#rvcut.p2 .c-mote { animation: rc-suck .8s ease-in var(--d) infinite; }
#rvcut.p2 .cv { animation: rc-shake .35s; }
#rvcut.p2 .c-trail { animation: rc-trail-out .28s ease-out forwards; } /* หางหดเข้าหัวตอนกระแทก ไม่ใช่แค่จางหาย */
#rvcut.p2 .c-hit { animation: rc-wave .55s ease-out forwards; }
#rvcut.p2 .c-flash { background: #fff6dc; animation: rc-flash .3s ease-out; }
#rvcut.p2 .c-bg { opacity: .3; filter: saturate(1) brightness(.7) hue-rotate(20deg); }

/* p3: ลูกแสงแตก ม่วง (★5 ก็ม่วงก่อน — หลอกให้คิดว่าเอพิก) */
#rvcut .c-shards, #rvcut .c-burst { width: min(80vh, 90vw); aspect-ratio: 1.1; translate: -50% -50%; opacity: 0; }
#rvcut .c-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#rvcut.p3 .c-orb, #rvcut.p3 .c-trail, #rvcut.p3 .c-mote { animation: none; opacity: 0; transition: opacity .1s; }
#rvcut.p3 .c-burst { animation: rc-burst 1s ease-out forwards; }
#rvcut.p3 .c-shards { animation: rc-shards .9s ease-out forwards; }
#rvcut.p3 .c-flash { animation: rc-flash .5s ease-out; background: color-mix(in srgb, #a05ce0 50%, #fff); }
#rvcut.p3 .cv { animation: rc-shake .45s; }
#rvcut.p3 .c-sig { animation: rc-spin 5s linear infinite; opacity: .7; filter: hue-rotate(40deg) saturate(1.3); }

/* p4: เงาฮีโร่โผล่ (สีดำ เรืองขอบม่วง) */
#rvcut .c-hero { translate: -50% -88%; display: grid; place-items: end center; opacity: 0; }
#rvcut .c-hero img { position: relative; z-index: 1; display: block; height: 46vh; filter: brightness(0) drop-shadow(0 0 10px #c58cff) drop-shadow(0 0 22px #a05ce0); transition: filter .6s ease-out; }
#rvcut .c-aura { position: absolute; z-index: 0; left: 50%; bottom: -6%; width: 150%; height: 125%; translate: -50% 0; opacity: 0; transition: opacity .6s; }
#rvcut.p4 .c-hero { animation: rc-rise .6s cubic-bezier(.2, 1.2, .4, 1) forwards; }

/* p5 (★4 จบ): เปิดสี + ออร่า + ชื่อ */
#rvcut.p5 .c-hero img { filter: drop-shadow(0 0 14px var(--tc)); animation: rc-bob 2.4s ease-in-out infinite; }
#rvcut.p5 .c-aura { opacity: .85; animation: rc-pulse 2s ease-in-out infinite; }
#rvcut.p5 .c-flash { animation: rc-flash .45s ease-out; }
#rvcut.p5 .c-title, #rvcut.g4 .c-title { visibility: visible; }

/* ---------- ★5 ตอนปลาย ---------- */
#rvcut .c-rays { width: min(170vh, 180vw); aspect-ratio: 1.15; translate: -50% -60%; opacity: 0; }
#rvcut .c-sun { width: min(110vh, 120vw); aspect-ratio: 1; translate: -50% -62%; opacity: 0; }
#rvcut .c-col { width: min(52vh, 60vw); height: 150vh; top: auto; bottom: 30%; translate: -50% 0; background-size: 100% 100%; opacity: 0; transform-origin: 50% 100%; }
#rvcut .c-wave { width: min(90vh, 100vw); aspect-ratio: 1.85; translate: -50% -42%; opacity: 0; }
#rvcut .c-gburst, #rvcut .c-burst5 { width: min(100vh, 110vw); aspect-ratio: 1; translate: -50% -60%; opacity: 0; }
#rvcut .c-rainbox { inset: 0; left: 0; top: 0; }
#rvcut .c-rain { position: absolute; left: var(--x); top: -10vh; width: calc(6vh * var(--s)); aspect-ratio: 1.4; opacity: 0; }

/* g1: หยุดนิ่ง จอดับ ใจเต้น · เงาเปลี่ยนเป็นทอง · ม่วงหายหมด */
#rvcut.g1 .c-bg { opacity: .05; }
#rvcut.g1 .c-sig, #rvcut.g1 .c-floor, #rvcut.g1 .c-burst, #rvcut.g1 .c-shards { opacity: 0 !important; animation: none; transition: opacity .25s; }
#rvcut.g1 .c-hero { animation: rc-beat .7s ease-in-out forwards; opacity: 1; }
#rvcut.g1 .c-hero img { filter: brightness(0) drop-shadow(0 0 6px #ffe27a) drop-shadow(0 0 28px #f0a020) drop-shadow(0 0 60px #f0a020); }
/* g2: เสาแสงฟาดลงจากฟ้า · แฟลชทอง · คลื่นกระแทก 3 วง · รัศมีหมุน · ฝนแสง · จอสั่นแรง */
#rvcut.g2 .c-col { animation: rc-slam .35s cubic-bezier(.7, 0, 1, .6) forwards, rc-colpulse 1.6s ease-in-out .5s infinite; }
#rvcut.g2 .c-flash { background: #fff3c4; animation: rc-flash .8s ease-out .3s backwards; }
#rvcut.g2 .cv { animation: rc-bigshake .7s .3s; }
#rvcut.g2 .c-wave { animation: rc-wave 1.1s ease-out .3s forwards; }
#rvcut.g2 .c-wave.w2 { animation-delay: .5s; } #rvcut.g2 .c-wave.w3 { animation-delay: .75s; }
#rvcut.g2 .c-burst5 { animation: rc-burst 1.2s ease-out .3s forwards; }
#rvcut.g2 .c-gburst { animation: rc-burst 1.4s ease-out .4s forwards; }
#rvcut.g2 .c-rays { animation: rc-raysin .8s ease-out .3s forwards, rc-spin 18s linear infinite; }
#rvcut.g2 .c-sun { animation: rc-sunin 1s ease-out .35s forwards, rc-spin 30s linear infinite reverse; }
#rvcut.g2 .c-floor5 { animation: rc-floor .6s cubic-bezier(.2, 1.4, .4, 1) .3s both; }
#rvcut.g2 .c-sig { opacity: .9 !important; filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.2); animation: rc-pop .5s .3s both, rc-spin 3s linear infinite; transition: none; }
#rvcut.g2 .c-rain { animation: rc-rain 2.2s linear var(--d) infinite; }
#rvcut.g2 .c-bg { opacity: .5; filter: sepia(.7) saturate(1.6) brightness(.8); transition: opacity 1s .3s, filter 1s .3s; }
/* g3: เปิดสีกลางเสาแสง · กล้องซูมเข้า */
#rvcut.g3 .cv { transform: scale(1.12) translateY(-3vh); }
#rvcut.g3 .c-hero img { filter: drop-shadow(0 0 16px #ffd36a) drop-shadow(0 0 40px rgba(240, 160, 32, .7)); animation: rc-bob 2.4s ease-in-out infinite; }
#rvcut.g3 .c-hero { animation: none; opacity: 1; }
#rvcut.g3 .c-aura { opacity: 1; animation: rc-pulse 1.6s ease-in-out infinite; }
#rvcut.g3 .c-flash { background: #fff; animation: rc-flash .5s ease-out; }

/* ป้ายชื่อ */
#rvcut .c-title { position: absolute; z-index: 7; left: 0; right: 0; bottom: 13vh; display: flex; flex-direction: column; align-items: center; gap: 2px; visibility: hidden; text-align: center; pointer-events: none; }
#rvcut .c-stars { display: flex; gap: 4px; }
#rvcut .c-stars img { width: clamp(26px, 5vh, 48px); filter: drop-shadow(0 0 8px var(--tc)); animation: rc-stamp .4s cubic-bezier(.2, 1.8, .4, 1) calc(var(--i) * .12s) both; }
#rvcut .c-title em { font-style: normal; font-weight: 600; font-size: clamp(16px, 3vh, 26px); letter-spacing: .3em; color: color-mix(in srgb, var(--tc) 35%, #fff); text-shadow: 0 2px 0 #1a0e2c, 0 0 6px #000, 0 0 16px var(--tc); animation: rc-word .7s ease-out .2s both; }
#rvcut .c-title b { font-size: clamp(30px, 7vh, 64px); line-height: 1.1; color: #fff; text-shadow: 0 3px 0 #2a1840, 0 0 18px var(--tc), 0 0 40px var(--tc); animation: rc-name .6s cubic-bezier(.2, 1.4, .4, 1) .35s both; }
#rvcut .c-title small { font-size: clamp(12px, 2vh, 16px); padding: 1px 14px; border-radius: 99px; background: color-mix(in srgb, var(--tc) 35%, rgba(0, 0, 0, .5)); animation: rc-word .5s ease-out .6s both; }
#rvcut[data-r="5"] .c-title em { font-size: clamp(22px, 4.6vh, 42px); letter-spacing: .45em; color: #ffe9a8; text-shadow: 0 2px 0 #5a2e04, 0 0 6px #000, 0 0 20px #f0a020; }
#rvcut[data-r="5"] .c-title b { font-size: clamp(36px, 9vh, 84px); background: linear-gradient(#fff8d6, #ffd35a 55%, #e88a10); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 0 #5a2e04) drop-shadow(0 0 18px #f0a020); }
#rvcut[data-r="5"] .c-stars img { width: clamp(32px, 6.4vh, 60px); animation-duration: .5s; animation-delay: calc(var(--i) * .18s); }
#rvcut .c-skip { position: absolute; z-index: 8; right: 16px; bottom: 12px; font-size: 12px; opacity: .55; pointer-events: none; }
#rvcut[data-r="5"] .c-skip { bottom: calc(11vh + 8px); }

@keyframes rc-in { from { opacity: 0; } }
@keyframes rc-fall { 0% { opacity: 0; translate: var(--fx) calc(var(--fx) * -1.5); scale: .25; } 18% { opacity: 1; } 88% { scale: .5; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rc-trail { 0% { opacity: 0; translate: var(--fx) calc(var(--fx) * -1.5); scale: .5 .25; } 18% { opacity: 1; } 100% { opacity: 1; translate: 0 0; scale: 1 1; } }
@keyframes rc-trail-out { from { opacity: 1; scale: 1 1; } to { opacity: 0; scale: .7 0; } }
@keyframes rc-charge { 0% { transform: scale(.8); } 30% { transform: scale(1.1); } 45% { transform: scale(.95); } 70% { transform: scale(1.35); } 85% { transform: scale(1.2); } 100% { transform: scale(1.9); filter: brightness(1.6); } }
@keyframes rc-floor { from { opacity: 0; transform: scale(.3); } to { opacity: .9; transform: none; } }
@keyframes rc-pop { from { opacity: 0; scale: .3; } to { opacity: .85; scale: 1; } }
@keyframes rc-spin { to { rotate: z 360deg; } }
@keyframes rc-suck { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-42vh) rotate(calc(var(--a) * -1)); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(calc(var(--a) * -1)) scale(.3); } }
@keyframes rc-shake { 20% { translate: -10px 6px; } 40% { translate: 9px -6px; } 60% { translate: -6px 4px; } 80% { translate: 3px -2px; } }
@keyframes rc-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 rc-burst { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes rc-shards { 0% { opacity: 1; transform: scale(.4) rotate(0); } 100% { opacity: 0; transform: scale(2) rotate(25deg); } }
@keyframes rc-flash { from { opacity: .95; } to { opacity: 0; } }
@keyframes rc-rise { from { opacity: 0; transform: translateY(6vh) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes rc-bob { 50% { transform: translateY(-1.2vh); } }
@keyframes rc-pulse { 50% { opacity: .55; transform: scale(1.04); } }
@keyframes rc-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.06); } 45% { transform: scale(.99); } 65% { transform: scale(1.08); } }
@keyframes rc-slam { 0% { opacity: 0; transform: translateY(-160vh) scaleX(.5); } 80% { opacity: 1; transform: translateY(0) scaleX(.6); } 100% { opacity: 1; transform: scaleX(1.25); } }
@keyframes rc-colpulse { 50% { filter: brightness(1.35); } }
@keyframes rc-wave { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes rc-raysin { from { opacity: 0; scale: .3; } to { opacity: .55; scale: 1; } }
@keyframes rc-sunin { from { opacity: 0; scale: .2; } to { opacity: .5; scale: 1; } }
@keyframes rc-rain { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(120vh) rotate(200deg); } }
@keyframes rc-stamp { from { opacity: 0; transform: scale(3) rotate(-30deg); } }
@keyframes rc-word { from { opacity: 0; letter-spacing: 1.2em; } }
@keyframes rc-name { from { opacity: 0; transform: scale(1.8); filter: blur(6px); } }

/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 520px) {
  #rvcut .c-title { bottom: 4vh; }
  #rvcut[data-r="5"] .c-skip { bottom: calc(7vh + 4px); }
}
@media (prefers-reduced-motion: reduce) { #rvcut .cv, #rvcut .c-flash { animation: none !important; } }