/* Global Styles */
html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

body {
	/* Background gradient hijau ketupat */
	background: linear-gradient(135deg, #175344, #1e604d);
	font-family: "Arial", sans-serif;
	font-size: 1rem;
}

/* Styling untuk kartu ucapan yang sudah ada */
.card {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	border: none;
}

/* --- Animasi Bintang --- */
@keyframes twinkle {
	0%,
	100% {
		opacity: 0.8;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

/* Style untuk bintang */
.star {
	position: absolute;
	background: #fff;
	border-radius: 50%;
	width: 2px;
	height: 2px;
	animation: twinkle 2s infinite ease-in-out;
}

/* --- Elemen Ketupat --- */
.eid-ketupat {
	position: absolute;
	z-index: 2;
	width: 80px;
	height: 80px;
	background: #32cd32; /* Warna hijau */
	/* Bentuk diamond menggunakan clip-path */
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	border: 2px solid #006400; /* Warna dark green */
	border-radius: 5px;
	animation: swing 3s ease-in-out infinite;
}

/* --- Elemen Lentera --- */
.eid-lantern {
	position: absolute;
	z-index: 2;
	width: 50px;
	height: 70px;
	background: #ffcc00;
	border: 2px solid #ff9900;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(255, 204, 0, 0.9);
	animation: swing 2.5s ease-in-out infinite, blink 1.5s ease-in-out infinite;
}

/* Keyframes untuk efek ayunan (swing) */
@keyframes swing {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	25% {
		transform: translateY(-5px) rotate(5deg);
	}
	50% {
		transform: translateY(0) rotate(0deg);
	}
	75% {
		transform: translateY(5px) rotate(-5deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}

/* Keyframes untuk efek kedip (blink) pada lentera */
@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* Style untuk Three.js canvas (jika ada) */
#threeCanvas,
#tunnelCanvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	display: block;
}

/* Video Background */
#background-video {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
	object-fit: cover;
	filter: opacity(0.99);
}

.child-container {
	text-align: center;
	margin: 0 auto;
}

.img-fluid {
	margin: 5px;
	width: 250px;
	height: auto;
	object-fit: cover;
}