# Iliya Theme — Project Context ## Stack - WordPress (classic PHP theme, **not** a block theme) - Tailwind CSS v4 (config lives in `assets/css/site.css`, compiled to `dist.css`) - **Motion** (motion.dev) for animation — vanilla JS, bundled with esbuild to `assets/js/dist.js` - **RTL Persian site** (`dir="rtl"`, `lang="fa"`) - No WooCommerce (content / corporate site) ## Build - `npm run dev` — watch CSS + JS together (Tailwind watch + esbuild watch) - `npm run build` — minified CSS + JS for production - `npm run dev:css` / `npm run build:css` — Tailwind only - `npm run dev:js` / `npm run build:js` — esbuild bundle only - `npm run format` — Prettier (php/html/css/js) - Always re-run a build after editing `site.css` or `main.js`; templates load the compiled `dist.*`. ## Motion + WordPress — how it works Framer Motion's React API (`motion/react`) needs React. This theme is PHP templates, so we use the same team's vanilla engine: `import { animate, inView, stagger } from 'motion'`. esbuild bundles it into `dist.js` (IIFE) — no React, no build step in the browser. - Reveal an element on scroll: add `data-motion="fade-up"` (optional `data-motion-delay="0.1"`). - Stagger a list: add `data-motion-group` to the container. - `prefers-reduced-motion` is respected in both JS and `site.css`. - If you later want true React islands (e.g. an interactive widget) you *can* add `motion/react` + a React mount — but keep it to isolated islands, not the whole theme. ## First-load loader (`template-parts/loader.php`) - Homepage only, once per session (sessionStorage `iliyaSeen`). Logo `logo-stack.webp` on a near-black overlay. - Motion does grow+fade (scale/opacity); the top→bottom "draw" reveal is a **CSS `clip-path` inset transition** (`.is-revealed`) — Motion does NOT reliably animate clip-path, so don't move it into Motion. - 5s guard timeout + `