/**
 * Creative Scroll to Top Button - Frontend Styles
 * Version: 1.0.0
 */

/* CSS Variables for customization */
:root {
	--creative-scroll-to-top-button-primary: #8b5cf6;
	--creative-scroll-to-top-button-hover: #7c3aed;
	--creative-scroll-to-top-button-bottom-offset: 32px;
	--creative-scroll-to-top-button-transition: all .3s cubic-bezier(.4, 0, .2, 1);
	--creative-scroll-to-top-button-transition-elastic: all .6s cubic-bezier(.175, .885, .32, 1.275);
	/* Additional color variables */
	--creative-scroll-to-top-button-accent: #f59e0b;
	--creative-scroll-to-top-button-blue: #3b82f6;
	--creative-scroll-to-top-button-cyan: #06b6d4;
	--creative-scroll-to-top-button-pink: #ec4899;
	--creative-scroll-to-top-button-dark: #0f172a;
	--creative-scroll-to-top-button-white: #fff;
	/* Shadow variables */
	--creative-scroll-to-top-button-shadow-glow: 0 0 20px rgba(139, 92, 246, .5);
	--creative-scroll-to-top-button-shadow-holographic: 0 8px 32px rgba(6, 182, 212, .3);
	--creative-scroll-to-top-button-shadow-neon: 0 0 30px rgba(6, 182, 212, .8);
}

/* Container */
#creative-scroll-to-top-button-container {
	position: fixed;
	z-index: 9999;
}

#creative-scroll-to-top-button-container[data-position="bottom-right"] {
	bottom: var(--creative-scroll-to-top-button-bottom-offset);
	right: 2rem;
}

#creative-scroll-to-top-button-container[data-position="bottom-left"] {
	bottom: var(--creative-scroll-to-top-button-bottom-offset);
	left: 2rem;
}

#creative-scroll-to-top-button-container[data-position="bottom-center"] {
	bottom: var(--creative-scroll-to-top-button-bottom-offset);
	left: 50%;
	transform: translateX(-50%);
}

/* Base button styles */
.creative-scroll-to-top-button-btn {
	width: 3.5rem;
	height: 3.5rem;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--creative-scroll-to-top-button-transition);
	transform: translateY(1rem);
	opacity: 0;
	pointer-events: none;
	position: relative;
	outline: none;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
}

.creative-scroll-to-top-button-btn.visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.creative-scroll-to-top-button-btn.hidden {
	opacity: 0;
	transform: translateY(1rem);
	pointer-events: none;
}

/* Classic Button */
.creative-scroll-to-top-button-classic {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-accent));
	color: var(--creative-scroll-to-top-button-white);
	box-shadow: 0 4px 15px rgba(139, 92, 246, .3);
}

.creative-scroll-to-top-button-classic:hover {
	transform: scale(1.1) translateY(0);
	box-shadow: var(--creative-scroll-to-top-button-shadow-glow);
}

/* Progress Circle Button */
.creative-scroll-to-top-button-progress {
	background: rgba(139, 92, 246, .9);
	backdrop-filter: blur(12px);
	color: var(--creative-scroll-to-top-button-primary);
	border: 1px solid rgba(255, 255, 255, .2);
	width: 4rem;
	height: 4rem;
}

.creative-scroll-to-top-button-progress-circle {
	position: absolute;
	top: 2px;
	left: 2px;
}

.creative-scroll-to-top-button-progress-stroke {
	transition: stroke-dashoffset .3s ease;
	transform: rotate(-90deg);
	transform-origin: center;
	stroke: var(--creative-scroll-to-top-button-primary);
}

.creative-scroll-to-top-button-progress-icon {
	position: relative;
	z-index: 1;
	color: var(--creative-scroll-to-top-button-white);
}

/* Rocket Button */
.creative-scroll-to-top-button-rocket {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-blue), var(--creative-scroll-to-top-button-primary));
	color: var(--creative-scroll-to-top-button-white);
	animation: creative-scroll-to-top-button-rocket-float 2s ease-in-out infinite;
}

.creative-scroll-to-top-button-rocket:hover {
	transform: scale(1.1) translateY(-2px);
}

.creative-scroll-to-top-button-rocket.launching {
	animation: creative-scroll-to-top-button-rocket-launch .6s ease-out;
}

@keyframes creative-scroll-to-top-button-rocket-float {
	0%, 100% {
		transform: translateY(0px);
	}
	
	50% {
		transform: translateY(-3px);
	}
}

@keyframes creative-scroll-to-top-button-rocket-launch {
	0% {
		transform: scale(1) translateY(0) rotate(0deg);
	}
	
	50% {
		transform: scale(1.2) translateY(-20px) rotate(-10deg);
	}
	
	100% {
		transform: scale(1) translateY(0) rotate(0deg);
	}
}

/* Bubble Button */
.creative-scroll-to-top-button-bubble {
	background: rgba(139, 92, 246, .7);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .3);
	color: var(--creative-scroll-to-top-button-primary);
	animation: creative-scroll-to-top-button-bubble-float 3s ease-in-out infinite;
}

.creative-scroll-to-top-button-bubble:hover {
	transform: scale(1.1);
	background: linear-gradient(135deg, rgba(139, 92, 246, .3), rgba(245, 158, 11, .3));
}

@keyframes creative-scroll-to-top-button-bubble-float {
	0%, 100% {
		transform: translateY(0px);
	}
	
	50% {
		transform: translateY(-10px);
	}
}

/* Minimal Button */
.creative-scroll-to-top-button-minimal {
	background: rgba(139, 92, 246, .8);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--creative-scroll-to-top-button-white);
	width: 3rem;
	height: 3rem;
	animation: creative-scroll-to-top-button-minimal-glow 2s ease-in-out infinite;
}

@keyframes creative-scroll-to-top-button-minimal-glow {
	0%, 100% {
		box-shadow: 0 0 10px rgba(139, 92, 246, .3);
	}
	
	50% {
		box-shadow: 0 0 20px rgba(139, 92, 246, .6);
	}
}

/* Cosmic Button */
.creative-scroll-to-top-button-cosmic {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-accent));
	color: var(--creative-scroll-to-top-button-white);
	animation: creative-scroll-to-top-button-cosmic-pulse 2s ease-in-out infinite;
}

.creative-scroll-to-top-button-cosmic:hover {
	transform: scale(1.1) rotate(5deg);
}

@keyframes creative-scroll-to-top-button-cosmic-pulse {
	0%, 100% {
		box-shadow: 0 0 15px rgba(139, 92, 246, .5);
	}
	
	50% {
		box-shadow: 0 0 25px rgba(245, 158, 11, .6);
	}
}

/* Holographic Button */
.creative-scroll-to-top-button-holographic {
	background: linear-gradient(45deg, rgba(6, 182, 212, .2), rgba(139, 92, 246, .2), rgba(236, 72, 153, .2));
	backdrop-filter: blur(12px);
	border: 1px solid rgba(6, 182, 212, .3);
	color: var(--creative-scroll-to-top-button-cyan);
	animation: creative-scroll-to-top-button-holographic-shimmer 3s ease-in-out infinite;
}

@keyframes creative-scroll-to-top-button-holographic-shimmer {
	0%, 100% {
		filter: hue-rotate(0deg) brightness(1);
	}
	
	33% {
		filter: hue-rotate(120deg) brightness(1.2);
	}
	
	66% {
		filter: hue-rotate(240deg) brightness(1.1);
	}
}

/* Neon Button */
.creative-scroll-to-top-button-neon {
	background: var(--creative-scroll-to-top-button-dark);
	border: 2px solid var(--creative-scroll-to-top-button-cyan);
	color: var(--creative-scroll-to-top-button-cyan);
	box-shadow: 0 0 10px rgba(6, 182, 212, .5), inset 0 0 10px rgba(6, 182, 212, .1);
	animation: creative-scroll-to-top-button-neon-pulse 2s ease-in-out infinite;
}

@keyframes creative-scroll-to-top-button-neon-pulse {
	0%, 100% {
		box-shadow: 0 0 10px rgba(6, 182, 212, .5), inset 0 0 10px rgba(6, 182, 212, .1);
	}
	
	50% {
		box-shadow: 0 0 20px rgba(6, 182, 212, .8), inset 0 0 20px rgba(6, 182, 212, .2);
	}
}

/* Magic Button */
.creative-scroll-to-top-button-magic {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-pink), var(--creative-scroll-to-top-button-accent));
	color: var(--creative-scroll-to-top-button-white);
	box-shadow: var(--creative-scroll-to-top-button-shadow-holographic);
	transition: var(--creative-scroll-to-top-button-transition-elastic);
}

.creative-scroll-to-top-button-magic:hover {
	transform: scale(1.1);
}

.creative-scroll-to-top-button-magic.casting {
	animation: creative-scroll-to-top-button-magic-sparkle 2s ease-out;
}

@keyframes creative-scroll-to-top-button-magic-sparkle {
	0% {
		transform: scale(1) rotate(0deg);
		filter: brightness(1);
	}
	
	25% {
		transform: scale(1.2) rotate(5deg);
		filter: brightness(1.5);
	}
	
	50% {
		transform: scale(1.1) rotate(-3deg);
		filter: brightness(1.3);
	}
	
	75% {
		transform: scale(1.15) rotate(2deg);
		filter: brightness(1.4);
	}
	
	100% {
		transform: scale(1) rotate(0deg);
		filter: brightness(1);
	}
}

/* Side Progress Bar - Always positioned at browser scroll bar, independent of button position */
.creative-scroll-to-top-button-side-progress {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	transform: none !important;
	width: 4px;
	height: 100vh;
	background: rgba(139, 92, 246, .1);
	z-index: 9998;
	cursor: pointer;
	opacity: 0;
	transition: opacity .3s ease;
}

.creative-scroll-to-top-button-side-progress.visible {
	opacity: 1;
}

.creative-scroll-to-top-button-progress-fill {
	width: 100%;
	background: linear-gradient(to top, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-hover));
	border-radius: 2px;
	transition: height .1s ease;
	height: 0%;
}

/* Cosmic Background Effects (Optional) */
.creative-scroll-to-top-button-cosmic::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-accent), var(--creative-scroll-to-top-button-pink));
	border-radius: 50%;
	z-index: -1;
	opacity: 0;
	transition: opacity .3s ease;
}

.creative-scroll-to-top-button-cosmic:hover::before {
	opacity: .7;
}

/* Holographic Effects */
.creative-scroll-to-top-button-holographic::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%);
	border-radius: 50%;
	transform: translateX(-100%);
	transition: transform .6s ease;
}

.creative-scroll-to-top-button-holographic:hover::before {
	transform: translateX(100%);
}

/* Magic Button Sparkle Effects */
.creative-scroll-to-top-button-magic::before {
	content: "✨";
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 12px;
	opacity: 0;
	animation: creative-scroll-to-top-button-magic-sparkle-orbit 4s linear infinite;
}

.creative-scroll-to-top-button-magic::after {
	content: "⭐";
	position: absolute;
	bottom: -8px;
	left: -8px;
	font-size: 10px;
	opacity: 0;
	animation: creative-scroll-to-top-button-magic-sparkle-orbit 3s linear infinite reverse;
}

@keyframes creative-scroll-to-top-button-magic-sparkle-orbit {
	0% {
		opacity: 0;
		transform: rotate(0deg) translateX(20px) rotate(0deg);
	}
	
	25% {
		opacity: 1;
	}
	
	75% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
		transform: rotate(360deg) translateX(20px) rotate(-360deg);
	}
}

/* Bubble Button Ripple Effect */
.creative-scroll-to-top-button-bubble::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, .3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .6s ease, height .6s ease, opacity .6s ease;
	opacity: 0;
}

.creative-scroll-to-top-button-bubble:hover::before {
	width: 100%;
	height: 100%;
	opacity: 1;
}

/* Neon Button Glow Enhancement */
.creative-scroll-to-top-button-neon::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, var(--creative-scroll-to-top-button-cyan), transparent, var(--creative-scroll-to-top-button-cyan));
	border-radius: 50%;
	z-index: -1;
	opacity: 0;
	transition: opacity .3s ease;
}

.creative-scroll-to-top-button-neon:hover::before {
	opacity: .6;
}

/* Responsive Design */
@media (max-width: 768px) {
	#creative-scroll-to-top-button-container[data-position="bottom-right"] {
		right: 1rem;
	}
	
	#creative-scroll-to-top-button-container[data-position="bottom-left"] {
		left: 1rem;
	}
	
	.creative-scroll-to-top-button-btn {
		width: 3rem;
		height: 3rem;
	}
	
	.creative-scroll-to-top-button-progress {
		width: 3.5rem;
		height: 3.5rem;
	}
	
	.creative-scroll-to-top-button-minimal {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@media (max-width: 480px) {
	.creative-scroll-to-top-button-btn {
		width: 2.8rem;
		height: 2.8rem;
	}
	
	.creative-scroll-to-top-button-progress {
		width: 3.2rem;
		height: 3.2rem;
	}
	
	.creative-scroll-to-top-button-minimal {
		width: 2.3rem;
		height: 2.3rem;
	}
}

/* Color Overrides - These will be dynamically updated by user settings */
.creative-scroll-to-top-button-classic {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-hover)) !important;
}

.creative-scroll-to-top-button-classic:hover {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-hover), var(--creative-scroll-to-top-button-primary)) !important;
}

.creative-scroll-to-top-button-progress {
	background: var(--creative-scroll-to-top-button-primary) !important;
	background: rgba(139, 92, 246, .9) !important;
}

.creative-scroll-to-top-button-progress:hover {
	background: var(--creative-scroll-to-top-button-hover) !important;
	background: rgba(124, 58, 237, .9) !important;
}

.creative-scroll-to-top-button-rocket {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-hover)) !important;
}

.creative-scroll-to-top-button-rocket:hover {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-hover), var(--creative-scroll-to-top-button-primary)) !important;
}

.creative-scroll-to-top-button-bubble {
	color: var(--creative-scroll-to-top-button-primary) !important;
}

.creative-scroll-to-top-button-bubble:hover {
	color: var(--creative-scroll-to-top-button-hover) !important;
}

.creative-scroll-to-top-button-minimal {
	background: var(--creative-scroll-to-top-button-primary) !important;
	background: rgba(139, 92, 246, .8) !important;
}

.creative-scroll-to-top-button-minimal:hover {
	background: var(--creative-scroll-to-top-button-hover) !important;
	background: rgba(124, 58, 237, .8) !important;
}

.creative-scroll-to-top-button-cosmic {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-hover)) !important;
}

.creative-scroll-to-top-button-cosmic:hover {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-hover), var(--creative-scroll-to-top-button-primary)) !important;
}

.creative-scroll-to-top-button-holographic {
	color: var(--creative-scroll-to-top-button-primary) !important;
	border-color: var(--creative-scroll-to-top-button-primary) !important;
}

.creative-scroll-to-top-button-holographic:hover {
	color: var(--creative-scroll-to-top-button-hover) !important;
	border-color: var(--creative-scroll-to-top-button-hover) !important;
}

.creative-scroll-to-top-button-neon {
	border-color: var(--creative-scroll-to-top-button-primary) !important;
	color: var(--creative-scroll-to-top-button-primary) !important;
}

.creative-scroll-to-top-button-neon:hover {
	border-color: var(--creative-scroll-to-top-button-hover) !important;
	color: var(--creative-scroll-to-top-button-hover) !important;
}

.creative-scroll-to-top-button-magic {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-hover), var(--creative-scroll-to-top-button-accent)) !important;
}

.creative-scroll-to-top-button-magic:hover {
	background: linear-gradient(135deg, var(--creative-scroll-to-top-button-hover), var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-accent)) !important;
}

/* Accessibility */
.creative-scroll-to-top-button-btn:focus {
	outline: 2px solid var(--creative-scroll-to-top-button-primary);
	outline-offset: 2px;
}

.creative-scroll-to-top-button-btn:focus-visible {
	outline: 2px solid var(--creative-scroll-to-top-button-primary);
	outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.creative-scroll-to-top-button-btn {
		border: 2px solid currentColor;
	}
	
	.creative-scroll-to-top-button-holographic, .creative-scroll-to-top-button-bubble, .creative-scroll-to-top-button-minimal {
		background: var(--creative-scroll-to-top-button-primary) !important;
		color: var(--creative-scroll-to-top-button-white) !important;
	}
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.creative-scroll-to-top-button-btn, .creative-scroll-to-top-button-side-progress, .creative-scroll-to-top-button-progress-fill, .creative-scroll-to-top-button-progress-stroke {
		animation: none !important;
		transition: opacity .2s ease !important;
	}
	
	.creative-scroll-to-top-button-btn::before, .creative-scroll-to-top-button-btn::after {
		animation: none !important;
	}
}

/* ========== NEW CREATIVE BUTTON VARIANTS ========== */

/* Liquid Wave Button */
.creative-scroll-to-top-button-liquid {
	background: linear-gradient(135deg, #06b6d4, #3b82f6);
	color: var(--creative-scroll-to-top-button-white);
	border-radius: 50%;
	overflow: hidden;
	animation: creative-scroll-to-top-button-liquid-flow 2s ease-in-out infinite;
}

.creative-scroll-to-top-button-liquid::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(circle, rgba(255, 255, 255, .3) 0%, transparent 70%);
	animation: creative-scroll-to-top-button-liquid-ripple 2s ease-in-out infinite;
	pointer-events: none;
}

.creative-scroll-to-top-button-liquid:hover {
	transform: scale(1.1);
	box-shadow: 0 0 30px rgba(6, 182, 212, .6);
}

@keyframes creative-scroll-to-top-button-liquid-ripple {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
	}
	
	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

@keyframes creative-scroll-to-top-button-liquid-flow {
	0%, 100% {
		border-radius: 50%;
	}
	
	25% {
		border-radius: 60% 40% 60% 40%;
	}
	
	50% {
		border-radius: 40% 60% 40% 60%;
	}
	
	75% {
		border-radius: 60% 40% 60% 40%;
	}
}

/* Origami Fold Button */
.creative-scroll-to-top-button-origami {
	background: linear-gradient(135deg, #f7f1e8, #e8dcc6);
	color: #8b4513;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	overflow: hidden;
}

.creative-scroll-to-top-button-origami::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
	animation: creative-scroll-to-top-button-origami-fold 3s linear infinite;
}

.creative-scroll-to-top-button-origami:hover {
	transform: scale(1.1) rotateZ(5deg);
	box-shadow: 0 8px 25px rgba(139, 69, 19, .3);
}

@keyframes creative-scroll-to-top-button-origami-fold {
	0% {
		left: -100%;
	}
	
	100% {
		left: 100%;
	}
}

/* Quantum Shift Button */
.creative-scroll-to-top-button-quantum {
	background: radial-gradient(circle, #1e1b4b, #312e81);
	border: 2px solid var(--creative-scroll-to-top-button-primary);
	color: var(--creative-scroll-to-top-button-primary);
	overflow: visible;
}

.creative-scroll-to-top-button-quantum::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: var(--creative-scroll-to-top-button-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 20px rgba(139, 92, 246, .1), 0 0 0 40px rgba(139, 92, 246, .05);
	animation: creative-scroll-to-top-button-quantum-pulse 2s ease-in-out infinite;
}

.creative-scroll-to-top-button-quantum:hover {
	transform: scale(1.1);
	animation: creative-scroll-to-top-button-quantum-teleport .5s ease-in-out;
}

@keyframes creative-scroll-to-top-button-quantum-pulse {
	0%, 100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	
	50% {
		opacity: .7;
		transform: translate(-50%, -50%) scale(1.5);
	}
}

@keyframes creative-scroll-to-top-button-quantum-teleport {
	0% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
		transform: scale(.8) rotate(180deg);
	}
	
	100% {
		opacity: 1;
		transform: scale(1.1) rotate(360deg);
	}
}

/* Morphing Geometry Button */
.creative-scroll-to-top-button-morphing {
	background: linear-gradient(45deg, var(--creative-scroll-to-top-button-pink), var(--creative-scroll-to-top-button-primary));
	color: var(--creative-scroll-to-top-button-white);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	transition: var(--creative-scroll-to-top-button-transition-elastic);
}

.creative-scroll-to-top-button-morphing:hover {
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	transform: scale(1.1) rotate(45deg);
	background: linear-gradient(45deg, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-blue));
}

.creative-scroll-to-top-button-morphing svg {
	transition: var(--creative-scroll-to-top-button-transition-elastic);
}

.creative-scroll-to-top-button-morphing:hover svg {
	transform: rotate(45deg) scale(.8);
}

/* Flame Burst Button */
.creative-scroll-to-top-button-flame {
	background: radial-gradient(circle at center, #f97316, #dc2626);
	color: #fef3c7;
	overflow: visible;
}

.creative-scroll-to-top-button-flame::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background: radial-gradient(circle, rgba(249, 115, 22, .3), transparent 70%);
	border-radius: 50%;
	animation: creative-scroll-to-top-button-flame-flicker 1.5s ease-in-out infinite alternate;
	pointer-events: none;
}

.creative-scroll-to-top-button-flame:hover {
	transform: scale(1.2);
	animation: creative-scroll-to-top-button-flame-burst .6s ease-out;
	box-shadow: 0 0 30px rgba(249, 115, 22, .8), 0 0 60px rgba(220, 38, 38, .4);
}

@keyframes creative-scroll-to-top-button-flame-flicker {
	0% {
		transform: scale(1) rotate(0deg);
		opacity: .7;
	}
	
	100% {
		transform: scale(1.1) rotate(2deg);
		opacity: 1;
	}
}

@keyframes creative-scroll-to-top-button-flame-burst {
	0% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.3);
		box-shadow: 0 0 50px #f97316, 0 0 100px #dc2626;
	}
	
	100% {
		transform: scale(1.2);
	}
}

/* Crystal Prism Button */
.creative-scroll-to-top-button-crystal {
	background: linear-gradient(135deg, #ef4444, #f59e0b, #10b981, #06b6d4, var(--creative-scroll-to-top-button-primary), var(--creative-scroll-to-top-button-pink));
	background-size: 400% 400%;
	border: 2px solid rgba(255, 255, 255, .3);
	color: var(--creative-scroll-to-top-button-white);
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	overflow: hidden;
	animation: creative-scroll-to-top-button-crystal-rainbow 3s ease-in-out infinite;
}

.creative-scroll-to-top-button-crystal::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
	animation: creative-scroll-to-top-button-crystal-refraction 2s linear infinite;
}

.creative-scroll-to-top-button-crystal:hover {
	transform: scale(1.1) rotate(30deg);
	animation-duration: .5s;
	filter: brightness(1.3) saturate(1.5);
}

@keyframes creative-scroll-to-top-button-crystal-rainbow {
	0% {
		background-position: 0% 50%;
	}
	
	50% {
		background-position: 100% 50%;
	}
	
	100% {
		background-position: 0% 50%;
	}
}

@keyframes creative-scroll-to-top-button-crystal-refraction {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}

/* Back to Top Button */
.creative-scroll-to-top-button-back-to-top {
	min-width: 100px;
	height: 48px;
	border-radius: 24px;
	background: var(--creative-scroll-to-top-button-white);
	color: #333;
	border: 2px solid #e74c3c;
	flex-direction: row;
	gap: 6px;
	padding: 0 16px;
	font-family: system-ui, -apple-system, sans-serif;
	box-shadow: 0 4px 12px rgba(231, 76, 60, .15);
}

.creative-scroll-to-top-button-back-to-top:hover {
	background: #e74c3c;
	color: var(--creative-scroll-to-top-button-white);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(231, 76, 60, .25);
}