/* ==========================================================================
   UZMOVI.com — premium logo (pure HTML + CSS, no image files)
   Replaces: {THEME}/images/logo.gif
   Palette sampled from the original artwork:
     surface #222933 · ink #FFFFFF · accent #8BC34A
   ========================================================================== */

.uzm-logo {
	/* ---- tuning knobs: change --uzm-fs to resize the whole logo ---- */
	--uzm-fs: 52px;
	--uzm-green: #8BC34A;
	--uzm-green-lt: #C7EE81;
	--uzm-green-dk: #4E8A1C;
	--uzm-ink: #FFFFFF;
	--uzm-ink-dim: #D3DAE2;
	--uzm-glow: rgba(139, 195, 74, .45);
	--uzm-font: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	font-family: var(--uzm-font);
	font-size: var(--uzm-fs);
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
	text-decoration: none;
	isolation: isolate;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.uzm-logo:hover,
.uzm-logo:focus {
	text-decoration: none;
}

/* soft accent glow that follows the pointer (JS feeds --uzm-mx / --uzm-my) */
.uzm-logo::before {
	content: "";
	position: absolute;
	top: -.3em;
	right: -.4em;
	bottom: -.3em;
	left: -.4em;
	inset: -.3em -.4em;
	z-index: -1;
	border-radius: .5em;
	background: radial-gradient(32% 70% at var(--uzm-mx, 50%) var(--uzm-my, 50%),
			rgba(139, 195, 74, .22), rgba(139, 195, 74, 0) 70%);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.uzm-logo:hover::before,
.uzm-logo:focus-visible::before {
	opacity: 1;
}

/* --------------------------------------------------------- the wordmark */

.uzm-logo__mark {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	filter: drop-shadow(0 .035em .05em rgba(0, 0, 0, .55));
}

/* never let a narrow column (e.g. the footer's col-md-3) squeeze the letters */
.uzm-logo__txt,
.uzm-logo__tld {
	--uzm-ov: .22em;
	flex: 0 0 auto;
	/* Same clipping story vertically: line-height:1 makes the box exactly
	   font-size tall, so the descender of "g" drops below it and gets no
	   gradient. Grow the box downward, then cancel it in the margin box so
	   `align-items:center` keeps the baseline exactly where it was. */
	padding-bottom: var(--uzm-ov);
	margin-bottom: calc(var(--uzm-ov) * -1);
}

/* Italic glyphs lean past their advance width. `background-clip:text` paints
   only inside the element box, so that overhang (the right edge of "V", the
   tail of "g") would be sliced off. Pad the box by --uzm-oh to give the ink
   room, then pull the same amount back with a negative margin so the visual
   spacing is unchanged. */
.uzm-logo__txt {
	--uzm-oh: .16em;
	padding-right: var(--uzm-oh);
	margin-right: calc(var(--uzm-oh) * -1);
	font-weight: 900;
	font-style: italic;
	color: var(--uzm-ink);
	/* stops are rescaled for the .22em of bottom padding above (1em -> 1.22em),
	   and the end colour is held flat to 100% so the descender area is painted */
	background-image: linear-gradient(180deg, #FFF 0%, #FFF 41%, var(--uzm-ink-dim) 82%, var(--uzm-ink-dim) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.uzm-logo__txt {
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

.uzm-logo__txt--lead {
	margin-right: calc(.01em - var(--uzm-oh));
}

.uzm-logo__txt--tail {
	margin-left: .04em;
	margin-right: calc(.03em - var(--uzm-oh));
}

/* ".org" — smaller, slightly cooler white */
.uzm-logo__tld {
	--uzm-oh: .16em;
	padding-right: var(--uzm-oh);
	margin-right: calc(var(--uzm-oh) * -1);
	margin-left: .04em;
	font-size: .52em;
	font-weight: 800;
	font-style: italic;
	letter-spacing: -.02em;
	color: var(--uzm-ink);
	background-image: linear-gradient(180deg, #FFF 0%, #E4E9EF 82%, #E4E9EF 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.uzm-logo__tld {
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* ------------------------------------------------- the green play button */

.uzm-logo__play {
	position: relative;
	flex: 0 0 auto;
	width: .88em;
	height: .88em;
	margin: 0 .015em 0 .02em;
	transform: translateY(-.015em);
}

/* rotating brush-stroke arc around the disc */
.uzm-logo__ring {
	position: absolute;
	top: -.085em;
	right: -.085em;
	bottom: -.085em;
	left: -.085em;
	inset: -.085em;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
			rgba(139, 195, 74, 0) 0deg 26deg,
			var(--uzm-green) 54deg 128deg,
			rgba(139, 195, 74, 0) 156deg 196deg,
			var(--uzm-green-lt) 224deg 302deg,
			rgba(139, 195, 74, 0) 330deg 360deg);
	opacity: 0;
	animation: uzm-spin 11s linear infinite;
}

@supports (mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000)) {
	.uzm-logo__ring {
		opacity: .9;
		-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .055em), #000 calc(100% - .055em));
		mask: radial-gradient(farthest-side, transparent calc(100% - .055em), #000 calc(100% - .055em));
	}
}

.uzm-logo__disc {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:
		radial-gradient(115% 115% at 30% 20%,
			var(--uzm-green-lt) 0%,
			var(--uzm-green) 45%,
			var(--uzm-green-dk) 100%);
	box-shadow:
		0 0 0 .045em rgba(34, 41, 51, .95),
		0 .09em .22em rgba(0, 0, 0, .5),
		0 0 .9em var(--uzm-glow),
		inset 0 .055em .09em rgba(255, 255, 255, .4),
		inset 0 -.07em .1em rgba(0, 0, 0, .25);
	transition: transform .35s cubic-bezier(.2, .9, .3, 1.4), box-shadow .35s ease;
}

.uzm-logo:hover .uzm-logo__disc,
.uzm-logo:focus-visible .uzm-logo__disc {
	transform: scale(1.07);
	box-shadow:
		0 0 0 .045em rgba(34, 41, 51, .95),
		0 .11em .28em rgba(0, 0, 0, .55),
		0 0 1.5em var(--uzm-glow),
		inset 0 .055em .09em rgba(255, 255, 255, .5),
		inset 0 -.07em .1em rgba(0, 0, 0, .25);
}

.uzm-logo__tri {
	width: .3em;
	height: .34em;
	margin-left: .05em;
	background: #FFF;
	-webkit-clip-path: polygon(4% 0%, 100% 50%, 4% 100%);
	clip-path: polygon(4% 0%, 100% 50%, 4% 100%);
	filter: drop-shadow(0 .015em .03em rgba(0, 0, 0, .35));
}

/* click feedback ring (JS toggles .is-pulse) */
.uzm-logo__ripple {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	border-radius: 50%;
	border: .05em solid var(--uzm-green-lt);
	opacity: 0;
	pointer-events: none;
}

.uzm-logo.is-pulse .uzm-logo__ripple {
	animation: uzm-ripple .75s ease-out;
}

/* ------------------------------------------------------- the shine sweep */

.uzm-logo__sheen {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.uzm-logo__sheen::after {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -45%;
	width: 26%;
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, .3) 50%,
			rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	opacity: 0;
}

.uzm-logo.is-sweep .uzm-logo__sheen::after {
	animation: uzm-sweep 1.05s cubic-bezier(.35, 0, .2, 1);
}

/* ------------------------------------------------------------ animations */

@keyframes uzm-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes uzm-ripple {
	0% {
		transform: scale(1);
		opacity: .85;
	}

	100% {
		transform: scale(2.15);
		opacity: 0;
	}
}

@keyframes uzm-sweep {
	0% {
		left: -45%;
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	88% {
		opacity: 1;
	}

	100% {
		left: 125%;
		opacity: 0;
	}
}

/* ----------------------------------------------------------- placements */

/* header — replaces the old `.logotype > img` sizing */
.logotype {
	line-height: 100px;
}

.logotype:hover,
.logotype:focus {
	opacity: 1;
	filter: none;
}

.logotype .uzm-logo {
	--uzm-fs: 50px;
}

/* footer — replaces the old `.footer-logo` sizing */
.uzm-logo--footer {
	--uzm-fs: 40px;
	display: flex;
	max-width: 100%;
}

@media (max-width: 1199px) {
	.logotype .uzm-logo {
		--uzm-fs: 42px;
	}
}

@media (max-width: 991px) {
	.logotype {
		line-height: 60px;
	}

	.logotype .uzm-logo {
		--uzm-fs: 30px;
	}

	.uzm-logo--footer {
		--uzm-fs: 34px;
	}
}

@media (max-width: 380px) {
	.logotype .uzm-logo {
		--uzm-fs: 25px;
	}
}

/* --------------------------------------------------------- a11y / motion */

.uzm-logo:focus-visible {
	outline: 2px solid var(--uzm-green);
	outline-offset: .12em;
	border-radius: .12em;
}

@media (prefers-reduced-motion: reduce) {

	.uzm-logo *,
	.uzm-logo::before,
	.uzm-logo__sheen::after {
		animation: none !important;
		transition: none !important;
	}
}