@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Space+Mono:wght@400;700&display=swap");

:root {
	--bg-color: #f1f1f1;
	--card-width: 350px;
	--card-height: 500px;
	--black: #080808;
	--white: #fafafa;
	--accent: #ff2d55;
	--grid-color: rgba(0, 0, 0, 0.08);
	--frame-color: rgba(8, 8, 8, 0.8);
	--transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	--transition-fast: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: var(--bg-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-feature-settings: "salt" 1, "ss01" 1, "ss02" 1;
	color: var(--black);
	overflow-x: hidden;
}

.carousel {
	position: relative;
	width: 100%;
	padding: 5vh 0;
}

.carousel-track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 40px 0;
	gap: 40px;
}

.carousel-controls {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
}

.carousel-button {
	background: var(--black);
	color: var(--white);
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;

	transition: transform 0.3s ease, opacity 0.3s ease;
}

.carousel-button:hover {
	transform: translateY(-2px);
}

.carousel-button:active {
	transform: translateY(0);
}

.carousel-button svg {
	width: 24px;
	height: 24px;
}

.card-system {
	display: flex;
	gap: 40px;
}

.deconstructed-card {
	position: relative;
	width: var(--card-width);
	height: var(--card-height);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	transform-style: preserve-3d;
	flex-shrink: 0;
}

.card-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.card-image {
	overflow: hidden;
	z-index: 1;
}

.wave-svg {
	width: 100%;
	height: 100%;
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-frame {
	z-index: 3;
	pointer-events: none;
}

.frame-path {
	fill: none;
	stroke: var(--frame-color);
	stroke-width: 1;
	stroke-dasharray: 1520;
	stroke-dashoffset: 1520;
	transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-background {
	z-index: 0;
	background-color: var(--white);
}

.bg-grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid-line {
	position: absolute;
	background-color: var(--grid-color);
	transition: transform var(--transition-slow), opacity var(--transition-fast);
}

.grid-line.horizontal {
	width: 100%;
	height: 1px;
	transform: scaleX(0.3);
	transform-origin: left;
}

.grid-line.vertical {
	height: 100%;
	width: 1px;
	transform: scaleY(0.3);
	transform-origin: top;
}

.bg-objects {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.bg-object {
	position: absolute;
	opacity: 0.3;
	transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.bg-object.circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	bottom: 40px;
	left: -30px;
	transform: translateY(20px);
}

.bg-object.square {
	width: 60px;
	height: 60px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	top: 40px;
	right: 30px;
	transform: rotate(45deg) translateY(-20px);
}

.bg-object.triangle {
	width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 70px solid rgba(0, 0, 0, 0.05);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
}

.card-content {
	z-index: 2;
	padding: 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.ocean-content {
	color: var(--white);
}

.ocean-content .content-text,
.ocean-content .meta-text,
.ocean-content .cta-text {
	color: var(--white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ocean-content .meta-line {
	background-color: var(--white);
}

.ocean-content .fragment-body {
	background: rgba(15, 30, 44, 0.5);
	padding: 10px;
	border-radius: 4px;
	backdrop-filter: blur(2px);
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.content-fragment {
	position: relative;
}

.fragment-heading {
	margin-top: auto;
	margin-bottom: 1.5rem;
}

.content-text {
	font-size: 2rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--black);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
	transform: translateY(10px);
	opacity: 0.7;
}

.content-subtext {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	margin-top: 1rem;
	color: var(--black);
	opacity: 0.5;
	transform: translateY(10px);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.fragment-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2rem;
}

.meta-line {
	width: 40px;
	height: 1px;
	background-color: var(--black);
	transform: scaleX(0.5);
	transform-origin: left;
	transition: transform var(--transition-fast);
}

.meta-text {
	font-family: "Space Mono", monospace;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	opacity: 0.6;
	transform: translateX(-5px);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.fragment-body {
	max-width: 85%;
	margin: 1.5rem 0;
}

.fragment-body .content-text {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	opacity: 0.6;
}

.fragment-cta {
	margin-top: auto;
	overflow: visible;
}

.cta-link {
	text-decoration: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
}

.cta-box {
	position: absolute;
	top: 0;
	left: -10px;
	width: calc(100% + 20px);
	height: 100%;
	background-color: var(--black);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-fast);
}

.ocean-content .cta-box {
	background-color: var(--white);
}

.cta-text {
	position: relative;
	font-family: "Space Mono", monospace;
	font-size: 0.90rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--black);
	transition: color var(--transition-fast);
	transform: translateX(-5px);
	opacity: 0.8;
	transition: transform var(--transition-fast), opacity var(--transition-fast),
		color var(--transition-fast);
}

.ocean-content .cta-text {
	color: var(--black);
}

.ocean-content .cta-link:hover .cta-text {
	color: var(--black) !important;
}

.align-right {
	text-align: right;
}

.text-align-right {
	align-self: flex-end;
	text-align: right;
}

.text-align-right .meta-line {
	transform-origin: right;
}

.text-align-right .cta-box {
	transform-origin: right;
}

.text-align-right .meta-text {
	transform: translateX(5px);
}

.text-card .content-text,
.text-card .content-subtext {
	color: var(--black);
}

.deconstructed-card:hover .frame-path {
	stroke-dashoffset: 0;
}

.deconstructed-card:hover .content-text,
.deconstructed-card:hover .content-subtext {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 0.05s;
}

.deconstructed-card:hover .fragment-body .content-text {
	transition-delay: 0.1s;
	opacity: 1;
}

.deconstructed-card:hover .meta-text {
	transform: translateX(0);
	opacity: 1;
	transition-delay: 0.15s;
}

.deconstructed-card:hover .meta-line {
	transform: scaleX(1);
	transition-delay: 0.05s;
}

.deconstructed-card:hover .wave-svg {
	transform: scale(1.05);
}

.deconstructed-card:hover .cta-text {
	transform: translateX(0);
	opacity: 1;
	transition-delay: 0.2s;
}

.deconstructed-card:hover .cta-link:hover .cta-box {
	transform: scaleX(1);
}

.deconstructed-card:hover .cta-link:hover .cta-text {
	color: var(--white);
		opacity: 1;

}

.text-card:hover .grid-line.horizontal {
	transform: scaleX(1);
}

.text-card:hover .grid-line.vertical {
	transform: scaleY(1);
}

.text-card:hover .bg-object {
	opacity: 1;
	transform: translate(0, 0) rotate(0);
}

.text-card:hover .bg-object.square {
	transform: rotate(45deg) translate(0, 0);
}

.text-card:hover .bg-object.triangle {
	transform: translate(-50%, -50%) scale(1);
}

.deconstructed-card:hover .grid-line:nth-child(1) {
	transition-delay: 0.1s;
}

.deconstructed-card:hover .grid-line:nth-child(2) {
	transition-delay: 0.2s;
}

.deconstructed-card:hover .grid-line:nth-child(3) {
	transition-delay: 0.3s;
}

.deconstructed-card:hover .grid-line:nth-child(4) {
	transition-delay: 0.15s;
}

.deconstructed-card:hover .grid-line:nth-child(5) {
	transition-delay: 0.25s;
}

.pregnancy-content .card-image svg {
	background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}

.baby-content .card-image svg {
	background: linear-gradient(135deg, #4ecdc4, #7ee8e1);
}

.percentage-content {
	color: var(--black);
}

.percentage-content .card-image svg {
	background: linear-gradient(135deg, #ffd166, #ffe0a3);
}

.egg-content {
	color: var(--black);
}

.egg-content .card-image svg {
	background: linear-gradient(135deg, #06d6a0, #62f7d1);
}

.sleep-content {
	color: var(--white);
}

.sleep-content .card-image svg {
	background: linear-gradient(135deg, #118ab2, #5ac8e3);
}

.age-content {
	color: var(--white);
}

.age-content .card-image svg {
	background: linear-gradient(135deg, #073b4c, #3c7c8c);
}

.percentage-content .meta-line,
.egg-content .meta-line {
	background-color: var(--black);
}

.sleep-content .meta-line,
.age-content .meta-line {
	background-color: var(--white);
}

.percentage-content .content-text,
.percentage-content .meta-text,
.percentage-content .cta-text,
.egg-content .content-text,
.egg-content .meta-text,
.egg-content .cta-text {
	color: var(--black);
}

.sleep-content .content-text,
.sleep-content .meta-text,
.sleep-content .cta-text,
.age-content .content-text,
.age-content .meta-text,
.age-content .cta-text {
	color: var(--white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sleep-content .cta-box,
.age-content .cta-box {
	background-color: var(--white);
}

.sleep-content .cta-link:hover .cta-text,
.age-content .cta-link:hover .cta-text {
	color: var(--black) !important;
}

.dots-container {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.dot {
	width: 8px;
	height: 8px;
	background-color: var(--black);
	border-radius: 50%;
	opacity: 0.3;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.dot.active {
	opacity: 1;
	transform: scale(1.3);
}

.attribution {
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: 12px;
	opacity: 0.7;
}

.attribution a {
	color: var(--black);
	text-decoration: none;
}

@media (max-width: 768px) {
	:root {
		
	}

	.card-content {
		padding: 50px;
	}

	.content-text {
		font-size: 1.8rem;
	}
	
}