/* Gaya Animasi Transisi Halus */
.animate-fade-in {
	animation: fadeInEffect 0.6s ease-in-out forwards;
}

@keyframes fadeInEffect {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- KARTU FILE --- */
.file-card {
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 20px;
	background: #ffffff;
}

.file-card:hover {
	transform: translateY(-12px);
	background-color: #f8f9fa;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.malware-detected:hover {
	animation: subtleShake 0.4s infinite;
}

@keyframes subtleShake {
	0%,
	100% {
		transform: translateY(-12px) rotate(0deg);
	}
	25% {
		transform: translateY(-12px) rotate(1deg);
	}
	75% {
		transform: translateY(-12px) rotate(-1deg);
	}
}

/* --- EFEK GLITCH TEKS MALWARE --- */
.glitch-text {
	position: relative;
	display: inline-block;
}

.glitch-text::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: -2px;
	text-shadow: 1px 0 #ff0000;
	color: #ff0000;
	opacity: 0;
}

.glitch-text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 2px;
	text-shadow: -1px 0 #00f2ff;
	color: #00f2ff;
	opacity: 0;
}

.malware-detected:hover .glitch-text::before,
.malware-detected:hover .glitch-text::after {
	opacity: 1;
	animation: glitch-anim 0.2s infinite;
}

@keyframes glitch-anim {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translate(-2px, 2px);
	}
	40% {
		transform: translate(-2px, -2px);
	}
	60% {
		transform: translate(2px, 2px);
	}
	80% {
		transform: translate(2px, -2px);
	}
	100% {
		transform: translate(0);
	}
}

/* --- OVERLAY RANSOMWARE SIMULATOR --- */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(10px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
}

.virus-box {
	width: 100%;
	max-width: 500px;
	color: white;
	animation: screamingIn 0.5s ease;
}

@keyframes screamingIn {
	from {
		transform: scale(1.5);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.shake-infected {
	animation: shakeBodyInfected 0.1s infinite;
}

@keyframes shakeBodyInfected {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}
	50% {
		transform: translate(-2px, -2px) rotate(-2deg);
	}
	100% {
		transform: translate(1px, -1px) rotate(2deg);
	}
}

.safe-result-box {
	animation: fadeInEffect 0.5s ease;
	background: #d1e7dd;
	padding: 30px;
	border-radius: 20px;
	border-left: 10px solid #198754;
}