/* ══════════════════════════════════════════════════════════════════════════ aRTy TAX - motion system Single source of truth for duration, easing, and named keyframes. Imported from v2.css so every page inherits without per-page edits. ══════════════════════════════════════════════════════════════════════════ */ :root { /* Duration tokens */ --dur-micro: 120ms; --dur-short: 220ms; --dur-med: 360ms; --dur-long: 560ms; --dur-morph: 420ms; /* Easing tokens */ --ease-standard: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Keyframes ─────────────────────────────────────────────────────────── */ @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes spinner-arc { to { transform: rotate(360deg); } } @keyframes toast-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes drawer-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes verb-swap { 0% { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } } @keyframes mark-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* ── Utility classes ──────────────────────────────────────────────────── */ .skel { background: linear-gradient(90deg, #ECECEE 0%, #F6F6F8 50%, #ECECEE 100%); background-size: 800px 100%; animation: skeleton-shimmer 900ms linear infinite; border-radius: 8px; color: transparent !important; user-select: none; pointer-events: none; } .skel--text { display: inline-block; min-width: 3ch; height: 1em; vertical-align: -0.15em; } .skel--block { display: block; width: 100%; height: 100%; } /* Staggered fade-up for hydrated content. Add .stagger-in to a container, .stagger-item to each child. */ .stagger-item { opacity: 0; animation: fade-up var(--dur-long) var(--ease-out) forwards; } .stagger-in > .stagger-item:nth-child(1) { animation-delay: 0ms; } .stagger-in > .stagger-item:nth-child(2) { animation-delay: 80ms; } .stagger-in > .stagger-item:nth-child(3) { animation-delay: 160ms; } .stagger-in > .stagger-item:nth-child(4) { animation-delay: 240ms; } .stagger-in > .stagger-item:nth-child(5) { animation-delay: 320ms; } .stagger-in > .stagger-item:nth-child(6) { animation-delay: 400ms; } .stagger-in > .stagger-item:nth-child(7) { animation-delay: 480ms; } .stagger-in > .stagger-item:nth-child(8) { animation-delay: 560ms; } .stagger-in > .stagger-item:nth-child(9) { animation-delay: 640ms; } /* Reduced motion — collapse everything except a gentle opacity fade. */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0.01ms; --dur-short: 0.01ms; --dur-med: 150ms; --dur-long: 150ms; --dur-morph: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .skel { animation: none !important; } .stagger-item { animation: fade-in 150ms ease forwards !important; } }