/*
 * Front-page hero: entrance animations and the decorative product showcase.
 * Loaded on the front page only (and as an editor style so the pattern
 * previews correctly). Accent-derived colours use the accent preset.
 */

/* ---------- Keyframes (from the Main artboard) ---------- */

@keyframes hv-in { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
@keyframes hv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hv-draw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes hv-ring { from { stroke-dashoffset: 100; } }
@keyframes hv-bar { 0% { transform: scaleY(0.35); } 100% { transform: scaleY(1); } }
@keyframes hv-ping { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes hv-type { from { width: 0; } }
@keyframes hv-blink { 50% { opacity: 0; } }
@keyframes hv-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes hv-spin { to { transform: rotate(360deg); } }
@keyframes hv-line { from { transform: scaleX(0); } }

/* ---------- Text column ---------- */

.hv-rise { animation: hv-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.snrtech-hero__text > .hv-rise:nth-child(1) { animation-delay: 0.05s; }
.snrtech-hero__text > .hv-rise:nth-child(2) { animation-delay: 0.15s; }
.snrtech-hero__text > .hv-rise:nth-child(3) { animation-delay: 0.3s; }
.snrtech-hero__text > .hv-rise:nth-child(4) { animation-delay: 0.45s; }

/* Accent underline under "دنیای واقعی". */
.snrtech-hero h1 mark::after {
	animation: hv-line 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 1s both;
}

/* ---------- Showcase ---------- */

.hv {
	position: relative;
	height: 600px;
	transform-style: preserve-3d;
	transform: perspective(1600px) rotateX(var(--rx, 4deg)) rotateY(var(--ry, -6deg));
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	color: var(--wp--preset--color--accent); /* currentColor for accent strokes */
	font-family: var(--wp--preset--font-family--vazirmatn);
	line-height: 1.8;
	text-align: right;
}

.hv * {
	box-sizing: border-box;
}

.hv-glass {
	background: rgba(18, 26, 22, 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid #22302a;
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.hv-code {
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
}

.hv-card { animation: hv-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both, hv-float 7s ease-in-out infinite; }
.hv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hv-draw 4.5s ease-in-out infinite both; }
.hv-ring { animation: hv-ring 2.2s cubic-bezier(0.3, 0.7, 0.2, 1) 0.8s both; }
.hv-bar { transform-origin: bottom; animation: hv-bar 1.6s ease-in-out infinite alternate both; }
.hv-ping { animation: hv-ping 2s ease-out infinite; }
.hv-type { display: inline-block; overflow: hidden; white-space: pre; vertical-align: bottom; animation: hv-type 0.9s both; }
.hv-caret { animation: hv-blink 1s step-end infinite; }
.hv-orbit { animation: hv-spin 14s linear infinite; }

.hv-card {
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
}

.hv-card:hover {
	transform: translateZ(110px) !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent) !important;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 44px color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent) !important;
	z-index: 9 !important;
}

/* ---------- Phones: stack the cards (unchanged from the artboard) ---------- */

@media (max-width: 640px) {
	.hv { height: auto !important; transform: none !important; display: flex !important; flex-direction: column; gap: 14px; }
	.hv > .hv-card { position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; transform: none !important; }
	.hv > .hv-phone { width: 220px !important; align-self: center; }
	.hv .hv-sm-hide { display: none !important; }
}

/* ---------- Reduced motion: everything in its final state, no tilt ---------- */

@media (prefers-reduced-motion: reduce) {
	.hv-card,
	.hv-draw,
	.hv-ring,
	.hv-bar,
	.hv-ping,
	.hv-type,
	.hv-caret,
	.hv-orbit,
	.hv-rise,
	.snrtech-hero h1 mark::after {
		animation: none !important;
	}

	.hv,
	.hv-card {
		transition: none !important;
	}

	.hv-draw {
		stroke-dashoffset: 0 !important;
	}
}