/**
 * Kerawa Partners — Animation Styles
 *
 * All animations are gated behind the .js-anim-ready class (added by JS).
 * Without JS, elements display normally — no invisible content.
 *
 * Classes:
 *   Scroll-reveal : .kw-fade-in | .kw-slide-up | .kw-slide-left | .kw-slide-right | .kw-zoom-in
 *   Text reveal   : .kw-text-reveal
 *   Parallax      : .kw-parallax
 *   Buttons       : .kw-btn-pulse | .kw-btn-scale | .kw-btn-ripple
 *   Icons         : .kw-icon-morph | .kw-icon-spin
 *   Nav           : .kw-nav-link | .kw-nav-dropdown | .kw-header-scrolled
 *   Lottie        : .kw-lottie
 */

/* ── Custom properties ──────────────────────────────────────────────────────── */
:root {
	--kw-anim-duration:      0.85s;
	--kw-anim-ease:          cubic-bezier(0.22, 1, 0.36, 1);
	--kw-anim-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
	--kw-progress-color:     #6b46c1;
	--kw-loader-color:       #6b46c1;
}

/* ============================================================================
   1. SCROLL REVEAL CLASSES
   ============================================================================ */

.js-anim-ready .kw-fade-in,
.js-anim-ready .kw-slide-up,
.js-anim-ready .kw-slide-left,
.js-anim-ready .kw-slide-right,
.js-anim-ready .kw-zoom-in {
	opacity: 0;
	transition:
		opacity   var(--kw-anim-duration) var(--kw-anim-ease),
		transform var(--kw-anim-duration) var(--kw-anim-ease);
	will-change: opacity, transform;
}

/* Initial positions (before reveal) */
.js-anim-ready .kw-slide-up    { transform: translateY(36px); }
.js-anim-ready .kw-slide-left  { transform: translateX(-36px); }
.js-anim-ready .kw-slide-right { transform: translateX(36px); }
.js-anim-ready .kw-zoom-in     { transform: scale(0.88); }
.js-anim-ready .kw-fade-in     { transform: none; }

/* Revealed state */
.js-anim-ready .kw-fade-in.is-visible,
.js-anim-ready .kw-slide-up.is-visible,
.js-anim-ready .kw-slide-left.is-visible,
.js-anim-ready .kw-slide-right.is-visible,
.js-anim-ready .kw-zoom-in.is-visible {
	opacity:   1;
	transform: none;
}

/* ============================================================================
   2. TEXT REVEAL  (.kw-text-reveal)
   ============================================================================ */

.kw-word-wrap {
	display:   inline-block;
	overflow:  hidden;
	vertical-align: bottom;
}

.js-anim-ready .kw-word {
	display:   inline-block;
	transform: translateY(100%);
	opacity:   0;
	transition:
		transform var(--kw-anim-duration) var(--kw-anim-ease),
		opacity   calc(var(--kw-anim-duration) * 0.8) ease;
}

.js-anim-ready .kw-word.is-visible {
	transform: translateY(0);
	opacity:   1;
}

/* ============================================================================
   3. SCROLL PROGRESS BAR
   ============================================================================ */

#kw-scroll-progress {
	position:   fixed;
	top:        0;
	left:       0;
	width:      0%;
	height:     3px;
	background: var(--kw-progress-color);
	z-index:    99999;
	transition: width 0.1s linear;
}

/* ============================================================================
   4. AJAX LOADING INDICATOR
   ============================================================================ */

#kw-ajax-loader {
	position:   fixed;
	top:        12px;
	right:      16px;
	z-index:    99997;
	opacity:    0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

#kw-ajax-loader.is-active {
	opacity: 1;
}

.kw-ajax-spinner {
	width:  24px;
	height: 24px;
	border: 3px solid rgba(107, 70, 193, 0.25);
	border-top-color: var(--kw-loader-color);
	border-radius: 50%;
	animation: kw-spin 0.7s linear infinite;
}

@keyframes kw-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================================
   6. NAVIGATION
   ============================================================================ */

/* Sliding underline on nav links */
.kw-nav-link {
	position:   relative;
	text-decoration: none;
}

.js-anim-ready .kw-nav-link::after {
	content:    '';
	position:   absolute;
	bottom:     -2px;
	left:       0;
	width:      0%;
	height:     2px;
	background: currentColor;
	transition: width 0.4s var(--kw-anim-ease);
}

.js-anim-ready .kw-nav-link:hover::after,
.js-anim-ready .kw-nav-link:focus-visible::after,
.js-anim-ready .kw-nav-link[aria-current="page"]::after {
	width: 100%;
}

/* Dropdown fade + slide */
.js-anim-ready .kw-nav-dropdown {
	opacity:        0;
	transform:      translateY(-8px);
	pointer-events: none;
	transition:
		opacity   0.4s ease,
		transform 0.4s var(--kw-anim-ease);
}

.js-anim-ready .menu-item:hover > .kw-nav-dropdown,
.js-anim-ready .menu-item:focus-within > .kw-nav-dropdown {
	opacity:        1;
	transform:      translateY(0);
	pointer-events: auto;
}

/* Header scroll-shrink */
.kw-header-scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12) !important;
	transition: box-shadow 0.3s ease, padding 0.3s ease;
}

/* ============================================================================
   7. BUTTON EFFECTS
   ============================================================================ */

/* Pulse  */
.kw-btn-pulse {
	animation: kw-pulse 2.4s ease infinite;
}

@keyframes kw-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(107, 70, 193, 0.45); }
	50%       { box-shadow: 0 0 0 10px rgba(107, 70, 193, 0); }
}

/* Scale on press */
.js-anim-ready .kw-btn-scale {
	transition: transform 0.15s var(--kw-anim-ease-bounce);
}

.js-anim-ready .kw-btn-scale:hover {
	transform: scale(1.04);
}

.js-anim-ready .kw-btn-scale.is-pressed {
	transform: scale(0.96);
}

/* Ripple */
.kw-btn-ripple {
	position: relative;
	overflow: hidden;
}

.kw-ripple {
	position:   absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transform:  scale(0);
	animation:  kw-ripple-anim 0.6s linear;
	pointer-events: none;
}

@keyframes kw-ripple-anim {
	to {
		transform: scale(4);
		opacity:   0;
	}
}

/* ============================================================================
   8. ICON EFFECTS
   ============================================================================ */

/* Morph toggle: first child visible by default, second child on .is-morphed */
.kw-icon-morph {
	position: relative;
	cursor:   pointer;
}

.kw-icon-morph > *:nth-child(1),
.kw-icon-morph > *:nth-child(2) {
	transition: opacity 0.3s ease, transform 0.3s var(--kw-anim-ease-bounce);
}

.kw-icon-morph > *:nth-child(2) {
	position:  absolute;
	inset:     0;
	opacity:   0;
	transform: rotate(90deg) scale(0.5);
}

.kw-icon-morph.is-morphed > *:nth-child(1) {
	opacity:   0;
	transform: rotate(-90deg) scale(0.5);
}

.kw-icon-morph.is-morphed > *:nth-child(2) {
	opacity:   1;
	transform: none;
}

/* Spin on hover */
.js-anim-ready .kw-icon-spin.is-spinning {
	animation: kw-spin-once 0.5s var(--kw-anim-ease-bounce);
}

@keyframes kw-spin-once {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ============================================================================
   9. LOTTIE CONTAINERS
   ============================================================================ */

.kw-lottie {
	display:  block;
	overflow: hidden;
}

.kw-lottie lottie-player {
	display: block;
	width:   100%;
	height:  100%;
}

/* ============================================================================
   10. PARALLAX
   ============================================================================ */

.kw-parallax {
	will-change: transform;
}

/* ============================================================================
   11. REDUCED-MOTION OVERRIDES
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

	/* Cancel all transitions and animations */
	*,
	*::before,
	*::after {
		animation-duration:   0.001ms !important;
		animation-iteration-count: 1  !important;
		transition-duration:  0.001ms !important;
	}

	/* Instantly show all reveal elements */
	.kw-fade-in,
	.kw-slide-up,
	.kw-slide-left,
	.kw-slide-right,
	.kw-zoom-in {
		opacity:   1 !important;
		transform: none !important;
	}

	.kw-word {
		opacity:   1 !important;
		transform: none !important;
	}

	/* Remove progress bar */
	#kw-scroll-progress {
		display: none;
	}

	/* Disable pulse */
	.kw-btn-pulse {
		animation: none !important;
	}
}