/* 261028_ 연애사주 상세페이지 레이어 모션 */
.landing .sec{position:relative;width:100%;overflow:hidden;container-type:inline-size}
.landing .sec>.bg{display:block;width:100%;height:auto}
.landing .sec .ly{position:absolute;display:block;height:auto;pointer-events:none;will-change:transform,opacity,filter}

/* 등장 전 상태 */
.landing .fx{opacity:0}
.landing .fx.on{animation:var(--a) var(--dur,.9s) var(--ease,cubic-bezier(.16,1,.3,1)) var(--d,0s) both, var(--loop,none) var(--loopdur,3s) ease-in-out calc(var(--d,0s) + var(--dur,.9s)) infinite}

/* 효과 정의 */
[data-fx=fade-up]{--a:fadeUp}
[data-fx=blur-in]{--a:blurIn;--dur:1.2s}
[data-fx=slide-r]{--a:slideR;--dur:.7s}
[data-fx=pop]{--a:pop;--dur:.6s}
[data-fx=flicker]{--a:flicker;--dur:1.3s;--ease:linear}
[data-fx=slam]{--a:slam;--dur:.7s;--ease:cubic-bezier(.2,1.4,.4,1)}
[data-fx=draw-down]{--a:drawDown;--ease:cubic-bezier(.65,0,.35,1)}
[data-fx=type],[data-fx=wipe-r]{--a:type;--ease:cubic-bezier(.45,0,.25,1);-webkit-mask:linear-gradient(90deg,#000 40%,transparent 60%) 0 0/250% 100% no-repeat;mask:linear-gradient(90deg,#000 40%,transparent 60%) 0 0/250% 100% no-repeat}
[data-fx=wipe-r]{--dur:.9s}
[data-fx=rope-l]{--a:ropeL;--ease:ease-out}
[data-fx=rope-r]{--a:ropeR;--ease:ease-out}
[data-loop=neon]{--loop:neon;--loopdur:4s}
[data-loop=red-pulse]{--loop:redPulse;--loopdur:2.2s}
[data-loop=shake-once]{--loop:shake;--loopdur:5s}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes blurIn{from{opacity:0;filter:blur(14px);transform:scale(1.08)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes flicker{0%{opacity:0}10%{opacity:.9}14%{opacity:.1}22%{opacity:1}30%{opacity:.2}38%{opacity:1}46%{opacity:.6}54%,100%{opacity:1}}
@keyframes slam{0%{opacity:0;transform:scale(1.7);filter:blur(6px)}55%{opacity:1;transform:scale(.96);filter:blur(0)}70%{transform:scale(1.02) translateX(-4px)}80%{transform:translateX(4px)}90%{transform:translateX(-2px)}100%{opacity:1;transform:none}}
@keyframes drawDown{from{opacity:1;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes type{from{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}to{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes ropeL{0%{opacity:1;transform:translateX(16%)}40%{transform:translateX(16%) rotate(.6deg)}45%{transform:translateX(15%) rotate(-.6deg)}50%{transform:translateX(16%)}58%{transform:translateX(-4%)}72%{transform:translateX(1.5%)}100%{opacity:1;transform:none}}
@keyframes ropeR{0%{opacity:1;transform:translateX(-14%)}40%{transform:translateX(-14%) rotate(-.6deg)}45%{transform:translateX(-13%) rotate(.6deg)}50%{transform:translateX(-14%)}58%{transform:translateX(3.5%)}72%{transform:translateX(-1.3%)}100%{opacity:1;transform:none}}
@keyframes neon{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:1;filter:brightness(1.25)}52%{opacity:.7}54%{opacity:1}}
@keyframes redPulse{0%,100%{opacity:1;filter:drop-shadow(0 0 0 rgba(255,30,50,0))}50%{opacity:1;filter:drop-shadow(0 0 3cqw rgba(255,30,50,.75))}}
@keyframes shake{0%,90%,100%{opacity:1;transform:none}92%{opacity:1;transform:translateX(-1.2%)}94%{transform:translateX(1.2%)}96%{transform:translateX(-.8%)}98%{transform:translateX(.6%)}}

/* 손끝 불꽃: 이미지 없이 CSS만으로 만든 루프 */
.spark{position:absolute;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,rgba(255,235,235,.95) 0 6%,rgba(255,60,70,.55) 18%,rgba(255,0,40,0) 62%);
 mix-blend-mode:screen;animation:spark 1.8s ease-in-out infinite;pointer-events:none}
@keyframes spark{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.7)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 화면 밖에서는 반복 효과를 멈춘다 */
.landing .fx.is-off,.landing .spark.is-off{animation-play-state:paused}

/* 레이어 위치: 원본 900px 기준 좌표를 %로 옮긴 값 */
#s1-t4{left:12.667%;top:88.690%;width:74.556%;--d:0.35s}
#s1-t3{left:6.222%;top:82.375%;width:88.222%}
#s1-t2{left:35.333%;top:14.185%;width:30.444%;--d:0.75s}
#s1-t1{left:26.222%;top:6.315%;width:46.889%;--d:0.2s}
#s2-b2{left:19.556%;top:88.961%;width:60.778%;--d:0.45s}
#s2-b1{left:25.333%;top:83.604%;width:49.111%}
#s2-title{left:19.778%;top:28.247%;width:60.444%}
#s2-box{left:11.111%;top:41.721%;width:78.000%;--d:0.2s}
#s2-r3{left:17.778%;top:59.091%;width:61.444%;--d:0.5s}
#s2-r2{left:17.778%;top:53.084%;width:54.000%;--d:0.5s}
#s2-r1{left:17.778%;top:47.078%;width:46.000%;--d:0.5s}
#s3-ropeR{left:45.889%;top:72.444%;width:54.111%;--dur:1.6s}
#s3-ropeL{left:0.000%;top:72.278%;width:46.333%;--dur:1.6s}
#s3-t3{left:40.000%;top:53.222%;width:46.444%;--d:0.9s}
#s3-t2{left:14.778%;top:45.000%;width:45.667%;--d:0.3s}
#s3-t1{left:28.111%;top:39.833%;width:44.333%}
#s3-line{left:49.111%;top:8.667%;width:2.667%;--dur:1.4s}
#s4-t2{left:11.778%;top:87.202%;width:76.222%}
#s4-t1{left:29.111%;top:7.772%;width:43.111%;--d:0.1s}
#s4-spark{left:55.111%;top:50.259%}
#s5-t1{left:14.889%;top:84.144%;width:68.556%;--dur:2.2s}
#s6-t3{left:27.000%;top:33.855%;width:45.889%;--d:0.8s}
#s6-t2{left:23.111%;top:29.008%;width:55.333%;--d:0.4s}
#s6-t1{left:24.889%;top:24.870%;width:50.111%}
#s6-line{left:48.889%;top:6.413%;width:2.889%;--dur:1.4s}