<div class="container">
	<h1>🔲⭕ Squircles Showcase</h1>
	<p class="subtitle">Shapes & Lines</p>

	<!-- Border-radius technique -->
	<div class="section">
		<h2>CSS Border-Radius Squircles</h2>
		<div class="technique-grid">
			<div class="squircle-demo">
				<h3>Subtle</h3>
				<div class="squircle-border squircle-soft"></div>
				<p>border-radius: 20px</p>
			</div>
			<div class="squircle-demo">
				<h3>Medium</h3>
				<div class="squircle-border squircle-medium"></div>
				<p>border-radius: 30px</p>
			</div>
			<div class="squircle-demo">
				<h3>Heavy</h3>
				<div class="squircle-border squircle-heavy"></div>
				<p>border-radius: 40px</p>
			</div>
		</div>
	</div>

	<!-- Clip-path technique -->
	<div class="section">
		<h2>CSS Clip-Path Squircles</h2>
		<div class="technique-grid">
			<div class="squircle-demo">
				<h3>Gentle Cut</h3>
				<div class="squircle-clip squircle-clip1"></div>
				<p>20% corner cuts</p>
			</div>
			<div class="squircle-demo">
				<h3>Medium Cut</h3>
				<div class="squircle-clip squircle-clip2"></div>
				<p>30% corner cuts</p>
			</div>
			<div class="squircle-demo">
				<h3>Sharp Cut</h3>
				<div class="squircle-clip squircle-clip3"></div>
				<p>40% corner cuts</p>
			</div>
		</div>
	</div>

	<!-- SVG squircle -->
	<div class="section">
		<h2>SVG Mathematical Squircle</h2>
		<div class="svg-container">
			<svg width="200" height="200" class="animated-squircle">
				<defs>
					<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
						<stop offset="0%" style="stop-color:#ff6b6b" />
						<stop offset="100%" style="stop-color:#feca57" />
					</linearGradient>
					<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
						<stop offset="0%" style="stop-color:#4ecdc4" />
						<stop offset="100%" style="stop-color:#44a08d" />
					</linearGradient>
				</defs>
				<path d="M 100 20 C 140 20 180 60 180 100 C 180 140 140 180 100 180 C 60 180 20 140 20 100 C 20 60 60 20 100 20 Z" fill="url(#gradient1)" />
			</svg>
		</div>
		<p style="text-align: center; opacity: 0.8;">Hover to see gradient change</p>
	</div>

	<!-- Interactive controls -->
	<div class="section">
		<h2>Interactive Squircle</h2>
		<div class="controls">
			<label for="radiusSlider">Border Radius: </label>
			<input type="range" id="radiusSlider" class="slider" min="0" max="75" value="20">
			<span id="radiusValue">20px</span>
		</div>
		<div class="interactive-squircle" id="interactiveSquircle"></div>
	</div>

	<!-- Photo gallery -->
	<div class="section">
		<h2>Squircle Photo Gallery Layout</h2>
		<div class="photo-gallery">
			<div class="photo-item">
				<div class="photo-content">🌟</div>
			</div>
			<div class="photo-item">
				<div class="photo-content">🎨</div>
			</div>
			<div class="photo-item">
				<div class="photo-content">🚀</div>
			</div>
			<div class="photo-item">
				<div class="photo-content">💫</div>
			</div>
		</div>
	</div>

	<!-- Squircle buttons -->
	<div class="section">
		<h2>Squircle UI Elements</h2>
		<div class="button-section">
			<button class="squircle-btn btn-style1" onclick="showAlert('Border-radius button!')">Rounded Button</button>
			<button class="squircle-btn btn-style2" onclick="showAlert('Clip-path button!')">Clipped Button</button>
			<button class="squircle-btn btn-style3" onclick="showAlert('Soft squircle button!')">Soft Squircle</button>
		</div>
	</div>

	<!-- 3D effect -->
	<div class="section">
		<h2>Pseudo-3D Squircle</h2>
		<div class="technique-grid">
			<div class="squircle-demo">
				<h3>3D Effect</h3>
				<div class="squircle-3d"></div>
				<p>Hover for 3D rotation</p>
			</div>
		</div>
	</div>

	<!-- Animation -->
	<div class="section">
		<h2>Animated Morphing Squircle</h2>
		<div class="technique-grid">
			<div class="squircle-demo">
				<h3>Shape Morphing</h3>
				<div class="morphing-squircle"></div>
				<p>Square → Squircle → Circle → Squircle → Square</p>
			</div>
		</div>
	</div>
</div>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding: 20px;
	color: white;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

h1 {
	text-align: center;
	margin-bottom: 10px;
	font-size: 2.5rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
	text-align: center;
	margin-bottom: 40px;
	opacity: 0.9;
	font-size: 1.1rem;
}

.section {
	margin-bottom: 60px;
	padding: 30px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.section h2 {
	margin-bottom: 20px;
	font-size: 1.8rem;
	text-align: center;
}

.technique-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 30px;
	margin-bottom: 40px;
}

.squircle-demo {
	text-align: center;
}

.squircle-demo h3 {
	margin-bottom: 15px;
	font-size: 1.1rem;
}

.squircle-demo p {
	margin-top: 10px;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* Border-radius squircles */
.squircle-border {
	width: 120px;
	height: 120px;
	background: linear-gradient(45deg, #ff6b6b, #feca57);
	margin: 0 auto 10px;
	transition: all 0.3s ease;
}

.squircle-soft {
	border-radius: 20px;
}

.squircle-medium {
	border-radius: 30px;
}

.squircle-heavy {
	border-radius: 40px;
}

.squircle-border:hover {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Clip-path squircles */
.squircle-clip {
	width: 120px;
	height: 120px;
	background: linear-gradient(45deg, #4ecdc4, #44a08d);
	margin: 0 auto 10px;
	transition: all 0.3s ease;
}

.squircle-clip1 {
	clip-path: polygon(
		20% 0%,
		80% 0%,
		100% 20%,
		100% 80%,
		80% 100%,
		20% 100%,
		0% 80%,
		0% 20%
	);
}

.squircle-clip2 {
	clip-path: polygon(
		30% 0%,
		70% 0%,
		100% 30%,
		100% 70%,
		70% 100%,
		30% 100%,
		0% 70%,
		0% 30%
	);
}

.squircle-clip3 {
	clip-path: polygon(
		40% 0%,
		60% 0%,
		100% 40%,
		100% 60%,
		60% 100%,
		40% 100%,
		0% 60%,
		0% 40%
	);
}

.squircle-clip:hover {
	transform: scale(1.1);
	filter: brightness(1.2);
}

/* Photo gallery with squircles */
.photo-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.photo-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 35px;
	overflow: hidden;
	background: linear-gradient(45deg, #ff9a9e, #fecfef, #fecfef);
	transition: all 0.3s ease;
	cursor: pointer;
}

.photo-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.photo-content {
	position: absolute;
	inset: 10px;
	border-radius: 25px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	transition: all 0.3s ease;
}

.photo-item:hover .photo-content {
	background: linear-gradient(135deg, #ff6b6b, #feca57);
}

/* Squircle buttons */
.button-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin-top: 30px;
}

.squircle-btn {
	padding: 15px 30px;
	border: none;
	color: white;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.btn-style1 {
	background: linear-gradient(45deg, #ff6b6b, #ee5a24);
	border-radius: 25px;
}

.btn-style2 {
	background: linear-gradient(45deg, #4ecdc4, #44a08d);
	clip-path: polygon(
		25% 0%,
		75% 0%,
		100% 25%,
		100% 75%,
		75% 100%,
		25% 100%,
		0% 75%,
		0% 25%
	);
}

.btn-style3 {
	background: linear-gradient(45deg, #a8edea, #fed6e3);
	border-radius: 30px;
	color: #333;
}

.squircle-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.squircle-btn:active {
	transform: translateY(-1px);
}

/* SVG Squircle */
.svg-container {
	display: flex;
	justify-content: center;
	margin: 30px 0;
}

.animated-squircle {
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.animated-squircle path {
	transition: all 0.3s ease;
}

.animated-squircle:hover path {
	fill: url(#gradient2);
}

/* 3D-ish squircle */
.squircle-3d {
	width: 150px;
	height: 150px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 40px;
	margin: 0 auto;
	position: relative;
	transform-style: preserve-3d;
	transition: all 0.3s ease;
	cursor: pointer;
}

.squircle-3d::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0.1)
	);
	border-radius: 30px;
	z-index: 1;
}

.squircle-3d::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 10px;
	right: 10px;
	height: 20px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 40px;
	filter: blur(10px);
	z-index: -1;
}

.squircle-3d:hover {
	transform: rotateX(15deg) rotateY(15deg) scale(1.1);
}

/* Animation section */
.morphing-squircle {
	width: 120px;
	height: 120px;
	background: linear-gradient(45deg, #ff6b6b, #feca57);
	margin: 0 auto;
	transition: all 2s ease-in-out;
	animation: morph 4s infinite;
}

@keyframes morph {
	0% {
		border-radius: 0;
		transform: rotate(0deg);
	}
	25% {
		border-radius: 20px;
		transform: rotate(90deg);
	}
	50% {
		border-radius: 60px;
		transform: rotate(180deg);
	}
	75% {
		border-radius: 40px;
		transform: rotate(270deg);
	}
	100% {
		border-radius: 0;
		transform: rotate(360deg);
	}
}

.controls {
	text-align: center;
	margin-top: 20px;
}

.slider {
	width: 200px;
	margin: 10px;
}

.interactive-squircle {
	width: 150px;
	height: 150px;
	background: linear-gradient(45deg, #667eea, #764ba2);
	margin: 20px auto;
	transition: all 0.3s ease;
	border-radius: 20px;
}

@media (max-width: 768px) {
	.technique-grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 20px;
	}

	.squircle-border,
	.squircle-clip {
		width: 100px;
		height: 100px;
	}

	h1 {
		font-size: 2rem;
	}
	.section {
		padding: 20px;
	}
}

// Interactive squircle controls
const radiusSlider = document.getElementById("radiusSlider");
const radiusValue = document.getElementById("radiusValue");
const interactiveSquircle = document.getElementById("interactiveSquircle");

radiusSlider.addEventListener("input", function () {
	const radius = this.value;
	radiusValue.textContent = radius + "px";
	interactiveSquircle.style.borderRadius = radius + "px";
});

// Button click handler
function showAlert(message) {
	alert(message);
}

// Add some interactive hover effects
document.querySelectorAll(".photo-item").forEach((item) => {
	item.addEventListener("click", function () {
		this.style.transform = "translateY(-10px) scale(0.95)";
		setTimeout(() => {
			this.style.transform = "";
		}, 200);
	});
});

// Add particle effect on squircle hover
document
	.querySelectorAll(".squircle-border, .squircle-clip")
	.forEach((squircle) => {
		squircle.addEventListener("mouseenter", function () {
			// Create sparkle effect
			for (let i = 0; i < 3; i++) {
				setTimeout(() => {
					createSparkle(this);
				}, i * 100);
			}
		});
	});

function createSparkle(element) {
	const sparkle = document.createElement("div");
	sparkle.innerHTML = "✨";
	sparkle.style.position = "absolute";
	sparkle.style.pointerEvents = "none";
	sparkle.style.fontSize = "20px";
	sparkle.style.zIndex = "1000";

	const rect = element.getBoundingClientRect();
	sparkle.style.left = rect.left + Math.random() * rect.width + "px";
	sparkle.style.top = rect.top + Math.random() * rect.height + "px";

	document.body.appendChild(sparkle);

	// Animate sparkle
	sparkle.animate(
		[
			{ transform: "translateY(0) scale(1)", opacity: 1 },
			{ transform: "translateY(-50px) scale(0)", opacity: 0 }
		],
		{
			duration: 1000,
			easing: "ease-out"
		}
	).onfinish = () => sparkle.remove();
}

// Add click-to-copy functionality for CSS
document.querySelectorAll(".squircle-demo p").forEach((p) => {
	p.style.cursor = "pointer";
	p.title = "Click to copy CSS";
	p.addEventListener("click", function () {
		navigator.clipboard.writeText(this.textContent).then(() => {
			const original = this.textContent;
			this.textContent = "Copied!";
			this.style.color = "#4ecdc4";
			setTimeout(() => {
				this.textContent = original;
				this.style.color = "";
			}, 1000);
		});
	});
});