/**
 * css/components/reveal.css
 * ============================================================
 * A LEGEND 2：Reveal
 * ============================================================
 *
 * 役割：
 * - foundation/motion.css の reveal を拡張します。
 * - data属性に応じた方向違い・遅延表現を提供します。
 */

[data-aleg2-reveal="fade"] {
	transform: none;
}

[data-aleg2-reveal="up"] {
	transform: translate3d(0, 32px, 0);
}

[data-aleg2-reveal="down"] {
	transform: translate3d(0, -32px, 0);
}

[data-aleg2-reveal="left"] {
	transform: translate3d(-32px, 0, 0);
}

[data-aleg2-reveal="right"] {
	transform: translate3d(32px, 0, 0);
}

[data-aleg2-reveal-delay="1"] {
	transition-delay: 90ms;
}

[data-aleg2-reveal-delay="2"] {
	transition-delay: 180ms;
}

[data-aleg2-reveal-delay="3"] {
	transition-delay: 270ms;
}

[data-aleg2-reveal-delay="4"] {
	transition-delay: 360ms;
}

[data-aleg2-reveal].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.aleg2-reveal-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.aleg2-reveal-mask__inner {
	display: inline-block;
	transform: translate3d(0, 110%, 0);
	transition: transform var(--aleg2-duration-slow) var(--aleg2-ease-emphasized);
}

.is-revealed .aleg2-reveal-mask__inner,
.aleg2-reveal-mask.is-revealed .aleg2-reveal-mask__inner {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	[data-aleg2-reveal],
	[data-aleg2-reveal="fade"],
	[data-aleg2-reveal="up"],
	[data-aleg2-reveal="down"],
	[data-aleg2-reveal="left"],
	[data-aleg2-reveal="right"] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}