/**
 * TOP section edge fades.
 * 背景画像の端だけを白へ溶かす絶対配置レイヤー。セクション高は増やさない。
 */

.about-world,
.service-draw,
.libre-works,
.libre-blog,
.libre-contact {
	--section-fade-top: 0px;
	--section-fade-bottom: 0px;
}

.about-world { --section-fade-bottom: 200px; }
.service-draw { --section-fade-top: 180px; --section-fade-bottom: 200px; }
.libre-works { --section-fade-top: 190px; --section-fade-bottom: 180px; }
.libre-blog { --section-fade-top: 170px; --section-fade-bottom: 150px; }
.libre-contact { --section-fade-top: 140px; }

.libre-section-fade {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

.libre-section-fade--top {
	top: 0;
	height: var(--section-fade-top);
	background: linear-gradient(to bottom,
		#fff 0%,
		rgba(255,255,255,.92) 14%,
		rgba(255,255,255,.68) 38%,
		rgba(255,255,255,.28) 68%,
		rgba(255,255,255,0) 100%);
}

.libre-section-fade--bottom {
	bottom: 0;
	height: var(--section-fade-bottom);
	background: linear-gradient(to bottom,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.24) 32%,
		rgba(255,255,255,.64) 62%,
		rgba(255,255,255,.92) 86%,
		#fff 100%);
}

/* 中間PC */
@media (max-width: 1439px) {
	.about-world { --section-fade-bottom: 180px; }
	.service-draw { --section-fade-top: 160px; --section-fade-bottom: 180px; }
	.libre-works { --section-fade-top: 170px; --section-fade-bottom: 160px; }
	.libre-blog { --section-fade-top: 150px; --section-fade-bottom: 140px; }
	.libre-contact { --section-fade-top: 130px; }
}

/* Tablet */
@media (max-width: 1024px) {
	.about-world { --section-fade-bottom: 140px; }
	.service-draw { --section-fade-top: 130px; --section-fade-bottom: 140px; }
	.libre-works { --section-fade-top: 140px; --section-fade-bottom: 130px; }
	.libre-blog { --section-fade-top: 120px; --section-fade-bottom: 110px; }
	.libre-contact { --section-fade-top: 100px; }
}

/* SP */
@media (max-width: 767px) {
	.about-world { --section-fade-bottom: 96px; }
	.service-draw { --section-fade-top: 88px; --section-fade-bottom: 100px; }
	.libre-works { --section-fade-top: 96px; --section-fade-bottom: 90px; }
	.libre-blog { --section-fade-top: 88px; --section-fade-bottom: 80px; }
	.libre-contact { --section-fade-top: 76px; }
}

/* フェード自体は静止画表現。reduced-motionでも残し、動きは発生させない。 */
@media (prefers-reduced-motion: reduce) {
	.libre-section-fade { animation: none !important; transition: none !important; }
}