/* RZM Portfolio Kit
   ------------------------------------------------------------------ */

/* Cursor
   ------------------------------------------------------------------ */
.rzm-ring,
.rzm-dot {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 999999;
	opacity: 0;
	will-change: transform;
	transition: opacity 0.25s ease;
}

.rzm-ring {
	width: var(--rzm-ring-size, 42px);
	height: var(--rzm-ring-size, 42px);
	margin-left: calc(var(--rzm-ring-size, 42px) / -2);
	margin-top: calc(var(--rzm-ring-size, 42px) / -2);
	border: var(--rzm-ring-width, 1.5px) solid var(--rzm-ring-color, #F5B335);
	border-radius: 50%;
}

.rzm-dot {
	width: var(--rzm-dot-size, 6px);
	height: var(--rzm-dot-size, 6px);
	margin-left: calc(var(--rzm-dot-size, 6px) / -2);
	margin-top: calc(var(--rzm-dot-size, 6px) / -2);
	background: var(--rzm-dot-color, #F5B335);
	border-radius: 50%;
}

.rzm-cursor-live.rzm-ring,
.rzm-cursor-live.rzm-dot {
	opacity: 1;
}

html.rzm-hide-native,
html.rzm-hide-native * {
	cursor: none !important;
}

html.rzm-hide-native .rzm-cursor-ignore,
html.rzm-hide-native .rzm-cursor-ignore * {
	cursor: auto !important;
}

html.rzm-hide-native input,
html.rzm-hide-native textarea,
html.rzm-hide-native select {
	cursor: text !important;
}

/* Glass
   ------------------------------------------------------------------ */
.rzm-glass {
	background: var(--rzm-glass-fill, rgba(255, 255, 255, 0.08));
	-webkit-backdrop-filter: blur(var(--rzm-glass-blur, 12px));
	backdrop-filter: blur(var(--rzm-glass-blur, 12px));
	border: 1px solid var(--rzm-glass-border, rgba(255, 255, 255, 0.18));
	border-radius: 16px;
}

.rzm-glass-hover {
	transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.rzm-glass-hover:hover {
	transform: translateY(-4px);
	border-color: var(--rzm-glass-accent, rgba(245, 179, 53, 0.45));
	background: var(--rzm-glass-fill, rgba(255, 255, 255, 0.12));
}

/* Floating icons
   ------------------------------------------------------------------ */
@keyframes rzm-bob {
	0%,
	100% {
		transform: translateY(-9px) rotate(-6deg);
	}
	50% {
		transform: translateY(9px) rotate(6deg);
	}
}

.rzm-float,
.rzm-float-2,
.rzm-float-3,
.rzm-float-4 {
	animation: rzm-bob 6s ease-in-out infinite;
	will-change: transform;
}

.rzm-float-2 {
	animation-duration: 7s;
	animation-delay: -1.4s;
}

.rzm-float-3 {
	animation-duration: 6.4s;
	animation-delay: -2.8s;
}

.rzm-float-4 {
	animation-duration: 7.6s;
	animation-delay: -4.2s;
}

@keyframes rzm-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(8px);
	}
}

.rzm-bounce {
	animation: rzm-bounce 1.8s ease-in-out infinite;
}

/* Scroll reveal
   ------------------------------------------------------------------ */
.rzm-reveal {
	opacity: 0;
	transform: translateY(var(--rzm-reveal-y, 24px));
	transition:
		opacity var(--rzm-reveal-dur, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--rzm-reveal-dur, 700ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.rzm-reveal.rzm-in {
	opacity: 1;
	transform: none;
}

/* Marquee selection box
   ------------------------------------------------------------------ */
.rzm-marquee {
	position: relative;
	display: inline-block;
}

.rzm-marquee::before {
	content: "";
	position: absolute;
	inset: -10px -14px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.rzm-marquee:hover::before {
	opacity: 1;
}

.rzm-marquee .rzm-handle {
	position: absolute;
	width: 7px;
	height: 7px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.rzm-marquee:hover .rzm-handle {
	opacity: 1;
}

.rzm-handle.tl { top: -14px; left: -18px; }
.rzm-handle.tr { top: -14px; right: -18px; }
.rzm-handle.bl { bottom: -14px; left: -18px; }
.rzm-handle.br { bottom: -14px; right: -18px; }

/* Magnetic
   ------------------------------------------------------------------ */
.rzm-magnetic {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Hero
   ------------------------------------------------------------------ */
.rzm-hero {
	position: relative;
	overflow: hidden;
}

.rzm-hero-eyebrow {
	font-size: clamp(11px, 1.1vw, 15px);
	letter-spacing: 0.35em;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 0.4em;
}

.rzm-hero-title {
	font-size: clamp(52px, 10vw, 150px);
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--rzm-accent, #F5B335);
	margin: 0;
	text-transform: uppercase;
}

.rzm-hero-name {
	font-size: clamp(11px, 1.1vw, 15px);
	letter-spacing: 0.35em;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	margin: 1em 0 0;
}

.rzm-btn-glass {
	display: inline-block;
	margin-top: 2rem;
	padding: 0.8em 2em;
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: #fff;
	text-decoration: none;
	background: var(--rzm-glass-fill, rgba(255, 255, 255, 0.08));
	-webkit-backdrop-filter: blur(var(--rzm-glass-blur, 12px));
	backdrop-filter: blur(var(--rzm-glass-blur, 12px));
	border: 1px solid var(--rzm-glass-border, rgba(255, 255, 255, 0.18));
	transition: border-color 0.3s ease, background 0.3s ease;
}

.rzm-btn-glass:hover {
	color: #fff;
	border-color: var(--rzm-accent, #F5B335);
	background: var(--rzm-glass-accent, rgba(245, 179, 53, 0.18));
}

.rzm-scroll-cue {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--rzm-accent, #F5B335);
	font-size: 22px;
	line-height: 1;
}

.rzm-icon-slot {
	position: absolute;
	z-index: 2;
}

.rzm-icon-slot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Accessibility
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.rzm-float,
	.rzm-float-2,
	.rzm-float-3,
	.rzm-float-4,
	.rzm-bounce {
		animation: none;
	}

	.rzm-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rzm-ring,
	.rzm-dot {
		display: none;
	}

	html.rzm-hide-native,
	html.rzm-hide-native * {
		cursor: auto !important;
	}
}