gamma-page

As a frontend developer, implement the CalculatorHeader section for the Calculator page. This section renders a <header> with class 'ch-header' containing an animated calculator SVG icon and a staggered letter-by-letter title animation. Use framer-motion with four distinct variant sets: `iconVariants` (spring scale+rotate from -180deg, delay 0.1s), `letterVariants` (per-letter custom index, spring y+rotateX from -90deg, staggered at 0.06s intervals starting at 0.3s delay), `subtitleVariants` (fade+y slide, delay 1.0s, 0.6s duration), and `lineVariants` (scaleX reveal, delay 1.2s). The title string 'Calculator' is split into individual <motion.span> characters each receiving a `custom={i}` prop. Includes a decorative `ch-bg-pattern` div and a `ch-accent-line` motion.span. No state hooks — purely animated on mount. This is the root/first section of the page so depends_on is empty.

As a frontend developer, implement the CalculatorDisplay section for the Calculator page. This section is a self-contained animated demo panel using `useState` (step, showCursor, hasMemory) and `useRef` (rippleRef) hooks. It cycles through a DEMO_SEQUENCE array of 7 steps (expression+result pairs) via `useEffect` with setTimeout-based auto-advance (900-1300ms random delay per step, 4000ms reset pause). Features kinetic slot-machine digit morphing using framer-motion `AnimatePresence` with per-character spring animations driven by a `classifyChar` helper that categorizes digits, operators, and decimals. Implements a CSS ripple effect on the `rippleRef` element triggered when `isComputed` is true — manually animates width/height/opacity via inline style and requestAnimationFrame. The outer panel uses a spring entrance animation (opacity, y:20, scale:0.97). Includes a blinking cursor, expression line with conditional 'cd-expression--active' class, and a `hasMemory` memory indicator badge.

As a frontend developer, implement the CalculatorButtons section for the Calculator page. This section renders a 4-column CSS grid of 19 buttons (C, ±, %, ÷, 7-9, ×, 4-6, −, 1-3, +, 0-span, ., =) using a `FlipButton` sub-component. Each `FlipButton` uses `useState(isFlipped)` and `useCallback` to toggle a 3D card-flip animation on click: framer-motion `motion.div` with `rotateY: 180` spring transition (stiffness 300, damping 20, mass 0.8) and `whileTap` scale-down (0.92). The card uses CSS `preserve-3d` with `cb-face-front` and `cb-face-back` divs. Button types map to CSS classes: 'cb-type-clear', 'cb-type-equals', 'cb-type-operator', 'cb-type-number'. The '0' button has a `span` prop adding 'cb-zero' for double-width layout. Full keyboard accessibility via `onKeyDown` handling Enter/Space keys. ARIA labels applied for C, =, ±, % buttons.

As a frontend developer, implement the CalculatorFooter section for the Calculator page. This section renders a <footer> with class 'cf-footer' using framer-motion staggered reveal via `whileInView` (viewport once:true, amount:0.5). Uses `containerVariants` with `staggerChildren: 0.12` and `delayChildren: 0.2`, and `itemVariants` with spring y:12 entrance (stiffness 200, damping 24). Contains four animated children: a `cf-divider` line, a `cf-badge` with checkmark icon and 'WCAG 2.1 AA Compliant' text, a `cf-note` paragraph describing accessibility features, and a `cf-copyright` paragraph with 'gamma-page' brand span and a decorative `cf-dot` span. No state hooks — purely scroll-triggered animation on mount via viewport intersection.