/**
 * DarkWhale — Animation System v2.3
 * Cohesive motion design aligned with the brand (cyan / navy tech aesthetic).
 *
 * @package DarkWhale
 */

/* ==========================================================================
   Motion tokens
   ========================================================================== */
:root {
	--dw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dw-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--dw-duration-fast: 0.25s;
	--dw-duration-base: 0.55s;
	--dw-duration-slow: 0.85s;
	--dw-reveal-distance: 28px;
}

html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.dw-reveal {
	opacity: 0;
	transform: translateY(var(--dw-reveal-distance));
	transition:
		opacity var(--dw-duration-slow) var(--dw-ease-out),
		transform var(--dw-duration-slow) var(--dw-ease-out);
	transition-delay: var(--dw-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.dw-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.dw-reveal--fade {
	transform: none;
}

.dw-reveal--scale {
	transform: scale(0.94);
}

.dw-reveal--scale.is-visible {
	transform: scale(1);
}

[dir="rtl"] .dw-reveal--slide-start {
	transform: translateX(var(--dw-reveal-distance));
}

[dir="ltr"] .dw-reveal--slide-start,
.dw-reveal--slide-start {
	transform: translateX(calc(var(--dw-reveal-distance) * -1));
}

.dw-reveal--slide-start.is-visible {
	transform: translateX(0);
}

/* Stagger groups — children animate when parent enters view */
.dw-stagger-group > * {
	opacity: 0;
	transform: translateY(22px);
}

.dw-stagger-group.is-visible > * {
	opacity: 1;
	transform: translateY(0);
	animation: dwFadeUp var(--dw-duration-base) var(--dw-ease-out) both;
	animation-delay: var(--dw-stagger-delay, 0ms);
}

/* ==========================================================================
   Hero entrance (page load)
   ========================================================================== */
.dw-page-ready .dw-hero-animate .dw-hero-home-content > * {
	animation: dwHeroFadeUp var(--dw-duration-slow) var(--dw-ease-out) both;
}

.dw-page-ready .dw-hero-animate .dw-hero-home-content > *:nth-child(1) { animation-delay: 0.05s; }
.dw-page-ready .dw-hero-animate .dw-hero-home-content > *:nth-child(2) { animation-delay: 0.12s; }
.dw-page-ready .dw-hero-animate .dw-hero-home-content > *:nth-child(3) { animation-delay: 0.19s; }
.dw-page-ready .dw-hero-animate .dw-hero-home-content > *:nth-child(4) { animation-delay: 0.26s; }
.dw-page-ready .dw-hero-animate .dw-hero-home-content > *:nth-child(5) { animation-delay: 0.33s; }
.dw-page-ready .dw-hero-animate .dw-hero-home-content > *:nth-child(6) { animation-delay: 0.40s; }
.dw-page-ready .dw-hero-animate .dw-hero-home-content > *:nth-child(7) { animation-delay: 0.47s; }

.dw-page-ready .dw-hero-animate .dw-hero-home-visual {
	animation: dwHeroVisualIn 1s var(--dw-ease-out) 0.35s both;
}

.dw-page-ready .dw-hero-animate .dw-hero-home-content > * {
	opacity: 0;
}

/* Inner page heroes */
.dw-page-ready .dw-hero:not(.dw-hero-animate) .dw-hero-inner.dw-reveal {
	animation: dwHeroFadeUp var(--dw-duration-slow) var(--dw-ease-out) 0.1s both;
}

/* Hero ambient motion */
.dw-hero-glow {
	animation: dwGlowPulse 6s ease-in-out infinite;
}

.dw-hero-grid-bg {
	animation: dwGridDrift 20s linear infinite;
}

.dw-hero-orbit-item {
	animation: dwOrbitFloat 4s var(--dw-ease-out) infinite;
}

.dw-hero-orbit-item--pos   { animation-delay: 0s; animation-name: dwOrbitFloatCentered; }
.dw-hero-orbit-item--erp   { animation-delay: 0.6s; }
.dw-hero-orbit-item--crm   { animation-delay: 1.2s; }
.dw-hero-orbit-item--saas  { animation-delay: 1.8s; animation-name: dwOrbitFloatCentered; }
.dw-hero-orbit-item--infra { animation-delay: 2.4s; }
.dw-hero-orbit-item--cctv  { animation-delay: 3s; }

.dw-hero-orbit-core {
	animation: dwOrbitCorePulse 3s ease-in-out infinite;
}

/* ==========================================================================
   Tab / panel transitions
   ========================================================================== */
.dw-pos-panel.is-active,
.dw-tab-panel.is-active,
.dw-pricing-panel.is-active {
	animation: dwPanelEnter 0.45s var(--dw-ease-out);
}

.dw-pos-panel.dw-panel-enter,
.dw-tab-panel.dw-panel-enter,
.dw-pricing-panel.dw-panel-enter {
	animation: dwPanelEnter 0.45s var(--dw-ease-out);
}

/* Active selector cards */
.dw-pos-industry-card.is-active,
.dw-pricing-system-card.is-active,
.dw-portfolio-project-card.is-active,
.dw-about-service-card.is-active,
.dw-home-service-card.is-active,
.dw-pricing-system-card.is-active {
	animation: dwCardPop 0.35s var(--dw-ease-spring);
}

/* ==========================================================================
   Interactive micro-interactions
   ========================================================================== */
.dw-btn {
	position: relative;
	overflow: hidden;
	transition:
		transform var(--dw-duration-fast) var(--dw-ease-out),
		box-shadow var(--dw-duration-fast) var(--dw-ease-out),
		background var(--dw-duration-fast) ease,
		border-color var(--dw-duration-fast) ease,
		color var(--dw-duration-fast) ease;
}

.dw-btn:hover {
	transform: translateY(-2px);
}

.dw-btn:active {
	transform: translateY(0);
}

.dw-btn-primary:hover {
	box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35);
}

.dw-service-card,
.dw-why-card,
.dw-pos-highlight-card,
.dw-promo-card,
.dw-portfolio-stat,
.dw-pricing-plan-card {
	transition:
		transform var(--dw-duration-fast) var(--dw-ease-out),
		box-shadow var(--dw-duration-fast) var(--dw-ease-out),
		border-color var(--dw-duration-fast) ease;
}

.dw-trust-item {
	transition:
		transform var(--dw-duration-fast) var(--dw-ease-out),
		border-color var(--dw-duration-fast) ease,
		background var(--dw-duration-fast) ease;
}

.dw-trust-grid.is-visible .dw-trust-item:hover,
.dw-stagger-group.is-visible .dw-trust-item:hover {
	transform: translateY(-4px) scale(1.02);
	border-color: rgba(6, 182, 212, 0.45);
}

/* Process steps sequential highlight */
.dw-process-strip.is-visible .dw-process-card {
	animation: dwProcessPop 0.55s var(--dw-ease-spring) both;
}

.dw-process-strip.is-visible .dw-process-card:nth-child(2) { animation-delay: 0ms; }
.dw-process-strip.is-visible .dw-process-card:nth-child(3) { animation-delay: 100ms; }
.dw-process-strip.is-visible .dw-process-card:nth-child(4) { animation-delay: 200ms; }
.dw-process-strip.is-visible .dw-process-card:nth-child(5) { animation-delay: 300ms; }
.dw-process-strip.is-visible .dw-process-card:nth-child(6) { animation-delay: 400ms; }

.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-step {
	animation: dwProcessPop 0.5s var(--dw-ease-spring) both;
}

.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-step:nth-child(1)  { animation-delay: 0ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-step:nth-child(3)  { animation-delay: 120ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-step:nth-child(5)  { animation-delay: 240ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-step:nth-child(7)  { animation-delay: 360ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-step:nth-child(9)  { animation-delay: 480ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-step:nth-child(11) { animation-delay: 600ms; }

.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-arrow {
	animation: dwFadeIn 0.4s var(--dw-ease-out) both;
}

.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-arrow:nth-of-type(1) { animation-delay: 80ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-arrow:nth-of-type(2) { animation-delay: 200ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-arrow:nth-of-type(3) { animation-delay: 320ms; }
.dw-process-strip:not(.dw-process-timeline).is-visible .dw-process-arrow:nth-of-type(4) { animation-delay: 440ms; }

/* FAQ smooth open */
.dw-pricing-faq-item summary,
.dw-portfolio-faq-item summary,
.dw-about-faq-item summary {
	transition: color var(--dw-duration-fast) ease;
}

.dw-pricing-faq-item[open] summary,
.dw-portfolio-faq-item[open] summary,
.dw-about-faq-item[open] summary {
	color: var(--dw-cyan);
}

.dw-pricing-faq-item p,
.dw-portfolio-faq-item p,
.dw-about-faq-item p {
	animation: dwFaqReveal 0.35s var(--dw-ease-out);
}

/* Partner logos */
.dw-partners-strip.is-visible .dw-partner-logo {
	animation: dwFadeUp 0.45s var(--dw-ease-out) both;
	animation-delay: calc(var(--dw-partner-i, 0) * 35ms);
}

/* Stat counter pop */
.dw-animate-stat {
	animation: dwStatPop 0.6s var(--dw-ease-spring) both;
}

/* Header entrance */
.dw-page-ready .dw-header {
	animation: dwHeaderSlide 0.6s var(--dw-ease-out) both;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes dwFadeUp {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dwFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dwHeroFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dwHeroVisualIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.92);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes dwGlowPulse {
	0%, 100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
	50% {
		opacity: 0.75;
		transform: translateX(-50%) scale(1.08);
	}
}

@keyframes dwGridDrift {
	from { background-position: 0 0; }
	to { background-position: 48px 48px; }
}

@keyframes dwOrbitFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes dwOrbitFloatCentered {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes dwOrbitCorePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}

@keyframes dwPanelEnter {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes dwCardPop {
	0% { transform: scale(1); }
	40% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

@keyframes dwProcessPop {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes dwFaqReveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dwStatPop {
	from {
		opacity: 0;
		transform: scale(0.85);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes dwHeaderSlide {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Reduced motion — respect user preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.dw-reveal,
	.dw-stagger-group > * {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none !important;
	}

	.dw-hero-glow,
	.dw-hero-grid-bg,
	.dw-hero-orbit-item,
	.dw-hero-orbit-core,
	.dw-page-ready .dw-hero-animate .dw-hero-home-content > *,
	.dw-page-ready .dw-hero-animate .dw-hero-home-visual,
	.dw-page-ready .dw-header,
	.dw-pos-panel.is-active,
	.dw-tab-panel.is-active,
	.dw-pricing-panel.is-active {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.dw-btn:hover {
		transform: none;
	}
}