/**
 * Soft Depth 3D — CSS perspective / layers / tilt hooks
 * Colors from tokens only. No WebGL.
 */

.homepage-3d {
	--h3d-depth-near: 0.12;
	--h3d-depth-mid: 0.06;
	--h3d-depth-far: 0.03;
}

/* ----- Perspective scenes ----- */

.homepage-3d__hero-scene,
.homepage-3d__tilt-scene {
	perspective: 1000px;
	transform-style: preserve-3d;
}

.homepage-3d__hero-media-stage {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform 200ms var(--h3d-ease-out);
}

.homepage-3d__hero-depth {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

.homepage-3d__hero-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	opacity: 0.85;
	--h3d-depth-z: -40px;
	transform: translate3d(0, var(--h3d-depth-y, 0px), var(--h3d-depth-z));
	will-change: transform;
}

.homepage-3d__hero-blob--a {
	width: 62%;
	height: 48%;
	top: -8%;
	inset-inline-end: -12%;
	background: radial-gradient(circle, rgba(10, 186, 181, 0.35), transparent 70%);
	--h3d-depth-z: -60px;
}

.homepage-3d__hero-blob--b {
	width: 50%;
	height: 42%;
	bottom: -6%;
	inset-inline-start: -10%;
	background: radial-gradient(circle, rgba(26, 107, 102, 0.22), transparent 68%);
	--h3d-depth-z: -80px;
}

.homepage-3d__hero-blob--c {
	width: 36%;
	height: 30%;
	top: 38%;
	inset-inline-start: 42%;
	background: radial-gradient(circle, rgba(230, 248, 247, 0.95), transparent 72%);
	--h3d-depth-z: -30px;
}

.homepage-3d__hero-media-frame {
	position: relative;
	z-index: 1;
	border-radius: var(--h3d-radius-xl);
	overflow: hidden;
	box-shadow: var(--h3d-shadow-lg);
	transform: translateZ(24px);
	background: var(--h3d-color-surface);
	aspect-ratio: 4 / 5;
}

.homepage-3d__hero-media-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	pointer-events: none;
}

.homepage-3d__hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translate3d(0, var(--h3d-parallax-y, 0px), 0);
}

/* Soft float on mobile / when no pointer tilt */
@media (hover: none), (pointer: coarse) {
	.homepage-3d__hero.is-entered .homepage-3d__hero-media-stage {
		animation: h3d-soft-float 7s ease-in-out infinite;
	}
}

@keyframes h3d-soft-float {
	0%,
	100% {
		transform: translateY(0) translateZ(0);
	}
	50% {
		transform: translateY(-8px) translateZ(8px);
	}
}

/* Hero copy enters from depth */
.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 {
	transform: translateY(14px) translateZ(-20px);
}

.homepage-3d__hero.is-entered .homepage-3d__hero-brand,
.homepage-3d__hero.is-entered .homepage-3d__hero-title,
.homepage-3d__hero.is-entered .homepage-3d__hero-support,
.homepage-3d__hero.is-entered .homepage-3d__hero-actions {
	transform: translateY(0) translateZ(0);
}

.homepage-3d__hero .homepage-3d__hero-media,
.homepage-3d__hero--cinematic .homepage-3d__hero-visual {
	transform: translateY(18px) translateZ(-32px);
	opacity: 0;
	transition:
		opacity 800ms var(--h3d-ease-out),
		transform 800ms var(--h3d-ease-out);
}

.homepage-3d__hero.is-entered .homepage-3d__hero-media,
.homepage-3d__hero--cinematic.is-entered .homepage-3d__hero-visual {
	opacity: 1;
	transform: translateY(0) translateZ(0);
	transition-delay: 80ms;
}

/* Override flat media box from sections.css when stage exists */
.homepage-3d__hero-media.homepage-3d__hero-scene {
	background: transparent;
	box-shadow: none;
	overflow: visible;
	aspect-ratio: auto;
	border-radius: 0;
}

.homepage-3d__hero-media.homepage-3d__hero-scene::after {
	display: none;
}

/* ----- Card tilt ----- */

.homepage-3d [data-h3d-tilt] {
	transform-style: preserve-3d;
	transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
	transition:
		transform 200ms var(--h3d-ease-out),
		box-shadow var(--h3d-duration) var(--h3d-ease-out),
		border-color var(--h3d-duration) var(--h3d-ease-out);
	will-change: transform;
}

.homepage-3d [data-h3d-tilt].is-tilting {
	transition: box-shadow var(--h3d-duration) var(--h3d-ease-out), border-color var(--h3d-duration) var(--h3d-ease-out);
}

/* ----- Scroll depth layers ----- */

.homepage-3d [data-h3d-depth] {
	will-change: transform;
	transform: translate3d(0, var(--h3d-depth-y, 0px), 0);
	transition: transform 80ms linear;
}

.homepage-3d__hero-blob[data-h3d-depth] {
	transform: translate3d(0, var(--h3d-depth-y, 0px), var(--h3d-depth-z, -40px));
}

/* ----- Timeline soft float ----- */

.homepage-3d__timeline {
	perspective: 900px;
	transform-style: preserve-3d;
}

.homepage-3d__timeline-step {
	transform: translate3d(0, var(--h3d-depth-y, 0px), 8px);
	transform-style: preserve-3d;
}

.homepage-3d__timeline-step:nth-child(odd) {
	transform: translate3d(0, var(--h3d-depth-y, 0px), 16px);
}

.homepage-3d__timeline-step:nth-child(even) {
	transform: translate3d(0, var(--h3d-depth-y, 0px), 4px);
}

.homepage-3d__timeline-index {
	transform: translateZ(12px);
}

.homepage-3d__timeline-step.is-visible .homepage-3d__timeline-index,
.homepage-3d [data-h3d-reveal].is-visible .homepage-3d__timeline-index {
	animation: h3d-index-float 5.5s ease-in-out infinite;
}

@keyframes h3d-index-float {
	0%,
	100% {
		transform: translateY(0) translateZ(12px);
	}
	50% {
		transform: translateY(-4px) translateZ(16px);
	}
}

/* ----- Button soft 3D press ----- */

.homepage-3d__btn--primary:active,
.homepage-3d a.homepage-3d__btn--primary:active {
	transform: translateY(1px) translateZ(-2px);
}

.homepage-3d__btn--secondary:hover,
.homepage-3d a.homepage-3d__btn--secondary:hover {
	transform: translateY(-2px) translateZ(4px);
}

/* ----- Ambient soft band on surface sections ----- */

.homepage-3d__section--surface {
	position: relative;
	isolation: isolate;
}

.homepage-3d__section--surface::before {
	content: '';
	position: absolute;
	inset-inline-start: 8%;
	top: 12%;
	width: min(40vw, 360px);
	height: min(40vw, 280px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(10, 186, 181, 0.07), transparent 70%);
	pointer-events: none;
	z-index: 0;
	transform: translateZ(-40px);
}

.homepage-3d__section--surface > .homepage-3d__container {
	position: relative;
	z-index: 1;
}

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

@media (prefers-reduced-motion: reduce) {
	.homepage-3d__hero-blob,
	.homepage-3d [data-h3d-depth],
	.homepage-3d [data-h3d-tilt],
	.homepage-3d__hero-media-stage {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.homepage-3d__timeline-index {
		animation: none !important;
		transform: none !important;
	}

	.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 {
		transform: none !important;
	}

	.homepage-3d__section--surface::before {
		display: none;
	}
}