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

body {
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
color: #000;
}

/* ================= WRAPPER ================= */
.wrapper {
max-width: 1000px;
margin: 60px auto;
padding: 0 20px;
}

/* ================= GAMBAR ================= */
.poster {
width: 100%;
display: block;
margin-bottom: 70px;

/* ANIMASI AWAL */
opacity: 0;
transform: translateY(40px) scale(0.98);
transition: all 0.8s ease;
}

/* SAAT MUNCUL */
.poster.show {
opacity: 1;
transform: translateY(0) scale(1);
}

/* RESPONSIVE */
@media (max-width: 768px) {
.wrapper {
margin: 30px auto;
}
}

const posters = document.querySelectorAll(‘.poster’);

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘show’);
}
});
}, {
threshold: 0.2
});

posters.forEach(poster => {
observer.observe(poster);
});