/*
Theme Name: NE Links
Template: twentytwentyfive
Description: Link in bio for nicholaseberlin.com
Version: 4.0.0
*/

/* ─── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; overscroll-behavior: none; }
.wp-site-blocks { padding: 0 !important; }

/* ─── Background & font ──────────────────────────── */
body {
	background-color: rgb(8, 5, 16);
	font-family: 'DM Sans', system-ui, sans-serif;
	cursor: none;
}

* { cursor: none !important; user-select: none; -webkit-user-select: none; }
* { outline: none !important; }

/* ─── Page wrap ──────────────────────────────────── */
.ne-page-wrap {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100svh;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4rem 2rem;
}

.admin-bar .ne-page-wrap {
	min-height: calc(100svh - 32px);
}

/* ─── Content — no card, just layout ─────────────── */
.ne-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 340px;
}

/* ─── Avatar ─────────────────────────────────────── */
.ne-avatar {
	margin: 0 0 2.25rem 0 !important;
	animation: ne-fadein 0.8s ease 0.1s both;
}

.ne-avatar img {
	border-radius: 50% !important;
	width: 120px !important;
	height: 120px !important;
	object-fit: cover;
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 18px 4px var(--ne-glow, hsla(225, 90%, 65%, 0.6));
}


/* ─── Name — gradient shimmer ────────────────────── */
.ne-name {
	margin: 0 0 2rem 0;
	overflow: hidden;
}

.ne-name h1 {
	font-size: 0.8125rem !important;
	font-weight: 300 !important;
	letter-spacing: 0.4em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	font-family: 'DM Sans', system-ui, sans-serif !important;
	color: #ffffff !important;
	animation: ne-reveal 1s cubic-bezier(0.77, 0, 0.175, 1) 0.35s both;
}


/* ─── Divider — gradient glow ────────────────────── */
.ne-divider {
	width: 100%;
	margin: 0 0 2rem 0 !important;
	animation: ne-grow 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.85s both;
}

.ne-divider hr {
	border: none;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--ne-line-a, hsla(200, 90%, 70%, 0.7)),
		var(--ne-line-b, hsla(250, 90%, 70%, 0.7)),
		transparent
	);
	margin: 0;
	animation: ne-divider-pulse 5s ease-in-out 1.5s infinite;
}

@keyframes ne-divider-pulse {
	0%, 100% { opacity: 0.5; }
	50%       { opacity: 1;   }
}

/* ─── Buttons — pill + glass + glow hover ───────── */
.ne-links { width: 100%; }

.ne-links .wp-block-buttons {
	width: 100%;
	display: flex !important;
	flex-direction: column;
	gap: 0.625rem !important;
}

.ne-links .wp-block-button { width: 100%; }

.ne-links .wp-block-button__link.wp-element-button {
	background: rgba(255, 255, 255, 0.03) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, 0.65) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 100px !important;
	font-family: 'DM Sans', system-ui, sans-serif !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	padding: 1rem 1.5rem !important;
	width: 100%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	text-align: center !important;
	box-shadow: 0 0 0 transparent !important;
	transition:
		background   0.3s ease,
		border-color 0.3s ease,
		color        0.3s ease,
		box-shadow   0.3s ease !important;
}

.ne-links .wp-block-button__link.wp-element-button svg {
	flex-shrink: 0;
	opacity: 0.55;
	transition: opacity 0.3s ease;
}

.ne-links .wp-block-button__link.wp-element-button:hover {
	background:   var(--ne-btn-bg,     hsla(225, 80%, 55%, 0.1))  !important;
	border-color: var(--ne-btn-border, hsla(225, 80%, 65%, 0.5))  !important;
	color: #ffffff !important;
	box-shadow:
		0 0 25px      var(--ne-btn-shadow, hsla(225, 80%, 55%, 0.35)),
		inset 0 0 15px var(--ne-btn-inset,  hsla(225, 80%, 55%, 0.05)) !important;
}

.ne-links .wp-block-button__link.wp-element-button:hover svg {
	opacity: 1;
}

/* Staggered entrance */
.ne-links .wp-block-button:nth-child(1) .wp-block-button__link { animation: ne-fadein 0.6s ease 1.0s  both; }
.ne-links .wp-block-button:nth-child(2) .wp-block-button__link { animation: ne-fadein 0.6s ease 1.15s both; }
.ne-links .wp-block-button:nth-child(3) .wp-block-button__link { animation: ne-fadein 0.6s ease 1.3s  both; }

/* ─── Shared keyframes ───────────────────────────── */
@keyframes ne-fadein {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0);    }
}

@keyframes ne-reveal {
	from { clip-path: inset(0 100% 0 0); opacity: 0; }
	to   { clip-path: inset(0 0%   0 0); opacity: 1; }
}

@keyframes ne-grow {
	from { opacity: 0; transform: scaleX(0); transform-origin: left; }
	to   { opacity: 1; transform: scaleX(1); transform-origin: left; }
}