/**
 * TheWasim — motion layer.
 *
 * Loaded on top of main.css. Everything sits inside prefers-reduced-motion: no-preference,
 * so visitors who ask their system for less motion get the static site.
 */

@media (prefers-reduced-motion: no-preference) {

	/* ---------- Scroll progress ---------- */
	.tw-progress { position: fixed; left: 0; top: 0; z-index: 100000; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

	/* ---------- Hero entrance ---------- */
	@keyframes tw-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
	@keyframes tw-photo { from { opacity: 0; transform: translate(-50%, 36px); } to { opacity: 1; transform: translate(-50%, 0); } }
	@keyframes tw-bar { from { opacity: 0; transform: translateY(60%) skewX(-28deg); } to { opacity: 1; transform: translateY(0) skewX(-28deg); } }
	@keyframes tw-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
	@keyframes tw-write { from { clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }
	@keyframes tw-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
	@keyframes tw-pin { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

	.hero__motto span,
	.hero__title,
	.hero__subtitle,
	.hero__text,
	.hero__actions { animation: tw-up .8s cubic-bezier(.2, .7, .2, 1) both; }
	.hero__motto span:nth-child(1) { animation-delay: .05s; }
	.hero__motto span:nth-child(2) { animation-delay: .15s; }
	.hero__motto span:nth-child(3) { animation-delay: .25s; }
	.hero__title { animation-delay: .3s; }
	.hero__subtitle { animation-delay: .45s; }
	.hero__text { animation-delay: .6s; }
	.hero__actions { animation-delay: .75s; }

	.hero__bars span { animation: tw-bar 1.1s cubic-bezier(.2, .7, .2, 1) both, tw-float 7s ease-in-out 1.6s infinite; }
	.hero__bars span:nth-child(1) { animation-delay: .2s, 1.6s; }
	.hero__bars span:nth-child(2) { animation-delay: .35s, 2.4s; }
	.hero__bars span:nth-child(3) { animation-delay: .5s, 3.2s; }

	.hero__photo { animation: tw-photo 1s cubic-bezier(.2, .7, .2, 1) .35s both; }
	.hero__card { animation: tw-pop .9s cubic-bezier(.2, .7, .2, 1) .35s both; }

	/* The signature writes itself in, left to right. */
	.hero__sig--img { animation: tw-write 1.6s cubic-bezier(.55, .1, .3, 1) 1s both; }

	/* Theme signature: script first, then the underline draws and the dot pops in. */
	.hero__sig--layered { animation: none; }
	.hero__sig--layered .hero__sig-script { animation: tw-write 1.6s cubic-bezier(.55, .1, .3, 1) 1s both; }
	.hero__sig--layered .hero__sig-line { animation: tw-line .9s cubic-bezier(.45, 0, .2, 1) 2.4s both; }
	.hero__sig--layered .hero__sig-dot { transform-origin: 88% 82%; animation: tw-dot .5s cubic-bezier(.3, 1.6, .5, 1) 3.2s both; }
	@keyframes tw-dot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
	@keyframes tw-line { from { clip-path: inset(-10% 76% -10% -10%); } to { clip-path: inset(-10% 16% -10% -10%); } }
	.hero__card .signature { animation: tw-write 1.6s cubic-bezier(.55, .1, .3, 1) .9s both; }

	.hero__place { animation: tw-pop .7s cubic-bezier(.2, .7, .2, 1) 1.3s both, tw-float 6s ease-in-out 2.4s infinite; }
	.hero__place .icon { animation: tw-pin 2.4s ease-in-out 2s infinite; }

	/* Project tiles under the hero. */
	.tiles > * { animation: tw-up .7s cubic-bezier(.2, .7, .2, 1) both; }
	.tiles > :nth-child(1) { animation-delay: .9s; }
	.tiles > :nth-child(2) { animation-delay: 1s; }
	.tiles > :nth-child(3) { animation-delay: 1.1s; }
	.tiles > :nth-child(4) { animation-delay: 1.2s; }
	.tiles > :nth-child(n+5) { animation-delay: 1.3s; }

	/* ---------- Staggered reveal for grids ---------- */
	.js [data-reveal][data-stagger] { opacity: 1; transform: none; }
	.js [data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, border-color .2s; transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }
	.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

	/* ---------- Hover details ---------- */
	.tile:hover .tile__icon,
	.project:hover .project__icon,
	.tool:hover .tool__icon,
	.skill:hover > .icon { animation: tw-pin .6s ease-in-out; }

	.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
	.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
	.btn--primary:hover::after { transform: translateX(120%); }

	.section-title em, .page-hero__title em { background: linear-gradient(90deg, var(--blue), var(--cyan), var(--blue)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tw-shine 6s linear infinite; }
	@keyframes tw-shine { to { background-position: -200% 0; } }

	/* ---------- Page heroes (inner pages) ---------- */
	.page-hero .container > * { animation: tw-up .8s cubic-bezier(.2, .7, .2, 1) both; }
	.page-hero .container > :nth-child(2) { animation-delay: .12s; }
	.page-hero .container > :nth-child(3) { animation-delay: .24s; }
}