/* =========================================================
   Basmala Journal Stylesheet
   Global Reusable Hero Pattern Animation + Mandala Spin

   Dipasang di:
   Website > Appearance > Advanced > Journal stylesheet

   PENTING:
   CSS ini TIDAK mengubah posisi RSS/share.
   Fokus hanya pada animasi logo dan pattern hero.

   UNTUK JURNAL LAIN:
   Cukup ganti URL pattern di variable ini:

   --els-journal-pattern-image: url("/plugins/themes/elkuatorscholar/assets/patterns/basmala-flake.png");

   Contoh:
   --els-journal-pattern-image: url("/plugins/themes/elkuatorscholar/assets/patterns/pattern-jurnal-lain.png");

   Pastikan file pattern tersedia di:
   /plugins/themes/elkuatorscholar/assets/patterns/

   Atau gunakan URL penuh:
   --els-journal-pattern-image: url("https://domainanda.com/path/pattern.png");
   ========================================================= */

:root {
	/* =====================================================
	   GANTI URL INI UNTUK JURNAL LAIN
	   ===================================================== */
	--els-journal-pattern-image: url("/plugins/themes/elkuatorscholar/assets/patterns/basmala-flake.png");

	/* Ukuran dan opacity pattern */
	--els-journal-pattern-opacity-xl: 0.24;
	--els-journal-pattern-opacity-lg: 0.20;
	--els-journal-pattern-opacity-md: 0.16;
	--els-journal-pattern-opacity-sm: 0.12;

	/* Kecepatan animasi pattern */
	--els-journal-pattern-speed-1: 22s;
	--els-journal-pattern-speed-2: 18s;
	--els-journal-pattern-speed-3: 26s;
	--els-journal-pattern-speed-4: 20s;
	--els-journal-pattern-speed-5: 30s;
	--els-journal-pattern-speed-6: 24s;

	/* Animasi mandala/logo */
	--els-journal-logo-spin-speed: 7s;
}


/* =========================================================
   1. Mandala / Logo Spin
   ========================================================= */

@keyframes elsJournalMandalaSpin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.els_brand_mandala_img,
.els_brand img {
	animation: elsJournalMandalaSpin var(--els-journal-logo-spin-speed) linear infinite !important;
	transform-origin: center center !important;
	will-change: transform;
}

.els_brand:hover .els_brand_mandala_img,
.els_brand:focus .els_brand_mandala_img,
.els_brand:hover img,
.els_brand:focus img {
	animation-play-state: paused !important;
}

.els_brand img {
	display: block;
	width: 44px;
	height: 44px;
	max-width: 44px;
	max-height: 44px;
	object-fit: contain;
	flex: 0 0 44px;
}


/* =========================================================
   2. Hero Base
   Khusus aktif jika hero punya class .els_hero_basmala
   ========================================================= */

body .els_hero.els_hero_basmala {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate;
}


/* =========================================================
   3. Matikan Pattern Global Elkuator Scholar
   Hanya untuk hero Basmala agar tidak tabrakan visual.
   Tidak menyentuh RSS/share.
   ========================================================= */

body .els_hero.els_hero_basmala::before,
body .els_hero.els_hero_basmala::after {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	animation: none !important;
}

body .els_hero.els_hero_basmala > .els_pattern {
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	animation: none !important;
}

body .els_hero.els_hero_basmala > .els_pattern::before,
body .els_hero.els_hero_basmala > .els_pattern::after {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	animation: none !important;
}


/* =========================================================
   4. Pattern Layer
   Support class lama Basmala:
   .els_pattern_basmala

   Support class reusable untuk jurnal lain:
   .els_pattern_journal
   ========================================================= */

body .els_hero.els_hero_basmala .els_pattern_basmala,
body .els_hero.els_hero_basmala .els_pattern_journal {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	display: block !important;
	overflow: hidden !important;
	pointer-events: none !important;
	opacity: 1 !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	transform-origin: center center;
	animation: elsJournalPatternLayerBreath 16s ease-in-out infinite alternate !important;
}

body .els_hero.els_hero_basmala .els_pattern_basmala::before,
body .els_hero.els_hero_basmala .els_pattern_basmala::after,
body .els_hero.els_hero_basmala .els_pattern_journal::before,
body .els_hero.els_hero_basmala .els_pattern_journal::after {
	display: none !important;
	content: none !important;
}


/* =========================================================
   5. Pattern Item Base
   Support class lama Basmala:
   .els_basmala_flake

   Support class reusable:
   .els_journal_pattern_item
   ========================================================= */

body .els_hero.els_hero_basmala .els_basmala_flake,
body .els_hero.els_hero_basmala .els_journal_pattern_item {
	position: absolute !important;
	display: block !important;
	background-image: var(--els-journal-pattern-image) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	pointer-events: none !important;
	will-change: transform, opacity, filter;
	filter: drop-shadow(0 12px 24px rgba(255, 255, 255, .08));
	mix-blend-mode: screen;
}


/* =========================================================
   6. Pattern Positions + Improved Animation
   Tetap kompatibel dengan class Basmala lama:
   .els_basmala_flake_1 s.d. .els_basmala_flake_6

   Untuk jurnal lain bisa pakai:
   .els_journal_pattern_item_1 s.d. .els_journal_pattern_item_6
   ========================================================= */

body .els_hero.els_hero_basmala .els_basmala_flake_1,
body .els_hero.els_hero_basmala .els_journal_pattern_item_1 {
	top: 12px;
	left: 3%;
	width: 230px;
	height: 230px;
	opacity: var(--els-journal-pattern-opacity-xl);
	animation:
		elsJournalOrbitFloat1 var(--els-journal-pattern-speed-1) ease-in-out infinite alternate,
		elsJournalSoftPulse 9s ease-in-out infinite alternate !important;
}

body .els_hero.els_hero_basmala .els_basmala_flake_2,
body .els_hero.els_hero_basmala .els_journal_pattern_item_2 {
	top: 164px;
	left: 17%;
	width: 88px;
	height: 88px;
	opacity: var(--els-journal-pattern-opacity-md);
	animation:
		elsJournalOrbitFloat2 var(--els-journal-pattern-speed-2) ease-in-out infinite alternate,
		elsJournalSoftPulse 7s ease-in-out infinite alternate-reverse !important;
}

body .els_hero.els_hero_basmala .els_basmala_flake_3,
body .els_hero.els_hero_basmala .els_journal_pattern_item_3 {
	top: 44px;
	left: 41%;
	width: 110px;
	height: 110px;
	opacity: var(--els-journal-pattern-opacity-sm);
	animation:
		elsJournalOrbitFloat3 var(--els-journal-pattern-speed-3) ease-in-out infinite alternate,
		elsJournalSoftPulse 8s ease-in-out infinite alternate !important;
}

body .els_hero.els_hero_basmala .els_basmala_flake_4,
body .els_hero.els_hero_basmala .els_journal_pattern_item_4 {
	top: 146px;
	left: 61%;
	width: 124px;
	height: 124px;
	opacity: var(--els-journal-pattern-opacity-sm);
	animation:
		elsJournalOrbitFloat4 var(--els-journal-pattern-speed-4) ease-in-out infinite alternate,
		elsJournalSoftPulse 7s ease-in-out infinite alternate-reverse !important;
}

body .els_hero.els_hero_basmala .els_basmala_flake_5,
body .els_hero.els_hero_basmala .els_journal_pattern_item_5 {
	top: 28px;
	right: 9%;
	width: 172px;
	height: 172px;
	opacity: var(--els-journal-pattern-opacity-lg);
	animation:
		elsJournalOrbitFloat5 var(--els-journal-pattern-speed-5) ease-in-out infinite alternate,
		elsJournalSoftPulse 10s ease-in-out infinite alternate !important;
}

body .els_hero.els_hero_basmala .els_basmala_flake_6,
body .els_hero.els_hero_basmala .els_journal_pattern_item_6 {
	top: 188px;
	right: 4%;
	width: 96px;
	height: 96px;
	opacity: var(--els-journal-pattern-opacity-sm);
	animation:
		elsJournalOrbitFloat6 var(--els-journal-pattern-speed-6) ease-in-out infinite alternate,
		elsJournalSoftPulse 8s ease-in-out infinite alternate-reverse !important;
}


/* =========================================================
   7. Hero Content Guard
   Hanya teks/konten hero.
   Tidak menyentuh .els_addtoany_share agar RSS/share tetap posisi asli.
   ========================================================= */

body .els_hero.els_hero_basmala .els_hero_inner {
	position: relative !important;
	z-index: 3 !important;
}


/* =========================================================
   8. Improved Global Reusable Animations
   Animasi ini bisa dipakai untuk pattern jurnal lain.
   ========================================================= */

@keyframes elsJournalPatternLayerBreath {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}

	50% {
		transform: translate3d(0, -7px, 0) scale(1.012);
		opacity: .96;
	}

	100% {
		transform: translate3d(0, 9px, 0) scale(1.018);
		opacity: 1;
	}
}

@keyframes elsJournalSoftPulse {
	0% {
		filter: drop-shadow(0 8px 18px rgba(255, 255, 255, .04));
	}

	50% {
		filter: drop-shadow(0 14px 30px rgba(255, 255, 255, .12));
	}

	100% {
		filter: drop-shadow(0 10px 22px rgba(255, 255, 255, .08));
	}
}

@keyframes elsJournalOrbitFloat1 {
	0% {
		transform: translate3d(0, -10px, 0) rotate(0deg) scale(1);
	}

	35% {
		transform: translate3d(28px, 8px, 0) rotate(4deg) scale(1.06);
	}

	70% {
		transform: translate3d(14px, 34px, 0) rotate(9deg) scale(1.12);
	}

	100% {
		transform: translate3d(46px, 22px, 0) rotate(13deg) scale(1.04);
	}
}

@keyframes elsJournalOrbitFloat2 {
	0% {
		transform: translate3d(8px, -8px, 0) rotate(0deg) scale(1);
	}

	35% {
		transform: translate3d(-16px, 16px, 0) rotate(-7deg) scale(1.15);
	}

	70% {
		transform: translate3d(4px, 28px, 0) rotate(-13deg) scale(1.04);
	}

	100% {
		transform: translate3d(-28px, 18px, 0) rotate(-18deg) scale(1.12);
	}
}

@keyframes elsJournalOrbitFloat3 {
	0% {
		transform: translate3d(0, -10px, 0) rotate(0deg) scale(1);
	}

	35% {
		transform: translate3d(18px, 14px, 0) rotate(8deg) scale(1.09);
	}

	70% {
		transform: translate3d(-6px, 30px, 0) rotate(14deg) scale(1.02);
	}

	100% {
		transform: translate3d(30px, 24px, 0) rotate(20deg) scale(1.1);
	}
}

@keyframes elsJournalOrbitFloat4 {
	0% {
		transform: translate3d(8px, -12px, 0) rotate(0deg) scale(1);
	}

	35% {
		transform: translate3d(-18px, 14px, 0) rotate(-6deg) scale(1.12);
	}

	70% {
		transform: translate3d(-34px, 30px, 0) rotate(-13deg) scale(1.04);
	}

	100% {
		transform: translate3d(-16px, 40px, 0) rotate(-19deg) scale(1.1);
	}
}

@keyframes elsJournalOrbitFloat5 {
	0% {
		transform: translate3d(0, -12px, 0) rotate(0deg) scale(1);
	}

	35% {
		transform: translate3d(-28px, 8px, 0) rotate(5deg) scale(1.08);
	}

	70% {
		transform: translate3d(-48px, 30px, 0) rotate(12deg) scale(1.14);
	}

	100% {
		transform: translate3d(-24px, 42px, 0) rotate(18deg) scale(1.06);
	}
}

@keyframes elsJournalOrbitFloat6 {
	0% {
		transform: translate3d(10px, -8px, 0) rotate(0deg) scale(1);
	}

	35% {
		transform: translate3d(-10px, 18px, 0) rotate(-8deg) scale(1.14);
	}

	70% {
		transform: translate3d(-30px, 32px, 0) rotate(-14deg) scale(1.05);
	}

	100% {
		transform: translate3d(-12px, 44px, 0) rotate(-21deg) scale(1.12);
	}
}


/* =========================================================
   9. Responsive
   ========================================================= */

@media (max-width: 768px) {
	body .els_hero.els_hero_basmala .els_basmala_flake_1,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_1 {
		left: -9%;
		width: 150px;
		height: 150px;
	}

	body .els_hero.els_hero_basmala .els_basmala_flake_2,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_2 {
		left: 16%;
		width: 64px;
		height: 64px;
	}

	body .els_hero.els_hero_basmala .els_basmala_flake_3,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_3 {
		left: 42%;
		width: 72px;
		height: 72px;
	}

	body .els_hero.els_hero_basmala .els_basmala_flake_4,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_4 {
		left: 63%;
		width: 78px;
		height: 78px;
	}

	body .els_hero.els_hero_basmala .els_basmala_flake_5,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_5 {
		right: -9%;
		width: 120px;
		height: 120px;
	}

	body .els_hero.els_hero_basmala .els_basmala_flake_6,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_6 {
		right: 7%;
		width: 62px;
		height: 62px;
	}
}

@media (max-width: 520px) {
	body .els_hero.els_hero_basmala .els_basmala_flake,
	body .els_hero.els_hero_basmala .els_journal_pattern_item {
		opacity: 0.12;
	}

	body .els_hero.els_hero_basmala .els_basmala_flake_2,
	body .els_hero.els_hero_basmala .els_basmala_flake_3,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_2,
	body .els_hero.els_hero_basmala .els_journal_pattern_item_3 {
		display: none !important;
	}
}


/* =========================================================
   10. Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.els_brand_mandala_img,
	.els_brand img,
	body .els_hero.els_hero_basmala .els_pattern_basmala,
	body .els_hero.els_hero_basmala .els_pattern_journal,
	body .els_hero.els_hero_basmala .els_basmala_flake,
	body .els_hero.els_hero_basmala .els_journal_pattern_item {
		animation: none !important;
	}
}