/* -- */
/*---------------------------------.
|     Colorscheme Dark & Light     |
'---------------------------------*/
* { /*overflow-wrap: break-word;hyphens: auto;*/ }
:root {
	color-scheme: light dark;
}
:root {
	/* --> Light mode <-- */
	--bg: #efefef;
	--subbg: #efefef80;
	--text: #121212;
	--subtext: #12121280;
	--accent: #e4ff1a;
	--border: #e0e0e0;

	--clr-blue: #058ED9;
	--clr-green: #06BA63;
	--clr-red: #DA2C38;

	--input-border: #e5e5e5;
	--placeholder: #a0a0a0;
	--checkbox-border: #d0d0d0;

	--blob-opacity: 1;
	--blob2-opacity: 1;
	--blob1-bg: linear-gradient(135deg, var(--accent), #d1ff4d);
	--blob2-bg: #efefef;
}
/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
	:root {
		/* --> Light mode <-- */
		--bg: #121212;
		--subbg: #12121280;
		--text: #efefef;
		--subtext: #efefef80;
		--accent: #e4ff1a;
		--border: #333333;

		--input-border: #2a2a2a;
		--placeholder: #555555;
		--checkbox-border: #444444;

		--blob-opacity: 1;
		--blob2-opacity: 1;
		--blob1-bg: linear-gradient(135deg, var(--accent), #d1ff4d);
		--blob2-bg: #121212;
	}
}

[data-color="red"] {color:var(--clr-red);}
[data-color="green"] {color:var(--clr-green);}
[data-color="blue"] {color:var(--clr-blue);}


/* -- */
/*------------------------------------.
|     Font and typography related     |
'------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
:root {
	font-family: var(--font);
}
:root {
	--weight-heading: 700;
	--weight-body: 400;
	--weight-small: 400;

	--fz-h1: clamp(2.5rem, 1.875rem + 3.125vw, 5rem);
	--fz-h2: clamp(2rem, 1.625rem + 1.875vw, 3.5rem);
	--fz-h3: clamp(1.75rem, 1.5625rem + 0.9375vw, 2.5rem);
	--fz-h4: clamp(1.5rem, 1.375rem + 0.625vw, 2rem);
	--fz-h5: clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem);
	--fz-h6: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
	--fz-p: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem);
	--fz-small: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem);
}
[data-bold] {
	--weight-heading: 900;
	--weight-body: 600;
	--weight-small: 500;

	--fz-h1: clamp(3.5rem, 2.625rem + 4.375vw, 7rem);
	--fz-h2: clamp(2.5rem, 1.875rem + 3.125vw, 5rem);
	--fz-h3: clamp(2rem, 1.625rem + 1.875vw, 3.5rem);
	--fz-h4: clamp(1.75rem, 1.5625rem + 0.9375vw, 2.5rem);
	--fz-h5: clamp(1.5rem, 1.375rem + 0.625vw, 2rem);
	--fz-h6: clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem);
	--fz-p: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
	--fz-small: clamp(1rem, 0.9688rem + 0.1563vw, 1.125rem);
}
/*
* + * {
	margin: 0.5rem 0rem 0rem 0rem;
}
*/
* {
	font-family: var(--font);
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--weight-heading);
	letter-spacing: -0.02em;
	transition:
		font-size 0.3s ease,
		font-weight 0.3s ease;
}

h1 {
	font-size: var(--fz-h1);
}
h2 {
	font-size: var(--fz-h2);
}
h3 {
	font-size: var(--fz-h3);
}
h4 {
	font-size: var(--fz-h4);
}
h5 {
	font-size: var(--fz-h5);
}
h6 {
	font-size: var(--fz-h6);
}

p {
	font-size: var(--fz-p);
	font-weight: var(--weight-body);
	max-width: 65ch;
	transition:
		font-size 0.3s ease,
		font-weight 0.3s ease;
}

small {
	color: var(--subtext);
	font-size: var(--fz-small);
	font-weight: var(--weight-small);
	display: block;
	transition:
		font-size 0.3s ease,
		font-weight 0.3s ease;
}

[data-component="label"] {
	display: inline-block;
	color: var(--accent);
	margin-bottom: 0.5rem;
	border: 1px solid var(--accent);
	padding: 2px 6px;
	border-radius: 4px;
}

/* -- */
/*--------------------------.
|     Essential styling     |
'--------------------------*/
body {
	color: var(--text);
	background-color: var(--bg);
}
/*body {
  font-family: var(--font);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}*/

:root {
	--ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* -- */
/*----------------------------.
|     Custom Øber layouts     |
'----------------------------*/
[data-layout="landing"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	height: 100dvh;
	width: 100%;
	& [data-area="hero"] {
		grid-area: 1 / 1 / 2 / 3;
		align-self: center;
		justify-self: start;
		padding: 3rem;
	}
	& [data-blob] {
		grid-area: 1 / 1 / 2 / 3;
	}
	& [data-area="feature"] {
		transition: all 0.3s var(--ease);
	}
	& [data-area="feature"]:nth-child(even) {
		border-right: 1px solid var(--border);
	}
	& [data-area="feature"] a {
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		padding: 3rem;
		& *:nth-child(even) {
			align-self: end;
			justify-self: end;
		}
	}
	& [data-area="feature"]:hover a small {
		color: var(--subbg);
	}
	& [data-area="feature"]:hover {
		color: var(--bg);
		background: var(--text);
	}
	& [data-area="feature"]:hover [data-component="button"] {
		background: var(--bg);
		border-color: var(--bg);
		color: var(--text);
	}
}

/* -- */
/*-------------------------------.
|     Custom Øber Components     |
'-------------------------------*/
[data-component="button"] {
	transition: all 0.3s var(--ease);
	padding: 0.5rem 1rem;
	border: 1px solid var(--subtext);
	color: var(--text);
	background: var(--bg);
	white-space: nowrap;
	&:hover {
		transform: translateY(-0.5rem);
	}
}

/*<row-start> / <column-start> / <row-end> / <column-end>*/

[data-layout="single"] {
	display: grid;
	grid-template-columns: auto 1fr;
	min-height: 100dvh;
	width: 100%;
	& span[data-main] {
		grid-area: 1 / 1 / 2 / 2;

		display: grid;
		grid-template-rows: auto 1fr auto;
		padding: 4rem 6vw;
		/*background: var(--bg);*/
		position: relative;
		z-index: 2;
		height: 100%;
	}
	& span[data-back] {
		grid-area: 1 / 1 / 2 / 3;
	}
}

[data-layout="split"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100dvh;
	width: 100%;
}

[data-blob] {
	display: block;
	position: relative;
	overflow: hidden;
	& .blob {
		position: absolute;
		top: 50%;
		left: calc(50% + 20%);
		width: 35rem;
		height: 35rem;
		background: var(--blob1-bg);
		border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
		filter: blur(40px);
		opacity: var(--blob-opacity);
		animation: moveBlob 25s infinite linear;
		z-index: -2;
	}
	& .blob-2 {
		position: absolute;
		top: 40%;
		left: calc(40% + 20%);
		width: 25rem;
		height: 25rem;
		background: var(--blob2-bg);
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
		filter: blur(40px);
		opacity: var(--blob2-opacity);
		animation: moveBlob 15s infinite linear reverse;
		z-index: -1;
	}
}
@keyframes moveBlob {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
		border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
	}
	50% {
		transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
		border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg) scale(1);
		border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
	}
}



pre {
    width: 100%;
    border: 1px solid #fff; /* The "Outline" */
    overflow: hidden; /* Ensures content doesn't spill out of rounded corners */
    transition: border-color 0.2s;
}

pre code {
	margin: 0;
	padding: 16px;
	overflow-x: auto;
	color: #fff;
}


/*-----------------------------------------------------------*/

::-webkit-scrollbar { display: none; }

/* --- LAYOUT ENGINE --- */

/* Vertical Sections */
section[data-layout="vertical"] {
    height: 100vh; display: flex; place-content: center; place-items: center;
    font-size: 3rem; font-weight: bold; text-align: center; position: relative; z-index: 10; background: #111;
    padding: 40px; word-wrap: break-word; border-bottom: 1px solid rgba(255,255,255,0.1);

    &:nth-of-type(1) { background: linear-gradient(to bottom right, #ff5f6d, #ffc371); }
    &:nth-of-type(3) { background: linear-gradient(to bottom right, #cc2b5e, #753a88); }
    &:nth-of-type(5) { background: linear-gradient(to bottom right, #42275a, #734b6d); }
}

/* Horizontal Layout */
section[data-layout*="horizontal"] {
    width: 100%; position: relative;

    /* --- SMART SPEED ADJUSTMENT --- */
    /* Default (Desktop) */
    height: 400vh;
    &[data-speed="x2"] { height: 200vh; }
    &[data-speed="x3"] { height: 300vh; }
    &[data-speed="x4"] { height: 400vh; }
    &[data-speed="x5"] { height: 500vh; }
    &[data-speed="x6"] { height: 600vh; }

    /* Mobile/Tablet Adjustment (Max-width 768px)
       We INCREASE height here because there is more horizontal distance
       to cover on a narrow screen, so we need more vertical scroll
       space to keep the speed from feeling too frantic. */
    @media (max-width: 768px) {
        &[data-speed="x2"] { height: 300vh; } /* +100vh buffer */
        &[data-speed="x3"] { height: 400vh; }
        &[data-speed="x4"] { height: 500vh; }
        &[data-speed="x5"] { height: 600vh; }
        &[data-speed="x6"] { height: 700vh; }
    }

    /* Sticky Container */
    & [data-scroll] {
        position: sticky; top: 0; height: auto; width: max-content; background: #111;
        overflow: hidden; will-change: transform; display: flex; align-items: center;
    }
}

/* Forward Scroll Animation */
section[data-layout="horizontal"] {
    view-timeline-name: --h-scroll; view-timeline-axis: block;
    & [data-scroll] { animation: h-slide linear both; animation-timeline: --h-scroll; animation-range: contain; }
}

/* Reverse Scroll Animation */
section[data-layout="horizontal-reverse"] {
    view-timeline-name: --h-scroll-rev; view-timeline-axis: block;
    & [data-scroll] { animation: h-slide-rev linear both; animation-timeline: --h-scroll-rev; animation-range: contain; }
}

@keyframes h-slide { to { transform: translateX(calc(-100% + 100vw)); } }
@keyframes h-slide-rev { 0% { transform: translateX(calc(-100% + 100vw)); } 100% { transform: translateX(0); } }

/* --- TEMPLATES --- */

/* Staggered Grid */
[data-template="staggered"] {
    display: grid !important;
    grid-template-rows: 50px auto 50px; grid-auto-flow: column; grid-auto-columns: 320px;
    gap: 40px;
    padding: 0 100px;
    align-content: center;

    & [data-card]:nth-child(odd) { grid-row: 1 / span 2; }
    & [data-card]:nth-child(even) { grid-row: 2 / span 2; }

    /* Mobile Padding Fix */
    @media (max-width: 768px) {
        padding: 0 40px;
        gap: 20px;
        grid-auto-columns: 280px; /* Slightly narrower cards on mobile */
    }
}

/* Linear Flex */
[data-template="linear"] {
    display: flex; gap: 50px; padding: 0 100px;

    & img {
        height: 60vh; width: auto; object-fit: cover; border: 1px solid #333; transition: 0.3s;
        &:hover { transform: scale(1.02); border-color: #fff; }
    }

    @media (max-width: 768px) {
        padding: 0 40px;
        gap: 20px;
        & img { height: 50vh; }
    }
}

/* --- COMPONENT: CARD --- */
[data-card] {
    text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%;

    & figure {
        margin: 0; height: 100%; display: flex; flex-direction: column;

        /* Image Container */
        & > div {
            width: 100%; height: 400px; overflow: hidden; background: #222; position: relative;

            /* FIX: Ensure picture tag behaves as a block container */
            & picture { display: block; width: 100%; height: 100%; }
            & img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }

            /* Icon (Nested) */
            & [data-icon] {
                position: absolute; bottom: 15px; right: 15px; z-index: 2; width: 40px; height: 40px;
                background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); border-radius: 50%;
                display: grid; place-items: center; transition: 0.3s;

                &::after {
                    content: ''; display: block; width: 24px; height: 24px; background: white;
                    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 1 10-10'/%3E%3Cpath d='M22 22 12 12'/%3E%3Cpath d='M22 16v6h-6'/%3E%3C/svg%3E") no-repeat center;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 1 10-10'/%3E%3Cpath d='M22 22 12 12'/%3E%3Cpath d='M22 16v6h-6'/%3E%3C/svg%3E") no-repeat center;
                }
            }
        }

        /* Caption */
        & figcaption {
            margin-top: auto; padding: 20px 0; display: flex; flex-direction: column; gap: 8px;
            & span { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; }
            & small { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
        }
    }

    /* Hover States */
    &:hover {
        & img { transform: scale(1.05); }
        & [data-icon] { background: white; transform: rotate(-45deg); &::after { background: black; } }
    }
}