/* Opening logo animation (home page). See template-parts/intro.php. */
.ph-intro { display: none; }
.js .ph-intro { display: block; position: fixed; inset: 0; z-index: 1000; color: #f6f3ee; animation: phSwap .9s cubic-bezier(.65, 0, .35, 1) 1.9s forwards; }
.js.ph-intro-seen .ph-intro, .ph-intro.is-done { display: none; }
.ph-intro__bg { position: absolute; inset: 0; background: #4f4f4f; animation: phBgSwap .9s cubic-bezier(.65, 0, .35, 1) 1.9s forwards; }
.ph-intro__logo { position: absolute; left: 50%; top: 50%; width: min(64vw, 560px); height: auto; transform: translate(-50%, -50%); overflow: visible; fill: currentColor; }
.pi-p { transform: translateX(203.2px); opacity: 0; animation: phP 1s cubic-bezier(.2, .7, .2, 1) .2s forwards, phPSlide 1s cubic-bezier(.65, 0, .35, 1) 1.9s forwards; }
.pi-l { opacity: 0; transform: translateX(-14px); animation: phL .5s cubic-bezier(.2, .7, .2, 1) forwards; }
.pi-l1 { animation-delay: 2.75s; } .pi-l2 { animation-delay: 2.82s; } .pi-l3 { animation-delay: 2.89s; } .pi-l4 { animation-delay: 2.96s; }
.pi-l5 { animation-delay: 3.03s; } .pi-l6 { animation-delay: 3.1s; } .pi-l7 { animation-delay: 3.17s; }
@keyframes phP { from { opacity: 0; } to { opacity: 1; } }
@keyframes phPSlide { from { transform: translateX(203.2px); } to { transform: translateX(0); } }
@keyframes phL { to { opacity: 1; transform: none; } }
@keyframes phSwap { to { color: #4f4f4f; } }
@keyframes phBgSwap { to { background-color: #f6f3ee; } }

/* The flying logo uses the same file as the header logo, so the handover is exact. */
.ph-fly { position: absolute; left: 0; top: 0; visibility: hidden; transform-origin: 0 0; }
.ph-fly span { position: absolute; inset: 0; -webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain; }
.ph-fly__dark { background: #4f4f4f; }
.ph-fly__light { background: #fff; opacity: 0; }
.ph-intro.is-ready .ph-fly, .ph-intro.is-ready .ph-fly__light, .ph-intro.is-ready .ph-intro__bg { will-change: transform, opacity; }
.ph-intro.is-moving { pointer-events: none; }
.ph-intro.is-moving .ph-fly { visibility: visible; }
.ph-intro.is-moving .ph-intro__logo { visibility: hidden; }

.ph-intro__skip {
	position: absolute; right: 24px; bottom: 24px; min-height: 44px; padding: 0 18px;
	background: none; border: 1px solid currentColor; color: inherit; opacity: .7; cursor: pointer;
	font: 500 11px/1 Jost, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase;
	transition: opacity .3s;
}
.ph-intro__skip:hover { opacity: 1; }
.ph-intro__skip:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 3px; }
.ph-intro.is-moving .ph-intro__skip { opacity: 0; }

html.ph-intro-brand .site-header__brand { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
	.js .ph-intro { display: none; }
}