/**
 * SHU Promotion
 * Page transition + centered logo loader + SHU Promotion marquee
 *
 * 既存の page-transition.css と差し替えて使用します。
 */

/* =========================================================
   PAGE TRANSITION
========================================================= */

html.shu-page-transition {
	background: #fff;
}

/*
 * ページ本体
 */
/*
 * body に transform を付けると、その配下にある position: fixed が
 * ビューポート固定ではなくなるブラウザがあるため、フェードのみで遷移します。
 * これにより固定ヘッダーはスクロール中も常に画面上部に残ります。
 */
html.shu-page-transition body {
	opacity: 0;
	transition: opacity 420ms cubic-bezier(.22, 1, .36, 1);
	will-change: opacity;
}

html.shu-page-transition.is-page-loaded body {
	opacity: 1;
}

html.shu-page-transition.is-page-leaving body {
	opacity: 0;
	pointer-events: none;
	transition-duration: 260ms;
	transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}


/* =========================================================
   CENTER LOGO LOADER
   page-transition.css から見て ../images/logo.svg
========================================================= */

/* 白いローディング面 */
html.shu-page-transition::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: block;
	background: rgba(255, 255, 255, .985);
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	transition:
		opacity 460ms cubic-bezier(.22, 1, .36, 1),
		visibility 460ms linear;
}

/* 中央ロゴ */
html.shu-page-transition::after {
	content: "";
	position: fixed;
	z-index: 2147483001;
	top: 50%;
	left: 50%;
	width: clamp(62px, 7vw, 92px);
	aspect-ratio: 95.98 / 133.79;
	background:
		url("../images/logo.svg")
		center / contain
		no-repeat;
	opacity: 1;
	transform: translate3d(-50%, -50%, 0) scale(.97);
	pointer-events: none;
	transition:
		opacity 320ms ease,
		transform 520ms cubic-bezier(.22, 1, .36, 1);
	animation: shu-loader-breathe 1500ms ease-in-out infinite alternate;
}

/* 表示完了後はローダーをふんわり消す */
html.shu-page-transition.is-page-loaded::before,
html.shu-page-transition.is-page-loaded::after {
	opacity: 0;
	visibility: hidden;
}

html.shu-page-transition.is-page-loaded::after {
	transform: translate3d(-50%, -50%, 0) scale(1.035);
	animation: none;
}

/* ページ離脱時に再表示 */
html.shu-page-transition.is-page-leaving::before,
html.shu-page-transition.is-page-leaving::after {
	opacity: 1;
	visibility: visible;
}

html.shu-page-transition.is-page-leaving::after {
	transform: translate3d(-50%, -50%, 0) scale(1);
	animation: shu-loader-breathe 1200ms ease-in-out infinite alternate;
}

@keyframes shu-loader-breathe {
	from {
		transform: translate3d(-50%, -50%, 0) scale(.97);
		opacity: .68;
	}
	to {
		transform: translate3d(-50%, -50%, 0) scale(1.015);
		opacity: 1;
	}
}


/* =========================================================
   SHU Promotion MARQUEE
========================================================= */

/*
 * JSが既存の
 * .talent-brand-watermark
 * .talent-list-brand
 * [data-shu-marquee]
 * を自動でマーキー化します。
 */
.talent-brand-watermark.shu-marquee,
.talent-list-brand.shu-marquee,
[data-shu-marquee].shu-marquee {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	overflow: hidden;
	text-align: left !important;
	white-space: nowrap;
}

/*
 * 2つの同一グループを横並びにし、
 * ちょうど1グループ分だけ左へ移動するため
 * 継ぎ目なく無限ループします。
 */
.shu-marquee__track {
	display: flex;
	width: max-content;
	min-width: 200%;
	align-items: center;
	will-change: transform;
	animation: shu-marquee-scroll 22s linear infinite;
}

.shu-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	gap: .48em;
	padding-right: .48em;
}

.shu-marquee__item {
	display: block;
	flex: none;
	white-space: nowrap;
}

@keyframes shu-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/*
 * Hoverで止めない仕様。
 * 常に右→左へ流れ続けます。
 */


/* =========================================================
   ADMIN BAR
========================================================= */

html.shu-page-transition.is-page-leaving #wpadminbar {
	pointer-events: auto;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {
	html.shu-page-transition::after {
		width: 58px;
	}

	.shu-marquee__track {
		animation-duration: 17s;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	html.shu-page-transition body,
	html.shu-page-transition.is-page-loaded body,
	html.shu-page-transition.is-page-leaving body {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	html.shu-page-transition::before,
	html.shu-page-transition::after,
	html.shu-page-transition.is-page-loaded::before,
	html.shu-page-transition.is-page-loaded::after,
	html.shu-page-transition.is-page-leaving::before,
	html.shu-page-transition.is-page-leaving::after {
		display: none !important;
		animation: none !important;
		transition: none !important;
	}

	.shu-marquee__track {
		animation: none !important;
		transform: none !important;
	}
}