/* =========================================================
   Site Visual Enhancer — Virtual Education Academy
   Efek visual interaktif tambahan. Tidak menyentuh logo
   (.elementor-widget-theme-site-logo dikecualikan di semua rule).
   ========================================================= */

:root {
	--sve-primary: #0078d7;
	--sve-primary-dark: #135e96;
	--sve-accent: #61ce70;
	--sve-shadow: 0 10px 30px rgba(0, 120, 215, 0.15);
	--sve-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Smooth scroll untuk seluruh halaman */
html {
	scroll-behavior: smooth;
}

/* ---------------------------------------------------------
   1. Scroll-reveal: elemen muncul halus saat discroll
   (logo TIDAK termasuk, supaya selalu terlihat penuh)
--------------------------------------------------------- */
.sve-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
.sve-reveal.sve-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------
   2. Header sticky dengan bayangan saat discroll
--------------------------------------------------------- */
.elementor-location-header {
	transition: box-shadow var(--sve-transition), background-color var(--sve-transition);
}
body.sve-scrolled .elementor-location-header {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------
   3. Tombol: efek hover lebih hidup (logo dikecualikan)
--------------------------------------------------------- */
.elementor-button:not(.elementor-widget-theme-site-logo .elementor-button),
a.elementor-button,
.elementor-widget-button .elementor-button {
	position: relative;
	overflow: hidden;
	transition: transform var(--sve-transition), box-shadow var(--sve-transition);
}
.elementor-button:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: var(--sve-shadow);
}

/* Efek ripple halus saat tombol ditekan */
.elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.elementor-button:active::after {
	opacity: 1;
}

/* ---------------------------------------------------------
   4. Gambar & kartu: efek zoom halus saat hover
   (logo dikecualikan secara eksplisit)
--------------------------------------------------------- */
.elementor-widget-image:not(.elementor-widget-theme-site-logo) .elementor-image img,
.elementor-widget-image-box:not(.elementor-widget-theme-site-logo) img {
	transition: transform 0.6s ease, filter 0.6s ease;
}
.elementor-widget-image:not(.elementor-widget-theme-site-logo) .elementor-image:hover img,
.elementor-widget-image-box:not(.elementor-widget-theme-site-logo):hover img {
	transform: scale(1.05);
}

/* Kartu / kolom Elementor terangkat halus saat disorot kursor */
.elementor-widget-wrap .elementor-widget:not(.elementor-widget-theme-site-logo) {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.elementor-column:hover > .elementor-widget-wrap {
	transform: translateY(-4px);
}

/* ---------------------------------------------------------
   5. Link teks: underline animasi
--------------------------------------------------------- */
.elementor-widget-text-editor a:not(.elementor-button) {
	background-image: linear-gradient(var(--sve-primary), var(--sve-primary));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 2px;
	transition: background-size 0.35s ease;
}
.elementor-widget-text-editor a:not(.elementor-button):hover {
	background-size: 100% 2px;
}

/* ---------------------------------------------------------
   6. Tombol Back-to-Top mengambang
--------------------------------------------------------- */
#sve-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--sve-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
	z-index: 9999;
}
#sve-back-to-top.sve-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#sve-back-to-top:hover {
	background: var(--sve-primary-dark);
}
#sve-back-to-top svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

/* ---------------------------------------------------------
   7. Progress bar tipis di atas halaman saat scroll
--------------------------------------------------------- */
#sve-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--sve-primary), var(--sve-accent));
	z-index: 10000;
	transition: width 0.1s ease-out;
}

/* Hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.sve-reveal,
	.elementor-button,
	.elementor-widget-image img,
	#sve-back-to-top {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}