/* ==========================================================================
   LSD Portal Button — Base + 5 Themes
   ========================================================================== */

/* ---- Base layout ---- */
.lsd-portal-btn {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999990;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .3s ease, filter .3s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	color: #fff;
}

.lsd-portal-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.lsd-portal-btn__icon {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.lsd-portal-btn__ring {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: .35;
	pointer-events: none;
}

.lsd-portal-btn__ring--outer {
	inset: -14px;
	border-width: 1px;
	opacity: .18;
}

/* Tooltip (injected by JS) */
.lsd-portal-tooltip {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: rgba(0,0,0,.85);
	color: #fff;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	transform: translateY(-50%) translateX(8px);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.lsd-portal-tooltip__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 8px;
}

.lsd-portal-btn:hover .lsd-portal-tooltip,
.lsd-portal-btn:focus-visible .lsd-portal-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Idle floating animation */
.lsd-portal-btn--idle {
	animation: lsd-idle-float 4s ease-in-out infinite;
}

@keyframes lsd-idle-float {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(calc(-50% - 6px)) translateX(0); }
}

/* Click animation class (added briefly by JS) */
.lsd-portal-btn--click {
	animation: lsd-click-pulse .35s ease-out forwards !important;
}

@keyframes lsd-click-pulse {
	0%   { transform: translateY(-50%) scale(1); }
	40%  { transform: translateY(-50%) scale(.88); }
	100% { transform: translateY(-50%) scale(1.05); opacity: .6; }
}

/* Small viewports */
@media (max-width: 600px) {
	.lsd-portal-btn {
		width: 48px;
		height: 48px;
		right: 16px;
		bottom: 24px;
		top: auto;
		transform: none;
	}
	.lsd-portal-btn--idle {
		animation-name: lsd-idle-float-mobile;
	}
	@keyframes lsd-idle-float-mobile {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-5px); }
	}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
	.lsd-portal-btn,
	.lsd-portal-btn--idle,
	.lsd-portal-btn__ring,
	.lsd-portal-btn__ring--outer {
		animation: none !important;
		transition: none !important;
	}
}

/* SVG filter helper (hidden) */
.lsd-portal-svg-filters {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ==========================================================================
   1. MATRIX CODE
   ========================================================================== */
.lsd-portal-btn--matrix {
	background: radial-gradient(circle at 40% 40%, #0a3d0a, #001200);
	box-shadow:
		0 0 14px rgba(0, 255, 65, .35),
		0 0 40px rgba(0, 255, 65, .12);
	color: #00ff41;
	border: 1.5px solid rgba(0,255,65,.35);
}

.lsd-portal-btn--matrix .lsd-portal-btn__ring {
	border-color: #00ff41;
	animation: lsd-matrix-ring-pulse 2.4s ease-in-out infinite;
}

.lsd-portal-btn--matrix .lsd-portal-btn__ring--outer {
	animation-delay: .6s;
}

@keyframes lsd-matrix-ring-pulse {
	0%, 100% { opacity: .2; transform: scale(1); }
	50%      { opacity: .55; transform: scale(1.06); }
}

.lsd-portal-btn--matrix::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		repeating-linear-gradient(
			180deg,
			transparent 0px,
			transparent 3px,
			rgba(0,255,65,.06) 3px,
			rgba(0,255,65,.06) 6px
		);
	animation: lsd-matrix-rain 1.8s linear infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes lsd-matrix-rain {
	0%   { background-position: 0 0; }
	100% { background-position: 0 24px; }
}

.lsd-portal-btn--matrix:hover {
	box-shadow:
		0 0 22px rgba(0, 255, 65, .55),
		0 0 60px rgba(0, 255, 65, .2);
	transform: translateY(-50%) scale(1.08);
}

/* Context: logged-in gets brighter glow */
.lsd-portal-btn--matrix.lsd-portal-btn--logged-in {
	box-shadow:
		0 0 18px rgba(0, 255, 65, .5),
		0 0 50px rgba(0, 255, 65, .18);
}

.lsd-portal-btn--matrix.lsd-portal-btn--logged-out {
	box-shadow:
		0 0 10px rgba(0, 255, 65, .2),
		0 0 30px rgba(0, 255, 65, .08);
}

/* ==========================================================================
   2. FUTURISTIC HOLOGRAM
   ========================================================================== */
.lsd-portal-btn--hologram {
	background: rgba(10, 20, 40, .6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1.5px solid;
	border-image: linear-gradient(135deg, #00e5ff, #d500f9) 1;
	border-radius: 50%;
	border-image: none;
	border-color: rgba(0, 229, 255, .5);
	box-shadow:
		0 0 20px rgba(0, 229, 255, .2),
		0 0 40px rgba(213, 0, 249, .1),
		inset 0 0 20px rgba(0, 229, 255, .08);
	color: #00e5ff;
}

.lsd-portal-btn--hologram .lsd-portal-btn__ring {
	border-color: #d500f9;
	animation: lsd-holo-ring 3s ease-in-out infinite;
}

.lsd-portal-btn--hologram .lsd-portal-btn__ring--outer {
	border-color: #00e5ff;
	animation-delay: .8s;
}

@keyframes lsd-holo-ring {
	0%, 100% { opacity: .25; transform: scale(1) rotate(0deg); }
	50%      { opacity: .5; transform: scale(1.08) rotate(10deg); }
}

.lsd-portal-btn--hologram:hover {
	transform: translateY(-50%) scale(1.05);
	box-shadow:
		0 0 30px rgba(0, 229, 255, .35),
		0 0 60px rgba(213, 0, 249, .18),
		inset 0 0 30px rgba(0, 229, 255, .12);
}

.lsd-portal-btn--hologram.lsd-portal-btn--logged-in {
	border-color: rgba(0, 229, 255, .7);
	box-shadow:
		0 0 24px rgba(0, 229, 255, .35),
		0 0 50px rgba(213, 0, 249, .15);
}

.lsd-portal-btn--hologram.lsd-portal-btn--logged-out {
	border-color: rgba(213, 0, 249, .4);
	box-shadow:
		0 0 14px rgba(213, 0, 249, .2);
}

/* ==========================================================================
   3. GLOWING CIRCUIT
   ========================================================================== */
.lsd-portal-btn--circuit {
	background: linear-gradient(145deg, #0d1117, #161b22);
	border: 2px solid rgba(88, 166, 255, .3);
	box-shadow:
		0 0 12px rgba(88, 166, 255, .2),
		0 0 30px rgba(88, 166, 255, .06);
	color: #58a6ff;
}

.lsd-portal-btn--circuit::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		rgba(88, 166, 255, .5) 10%,
		transparent 20%,
		transparent 100%
	);
	animation: lsd-circuit-trace 2.5s linear infinite;
	pointer-events: none;
	z-index: 0;
	mask: radial-gradient(
		circle,
		transparent calc(50% - 3px),
		#000 calc(50% - 3px),
		#000 50%,
		transparent 50%
	);
	-webkit-mask: radial-gradient(
		circle,
		transparent calc(50% - 3px),
		#000 calc(50% - 3px),
		#000 50%,
		transparent 50%
	);
}

@keyframes lsd-circuit-trace {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.lsd-portal-btn--circuit .lsd-portal-btn__ring {
	border-color: #58a6ff;
	animation: lsd-circuit-ring-pulse 2s ease-in-out infinite;
}

@keyframes lsd-circuit-ring-pulse {
	0%, 100% { opacity: .15; }
	50%      { opacity: .4; }
}

.lsd-portal-btn--circuit:hover {
	border-color: rgba(88, 166, 255, .6);
	box-shadow:
		0 0 24px rgba(88, 166, 255, .4),
		0 0 60px rgba(88, 166, 255, .12);
	transform: translateY(-50%) scale(1.06);
}

.lsd-portal-btn--circuit.lsd-portal-btn--logged-in {
	border-color: rgba(88, 166, 255, .55);
	box-shadow:
		0 0 18px rgba(88, 166, 255, .35),
		0 0 40px rgba(88, 166, 255, .1);
}

.lsd-portal-btn--circuit.lsd-portal-btn--logged-out {
	border-color: rgba(88, 166, 255, .2);
	box-shadow:
		0 0 8px rgba(88, 166, 255, .12);
}

/* ==========================================================================
   4. QUANTUM ACCESS NODE
   ========================================================================== */
.lsd-portal-btn--quantum {
	background: radial-gradient(circle at center, #1a0a2e, #0d0d2b);
	border: 1.5px solid rgba(168, 85, 247, .4);
	box-shadow:
		0 0 16px rgba(168, 85, 247, .25),
		0 0 40px rgba(168, 85, 247, .08);
	color: #c084fc;
}

.lsd-portal-btn--quantum .lsd-portal-btn__ring {
	border-color: #a855f7;
	animation: lsd-quantum-orbit 4s linear infinite;
}

.lsd-portal-btn--quantum .lsd-portal-btn__ring--outer {
	animation: lsd-quantum-orbit 6s linear infinite reverse;
	border-style: dashed;
}

@keyframes lsd-quantum-orbit {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.lsd-portal-btn--quantum:hover {
	transform: translateY(-50%) scale(1.06);
	box-shadow:
		0 0 28px rgba(168, 85, 247, .4),
		0 0 60px rgba(168, 85, 247, .15);
}

.lsd-portal-btn--quantum:hover .lsd-portal-btn__ring {
	animation-duration: 8s;
}

.lsd-portal-btn--quantum:hover .lsd-portal-btn__ring--outer {
	animation-duration: 12s;
}

.lsd-portal-btn--quantum.lsd-portal-btn--logged-in {
	border-color: rgba(168, 85, 247, .6);
	box-shadow:
		0 0 20px rgba(168, 85, 247, .4),
		0 0 50px rgba(168, 85, 247, .12);
}

.lsd-portal-btn--quantum.lsd-portal-btn--logged-out {
	border-color: rgba(168, 85, 247, .2);
	box-shadow:
		0 0 10px rgba(168, 85, 247, .15);
}

/* ==========================================================================
   5. CYBERPUNK NEON BADGE
   ========================================================================== */
.lsd-portal-btn--cyberpunk {
	background: linear-gradient(135deg, #1a0000, #1a0a1a);
	border: 2px solid #ff2d55;
	box-shadow:
		0 0 14px rgba(255, 45, 85, .3),
		0 0 40px rgba(255, 45, 85, .08);
	color: #ff2d55;
	clip-path: polygon(
		15% 0%, 85% 0%, 100% 15%, 100% 85%,
		85% 100%, 15% 100%, 0% 85%, 0% 15%
	);
	border-radius: 0;
}

.lsd-portal-btn--cyberpunk .lsd-portal-btn__ring,
.lsd-portal-btn--cyberpunk .lsd-portal-btn__ring--outer {
	display: none;
}

.lsd-portal-btn--cyberpunk::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		transparent 40%,
		rgba(255, 45, 85, .1) 50%,
		transparent 60%
	);
	animation: lsd-cyber-flicker 3s step-end infinite;
	pointer-events: none;
}

@keyframes lsd-cyber-flicker {
	0%, 90%, 100% { opacity: 1; }
	91%           { opacity: .4; }
	93%           { opacity: 1; }
	95%           { opacity: .6; }
	97%           { opacity: 1; }
}

.lsd-portal-btn--cyberpunk:hover {
	box-shadow:
		0 0 24px rgba(255, 45, 85, .5),
		0 0 60px rgba(255, 45, 85, .15);
	filter: url(#lsd-glitch);
	transform: translateY(-50%) scale(1.06);
}

.lsd-portal-btn--cyberpunk:active {
	filter: url(#lsd-glitch);
}

.lsd-portal-btn--cyberpunk.lsd-portal-btn--logged-in {
	border-color: #ff6b8a;
	box-shadow:
		0 0 18px rgba(255, 107, 138, .4),
		0 0 44px rgba(255, 107, 138, .1);
}

.lsd-portal-btn--cyberpunk.lsd-portal-btn--logged-out {
	border-color: rgba(255, 45, 85, .4);
	box-shadow:
		0 0 8px rgba(255, 45, 85, .15);
}