/* Hanwha-inspired motion layer for the sharing page only.
 * TODO: Figma에 없음 — 메인·원장 페이지의 순차 리빌, 이미지 스케일, 호버 모션을 재사용한다. */

.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-reveal,
.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-card {
	opacity: 0;
	clip-path: inset(0 0 var(--wp--custom--motion--clip-inset) 0);
	transform: translate3d(0, var(--wp--custom--motion--reveal-distance), 0);
	transition:
		opacity var(--wp--custom--motion--reveal-duration) var(--wp--custom--motion--easing),
		transform var(--wp--custom--motion--reveal-duration) var(--wp--custom--motion--easing),
		clip-path var(--wp--custom--motion--reveal-duration) var(--wp--custom--motion--easing);
	transition-delay: var(--tc-motion-delay, 0ms);
	will-change: opacity, transform, clip-path;
}

.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-reveal.is-visible,
.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-card.is-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: translate3d(0, 0, 0);
}

.page-template-sharing .tc-sharing .tc-motion-delay-1 { --tc-motion-delay: var(--wp--custom--motion--stagger-duration); }
.page-template-sharing .tc-sharing .tc-motion-delay-2 { --tc-motion-delay: calc(var(--wp--custom--motion--stagger-duration) * 2); }
.page-template-sharing .tc-sharing .tc-motion-delay-3 { --tc-motion-delay: calc(var(--wp--custom--motion--stagger-duration) * 3); }
.page-template-sharing .tc-sharing .tc-motion-delay-4 { --tc-motion-delay: calc(var(--wp--custom--motion--stagger-duration) * 4); }
.page-template-sharing .tc-sharing .tc-motion-delay-5 { --tc-motion-delay: calc(var(--wp--custom--motion--stagger-duration) * 5); }
.page-template-sharing .tc-sharing .tc-motion-delay-6 { --tc-motion-delay: calc(var(--wp--custom--motion--stagger-duration) * 6); }
.page-template-sharing .tc-sharing .tc-motion-delay-7 { --tc-motion-delay: calc(var(--wp--custom--motion--stagger-duration) * 7); }

.page-template-sharing .tc-sharing .tc-motion-media {
	overflow: hidden;
}

.page-template-sharing .tc-sharing .tc-motion-media img {
	transition: transform var(--wp--custom--motion--reveal-duration) var(--wp--custom--motion--easing);
}

.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-media:not(.is-visible) img {
	transform: scale(var(--wp--custom--motion--image-scale));
}

@supports (animation-timeline: scroll()) {
	.page-template-sharing .tc-sharing-intro__media img {
		animation: tc-sharing-hero-parallax linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 var(--wp--custom--figma--hero-height);
		transform-origin: center;
	}
}

@keyframes tc-sharing-hero-parallax {
	to {
		transform: translate3d(0, var(--wp--custom--motion--hero-lift), 0) scale(var(--wp--custom--motion--hero-scale));
	}
}

@media (hover: hover) and (pointer: fine) {
	.page-template-sharing .tc-sharing-academic__grid > figure,
	.page-template-sharing .tc-sharing-community__timeline > figure,
	.page-template-sharing .tc-sharing-index a {
		transition:
			transform var(--wp--custom--global-header--transition) var(--wp--custom--motion--easing),
			opacity var(--wp--custom--global-header--transition) ease;
	}

	.page-template-sharing .tc-sharing-academic__grid > figure:hover,
	.page-template-sharing .tc-sharing-community__timeline > figure:hover {
		transform: translate3d(0, var(--wp--custom--motion--hover-lift), 0);
	}

	.page-template-sharing .tc-sharing-index a:hover {
		opacity: 0.72;
	}
}

@media (max-width: 767px) {
	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-reveal,
	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-card {
		transform: translate3d(0, calc(var(--wp--custom--motion--reveal-distance) * 0.6), 0);
	}

	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-reveal.is-visible,
	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-card.is-visible {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-template-sharing .tc-sharing-intro__media img,
	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-reveal,
	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-card,
	.page-template-sharing .tc-sharing .tc-motion-media img,
	.page-template-sharing .tc-sharing-academic__grid > figure,
	.page-template-sharing .tc-sharing-community__timeline > figure,
	.page-template-sharing .tc-sharing-index a {
		animation: none;
		transition: none;
		transform: none;
	}

	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-reveal,
	.page-template-sharing .tc-sharing.tc-sharing-motion-ready .tc-motion-card {
		opacity: 1;
		clip-path: none;
	}
}