:root {
	--main-background: unset;
	
	--background-lab: radial-gradient(circle at top, #ebebeb, #ffffff);
	
	--lab-headline: linear-gradient(110deg, #6100ab, #238300);
	--lab-p-color: #26383d;
	--lab-cards-background: rgba(0, 0, 0, 0.05);
	--lab-cards-background-glow: radial-gradient(circle at 20% 20%, rgba(0,252,217,0.17), transparent);
	--lab-card-border-hover: rgba(23, 80, 165, 0.4);
	
	--lab-link-color: #0971f7;
	--lab-link-border: 1px solid #08070842;
	--lab-link-background: #f7f7f75e;
	--lab-link-background-hover: #f7f7f7;
}

[data-theme="dark"] {
	--main-background: linear-gradient(140deg, #250b9d1f, #26fb2612);
	
	--background-lab: radial-gradient(circle at top, #0a0f1c, #05070d);
	
	--lab-headline: linear-gradient(145deg, #3165f6, #4cffde, #1b6dd2);
	--lab-headline-ani: linear-gradient(175deg, #3165f6, #4cffde, #1b6dd2);
	--lab-p-color: #dffeff;
	--lab-cards-background: rgba(255, 255, 255, 0.05);
	--lab-cards-background-glow: radial-gradient(circle at 20% 20%, rgba(0,255,208,0.08), transparent);
	--lab-card-border-hover: rgba(0, 255, 208, 0.4);
	
	--lab-link-color: #05e6ff;
	--lab-link-border: 1px solid #f0f8ff14;
	--lab-link-background: #1e1e515e;
	--lab-link-background-hover: #1616395e;
}

main {
	background: var(--background-lab);
	font-family: "Inter", system-ui, sans-serif;
}

.lab-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
	padding-bottom: 3rem;
}

/* ===== HERO ===== */
.lab-hero {
	display: flex;
	flex-direction: column;
	justify-self: center;
    text-align: center;
	padding: 1.5rem;
	position: relative;
	z-index: 0;
}

@font-face {
    font-family: 'Audiowide';
    src: url('../lib/fonts/Audiowide/Audiowide-Regular.woff2') format('woff2'),
        url('../lib/fonts/Audiowide/Audiowide-Regular.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.lab-title h1 {
	font-family: 'Audiowide';
    font-size: calc(clamp(2.5rem, 8vw, 4rem) + var(--font-size-larger));
	display: inline-block;
	position: relative;
    letter-spacing: 1px;
	margin: 0;
	background: var(--lab-headline);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	text-shadow: 2px 0px 6px #19fff347;
}

.lab-title h1::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
    filter: blur(10px);
}

.lab-subtitle {
	font-size: calc(clamp(0.85rem, 2vw, 1rem) + var(--font-size-larger));
    opacity: 0.7;
    margin-top: 10px;
}

.lab-description {
	font-size: calc(clamp(0.7rem, 2vw, 1rem) + var(--font-size-larger));
    text-align: center;
    max-width: 700px;
    opacity: 0.8;
    line-height: 1.5;
}

.lab-description p {
	margin: 0;
}

/* ===== SEARCH ===== */
.lab-search {

}

/* ===== CONTENT ===== */
.lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 25vw, 250px), 1fr));
    gap: clamp(0.75rem, 2vw, 1.75rem);
}

/* ===== CARD ===== */
.lab-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    background: var(--lab-cards-background);
    border: 1px solid rgba(120, 150, 255, 0.15);
    border-radius: 14px;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    transition: transform 0.3s ease, border 0.1s ease;
    position: relative;
    overflow: hidden;
	cursor: default;
}

/* subtle glow */
.lab-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--lab-cards-background-glow);
    opacity: 0;
	z-index: -1;
    transition: opacity 0.3s;
	overflow: hidden;
}

.lab-card:hover::before {
    opacity: 1;
}

.lab-card::after {
	content: '';
	position: absolute;
	left: -140%;
	top: 0;
	height: 130%;
	width: clamp(250px, 40vw, 500px);
	pointer-events: none;
	transition: left 0.5s ease;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0));
	transform: skew(30deg);
}

.lab-card:hover::after {
	left: 130%;
}

.lab-card:not(:hover)::after {
	opacity: 0;
}

.lab-card:hover {
    transform: translateY(-5px);
    border-color: var(--lab-card-border-hover);
}

/* == TEXT == */

.lab-text {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	padding: 1rem 0;
}

@media (max-width: 520px) {
	.lab-text {
		padding-top: 0.5rem;
	}
}

.lab-text h2 {
	position: relative;
	display: inline-block;
    font-size: calc(clamp(1.05rem, 3vw, 1.4rem) + var(--font-size-larger));
	margin: 0;
}

.lab-text p {
	margin: 0;
    color: var(--lab-p-color);
    font-size: calc(clamp(0.8rem, 2vw, 1rem) + var(--font-size-larger));
}

/* == Each Fonts == */

/* =--- 1 ---= */

:root {
	--lab-card-h2-1-color: linear-gradient(50deg, red, #5719ff);
}

[data-theme="dark"] {
	--lab-card-h2-1-color: linear-gradient(90deg, #fc4747 0%, #c513ff 55%, #13b9ea 100%);
}

@font-face {
    font-family: 'Rubik Glitch';
    src: url('../lib/fonts/Rubik_Glitch/RubikGlitch-Regular.woff2') format('woff2'),
        url('../lib/fonts/Rubik_Glitch/RubikGlitch-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lab-card:nth-child(1) h2 {
	font-family: 'Rubik Glitch';
	background: var(--lab-card-h2-1-color);
	font-weight: 100;
	letter-spacing: 0.05rem;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/*text-shadow: 0 0 12px rgba(77, 226, 255, 0.25), 0 0 24px rgba(200, 77, 255, 0.18);*/
}

.lab-card:nth-child(1) h2::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(73, 24, 217, 0.15);
	filter: blur(20px);
}

/* =--- 2 ---= */

:root {
	--lab-card-h2-2-color: linear-gradient(135deg, #2336c8 0%, #3767e8 20%, #4655d4 40%, #7256ee 60%, #8d3aed 80%, #6638c4 100%)
}

[data-theme="dark"] {
	--lab-card-h2-2-color: linear-gradient(135deg, #f5f7ff 0%, #c7d2ff 18%, #7aa2ff 38%, #9b7cff 58%, #d7b8ff 78%, #ffffff 100%);
}

@font-face {
    font-family: 'Saira Stencil';
    src: url('../lib/fonts/Saira Stencil/SairaStencil-Thin.woff2') format('woff2'),
        url('../lib/fonts/Saira Stencil/SairaStencil-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.lab-card:nth-child(2) h2 {
	font-family: 'Saira Stencil';
	background: var(--lab-card-h2-2-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* =--- 3 ---= */

:root {
	--lab-card-h2-3-color: linear-gradient(50deg, #279005, #12cc17, #0f720f);
}

[data-theme="dark"] {
	--lab-card-h2-3-color: linear-gradient(90deg, #159010 0%, #4afa87 50%, #0daa0b 100%);
}

@font-face {
    font-family: 'Permanent Marker';
    src: url('../lib/fonts/Permanent Marker/PermanentMarker-Regular.woff2') format('woff2'),
        url('../lib/fonts/Permanent Marker/PermanentMarker-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lab-card:nth-child(3) h2 {
	font-family: 'Permanent Marker';
	letter-spacing: 0.05rem;
	background: var(--lab-card-h2-3-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* =--- 4 ---= */

:root {
	--lab-card-h2-4-color: linear-gradient(90deg, #253dac 0%, #2154dc 45%, #7128e4 100%);
}

[data-theme="dark"] {
	--lab-card-h2-4-color: linear-gradient(90deg, #ffffff 0%, #d9e7ff 45%, #8db8ff 100%);
}

@font-face {
    font-family: 'Codystar';
    src: url('../lib/fonts/Codystar/Codystar.woff2') format('woff2'),
        url('../lib/fonts/Codystar/Codystar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lab-card:nth-child(4) h2 {
	font-family: 'Codystar';
	background: var(--lab-card-h2-4-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

:root {
	--lab-card-h2-5-color: linear-gradient(90deg, #253dac 0%, #2154dc 45%, #7128e4 100%);
}

[data-theme="dark"] {
	--lab-card-h2-5-color: linear-gradient(90deg, #ffffff 0%, #d9e7ff 45%, #8db8ff 100%);
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('../lib/fonts/Chakra Petch/ChakraPetch-Regular.woff2') format('woff2'),
        url('../lib/fonts/Chakra Petch/ChakraPetch-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lab-card:nth-child(5) h2 {
	font-family: 'Chakra Petch';
	background: var(--lab-card-h2-5-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* LINK */

.lab-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lab-links a {
    display: inline-block;
	position: relative;
	cursor: pointer;
    color: var(--lab-link-color);
    text-decoration: none;
    font-size: calc(clamp(0.8rem, 3vw, 0.9rem) + var(--font-size-larger));
	position: relative;
	padding: 0.25rem 0.5rem;
	background: var(--lab-link-background);
    border: var(--lab-link-border);
	transition: background 0.3s ease, transform 0.2s ease;
    border-radius: 12px;
}

.lab-links a:hover {
    background: var(--lab-link-background-hover);
	transform: scale(1.04);
}

.lab-links a:active {
	transform: scale(0.97);
}

/* DISABLED */
.lab-card.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ===== GLOBAL FX LAYER ===== */
.lab-theme::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>\
<filter id='noise'>\
<feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23noise)' opacity='0.03'/>\
</svg>");
    z-index: 999;
}

/* ===== MOUSE GLOW ===== */
.mouse-glow {
    position: fixed;
    width: 120px;
    height: 120px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,208,0.03), transparent 50%);
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* ===== FLOATING PARTICLES ===== */
.lab-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.lab-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(120,150,255,0.4);
    border-radius: 50%;
    animation: floatUp linear infinite;
}

/* random animation */
@keyframes floatUp {
    from {
        transform: translateY(120vh) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    to {
        transform: translateY(-10vh) scale(1);
        opacity: 0;
    }
}

/* ===== CARD FLOAT ===== */
.lab-card {
    animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}