/* 온시민에너지걷기한마당 · 페이지 애니메이션
 * 각 PHP: data-reveal="up|left|zoom|fade|cell", data-delay="밀리초"
 * 순차 그룹: data-reveal-children="up", data-reveal-step="100"
 * 히어로: data-hero-start="240", data-hero-step="150"
 * JS 미실행/불러오기 실패 시 원래 내용이 그대로 표시됩니다.
 */
:root{
	--reveal-duration:720ms;
	--reveal-distance:26px;
	--reveal-ease:cubic-bezier(.22,1,.36,1);
}
.motion-ready [data-reveal],
.motion-ready [data-reveal-children]>*{
	opacity:0;
	transform:translate3d(0,var(--reveal-distance),0);
	transition:opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay,0ms),transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay,0ms),background-color .2s;
}
.motion-ready [data-reveal="left"]{transform:translate3d(-22px,0,0)}
.motion-ready [data-reveal="zoom"]{transform:scale(.975)}
.motion-ready [data-reveal="fade"],.motion-ready [data-reveal-children="fade"]>*{transform:none}
.motion-ready [data-reveal="cell"]{transform:translate3d(0,10px,0);--reveal-duration:580ms}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
.motion-cell{display:block}
/* 테이블 셀/행 자체는 움직이지 않아 병합 셀과 테두리를 유지합니다. */
.motion-ready [data-motion-hero] .hero-photo>img,
.motion-ready .subhero[data-motion-hero]>img{
	opacity:0;
	transform:scale(1.055);
	transition:opacity 900ms ease,transform 1700ms var(--reveal-ease);
}
.motion-ready [data-motion-hero].is-hero-ready .hero-photo>img{opacity:1;transform:none}
.motion-ready .subhero[data-motion-hero].is-hero-ready>img{opacity:.38;transform:none}
.motion-ready [data-hero-text]>*{
	opacity:0;
	transform:translate3d(0,25px,0);
	transition:opacity 820ms var(--reveal-ease) var(--hero-delay,240ms),transform 820ms var(--reveal-ease) var(--hero-delay,240ms),background-color .2s;
}
.motion-ready .is-hero-ready [data-hero-text]>*{opacity:1;transform:none}
.motion-ready [data-motion-hero] .start-marker{opacity:0;transition:opacity 650ms ease 1000ms}
.motion-ready [data-motion-hero].is-hero-ready .start-marker{opacity:1}
/* 기존 absolute/translate 위치는 유지하고 신청 바 안의 내용만 등장합니다. */
.motion-ready [data-hero-text].hero-register>*{transform:translate3d(0,15px,0)}
.motion-ready .is-hero-ready [data-hero-text].hero-register>*{transform:none}
.motion-ready .motion-instant,
.motion-ready .motion-instant [data-hero-text]>*,
.motion-ready .motion-instant .hero-photo>img,
.motion-ready .motion-instant.subhero>img,
.motion-ready .motion-instant .start-marker{transition:none!important}
/* 클릭과 터치를 방해하지 않는 작은 피드백 */
.button .arrow{display:inline-block;transition:transform .25s var(--reveal-ease)}
@media(hover:hover) and (pointer:fine){
	.button:hover .arrow{transform:translate(3px,-3px)}
	.program-card{transition:border-color .25s,background-color .25s}
	.program-card:hover{border-color:#63a866;background-color:#f7faf6}
}
@media(max-width:780px){
	:root{--reveal-distance:16px;--reveal-duration:600ms}
	.motion-ready [data-reveal="left"]{transform:translate3d(0,16px,0)}
	.motion-ready [data-reveal].is-visible{transform:none}
	.motion-ready [data-hero-text]>*{transition-duration:680ms,680ms,.2s}
	.motion-ready [data-motion-hero] .hero-photo>img,
	.motion-ready .subhero[data-motion-hero]>img{transform:scale(1.035)}
	.motion-ready [data-motion-hero].is-hero-ready .hero-photo>img,
	.motion-ready .subhero[data-motion-hero].is-hero-ready>img{transform:none}
}
.motion-off [data-reveal],
.motion-off [data-hero-text]>*,
.motion-off [data-motion-hero] .hero-photo>img,
.motion-off [data-motion-hero] .start-marker{opacity:1!important;transition:none!important}
.motion-off [data-reveal],.motion-off [data-hero-text]>*,.motion-off [data-motion-hero] .hero-photo>img{transform:none!important}
.motion-off .subhero[data-motion-hero]>img{opacity:.38!important;transform:none!important;transition:none!important}
.motion-off .button .arrow{transform:none!important;transition:none!important}
html:has(body.motion-off){scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){
	.motion-ready [data-reveal],.motion-ready [data-hero-text]>*,
	.motion-ready [data-motion-hero] .hero-photo>img{opacity:1!important;transform:none!important;transition:none!important}
	.motion-ready .subhero[data-motion-hero]>img{opacity:.38!important;transform:none!important;transition:none!important}
	.motion-ready [data-motion-hero] .start-marker{opacity:1!important;transition:none!important}
	.button .arrow{transform:none!important}
}
@media print{
	.motion-ready [data-reveal],.motion-ready [data-hero-text]>*{opacity:1!important;transform:none!important;transition:none!important}
}