/*
Theme Name: NEYORIA
Theme URI: https://neyoria.com/
Description: Official ultra-minimal NEYORIA Natural Deodorant brand presence theme
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: neyoria
*/

:root {
	--neyoria-deep-olive: #434c3d;
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	min-height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--neyoria-deep-olive);
}

.brand-presence {
	width: 100%;
	height: 100vh;
	height: 100svh;
	display: grid;
	place-items: center;
	padding: clamp(40px, 8vw, 128px);
	overflow: hidden;
	background: var(--neyoria-deep-olive);
}

.brand-lockup {
	--motion-x: 0px;
	--motion-y: 0px;
	position: relative;
	display: block;
	width: clamp(220px, 28vw, 380px);
	max-width: 100%;
	aspect-ratio: 1200 / 520;
	transform: translate3d(var(--motion-x), var(--motion-y), 0);
}

.logo-segment {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	transform: none;
}

.logo-leaf {
	clip-path: inset(0 0 65% 0);
}

.logo-wordmark {
	clip-path: inset(28% 0 35% 0);
}

.logo-descriptor {
	clip-path: inset(57% 0 0 0);
}

@supports (animation-name: neyoria-leaf-reveal) {
	.logo-leaf {
		animation: neyoria-leaf-reveal 780ms cubic-bezier(.22, .61, .36, 1) 120ms backwards;
	}

	.logo-wordmark {
		animation: neyoria-wordmark-reveal 860ms cubic-bezier(.22, .61, .36, 1) 560ms backwards;
	}

	.logo-descriptor {
		animation: neyoria-descriptor-reveal 720ms cubic-bezier(.22, .61, .36, 1) 1000ms backwards;
	}
}

@keyframes neyoria-leaf-reveal {
	from {
		opacity: 0;
		transform: translateY(2px) scale(.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes neyoria-wordmark-reveal {
	from {
		opacity: 0;
		transform: translateY(3px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes neyoria-descriptor-reveal {
	from {
		opacity: 0;
		transform: translateY(2px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.brand-lockup {
		transition: transform 480ms cubic-bezier(.22, .61, .36, 1);
	}

	.logo-leaf {
		transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
	}

	.brand-lockup:hover {
		transform: translate3d(var(--motion-x), var(--motion-y), 0) scale(1.012);
	}

	.brand-lockup:hover .logo-leaf {
		transform: translateY(-1.5px);
	}
}

@media (max-width: 560px) {
	.brand-presence {
		padding: 34px;
	}

	.brand-lockup {
		width: min(72vw, 290px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.brand-lockup,
	.brand-lockup:hover,
	.logo-segment,
	.brand-lockup:hover .logo-leaf {
		--motion-x: 0px;
		--motion-y: 0px;
		opacity: 1;
		animation: none;
		transition: none;
		transform: none;
	}
}