/*
|* Section
|* Home
*/

/* For Modal, set default is none */
[x-cloak] {
	display: none !important;
}

/* Bounce halus container foto */
.photo-bounce {
	animation: photo-bounce 3s ease-in-out infinite;
}

@keyframes photo-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

/* OUTER WRAPPER – orbit luar (garis ketiga) */
.photo-orbit-outer {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Orbit luar – lebih jauh dari foto */
.photo-orbit-outer::before {
	content: "";
	position: absolute;
	inset: -24px; /* jarak orbit luar dari foto */
	border-radius: 9999px;
	padding: 2px;
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#000 calc(100% - 1px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#000 calc(100% - 1px)
	);
	background: conic-gradient(
		from 120deg,
		transparent 0deg 110deg,
		#0ea5e9 110deg 150deg,
		/* sky-500 */ transparent 150deg 220deg,
		#6366f1 220deg 260deg,
		/* indigo-500 */ transparent 260deg 320deg,
		#a855f7 320deg 350deg,
		/* violet-500 */ transparent 350deg 360deg
	);
	animation: orbit-outer 7s linear infinite;
	opacity: 0.5;
}

@keyframes orbit-outer {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* INNER ORBIT – dekat dengan foto, dua garis A & B */
.photo-orbit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.photo-orbit::before,
.photo-orbit::after {
	content: "";
	position: absolute;
	inset: -10px; /* orbit lebih dekat ke foto */
	border-radius: 9999px;
	padding: 2px;
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#000 calc(100% - 1px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#000 calc(100% - 1px)
	);
}

/* Garis A – clockwise */
.photo-orbit::before {
	background: conic-gradient(
		from 0deg,
		transparent 0deg 150deg,
		#0ea5e9 150deg 200deg,
		transparent 200deg 360deg
	);
	animation: orbit-a 4s linear infinite;
	opacity: 0.9;
}

/* Garis B – counter-clockwise */
.photo-orbit::after {
	background: conic-gradient(
		from 200deg,
		transparent 0deg 150deg,
		#a855f7 150deg 210deg,
		transparent 210deg 360deg
	);
	animation: orbit-b 5s linear infinite;
	opacity: 0.8;
}

.role-wrapper {
	position: relative;
	display: block; /* nggak perlu inline-block lagi karena sudah di dalam flex */
	height: 1.5em; /* tinggi satu baris */
	overflow: hidden;
}

/* State dasar */
.role-text {
	display: inline-block;
	line-height: 1.5;
	white-space: nowrap;
	transform: translateY(0%);
	opacity: 1;
	transition: transform 1s ease, opacity 1s ease;
}

/* Keluar ke atas */
.role-leave-up {
	transform: translateY(-100%);
	opacity: 0;
}

/* Posisi start dari bawah */
.role-enter-from-bottom {
	transform: translateY(100%);
	opacity: 0;
}

/* Masuk ke tengah */
.role-enter {
	transform: translateY(0%);
	opacity: 1;
}

@keyframes orbit-a {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes orbit-b {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

/*
|* Section
|* About Me
*/

/* Base fade/slide for cards */
[data-animate] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	transition-delay: var(--animation-delay, 0ms);
}

/* Variasi arah (optional) */
[data-animate="fade-left"] {
	transform: translateX(-20px);
}

[data-animate="fade-right"] {
	transform: translateX(20px);
}

/* Saat elemen terlihat */
[data-animate].in-view {
	opacity: 1;
	transform: translateX(0) translateY(0);
}

/* Stagger kecil untuk list item services */
[data-animate-item] {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transition-delay: var(--animation-delay, 0ms);
}

[data-animate-item].in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger kecil untuk badge certification */
[data-animate-badge] {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s ease-out, transform 0.45s ease-out;
	transition-delay: var(--animation-delay, 0ms);
}

[data-animate-badge].in-view {
	opacity: 1;
	transform: translateY(0);
}

/*
|* Section
|* Potfolio
*/
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
|* Section
|* Career Histories
*/
html {
	scroll-behavior: smooth;
}
.no-scrollbar::-webkit-scrollbar {
	display: none;
}
.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}