/**
 * Pure Haven IT — Motion, depth, and reveal (prefers-reduced-motion aware).
 */

/* 3D depth cards */
.ph-depth {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.ph-depth:hover {
	transform: translateY(-6px) rotateX(2deg);
}

.ph-depth--lift {
	box-shadow:
		var(--ph-shadow-md),
		0 24px 48px -12px rgba(13, 27, 62, 0.14);
}

.ph-depth--lift:hover {
	box-shadow:
		var(--ph-shadow-xl),
		0 32px 64px -16px rgba(0, 102, 255, 0.12);
}

/* Section differentiation */
.ph-band--elevated {
	position: relative;
}

.ph-band--elevated::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ph-color-grey-border), transparent);
}

.ph-band--depth-surface {
	background:
		linear-gradient(180deg, var(--ph-color-white) 0%, var(--ph-color-surface) 100%);
}

.ph-band--depth-white {
	background:
		radial-gradient(circle at 10% 0%, rgba(0, 102, 255, 0.04) 0%, transparent 42%),
		var(--ph-color-white);
}

/* Reveal animation */
.ph-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ph-reveal--delay-1 { transition-delay: 0.08s; }
.ph-reveal--delay-2 { transition-delay: 0.16s; }
.ph-reveal--delay-3 { transition-delay: 0.24s; }
.ph-reveal--delay-4 { transition-delay: 0.32s; }

/* Stagger children */
.ph-stagger > .ph-reveal:nth-child(1) { transition-delay: 0.05s; }
.ph-stagger > .ph-reveal:nth-child(2) { transition-delay: 0.12s; }
.ph-stagger > .ph-reveal:nth-child(3) { transition-delay: 0.19s; }
.ph-stagger > .ph-reveal:nth-child(4) { transition-delay: 0.26s; }
.ph-stagger > .ph-reveal:nth-child(5) { transition-delay: 0.33s; }
.ph-stagger > .ph-reveal:nth-child(6) { transition-delay: 0.4s; }

/* Counter */
.ph-counter__value {
	display: block;
	font-size: 2rem;
	line-height: 1.1;
}

.ph-counter__suffix {
	font-size: 1.75rem;
}

/* Hero scene layers */
.ph-hero-scene {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ph-hero-scene__layer {
	position: absolute;
	border-radius: var(--ph-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(6px);
	animation: ph-float 8s ease-in-out infinite;
}

.ph-hero-scene__layer--1 {
	width: 38%;
	height: 22%;
	top: 18%;
	right: 8%;
	animation-delay: 0s;
}

.ph-hero-scene__layer--2 {
	width: 44%;
	height: 26%;
	bottom: 22%;
	right: 18%;
	animation-delay: -2s;
}

.ph-hero-scene__layer--3 {
	width: 28%;
	height: 18%;
	top: 42%;
	right: 42%;
	animation-delay: -4s;
}

@keyframes ph-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* Image frame with depth */
.ph-media-frame--depth {
	transform: perspective(900px) rotateY(-4deg);
	transition: transform 0.5s ease;
}

.ph-media-frame--depth:hover {
	transform: perspective(900px) rotateY(0deg);
}

.ph-media-frame--depth::after {
	content: "";
	position: absolute;
	inset: 12px;
	border-radius: var(--ph-radius-lg);
	border: 1px solid rgba(0, 180, 166, 0.35);
	pointer-events: none;
}

/* Button micro-interaction */
.ph-btn {
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background 0.2s ease;
}

.ph-btn:hover {
	transform: translateY(-3px);
}

.ph-btn:active {
	transform: translateY(0) scale(0.98);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ph-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ph-depth:hover {
		transform: none;
	}

	.ph-hero-scene__layer {
		animation: none !important;
	}

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