/**
 * Homepage 3D — Motion System
 * Aligned with Tendy Soft Trust Design System + UI/UX Pro Max:
 * - Subtle entrance / scroll reveal (ease-out, 150–450ms UI; hero ≤800ms)
 * - Max 1–2 key animated groups per viewport
 * - prefers-reduced-motion respected
 * - No bounce / infinite decorative loops
 */

/* ----- Smooth in-page anchors (scoped via JS on .homepage-3d) ----- */

.homepage-3d {
	scroll-behavior: smooth;
}

/* ----- Hero page entrance ----- */

.homepage-3d__hero .homepage-3d__hero-brand,
.homepage-3d__hero .homepage-3d__hero-title,
.homepage-3d__hero .homepage-3d__hero-support,
.homepage-3d__hero .homepage-3d__hero-actions,
.homepage-3d__hero .homepage-3d__hero-media,
.homepage-3d__hero .homepage-3d__hero-visual {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 700ms var(--h3d-ease-out),
		transform 700ms var(--h3d-ease-out);
	will-change: opacity, transform;
}

.homepage-3d__hero.is-entered .homepage-3d__hero-brand {
	opacity: 1;
	transform: none;
	transition-delay: 0ms;
}

.homepage-3d__hero.is-entered .homepage-3d__hero-title {
	opacity: 1;
	transform: none;
	transition-delay: 60ms;
}

.homepage-3d__hero.is-entered .homepage-3d__hero-support {
	opacity: 1;
	transform: none;
	transition-delay: 120ms;
}

.homepage-3d__hero.is-entered .homepage-3d__hero-actions {
	opacity: 1;
	transform: none;
	transition-delay: 180ms;
}

.homepage-3d__hero.is-entered .homepage-3d__hero-media,
.homepage-3d__hero.is-entered .homepage-3d__hero-visual {
	opacity: 1;
	transform: none;
	transition-delay: 0ms;
	transition-duration: 900ms;
}

/* ----- Scroll progress (storytelling) ----- */

.homepage-3d__scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(10, 186, 181, 0.12);
	z-index: calc(var(--h3d-z-header, 100) + 1);
	pointer-events: none;
}

.homepage-3d__scroll-progress-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--h3d-color-primary), var(--h3d-color-secondary));
	transition: width 80ms linear;
}

/* ----- Chapter scroll depth (opacity only — less nausea) ----- */

.homepage-3d [data-h3d-chapter] {
	transition: opacity 400ms var(--h3d-ease-out);
}

.homepage-3d [data-h3d-chapter]:not(#h3d-hero) {
	opacity: calc(0.92 + var(--h3d-chapter-progress, 0) * 0.08);
}

.homepage-3d [data-h3d-chapter].is-chapter-active {
	opacity: 1;
}

/* ----- Scroll reveal ----- */

.homepage-3d [data-h3d-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--h3d-duration-reveal) var(--h3d-ease-out),
		transform var(--h3d-duration-reveal) var(--h3d-ease-out);
	will-change: opacity, transform;
}

.homepage-3d [data-h3d-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger children inside a revealed section */
.homepage-3d [data-h3d-stagger] > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 420ms var(--h3d-ease-out),
		transform 420ms var(--h3d-ease-out);
}

.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(2) { transition-delay: 60ms; opacity: 1; transform: none; }
.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(3) { transition-delay: 120ms; opacity: 1; transform: none; }
.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(4) { transition-delay: 180ms; opacity: 1; transform: none; }
.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(5) { transition-delay: 240ms; opacity: 1; transform: none; }
.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(6) { transition-delay: 300ms; opacity: 1; transform: none; }
.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(7) { transition-delay: 360ms; opacity: 1; transform: none; }
.homepage-3d [data-h3d-reveal].is-visible [data-h3d-stagger] > *:nth-child(8) { transition-delay: 420ms; opacity: 1; transform: none; }

/* ----- Micro-interactions ----- */

.homepage-3d__btn {
	transition:
		background var(--h3d-duration-fast) ease-out,
		color var(--h3d-duration-fast) ease-out,
		border-color var(--h3d-duration-fast) ease-out,
		box-shadow var(--h3d-duration-fast) ease-out,
		transform var(--h3d-duration-fast) ease-out;
}

.homepage-3d__btn:active {
	transform: translateY(1px);
}

.homepage-3d__service-card,
.homepage-3d__benefit-card,
.homepage-3d__why-card,
.homepage-3d__academy-card,
.homepage-3d__cred-item,
.homepage-3d__req-item,
.homepage-3d__stat-card {
	transition:
		box-shadow var(--h3d-duration) ease-out,
		transform var(--h3d-duration) ease-out,
		border-color var(--h3d-duration) ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.homepage-3d__service-card:hover,
	.homepage-3d__benefit-card:hover,
	.homepage-3d__why-card:hover,
	.homepage-3d__academy-card:hover {
		box-shadow: var(--h3d-shadow-lg);
		transform: translateY(-3px);
		border-color: rgba(10, 186, 181, 0.35);
	}

	.homepage-3d__stat-card:hover {
		box-shadow: var(--h3d-shadow-md);
		transform: translateY(-2px);
	}

	.homepage-3d__btn--primary:hover {
		transform: translateY(-1px);
	}

	.homepage-3d__chip:hover,
	.homepage-3d__path li:hover {
		transform: translateY(-2px);
		box-shadow: var(--h3d-shadow-md);
	}
}

.homepage-3d__faq-panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition:
		max-height 280ms var(--h3d-ease-out),
		opacity 220ms var(--h3d-ease-out),
		padding 220ms var(--h3d-ease-out);
	padding-bottom: 0;
}

.homepage-3d__faq-panel.is-open {
	max-height: 48rem;
	opacity: 1;
	padding-bottom: 1.15rem;
}

.homepage-3d__faq-panel[hidden] {
	display: block;
	max-height: 0;
	opacity: 0;
	padding-bottom: 0;
	visibility: hidden;
}

.homepage-3d__faq-panel[hidden].is-open,
.homepage-3d__faq-panel.is-open {
	visibility: visible;
}

.homepage-3d__timeline-step {
	transition: transform var(--h3d-duration) ease-out;
}

.homepage-3d__chip,
.homepage-3d__path li {
	transition:
		background var(--h3d-duration-fast) ease-out,
		transform var(--h3d-duration-fast) ease-out,
		box-shadow var(--h3d-duration-fast) ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.homepage-3d__chip:hover,
	.homepage-3d__path li:hover {
		transform: translateY(-2px);
		box-shadow: var(--h3d-shadow-sm);
	}
}

.homepage-3d__header {
	transition: box-shadow var(--h3d-duration-fast) ease-out, background var(--h3d-duration-fast) ease-out;
}

.homepage-3d__nav {
	transition: opacity var(--h3d-duration) ease-out;
}

.homepage-3d__form-status {
	animation: h3d-status-in 280ms var(--h3d-ease-out);
}

@keyframes h3d-status-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ----- Reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
	.homepage-3d {
		scroll-behavior: auto;
	}

	.homepage-3d__hero .homepage-3d__hero-brand,
	.homepage-3d__hero .homepage-3d__hero-title,
	.homepage-3d__hero .homepage-3d__hero-support,
	.homepage-3d__hero .homepage-3d__hero-actions,
	.homepage-3d__hero .homepage-3d__hero-media,
	.homepage-3d__hero .homepage-3d__hero-visual,
	.homepage-3d [data-h3d-reveal],
	.homepage-3d [data-h3d-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	.homepage-3d [data-h3d-chapter]:not(#h3d-hero) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.homepage-3d__scroll-progress {
		display: none;
	}

	.homepage-3d__hero-image {
		transform: none !important;
		transition: none !important;
	}

	.homepage-3d__service-card:hover,
	.homepage-3d__benefit-card:hover,
	.homepage-3d__why-card:hover,
	.homepage-3d__academy-card:hover,
	.homepage-3d__stat-card:hover,
	.homepage-3d__btn:hover,
	.homepage-3d__btn:active,
	.homepage-3d__chip:hover,
	.homepage-3d__path li:hover {
		transform: none !important;
	}

	.homepage-3d__faq-panel,
	.homepage-3d__form-status {
		animation: none !important;
		transition: none !important;
	}
}