/**
 * Semua animasi show/hide (fade, slide, tada).
 *
 * Dipisah dari frontend.css karena efek ini sifatnya "pelengkap"
 * yang mungkin akan sering ditambah/diubah - sesuai alasan
 * pemisahan file yang sudah kita sepakati di struktur folder.
 *
 * Class ditambahkan/dihapus oleh frontend.js saat ads tampil/hilang.
 * Durasi animasi (0.4s) HARUS sinkron dengan konstanta ANIM_DURATION_MS
 * di frontend.js, karena JS menunggu durasi ini selesai sebelum
 * benar-benar menghapus elemen dari DOM (untuk animasi keluar).
 */

/* ---------- FADE ---------- */
@keyframes noticespot-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes noticespot-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
.noticespot-anim-fade-in  { animation: noticespot-fade-in 0.4s ease forwards; }
.noticespot-anim-fade-out { animation: noticespot-fade-out 0.4s ease forwards; }

/* ---------- SLIDE ----------
 * Arah slide ditentukan oleh posisi horizontal ads:
 * ads di kanan (right) slide dari/ke kanan, ads di kiri slide dari/ke kiri.
 * JS menambahkan class -from-right / -from-left sesuai posisiHorizontal. */
@keyframes noticespot-slide-in-from-right {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes noticespot-slide-out-to-right {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(40px); }
}
@keyframes noticespot-slide-in-from-left {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes noticespot-slide-out-to-left {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-40px); }
}
.noticespot-anim-slide-in-from-right  { animation: noticespot-slide-in-from-right 0.4s ease forwards; }
.noticespot-anim-slide-out-to-right   { animation: noticespot-slide-out-to-right 0.4s ease forwards; }
.noticespot-anim-slide-in-from-left   { animation: noticespot-slide-in-from-left 0.4s ease forwards; }
.noticespot-anim-slide-out-to-left    { animation: noticespot-slide-out-to-left 0.4s ease forwards; }

/* ---------- TADA ----------
 * Efek "muncul dengan sedikit bounce" untuk masuk, dan
 * "mengecil sekilas" untuk keluar. */
@keyframes noticespot-tada-in {
	0%   { opacity: 0; transform: scale(0.3); }
	60%  { opacity: 1; transform: scale(1.08); }
	80%  { transform: scale(0.95); }
	100% { transform: scale(1); }
}
@keyframes noticespot-tada-out {
	0%   { opacity: 1; transform: scale(1); }
	30%  { transform: scale(1.08); }
	100% { opacity: 0; transform: scale(0.3); }
}
.noticespot-anim-tada-in  { animation: noticespot-tada-in 0.4s ease forwards; }
.noticespot-anim-tada-out { animation: noticespot-tada-out 0.4s ease forwards; }