/*
|--------------------------------------------------------------------------
| PARALLAX BERANDA - SECTION ARTIKEL
|--------------------------------------------------------------------------
| Asset:
| /img/artikel/parallax/
|
| Dipakai khusus pada #sectionArtikel di halaman beranda.
|--------------------------------------------------------------------------
*/

#sectionArtikel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, #fbfffe 0%, #ffffff 48%, #f7fffd 100%);
}

/* ---------------------------------------------------------
   PARALLAX CONTAINER
--------------------------------------------------------- */

#sectionArtikel .artikel-parallax-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Pastikan konten artikel berada di atas dekorasi */
#sectionArtikel > .container {
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------
   BASE ASSET
--------------------------------------------------------- */

#sectionArtikel .artikel-parallax-item {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	max-width: none;

	object-fit: contain;
	pointer-events: none;
	user-select: none;

	will-change: transform;
	transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));

	opacity: var(--opacity, 0.18);

	filter: saturate(0.88);
	transform-origin: center center;

	/* mencegah gambar terlalu tajam/menonjol */
	mix-blend-mode: multiply;
}

/* ---------------------------------------------------------
   DOKTER
--------------------------------------------------------- */

#sectionArtikel .doodle-dokter-1 {
	width: 150px;
	top: 2%;
	left: -22px;
	--opacity: 0.24;
	--rotate: -5deg;
}

#sectionArtikel .doodle-dokter-2 {
	width: 145px;
	top: 67%;
	right: -20px;
	--opacity: 0.22;
	--rotate: 5deg;
}

/* ---------------------------------------------------------
   STETOSKOP
--------------------------------------------------------- */

#sectionArtikel .doodle-stetoskop {
	width: 125px;
	top: 8%;
	right: 2%;
	--opacity: 0.22;
	--rotate: 12deg;
}

/* ---------------------------------------------------------
   JANTUNG
--------------------------------------------------------- */

#sectionArtikel .doodle-jantung {
	width: 90px;
	top: 23%;
	left: 2%;
	--opacity: 0.21;
	--rotate: -8deg;
}

/* ---------------------------------------------------------
   KAPSUL
--------------------------------------------------------- */

#sectionArtikel .doodle-kapsul {
	width: 90px;
	top: 35%;
	right: 1%;
	--opacity: 0.22;
	--rotate: 24deg;
}

/* ---------------------------------------------------------
   DNA
--------------------------------------------------------- */

#sectionArtikel .doodle-dna {
	width: 105px;
	top: 47%;
	left: -5px;
	--opacity: 0.2;
	--rotate: -12deg;
}

/* ---------------------------------------------------------
   SUNTIKAN
--------------------------------------------------------- */

#sectionArtikel .doodle-suntikan {
	width: 115px;
	top: 57%;
	right: -15px;
	--opacity: 0.21;
	--rotate: -20deg;
}

/* ---------------------------------------------------------
   PLESTER
--------------------------------------------------------- */

#sectionArtikel .doodle-plester {
	width: 105px;
	top: 74%;
	left: 1%;
	--opacity: 0.21;
	--rotate: -18deg;
}

/* ---------------------------------------------------------
   VIRUS
--------------------------------------------------------- */

#sectionArtikel .doodle-virus {
	width: 90px;
	top: 14%;
	left: 11%;
	--opacity: 0.18;
	--rotate: 0deg;
}

/* ---------------------------------------------------------
   RONTGEN
--------------------------------------------------------- */

#sectionArtikel .doodle-rontgen {
	width: 95px;
	top: 87%;
	right: 7%;
	--opacity: 0.18;
	--rotate: 8deg;
}

/* ---------------------------------------------------------
   RUMAH SAKIT
--------------------------------------------------------- */

#sectionArtikel .doodle-rumah-sakit {
	width: 155px;
	bottom: -25px;
	left: 8%;
	--opacity: 0.18;
	--rotate: 0deg;
}

/* ---------------------------------------------------------
   CLIPBOARD
--------------------------------------------------------- */

#sectionArtikel .doodle-clipboard {
	width: 95px;
	top: 80%;
	right: 19%;
	--opacity: 0.19;
	--rotate: 8deg;
}

/* ---------------------------------------------------------
   SOFT DECORATIVE BLOBS
--------------------------------------------------------- */

#sectionArtikel::before,
#sectionArtikel::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

#sectionArtikel::before {
	width: 260px;
	height: 260px;
	top: 18%;
	left: -150px;

	background: radial-gradient(
		circle,
		rgba(10, 183, 163, 0.09) 0%,
		rgba(10, 183, 163, 0.025) 55%,
		transparent 72%
	);

	filter: blur(8px);
}

#sectionArtikel::after {
	width: 320px;
	height: 320px;
	right: -190px;
	bottom: 12%;

	background: radial-gradient(
		circle,
		rgba(65, 196, 181, 0.08) 0%,
		rgba(65, 196, 181, 0.02) 58%,
		transparent 74%
	);

	filter: blur(10px);
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {
	#sectionArtikel .artikel-parallax-item {
		opacity: calc(var(--opacity, 0.18) * 0.9);
	}

	#sectionArtikel .doodle-dokter-1 {
		width: 120px;
		left: -35px;
	}

	#sectionArtikel .doodle-dokter-2 {
		width: 120px;
		right: -35px;
	}

	#sectionArtikel .doodle-stetoskop {
		width: 100px;
	}

	#sectionArtikel .doodle-jantung,
	#sectionArtikel .doodle-virus {
		width: 72px;
	}

	#sectionArtikel .doodle-kapsul,
	#sectionArtikel .doodle-plester,
	#sectionArtikel .doodle-clipboard {
		width: 78px;
	}

	#sectionArtikel .doodle-dna,
	#sectionArtikel .doodle-suntikan,
	#sectionArtikel .doodle-rontgen {
		width: 82px;
	}

	#sectionArtikel .doodle-rumah-sakit {
		width: 125px;
	}
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {
	#sectionArtikel {
		overflow: hidden;
	}

	#sectionArtikel .artikel-parallax-item {
		opacity: calc(var(--opacity, 0.18) * 0.72);
		filter: saturate(0.78);
	}

	/*
     * Jangan terlalu banyak objek di tengah layar mobile.
     * Asset tetap ada, tetapi ditempatkan di sisi halaman.
     */

	#sectionArtikel .doodle-dokter-1 {
		width: 82px;
		top: 1%;
		left: -28px;
	}

	#sectionArtikel .doodle-dokter-2 {
		width: 80px;
		top: 72%;
		right: -30px;
	}

	#sectionArtikel .doodle-stetoskop {
		width: 68px;
		top: 10%;
		right: -18px;
	}

	#sectionArtikel .doodle-jantung {
		width: 52px;
		top: 25%;
		left: -12px;
	}

	#sectionArtikel .doodle-kapsul {
		width: 55px;
		top: 37%;
		right: -12px;
	}

	#sectionArtikel .doodle-dna {
		width: 62px;
		top: 50%;
		left: -18px;
	}

	#sectionArtikel .doodle-suntikan {
		width: 65px;
		top: 59%;
		right: -20px;
	}

	#sectionArtikel .doodle-plester {
		width: 62px;
		top: 78%;
		left: -12px;
	}

	#sectionArtikel .doodle-virus {
		width: 55px;
		top: 17%;
		left: 3%;
	}

	#sectionArtikel .doodle-rontgen {
		width: 58px;
		top: 90%;
		right: 2%;
	}

	#sectionArtikel .doodle-rumah-sakit {
		width: 90px;
		bottom: -12px;
		left: 4%;
	}

	#sectionArtikel .doodle-clipboard {
		width: 58px;
		top: 83%;
		right: 8%;
	}

	#sectionArtikel::before {
		width: 160px;
		height: 160px;
	}

	#sectionArtikel::after {
		width: 190px;
		height: 190px;
	}
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#sectionArtikel .artikel-parallax-item {
		transform: none !important;
		transition: none !important;
	}
}