/**
 * HZ CERRAHİ — hz-motion.css
 * Mikro-animasyon motoru.
 *
 * İlke: yalnızca `transform` ve `opacity` animasyonlanır (compositor katmanı).
 * Layout/paint tetikleyen özellikler (width, top, margin) animasyonlanmaz.
 * Kütüphane bağımlılığı yoktur; tetikleme IntersectionObserver ile yapılır.
 */

/* ==================================================================
   1. SCROLL REVEAL
   ================================================================== */

body.hz-reveal-on [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 360ms var(--ease-sharp),
		transform 360ms var(--ease-sharp);
	transition-delay: var(--hz-delay, 0ms);
	will-change: transform, opacity;
}

body.hz-reveal-on [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Yönlü varyantlar */

body.hz-reveal-on [data-reveal="left"] { transform: translateX(-24px); }
body.hz-reveal-on [data-reveal="right"] { transform: translateX(24px); }
body.hz-reveal-on [data-reveal="scale"] { transform: scale(0.94); }
body.hz-reveal-on [data-reveal="blur"] { transform: translateY(14px); filter: blur(6px); }

body.hz-reveal-on [data-reveal="left"].is-revealed,
body.hz-reveal-on [data-reveal="right"].is-revealed,
body.hz-reveal-on [data-reveal="scale"].is-revealed { transform: none; }

body.hz-reveal-on [data-reveal="blur"].is-revealed { transform: none; filter: none; }

/* Grup halinde sıralı giriş (stagger) */

body.hz-reveal-on [data-reveal-group] > * {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 380ms var(--ease-sharp),
		transform 380ms var(--ease-sharp);
}

body.hz-reveal-on [data-reveal-group].is-revealed > * {
	opacity: 1;
	transform: none;
}

body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 70ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 140ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 210ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 280ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 350ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(7) { transition-delay: 420ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(8) { transition-delay: 490ms; }
body.hz-reveal-on [data-reveal-group].is-revealed > *:nth-child(n + 9) { transition-delay: 560ms; }

/* ==================================================================
   2. PARALLAX
   ================================================================== */

body.hz-parallax-on [data-parallax] {
	will-change: transform;
	transform: translate3d(0, var(--hz-parallax-y, 0), 0);
	transition: transform 120ms linear;
}

/* Hero dekoratif katmanları */
.hz-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(70px);
	opacity: 0.42;
	z-index: 0;
	will-change: transform;
}

.hz-orb-1 {
	width: min(520px, 60vw);
	height: min(520px, 60vw);
	background: radial-gradient(circle, rgba(var(--hz-accent-rgb), 0.55), transparent 68%);
	top: -12%;
	right: -8%;
	animation: hz-float-a 17s ease-in-out infinite;
}

.hz-orb-2 {
	width: min(420px, 52vw);
	height: min(420px, 52vw);
	background: radial-gradient(circle, rgba(var(--hz-primary-rgb), 0.85), transparent 66%);
	bottom: -14%;
	left: -6%;
	animation: hz-float-b 21s ease-in-out infinite;
}

.hz-orb-3 {
	width: min(300px, 40vw);
	height: min(300px, 40vw);
	background: radial-gradient(circle, rgba(var(--hz-accent-rgb), 0.32), transparent 70%);
	top: 42%;
	left: 38%;
	animation: hz-float-a 25s ease-in-out infinite reverse;
	opacity: 0.24;
}

/* ==================================================================
   3. KEYFRAME KÜTÜPHANESİ
   ================================================================== */

@keyframes hz-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes hz-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hz-scale-in {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes hz-float-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	33% { transform: translate3d(-26px, 34px, 0) scale(1.06); }
	66% { transform: translate3d(22px, -20px, 0) scale(0.96); }
}

@keyframes hz-float-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	40% { transform: translate3d(34px, -28px, 0) scale(1.08); }
	75% { transform: translate3d(-18px, 22px, 0) scale(0.94); }
}

@keyframes hz-spin {
	to { transform: rotate(360deg); }
}

@keyframes hz-eq {
	0%, 100% { transform: scaleY(0.32); }
	50% { transform: scaleY(1); }
}

@keyframes hz-node-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hz-accent-rgb), 0.5); }
	60% { box-shadow: 0 0 0 12px rgba(var(--hz-accent-rgb), 0); }
}

@keyframes hz-sweep-x {
	0% { transform: translateX(-110%); }
	55%, 100% { transform: translateX(110%); }
}

@keyframes hz-blink {
	0%, 45% { opacity: 1; }
	50%, 95% { opacity: 0.15; }
}

@keyframes hz-scroll-hint {
	0% { transform: translateY(0); opacity: 0; }
	28% { opacity: 1; }
	100% { transform: translateY(11px); opacity: 0; }
}

@keyframes hz-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes hz-shine {
	0% { background-position: -220% center; }
	100% { background-position: 220% center; }
}

/* ==================================================================
   4. UYGULANMIŞ EFEKTLER
   ================================================================== */

/* Neşter parlaması — vurgu kelimelerin altında */
.hz-shine {
	background: linear-gradient(
		100deg,
		var(--hz-accent) 20%,
		#ffffff 42%,
		var(--hz-accent) 62%
	);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: hz-shine 5.5s linear infinite;
}

/* Vurgulanan kelimenin altındaki çizen alt çizgi */
.hz-underline {
	position: relative;
	display: inline-block;
	color: var(--hz-accent);
	font-style: normal;
}

.hz-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.1em;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--hz-accent), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 900ms var(--ease-out) 500ms;
	box-shadow: 0 0 14px rgba(var(--hz-accent-rgb), 0.7);
}

.is-revealed .hz-underline::after,
.hz-underline.is-drawn::after { transform: scaleX(1); }

/* Işık süpürme çizgisi (bölüm ayırıcı) */
.hz-sweep {
	position: relative;
	overflow: hidden;
}

.hz-sweep::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hz-accent), transparent);
	animation: hz-sweep-x 4.5s var(--ease-sharp) infinite;
}

/* Scroll ipucu */
.hz-scroll-hint {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--hz-text-faint);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hz-scroll-hint-mouse {
	width: 22px;
	height: 34px;
	border: 1.5px solid currentColor;
	border-radius: 12px;
	position: relative;
	opacity: 0.6;
}

.hz-scroll-hint-mouse::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 7px;
	width: 3px;
	height: 6px;
	margin-left: -1.5px;
	background: var(--hz-accent);
	border-radius: 2px;
	animation: hz-scroll-hint 1.9s var(--ease-sharp) infinite;
}

/* Sayaç */
.hz-counter { font-variant-numeric: tabular-nums; }

/* Yatay kayan şerit */
.hz-marquee {
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hz-marquee-track {
	display: flex;
	width: max-content;
	animation: hz-marquee 34s linear infinite;
}

.hz-marquee:hover .hz-marquee-track { animation-play-state: paused; }

/* Görsel maskeleme girişi */
.hz-mask-reveal {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 900ms var(--ease-out);
}

.hz-mask-reveal.is-revealed { clip-path: inset(0 0 0 0); }

/* Kart tilt (3B eğilme) */
body.hz-glow-on [data-tilt] {
	transform-style: preserve-3d;
	transition: transform 420ms var(--ease-out);
}

body.hz-glow-on [data-tilt].is-tilting {
	transition: transform 120ms linear;
	transform:
		perspective(900px)
		rotateX(var(--hz-tilt-x, 0deg))
		rotateY(var(--hz-tilt-y, 0deg))
		translateY(-4px);
}

/* Bağlantı alt çizgi animasyonu (içerik içi) */
.hz-content a:not(.hz-btn):not(.hz-card-link) {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 340ms var(--ease-sharp);
	padding-bottom: 1px;
}

.hz-content a:not(.hz-btn):not(.hz-card-link):hover { background-size: 100% 1px; }

/* Sayfa girişi */
.hz-site { animation: hz-fade-in 460ms var(--ease-sharp) both; }

/* ==================================================================
   5. HAREKET AZALTMA TERCİHİ (WCAG 2.2 — 2.3.3)
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	body.hz-reveal-on [data-reveal],
	body.hz-reveal-on [data-reveal-group] > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.hz-orb { animation: none !important; }
	.hz-cursor-glow { display: none !important; }
	.hz-marquee-track { animation: none !important; }
	.hz-mask-reveal { clip-path: none !important; }
	.hz-shine { animation: none !important; -webkit-text-fill-color: var(--hz-accent); }
	.hz-underline::after { transform: scaleX(1) !important; }
}