/* DEV: Sukuna's Shrine effects */
.suk-layer { position: fixed; inset: 0; pointer-events: none; z-index: 900; }
.suk-dim { background: radial-gradient(circle, rgba(40, 0, 8, .35), rgba(10, 0, 4, .8)); animation: sukFade calc(.9s / var(--spd)) ease forwards; }
.suk-dim.fire { background: radial-gradient(circle, rgba(255, 120, 30, .25), rgba(30, 6, 0, .85)); }
@keyframes sukFade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.suk-cross i { position: absolute; left: 50%; top: 45%; width: 140vw; height: 10px; margin-left: -70vw; background: linear-gradient(90deg, transparent, #fff 40%, #ffd0d8 60%, transparent); box-shadow: 0 0 30px #c8323c, 0 0 8px #fff; transform: rotate(var(--a)) scaleX(0); animation: sukSlash calc(.35s / var(--spd)) cubic-bezier(.2, .9, .2, 1) forwards; animation-delay: calc(var(--d, 0s) / var(--spd)); }
@keyframes sukSlash { 0% { transform: rotate(var(--a)) scaleX(0); opacity: 1; } 60% { transform: rotate(var(--a)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--a)) scaleX(1) scaleY(.2); opacity: 0; } }
.suk-web svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.suk-web line, .suk-web polygon { stroke: #fff; stroke-width: .9; fill: none; filter: drop-shadow(0 0 3px #c8323c); stroke-dasharray: 400; stroke-dashoffset: 400; animation: sukDraw calc(.45s / var(--spd)) ease-out forwards; }
.suk-web { animation: sukFade calc(.9s / var(--spd)) ease forwards; }
@keyframes sukDraw { to { stroke-dashoffset: 0; } }
.suk-arrow::before { content: ''; position: absolute; left: 0; top: var(--y, 50%); width: 100vw; height: 18px; background: linear-gradient(90deg, transparent, #fff3a0, #ff9a3a 50%, #c8323c); box-shadow: 0 0 40px 10px #ff7a2a; transform-origin: left; animation: sukArrow calc(.5s / var(--spd)) ease-out forwards; }
@keyframes sukArrow { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(3); opacity: 0; } }
.suk-domain { background: radial-gradient(circle at 50% 45%, rgba(60, 0, 12, .7), rgba(6, 0, 2, .96) 70%); animation: sukDomain calc(3.2s / var(--spd)) ease forwards; overflow: hidden; }
@keyframes sukDomain { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.suk-domain .sd-shrine { position: absolute; left: 50%; top: 50%; width: min(60vh, 70vw); transform: translate(-50%, -50%) scale(.6); opacity: 0; animation: sukRise calc(.9s / var(--spd)) cubic-bezier(.2, 1.3, .4, 1) forwards; filter: drop-shadow(0 0 40px #c8323c); }
.suk-domain .sd-shrine svg { width: 100%; height: auto; }
@keyframes sukRise { to { transform: translate(-50%, -52%) scale(1); opacity: .95; } }
.suk-domain .sd-t1, .suk-domain .sd-t2 { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Noto Sans JP', serif; font-weight: 900; color: #fff; -webkit-text-stroke: 2px #1a1020; text-shadow: 0 0 20px #c8323c, 6px 6px 0 #1a1020; white-space: nowrap; opacity: 0; }
.suk-domain .sd-t1 { top: 10%; font-size: min(9vw, 90px); animation: sukText calc(.5s / var(--spd)) ease-out forwards; }
.suk-domain .sd-t2 { bottom: 12%; font-size: min(12vw, 130px); color: #ffd0d8; animation: sukText calc(.5s / var(--spd)) ease-out forwards; animation-delay: calc(.4s / var(--spd)); }
.suk-domain .sd-en { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-family: var(--f-sfx, Impact); letter-spacing: .3em; color: #c8323c; font-size: 16px; }
@keyframes sukText { from { opacity: 0; transform: translateX(-50%) scale(1.6); letter-spacing: .5em; } to { opacity: 1; transform: translateX(-50%) scale(1); letter-spacing: .05em; } }
.suk-domain .sd-cuts i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 3px; background: linear-gradient(90deg, transparent, #fff 30%, #ffc0c8 70%, transparent); box-shadow: 0 0 10px #c8323c; transform: translate(-50%, -50%) rotate(var(--a)) scaleX(0); opacity: 0; }
.suk-domain.cutting .sd-cuts i { animation: sukCut calc(.28s / var(--spd)) ease-out forwards; animation-delay: calc(var(--d) / var(--spd)); }
@keyframes sukCut { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) scaleX(0); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) scaleX(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) scaleX(1); } }
.suk-domain.cutting .sd-shrine { animation: sukRise calc(.9s / var(--spd)) forwards, sukShake .08s linear infinite; }
@keyframes sukShake { 50% { margin-left: 4px; margin-top: -3px; } }