agile-calculator

As a frontend developer, implement the CalculatorHeader section for the Calculator page. This section renders an animated `<header className="ch-header">` using framer-motion. The title 'Agile - Calculator' is split into individual letters, each animated with `letterVariants` (opacity, y, rotateX with spring physics, staggered by `i * 0.04` delay, perspective: 600px). A `ch-underline-wrap` div uses `underlineVariants` with scaleX from 0→1 (originX: 0.5, delay 0.45s). The subtitle renders ['Simple', 'Fast', 'Reliable'] using `subtitleVariants` with dot separators (`ch-dot`), each staggered at `0.6 + i * 0.15` delay. Requires framer-motion `motion.span`, `motion.div`, and `motion.h1` components. Import and apply `CalculatorHeader.css` styles.

As a frontend developer, implement the CalculatorDisplay section for the Calculator page. This section manages full calculator state via `useState` hooks: `currentValue`, `previousValue`, `operation`, `displayKey` (animation key), and `isResult`. The `calculate` callback handles +, -, *, / with divide-by-zero guard returning 'Error'. A `handleKeyDown` listener (attached via `useEffect`) supports keyboard input for digits 0-9, '.', operators (+,-,*,/), Enter/= for evaluation, Escape/C for clear, and Backspace for deletion — with 12-character input cap. `AnimatePresence` from framer-motion animates digit transitions keyed by `displayKey`. Displays `previousValue` + operator symbol (mapped via `OPERATIONS` object to +, −, ×, ÷) and `currentValue`. Import and apply `CalculatorDisplay.css`.

As a frontend developer, implement the CalculatorKeypad section for the Calculator page. This section renders a 4-column grid of 19 buttons defined in the `BUTTONS` array (C, ±, %, ÷, 7–9, ×, 4–6, −, 1–3, +, 0 (span 2), ., =) using a `FlipButton` sub-component. Each `FlipButton` uses local `isFlipped` state and triggers a 3D card-flip animation via `motion.div` with `rotateY: 0→180` using `flipSpring` (spring, stiffness 300, damping 20, mass 0.8), resets after 400ms timeout. Buttons support `whileHover={hoverLift}` (y: -4) and `whileTap={tapSquash}` (scale: 0.94). An `AnimatePresence`-wrapped `ck-ripple` div fades out on flip. `span: 2` buttons use `gridColumn: 'span 2'` and adjusted `aspectRatio`. Button types ('op', 'equals', 'clear', 'num') map to BEM CSS classes (`ck-btn--op`, `ck-btn--active`, `ck-btn--equals`, `ck-btn--clear`). `CalculatorKeypad` holds its own `display`, `prevValue` state for keypad-driven calculation logic. Import and apply `CalculatorKeypad.css`.

As a frontend developer, implement the CalculatorFooter section for the Calculator page. This section renders a `motion.footer` with `className="cf-footer"` that animates in from `opacity: 0, y: 10` to `opacity: 1, y: 0` with `duration: 0.6`, `delay: 0.4`, `ease: 'easeOut'`. Inside a `cf-inner` div, it displays a `cf-text` span containing 'Made with' followed by an inline `cf-heart` span with ❤️ emoji, a `cf-divider` span, and an anchor tag (`cf-link`) linking to `https://github.com/agile-calculator` with `target="_blank"` and `rel="noopener noreferrer"`. Import and apply `CalculatorFooter.css`.

As a Frontend Developer, set up the global theme, CSS variables, and design system for the Agile-Calculator. Define all color tokens (primary: #3498db, primary_light: #85c1e9, secondary: #e74c3c, accent: #f1c40f, highlight: #f39c12, bg: #ecf0f1, surface: rgba(255,255,255,0.9), text: #2c3e50, text_muted: #95a5a6, border: rgba(44,62,80,0.2)) as CSS custom properties. Set up global resets, typography, and base layout styles. Configure framer-motion as a shared dependency. Ensure responsive breakpoints are defined for desktop and mobile. This task is a prerequisite for all section-level frontend tasks (231ffea8, e1530fe7, f8c4b185, fe51cb97).