:root {
	--color-fluid: var(--color-gray-700);
	--widget-padding: 8px;
	--widget-offset-first: 12px;
	--widget-offset-second: 8px;
	--widget-offset-combined: calc(var(--widget-offset-first) + var(--widget-offset-second));
}

.dark {
	--color-fluid: var(--color-pink-700);
}

/* Logo with dark mode crossfade transition */
.logo {
	position: relative;
	flex-shrink: 0;
	width: auto;
	height: 20px;
	aspect-ratio: 3 / 1;
}

.logo::before,
.logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 300ms ease-in-out;
}

.logo::before {
	background-image: var(--logo);
	opacity: 1;
}

.logo::after {
	background-image: var(--logo-inverted);
	opacity: 0;
}

.dark .logo::before {
	opacity: 0;
}

.dark .logo::after {
	opacity: 1;
}

/* Squircle support - Corner shape styling */
@supports (corner-shape: squircle) {
	/* Base: set default corner-shape */
	* {
		corner-shape: round;
	}

	.squircle {
		corner-shape: squircle !important;
	}

	/* will apply squircle to all elements that are not rounded-full */
	.squircle-prefer:not(.rounded-full),
	.squircle-prefer *:not(.rounded-full) {
		corner-shape: squircle;
	}

	/* will apply squircle to all elements */
	body.squircle-everywhere *,
	body.squircle-everywhere {
		corner-shape: squircle;
	}
	
	/* Explicitly reset when class is NOT on body */
	body:not(.squircle-everywhere) *,
	body:not(.squircle-everywhere) {
		corner-shape: round;
	}

	/* if squircle-everywhere/preferred is applied, this will skip it */
	.squircle-ignore,
	.squircle-everywhere .squircle-ignore,
	.squircle-prefer .squircle-ignore {
		corner-shape: none !important;
	}
}

/* Corner preset classes */
.corners-square {
	border-radius: 0;
}

.corners-subtle {
	border-radius: var(--border-radius-xs);
}

.corners-default {
	border-radius: var(--border-radius-md);
}

.corners-squircle {
	border-radius: var(--border-radius-lg);
}

.corners-full {
	border-radius: var(--border-radius-3xl);
}

.marketing-gradient {
	position: relative;
	background-color: var(--marketing-bg);
	background-image:
		repeating-linear-gradient(0deg, var(--marketing-grid) 0px, transparent 1px, transparent 20px),
		repeating-linear-gradient(90deg, var(--marketing-grid) 0px, transparent 1px, transparent 20px);
	background-size:
		20px 20px,
		20px 20px;
	background-position: max(0px, calc((100vw - 1280px) / 2)) 0;
	transition: background-color 300ms ease-in-out;
}

.twitter-gradient {
	position: relative;
	background-color: var(--marketing-bg);
	background-image:
		repeating-linear-gradient(0deg, var(--twitter-grid) 0px, transparent 1px, transparent 32px),
		repeating-linear-gradient(90deg, var(--twitter-grid) 0px, transparent 1px, transparent 32px);
	background-size:
		32px 32px,
		32px 32px;
	background-position: max(0px, calc((100vw - 1280px) / 2)) 0;
	transition: background-color 300ms ease-in-out;
}

.hero-container {
	position: relative;
	perspective: 800px;
	perspective-origin: center center;
	transform-style: preserve-3d;
	overflow: visible;
}

.hero-rect-1 {
	position: absolute;
	width: 240px;
	height: 120px;
	left: 24%;
	top: 12%;
	rotate: -6deg;
	transform: translate(-50%, -50%) translateZ(20px);
	background-color: var(--marketing-rect);
	border-radius: 4px;
	will-change: transform, opacity;
	pointer-events: none;
	z-index: 3;
	transform-style: preserve-3d;
}

.hero-rect-2 {
	position: absolute;
	width: 320px;
	height: 160px;
	right: 20%;
	top: 15%;
	rotate: 8deg;
	transform: translate(50%, -50%) translateZ(40px);
	background-color: var(--marketing-rect);
	border-radius: 4px;
	will-change: transform, opacity;
	pointer-events: none;
	z-index: 5;
	transform-style: preserve-3d;
}

.hero-rect-3 {
	position: absolute;
	width: 200px;
	height: 100px;
	left: 8%;
	top: 70%;
	rotate: 12deg;
	transform: translate(-50%, -50%) translateZ(-10px);
	background-color: var(--marketing-rect);
	border-radius: 4px;
	will-change: transform, opacity;
	pointer-events: none;
	z-index: 1;
	transform-style: preserve-3d;
}

.rectangle-wrapper {
	transition: filter 100ms ease-in-out;
}

.rectangle-wrapper:has(.white-rect:hover) {
	filter: blur(4px);
}

.tinted-glass {
	background-color: rgba(0, 0, 0, 0.04);
	box-shadow: 0 0 0 0.5px color-mix(in srgb, currentColor 12%, transparent);
	transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

/* Only apply backdrop-filter on non-touch devices where it's less expensive */
@media (hover: hover) {
	.tinted-glass {
		backdrop-filter: blur(1px);
	}
}

.widget-wrapper {
	padding: var(--widget-padding);
}

@media (max-width: 640px) {
	.tinted-glass {
		padding: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.portfolio-item:has(.portfolio-card) .tinted-glass {
		background-color: rgba(0, 0, 0, 0.04);
		box-shadow: 0 0 0 0.5px color-mix(in srgb, currentColor 12%, transparent);
	}
	.widget-wrapper {
		padding: 0;
	}
}


html {
	background-color: hsl(43, 8%, 100%);
	overscroll-behavior-x: none;
}

html:has(.dark) {
	background-color: hsl(43, 8%, 10%);
}