/* ============================================================
   Odan CMS — Animation layer
   Scroll reveal · sticky shrink header · nav underline ·
   button/card micro-interactions · counters · back-to-top.

   SAFETY MODEL (never leave content hidden):
   - The hidden state lives ONLY on `.odan-reveal`, a class that JS adds
     at runtime and ONLY to blocks that are currently BELOW the fold.
     Nothing is hidden by CSS up front, so above-the-fold content (hero,
     first section) is always visible and can never get stuck invisible.
   - JS reveals each block via IntersectionObserver AND an independent
     scroll fallback, so a block always un-hides once scrolled into view.
   - When JS is absent, IO is unsupported, or reduced motion is on, the
     `.odan-reveal` class is never added — everything stays visible.
   ============================================================ */

/* ---------- Neutralize Elementor's own (unreliable here) entrance animations ----------
   Elementor's JS-driven entrance animations (e.g. `animated fadeInUp`) do not fire
   reliably on these API-built pages and can leave headings/content stuck faint or
   invisible. Our reveal layer below handles motion instead, so we force any
   Elementor-animated element to its final, visible state. */
.elementor-element.animated {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- Scroll reveal (class applied by JS to below-fold blocks) ---------- */
.odan-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s cubic-bezier(.22,.61,.36,1),
	            transform .6s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--odan-delay, 0s);
	will-change: opacity, transform;
}
.odan-reveal.odan-in {
	opacity: 1;
	transform: none;
}

/* ---------- Sticky shrink header ---------- */
.site-header.dynamic-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
	transition: box-shadow .3s ease, padding .3s ease, background .3s ease;
}
.site-header.dynamic-header.odan-scrolled {
	box-shadow: 0 6px 22px rgba(11,31,58,.10);
	padding-block-start: .5rem;
	padding-block-end: .5rem;
}
.site-header.dynamic-header .custom-logo {
	transition: transform .3s ease;
	transform-origin: left center;
}
.site-header.dynamic-header.odan-scrolled .custom-logo {
	transform: scale(.85);
}

/* ---------- Animated nav underline (desktop only) ---------- */
@media (min-width: 1025px) {
	.site-navigation ul.menu > li > a { position: relative; }
	.site-navigation ul.menu > li > a::before {
		content: "";
		position: absolute;
		left: 15px; right: 15px; bottom: 2px;
		height: 2px;
		background: var(--odan-amber);
		border-radius: 2px;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .25s ease;
	}
	.site-navigation ul.menu > li > a:hover::before,
	.site-navigation ul.menu > li.current-menu-item > a::before {
		transform: scaleX(1);
	}
}

/* ---------- Button micro-interactions ---------- */
.elementor-button {
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
	position: relative;
	overflow: hidden;
}
.elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,31,58,.18); }
.elementor-button:active { transform: translateY(0); }
.elementor-button > * { position: relative; z-index: 1; }
.elementor-button::after {
	content: "";
	position: absolute;
	top: 0; left: -130%;
	width: 55%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-20deg);
	transition: left .6s ease;
	pointer-events: none;
	z-index: 0;
}
.elementor-button:hover::after { left: 150%; }

/* ---------- Card / box hover polish ---------- */
.elementor-widget-image-box,
.elementor-widget-icon-box { transition: transform .3s ease; }
.elementor-widget-image-box:hover,
.elementor-widget-icon-box:hover { transform: translateY(-6px); }

/* ---------- Back-to-top button ---------- */
.odan-top {
	position: fixed;
	right: 22px; bottom: 22px;
	width: 46px; height: 46px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--odan-navy);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .3s, visibility .3s, transform .3s, background .2s, color .2s;
	z-index: 998;
	box-shadow: 0 8px 24px rgba(11,31,58,.22);
}
.odan-top.show { opacity: 1; visibility: visible; transform: none; }
.odan-top:hover { background: var(--odan-amber); color: var(--odan-navy); }
.odan-top svg { width: 20px; height: 20px; display: block; }

/* ---------- Respect reduced motion: disable all motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.odan-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.elementor-button::after { display: none; }
	.elementor-button:hover,
	.elementor-widget-image-box:hover,
	.elementor-widget-icon-box:hover { transform: none; }
	.site-header.dynamic-header,
	.site-header.dynamic-header .custom-logo { transition: none; }
}