/**
 * Abannet Ultra Hover Layer — futuristic interactions only (no layout overrides)
 */

/* ─── Fixes: dropdown must not clip ─── */
.site-header,
.site-header .header-inner,
.header-actions,
.phone-dropdown {
	overflow: visible;
}

.phone-dropdown.is-open {
	z-index: 2000;
}

.phone-dropdown-menu {
	z-index: 2001;
}

/* ─── Shared glow tokens ─── */
:root {
	--hx-navy: #1a2b4b;
	--hx-blue: #2a6fc0;
	--hx-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--hx-glow: 0 0 30px rgba(34, 211, 238, 0.35);
}

@media (hover: hover) and (pointer: fine) {

	/* ─── Nav links — laser underline glow ─── */
	.nav-menu li a {
		transition: color 0.3s var(--hx-ease), text-shadow 0.3s ease;
	}

	.nav-menu li a:hover {
		color: var(--hx-blue);
		text-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
	}

	.nav-menu li a::after {
		box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
		transition: transform 0.4s var(--hx-ease), box-shadow 0.3s ease;
	}

	.nav-menu li a:hover::after {
		box-shadow: 0 0 16px rgba(34, 211, 238, 0.8);
	}

	/* ─── Buttons — quantum pulse ─── */
	.btn {
		transition: transform 0.35s var(--hx-ease), box-shadow 0.35s var(--hx-ease), filter 0.35s ease;
	}

	.btn-primary:hover {
		transform: translateY(-3px) scale(1.02);
		box-shadow:
			0 14px 40px rgba(59, 130, 246, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.15) inset,
			0 0 40px rgba(34, 211, 238, 0.25);
		filter: brightness(1.06);
	}

	.btn-secondary:hover,
	.btn-outline:hover,
	.btn-outline-white:hover {
		transform: translateY(-2px);
		box-shadow: var(--hx-glow);
	}

	.hero .btn-outline:hover {
		border-color: var(--hx-navy);
		box-shadow: 0 0 28px rgba(34, 211, 238, 0.3);
		background: rgba(34, 211, 238, 0.08);
	}

	/* ─── Phone toggle ─── */
	.phone-dropdown-toggle {
		transition: border-color 0.3s ease, box-shadow 0.35s var(--hx-ease), transform 0.35s var(--hx-ease);
	}

	.phone-dropdown-toggle:hover {
		transform: translateY(-1px);
		border-color: var(--hx-navy);
		box-shadow: 0 0 24px rgba(34, 211, 238, 0.2);
	}

	.phone-dropdown-menu a {
		transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--hx-ease), padding 0.25s ease;
	}

	.phone-dropdown-menu a:hover {
		background: rgba(34, 211, 238, 0.1);
		color: var(--hx-blue);
		transform: translateX(-4px);
		padding-right: 18px;
	}

	/* ─── Service cards — neon lift (keeps fx shine ::after) ─── */
	.service-card {
		transition: transform 0.45s var(--hx-ease), box-shadow 0.45s var(--hx-ease), border-color 0.35s ease;
	}

	.service-card:hover {
		transform: translateY(-8px);
		border-color: rgba(34, 211, 238, 0.4);
		box-shadow:
			0 20px 50px rgba(15, 23, 42, 0.12),
			0 0 0 1px rgba(34, 211, 238, 0.25),
			0 0 36px rgba(34, 211, 238, 0.14);
	}

	.service-card:hover .service-icon {
		transform: scale(1.08) rotate(-3deg);
		box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
	}

	.service-icon {
		transition: transform 0.45s var(--hx-ease), box-shadow 0.45s var(--hx-ease);
	}

	/* ─── Stats ─── */
	.stat-item {
		transition: transform 0.35s var(--hx-ease), background 0.3s ease;
		border-radius: var(--radius-md);
	}

	.stat-item:hover {
		transform: translateY(-4px);
		background: rgba(59, 130, 246, 0.06);
	}

	.stat-item:hover .stat-icon {
		transform: scale(1.1);
		box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
	}

	.stat-icon {
		transition: transform 0.4s var(--hx-ease), box-shadow 0.4s ease;
	}

	/* ─── Why cards (dark section) ─── */
	.why-card {
		transition: transform 0.4s var(--hx-ease), border-color 0.35s ease, box-shadow 0.4s ease;
	}

	.why-card:hover {
		transform: translateY(-6px);
		border-color: rgba(34, 211, 238, 0.35);
		box-shadow: 0 0 40px rgba(34, 211, 238, 0.1);
	}

	.why-card:hover .why-number {
		color: rgba(34, 211, 238, 0.55);
		text-shadow: 0 0 30px rgba(34, 211, 238, 0.4);
	}

	.why-number {
		transition: color 0.35s ease, text-shadow 0.35s ease;
	}

	/* ─── Tariff rows ─── */
	.tariff-row:not(.tariff-row-head) {
		transition: transform 0.35s var(--hx-ease), box-shadow 0.35s ease, border-color 0.3s ease;
	}

	.tariff-row:not(.tariff-row-head):hover {
		transform: translateX(-4px);
		box-shadow: -8px 0 30px rgba(34, 211, 238, 0.08);
		border-color: rgba(34, 211, 238, 0.2);
	}

	.btn-tariff:hover {
		box-shadow: 0 0 30px rgba(34, 211, 238, 0.4);
		transform: translateY(-2px) scale(1.03);
	}

	/* ─── About cards ─── */
	.about-card {
		transition: transform 0.4s var(--hx-ease), box-shadow 0.4s ease;
	}

	.about-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
	}

	/* ─── CTA box ─── */
	.cta-box {
		transition: transform 0.45s var(--hx-ease), box-shadow 0.45s ease;
	}

	.cta-box:hover {
		transform: translateY(-4px) scale(1.005);
		box-shadow: 0 28px 70px rgba(59, 130, 246, 0.5);
	}

	/* ─── Engineering tools ─── */
	.eng-tab {
		transition: transform 0.3s var(--hx-ease), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	}

	.eng-tab:hover:not(.is-active) {
		transform: translateY(-2px);
		border-color: rgba(34, 211, 238, 0.25);
		box-shadow: 0 8px 24px rgba(34, 211, 238, 0.1);
	}

	.cyber-card {
		transition: transform 0.35s var(--hx-ease), border-color 0.3s ease, box-shadow 0.35s ease;
	}

	.cyber-card:hover {
		transform: translateY(-3px);
		border-color: rgba(34, 211, 238, 0.3);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 0 24px rgba(34, 211, 238, 0.08);
	}

	.btn-kml-export:hover {
		box-shadow: 0 0 36px rgba(34, 211, 238, 0.45);
		transform: translateY(-2px);
	}

	/* ─── Hero float stats ─── */
	.float-stat {
		transition: transform 0.4s var(--hx-ease), border-color 0.3s ease, box-shadow 0.4s ease;
	}

	.float-stat:hover {
		transform: translateY(-4px) scale(1.03);
		border-color: rgba(34, 211, 238, 0.4);
		box-shadow: 0 0 28px rgba(34, 211, 238, 0.2);
	}

	/* ─── Footer links ─── */
	.footer-menu a,
	.footer-contact a {
		transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s var(--hx-ease);
	}

	.footer-menu a:hover,
	.footer-contact a:hover {
		color: var(--hx-navy);
		text-shadow: 0 0 16px rgba(34, 211, 238, 0.4);
		transform: translateX(-3px);
	}

	/* ─── Form inputs focus glow ─── */
	.consultation-form .form-group input:hover,
	.consultation-form .form-group select:hover,
	.consultation-form .form-group textarea:hover {
		border-color: rgba(59, 130, 246, 0.4);
	}

	/* ─── Logo subtle hover ─── */
	.site-branding .brand-link:hover img {
		filter: none;
		transform: scale(1.02);
	}

	.site-branding .brand-link img {
		transition: filter 0.35s ease, transform 0.35s var(--hx-ease);
	}

	/* ─── Section badge pulse ─── */
	.section-badge:hover,
	.hero-badge:hover {
		border-color: rgba(26, 43, 75, 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-card:hover,
	.btn-primary:hover,
	.stat-item:hover,
	.why-card:hover,
	.cyber-card:hover,
	.float-stat:hover {
		transform: none !important;
	}
}