/* Reusable easing tokens */
:root {
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
}

/* Fade in up - content appearing */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scale in - modals, popovers */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.modal {
  animation: scale-in var(--duration-normal) var(--ease-out);
}

/* Card hover - lift effect */
.card {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

import { motion, AnimatePresence } from 'framer-motion';

// Reusable animation variants
const fadeUp = {
  initial: { opacity: 0, y: 12 },
  animate: { opacity: 1, y: 0 },
  exit:    { opacity: 0, y: -8 },
  transition: { duration: 0.2, ease: [0, 0, 0.2, 1] },
};

const scaleIn = {
  initial: { opacity: 0, scale: 0.95 },
  animate: { opacity: 1, scale: 1 },
  exit:    { opacity: 0, scale: 0.95 },
  transition: { duration: 0.15, ease: [0, 0, 0.2, 1] },
};

// Component with enter/exit
function Notification({ show, message }: { show: boolean; message: string }) {
  return (
    <AnimatePresence>
      {show && (
        <motion.div
          key="notification"
          {...fadeUp}
          className="toast"
        >
          {message}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

// Staggered list
function AnimatedList({ items }: { items: string[] }) {
  return (
    <motion.ul
      initial="hidden"
      animate="visible"
      variants={{
        hidden: {},
        visible: { transition: { staggerChildren: 0.06 } },
      }}
    >
      {items.map((item) => (
        <motion.li
          key={item}
          variants={{
            hidden: { opacity: 0, x: -12 },
            visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
          }}
        >
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

/* Native CSS scroll-driven animations (Chrome 115+) */
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Progress bar tied to page scroll */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-primary-500);
  transform-origin: left;
  animation: scaleX linear;
  animation-timeline: scroll(root);
}
@keyframes scaleX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* IntersectionObserver fallback for broader browser support */

// IntersectionObserver - works in all browsers
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view');
        observer.unobserve(entry.target); // animate once
      }
    });
  },
  { threshold: 0.15 }
);

document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

import { AnimatePresence, motion } from 'framer-motion';
import { usePathname } from 'next/navigation';

const pageVariants = {
  initial: { opacity: 0, y: 8 },
  animate: { opacity: 1, y: 0, transition: { duration: 0.25, ease: [0, 0, 0.2, 1] } },
  exit:    { opacity: 0, y: -8, transition: { duration: 0.15, ease: [0.4, 0, 1, 1] } },
};

export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <AnimatePresence mode="wait">
      <motion.div key={pathname} {...pageVariants}>
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

import { motion } from 'framer-motion';

// Button with press feedback
function Button({ children, onClick }: React.ComponentProps<'button'>) {
  return (
    <motion.button
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.97 }}
      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
      onClick={onClick}
    >
      {children}
    </motion.button>
  );
}

// Animated toggle switch (CSS)

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--color-gray-300);
  border-radius: 12px;
  transition: background 150ms var(--ease-in-out);
  cursor: pointer;
}
.toggle[aria-checked="true"] {
  background: var(--color-primary-500);
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 200ms var(--ease-spring);
}
.toggle[aria-checked="true"]::after {
  transform: translateX(20px);
}

/* Accordion with grid-template-rows trick */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms var(--ease-out);
}
.accordion-content[data-open="true"] {
  grid-template-rows: 1fr;
}
.accordion-content > div {
  overflow: hidden;
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Hero entrance sequence
function animateHero() {
  const tl = gsap.timeline({ defaults: { ease: 'power2.out' } });

  tl.from('.hero-badge',    { opacity: 0, y: 16, duration: 0.4 })
    .from('.hero-headline', { opacity: 0, y: 20, duration: 0.5 }, '-=0.2')
    .from('.hero-subtext',  { opacity: 0, y: 16, duration: 0.4 }, '-=0.3')
    .from('.hero-cta',      { opacity: 0, scale: 0.95, duration: 0.35 }, '-=0.2');

  return tl;
}

// Scroll-triggered feature cards
gsap.utils.toArray<HTMLElement>('.feature-card').forEach((card, i) => {
  gsap.from(card, {
    opacity: 0,
    y: 32,
    duration: 0.5,
    delay: i * 0.08,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: card,
      start: 'top 85%',
      once: true,
    },
  });
});

/* CSS - blanket rule as safety net */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

// Framer Motion - useReducedMotion hook
import { useReducedMotion } from 'framer-motion';

function AnimatedCard({ children }: { children: React.ReactNode }) {
  const prefersReduced = useReducedMotion();

  return (
    <motion.div
      initial={prefersReduced ? false : { opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={prefersReduced ? { duration: 0 } : { duration: 0.2 }}
    >
      {children}
    </motion.div>
  );
}

// Vanilla JS - check preference before running GSAP
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!prefersReduced) {
  animateHero();
}