/* ==========================================================================
   2버전 모션 (업체 예시 aiif_2026_home 기준)
   - 1버전 마크업을 그대로 쓰고, 이 파일 + motion.js 만 추가로 불러온다.
   ========================================================================== */

/* 흰 라인 그리기 */
.mo .deco.vl{transform-origin: top center; animation: drawY var(--t, .9s) cubic-bezier(.65,.05,.3,1) var(--d, 0s) both;}
.mo .deco.hl{transform-origin: left center; animation: drawX var(--t, 1.1s) cubic-bezier(.65,.05,.3,1) var(--d, 0s) both;}
.mo .deco.hl.rtl{transform-origin: right center;}
@keyframes drawY{from{transform: scaleY(0)} to{transform: scaleY(1)}}
@keyframes drawX{from{transform: scaleX(0)} to{transform: scaleX(1)}}

/* 노드 팝 */
.mo .deco.nd{animation: nodePop .5s cubic-bezier(.2,1.7,.4,1) var(--d, 1.2s) both;}
@keyframes nodePop{0%{transform: scale(0)} 100%{transform: scale(1)}}

/* 오렌지 픽셀 : 한 칸씩 팝 */
.mo .deco.sq.js_sq{background: none; display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); gap: calc(45px - var(--cell)); align-content: start; overflow: hidden;}
.mo .deco.sq.js_sq i{background: var(--orange); animation: sqPop .45s cubic-bezier(.2,1.8,.4,1) var(--d) both;}
@keyframes sqPop{0%{transform: scale(0)} 100%{transform: scale(1)}}

/* aiif 로고 : 글자 하나씩 팝 */
.mo .lockup .lg-l{transform-box: fill-box; transform-origin: 50% 100%; animation: pop .6s cubic-bezier(.2,1.8,.35,1) var(--d) both;}
@keyframes pop{0%{transform: scale(0)} 55%{transform: scale(1.12,.9)} 78%{transform: scale(.95,1.06)} 100%{transform: scale(1)}}

/* 타이핑 */
.mo .lockup .t_sub{animation: type .9s steps(44,end) 1.55s both;}
.mo .lockup .t_theme{animation: type .7s steps(26,end) 1.85s both;}
.mo .schedule{animation: fadeUp .8s ease 2.1s both;}
@keyframes type{from{clip-path: inset(0 100% 0 0)} to{clip-path: inset(0 0 0 0)}}
@keyframes fadeUp{from{opacity: 0; transform: translateY(16px)} to{opacity: 1; transform: none}}

/* 캐릭터 : 팝 + 제자리 모션 */
.mo .deco.ch{transform-origin: 50% 100%; animation: chPop .7s cubic-bezier(.2,1.6,.4,1) var(--d, 1.1s) both;}
.mo .deco.ch .bob{transform-origin: 50% 100%;}
@keyframes chPop{0%{transform: scale(0) rotate(-12deg)} 100%{transform: scale(1) rotate(0)}}
.mo .c-run .bob{animation: hopSoft 1.5s cubic-bezier(.35,0,.35,1) calc(var(--d, 1.1s) + .7s) infinite;}
.mo .c-cart .bob{animation: hopSoft 1.9s cubic-bezier(.35,0,.35,1) calc(var(--d, 1.1s) + 1.1s) infinite;}
.mo .c-dance .bob{animation: hopTwice 2.4s cubic-bezier(.35,0,.35,1) calc(var(--d, 1.1s) + .9s) infinite;}
.mo .c-flag .bob{transform-origin: 62% 100%; animation: sway 2.6s ease-in-out calc(var(--d, 1.1s) + .7s) infinite;}
@keyframes hopSoft{0%,70%,100%{transform: translateY(0) scale(1,1)} 10%{transform: translateY(0) scale(1.04,.95)} 32%{transform: translateY(-14px) scale(.98,1.03)} 52%{transform: translateY(0) scale(1.03,.96)} 62%{transform: translateY(0) scale(1)}}
@keyframes hopTwice{0%,64%,100%{transform: translateY(0) scale(1)} 8%{transform: translateY(0) scale(1.04,.95)} 22%{transform: translateY(-12px) scale(.98,1.03)} 36%{transform: translateY(0) scale(1.03,.96)} 48%{transform: translateY(-6px)} 58%{transform: translateY(0) scale(1)}}
@keyframes sway{0%,100%{transform: rotate(-3deg)} 50%{transform: rotate(3deg) translateY(-3px)}}

/* section01 : 달리는 사람 (관절 리그) */
.mo #section01 .lane .walker{left: 30px; width: 86px; bottom: 10px; animation: walk 16s ease-in-out infinite;}
.mo #section01 .lane .walker svg{overflow: visible;}
.mo .rig g{transform-box: view-box;}
.mo .rig .leg{transform-origin: 50px 60px; animation: thigh .58s linear infinite;}
.mo .rig .leg .shin{transform-origin: 50px 82px; animation: knee .58s linear infinite;}
.mo .rig .arm{transform-origin: 56px 37px; animation: shoulder .58s linear infinite;}
.mo .rig .arm .fore{transform-origin: 56px 52px; animation: elbow .58s linear infinite;}
.mo .rig .leg-b,.mo .rig .leg-b .shin,.mo .rig .arm-a,.mo .rig .arm-a .fore{animation-delay: -.29s;}
.mo .rig .leg-b,.mo .rig .arm-b{opacity: .72;}
@keyframes thigh{0%,100%{transform: rotate(-38deg)} 25%{transform: rotate(-6deg)} 50%{transform: rotate(34deg)} 75%{transform: rotate(4deg)}}
@keyframes knee{0%,100%{transform: rotate(12deg)} 25%{transform: rotate(28deg)} 50%{transform: rotate(42deg)} 75%{transform: rotate(105deg)}}
@keyframes shoulder{0%,100%{transform: rotate(-48deg)} 50%{transform: rotate(42deg)}}
@keyframes elbow{0%,100%{transform: rotate(-95deg)} 50%{transform: rotate(-55deg)}}
.mo #section01 .lane .walker .face{transform-origin: 50% 100%; animation: face 16s linear infinite;}
.mo #section01 .lane .walker .bob{transform-origin: 50% 100%; animation: bounce .29s ease-in-out infinite alternate;}
@keyframes walk{0%,3%{left: 30px} 47%,53%{left: calc(100% - 116px)} 97%,100%{left: 30px}}
@keyframes face{0%,49.99%{transform: scaleX(1)} 50%,100%{transform: scaleX(-1)}}
@keyframes bounce{from{transform: translateY(0)} to{transform: translateY(-5px)}}

/* section02 : 붉은 빛 흐름 */
.mo #section02{isolation: isolate; overflow: hidden;}
.mo #section02::before{content: ''; position: absolute; inset: -5% -25% 40%; z-index: -1; pointer-events: none;
	background:
		radial-gradient(38% 46% at 70% 38%, rgba(255,36,72,.32), transparent 70%),
		radial-gradient(34% 40% at 30% 60%, rgba(214,14,44,.26), transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
	animation: redSweep 16s ease-in-out infinite alternate;}
@keyframes redSweep{from{transform: translateX(-7%)} to{transform: translateX(7%)}}
.mo #section02 .about .px_tit{text-shadow: 0 0 28px rgba(255,40,70,.45);}

/* 스크롤 리빌 */
.mo .rv{opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.mo .rv.in{opacity: 1; transform: none;}

/* 헤더 : 비주얼을 지나면 어두운 바 */
.mo #header{border-bottom: 1px solid transparent;}
.mo #header.bg{background: transparent; box-shadow: none;}
.mo #header.solid{background: rgba(15,13,12,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(246,239,225,.16);}
.mo #header.solid .gnb > li > span a{color: #f6efe1;}
.mo #header.solid .gnb > li > span a::before{background: var(--yellow);}
.mo #header.solid .nav_btn{color: #f6efe1;}
.mo #header .gnb > li > span a::after{content: ''; position: absolute; left: 0; right: 0; bottom: 28px; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s;}
.mo #header .gnb > li.on > span a::after{transform: scaleX(1);}
.mo #header .gnb .lnb_sub{display: block !important; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .22s, visibility 0s .22s;}
.mo #header .gnb > li.on .lnb_sub{opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .22s;}

/* 로고 이미지 팝 */
.mo #visual_wrap .lockup img{transform-origin: 50% 100%; animation: pop .7s cubic-bezier(.2,1.8,.35,1) 1.05s both;}

/* section01 픽셀 띠 : 노란 띠에서 스크롤에 맞춰 네모 칸이 오렌지로 채워짐 */
.mo #section01.js_band{overflow: hidden; background-image: url(../images/main/sec01_bg_noband.jpg);}
.mo #section01.js_band .band{overflow: hidden; background: var(--yellow);}
.mo #section01 .band i{width: calc(36 / 1920 * 100% + 2px); height: calc(36 / 146 * 100% + 2px); aspect-ratio: auto; background: none; overflow: hidden;}
.mo #section01 .band i::after{content: ''; position: absolute; inset: 0; background: var(--c); transform: scale(0); transition: transform .3s cubic-bezier(.2,1.6,.4,1);}
.mo #section01 .band i.on::after{transform: scale(1);}

@media (prefers-reduced-motion: reduce){
	.mo *, .mo *::before, .mo *::after{animation: none !important; transition: none !important;}
	.mo .rv{opacity: 1; transform: none;}
}

/* section01 → section02 경계 그라데이션 */
.mo #section01::after{content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 120px; pointer-events: none; background: linear-gradient(to bottom, rgba(28,4,5,0) 0%, rgba(28,4,5,.45) 55%, #1c0405 100%);}
/* 부제가 있는 메뉴는 밑줄을 부제 아래로 */
.mo #header .gnb > li > span a:has(em)::after{bottom: 8px;}