/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: motion.css
 * Description: Shared Motion Primitives and Progress System
 *
 * Depends:
 * tokens.css
 *
 * Version:
 * 2.0.0
 *
 * Last Update:
 * 16.08.2026
 *
 * Principles:
 * - Motion is subtle and functional.
 * - Motion never competes with content.
 * - Reduced-motion preference is always respected.
 * ==========================================================
 */


/* ==========================================================
   INTERACTIVE LIFT
========================================================== */

.gm-motion-lift{

	transition:
		transform
		var(--gm-motion-fast)
		var(--gm-motion-smooth),

		box-shadow
		var(--gm-motion-normal)
		var(--gm-motion-smooth);

}

.gm-motion-lift:hover{

	transform:translateY(-2px);

}

.gm-motion-lift:active{

	transform:
		translateY(0)
		scale(.985);

}


/* ==========================================================
   SOFT SCALE
========================================================== */

.gm-motion-scale{

	transition:
		transform
		var(--gm-motion-slow)
		var(--gm-motion-premium);

}

.gm-motion-scale:hover{

	transform:scale(1.015);

}


/* ==========================================================
   MEDIA SCALE
========================================================== */

.gm-motion-media{

	overflow:hidden;

}

.gm-motion-media img,
.gm-motion-media video{

	transition:
		transform
		var(--gm-motion-slow)
		var(--gm-motion-premium);

}

.gm-motion-media:hover img,
.gm-motion-media:hover video{

	transform:scale(1.025);

}


/* ==========================================================
   REVEAL
   Intended for JS-triggered .is-visible state.
========================================================== */

.gm-motion-reveal{

	opacity:0;

	transform:
		translateY(var(--gm-space-md));

	transition:
		opacity
		var(--gm-motion-slow)
		var(--gm-motion-premium),

		transform
		var(--gm-motion-slow)
		var(--gm-motion-premium);

}

.gm-motion-reveal.is-visible{

	opacity:1;

	transform:translateY(0);

}


/* ==========================================================
   REVEAL — SMALL DISTANCE
========================================================== */

.gm-motion-reveal-sm{

	opacity:0;

	transform:
		translateY(var(--gm-space-xs));

	transition:
		opacity
		var(--gm-motion-normal)
		var(--gm-motion-premium),

		transform
		var(--gm-motion-normal)
		var(--gm-motion-premium);

}

.gm-motion-reveal-sm.is-visible{

	opacity:1;

	transform:translateY(0);

}


/* ==========================================================
   FADE
========================================================== */

.gm-motion-fade{

	opacity:0;

	transition:
		opacity
		var(--gm-motion-slow)
		var(--gm-motion-premium);

}

.gm-motion-fade.is-visible{

	opacity:1;

}


/* ==========================================================
   PRESS
   Useful for standalone interactive controls.
========================================================== */

.gm-motion-press{

	transition:
		transform
		var(--gm-motion-fast)
		var(--gm-motion-smooth);

}

.gm-motion-press:active{

	transform:scale(.985);

}


/* ==========================================================
   PREMIUM PROGRESS INDICATOR

   Usage:

   <div
	   class="gm-progress"
	   style="--gm-progress-value:50%;"
   >
	   <span class="gm-progress__thumb"></span>
   </div>

   JS only updates:
   --gm-progress-value

   Expected range:
   0% → 100%
========================================================== */

.gm-progress{

	/* Local component properties.
	   Bunlar global design token değildir. */

	--gm-progress-value:0%;
	--gm-progress-track-height:1px;
	--gm-progress-thumb-size:7px;

	--gm-progress-track-color:
		rgba(29,29,31,.16);

	--gm-progress-thumb-color:
		var(--gm-color-text);

	position:relative;

	display:flex;

	align-items:center;

	width:100%;

	min-width:0;

	height:max(
		var(--gm-progress-thumb-size),
		12px
	);

}


/* ==========================================================
   PROGRESS TRACK
========================================================== */

.gm-progress::before{

	content:"";

	position:absolute;

	top:50%;

	left:0;

	right:0;

	height:
		var(--gm-progress-track-height);

	border-radius:
		var(--gm-radius-pill);

	background:
		var(--gm-progress-track-color);

	transform:
		translateY(-50%);

}


/* ==========================================================
   PROGRESS THUMB
========================================================== */

.gm-progress__thumb{

	position:absolute;

	z-index:1;

	top:50%;

	left:
		clamp(
			0%,
			var(--gm-progress-value),
			100%
		);

	width:
		var(--gm-progress-thumb-size);

	height:
		var(--gm-progress-thumb-size);

	border-radius:50%;

	background:
		var(--gm-progress-thumb-color);

	box-shadow:
		0 0 0 3px
		rgba(255,255,255,.84);

	transform:
		translate(-50%,-50%);

	transition:
		left
		var(--gm-motion-normal)
		var(--gm-motion-premium);

	pointer-events:none;

}


/* ==========================================================
   PROGRESS — SUBTLE
========================================================== */

.gm-progress--subtle{

	--gm-progress-track-color:
		rgba(29,29,31,.10);

	--gm-progress-thumb-size:6px;

}


/* ==========================================================
   PROGRESS — LIGHT SURFACE
========================================================== */

.gm-progress--light{

	--gm-progress-track-color:
		rgba(255,255,255,.34);

	--gm-progress-thumb-color:
		var(--gm-color-white);

}

.gm-progress--light
.gm-progress__thumb{

	box-shadow:
		0 0 0 3px
		rgba(29,29,31,.12);

}


/* ==========================================================
   PROGRESS — COMPACT
========================================================== */

.gm-progress--compact{

	--gm-progress-thumb-size:6px;

	height:10px;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

	.gm-motion-lift,
	.gm-motion-scale,
	.gm-motion-media img,
	.gm-motion-media video,
	.gm-motion-reveal,
	.gm-motion-reveal-sm,
	.gm-motion-fade,
	.gm-motion-press,
	.gm-progress__thumb{

		transition:none;

	}


	.gm-motion-lift:hover,
	.gm-motion-lift:active,
	.gm-motion-scale:hover,
	.gm-motion-media:hover img,
	.gm-motion-media:hover video,
	.gm-motion-press:active{

		transform:none;

	}


	.gm-motion-reveal,
	.gm-motion-reveal-sm,
	.gm-motion-fade{

		opacity:1;

		transform:none;

	}

}