{
  "$schema": "https://tr.designtokens.org/format/",

  "duration": {
    "$type": "duration",
    "instant": { "$value": "0ms" },
    "fast": { "$value": "150ms" },
    "normal": { "$value": "300ms" },
    "slow": { "$value": "500ms" },
    "slower": { "$value": "1000ms" }
  },

  "easing": {
    "$type": "cubicBezier",
    "linear": { "$value": "linear" },
    "ease-in": { "$value": "cubic-bezier(0.4, 0, 1, 1)" },
    "ease-out": { "$value": "cubic-bezier(0, 0, 0.2, 1)" },
    "ease-in-out": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)" },
    "spring": { "$value": "cubic-bezier(0.68, -0.55, 0.265, 1.55)" },
    "bounce": { "$value": "cubic-bezier(0.68, -0.6, 0.32, 1.6)" }
  },

  "keyframes": {
    "_comment_pattern": "Define pairs (in/out, open/close, enter/exit)",
    "_comment_required": "Required keyframes for components",

    "fade-in": {
      "0%": { "opacity": "0" },
      "100%": { "opacity": "1" }
    },
    "fade-out": {
      "_comment": "reverse of fade-in",
      "0%": { "opacity": "1" },
      "100%": { "opacity": "0" }
    },

    "slide-up": {
      "0%": { "transform": "translateY(10px)", "opacity": "0" },
      "100%": { "transform": "translateY(0)", "opacity": "1" }
    },
    "slide-down": {
      "_comment": "reverse direction",
      "0%": { "transform": "translateY(0)", "opacity": "1" },
      "100%": { "transform": "translateY(10px)", "opacity": "0" }
    },

    "scale-in": {
      "0%": { "transform": "scale(0.95)", "opacity": "0" },
      "100%": { "transform": "scale(1)", "opacity": "1" }
    },
    "scale-out": {
      "_comment": "reverse of scale-in",
      "0%": { "transform": "scale(1)", "opacity": "1" },
      "100%": { "transform": "scale(0.95)", "opacity": "0" }
    },

    "accordion-down": {
      "0%": { "height": "0", "opacity": "0" },
      "100%": { "height": "var(--radix-accordion-content-height)", "opacity": "1" }
    },
    "accordion-up": {
      "_comment": "reverse",
      "0%": { "height": "var(--radix-accordion-content-height)", "opacity": "1" },
      "100%": { "height": "0", "opacity": "0" }
    },

    "dialog-open": {
      "0%": { "transform": "translate(-50%, -48%) scale(0.96)", "opacity": "0" },
      "100%": { "transform": "translate(-50%, -50%) scale(1)", "opacity": "1" }
    },
    "dialog-close": {
      "_comment": "reverse",
      "0%": { "transform": "translate(-50%, -50%) scale(1)", "opacity": "1" },
      "100%": { "transform": "translate(-50%, -48%) scale(0.96)", "opacity": "0" }
    },

    "dropdown-open": {
      "0%": { "transform": "scale(0.95) translateY(-4px)", "opacity": "0" },
      "100%": { "transform": "scale(1) translateY(0)", "opacity": "1" }
    },
    "dropdown-close": {
      "_comment": "reverse",
      "0%": { "transform": "scale(1) translateY(0)", "opacity": "1" },
      "100%": { "transform": "scale(0.95) translateY(-4px)", "opacity": "0" }
    },

    "toast-enter": {
      "0%": { "transform": "translateX(100%)", "opacity": "0" },
      "100%": { "transform": "translateX(0)", "opacity": "1" }
    },
    "toast-exit": {
      "_comment": "reverse",
      "0%": { "transform": "translateX(0)", "opacity": "1" },
      "100%": { "transform": "translateX(100%)", "opacity": "0" }
    },

    "spin": {
      "0%": { "transform": "rotate(0deg)" },
      "100%": { "transform": "rotate(360deg)" }
    },
    "pulse": {
      "0%, 100%": { "opacity": "1" },
      "50%": { "opacity": "0.5" }
    }
  },

  "interactions": {
    "_comment_pattern": "Define for each interactive component state",
    "_structure": {
      "property": "string - CSS properties (comma-separated)",
      "duration": "{duration.*}",
      "easing": "{easing.*}"
    },

    "button-hover": {
      "property": "background-color, transform",
      "duration": "{duration.fast}",
      "easing": "{easing.ease-out}"
    },
    "button-active": {
      "property": "transform",
      "duration": "{duration.instant}",
      "easing": "{easing.ease-in}"
    },
    "card-hover": {
      "property": "box-shadow, transform",
      "duration": "{duration.normal}",
      "easing": "{easing.ease-in-out}"
    },
    "input-focus": {
      "property": "border-color, box-shadow",
      "duration": "{duration.fast}",
      "easing": "{easing.ease-out}"
    },
    "dropdown-toggle": {
      "property": "opacity, transform",
      "duration": "{duration.fast}",
      "easing": "{easing.ease-out}"
    },
    "accordion-toggle": {
      "property": "height, opacity",
      "duration": "{duration.normal}",
      "easing": "{easing.ease-in-out}"
    },
    "dialog-toggle": {
      "property": "opacity, transform",
      "duration": "{duration.normal}",
      "easing": "{easing.spring}"
    },
    "tabs-switch": {
      "property": "color, border-color",
      "duration": "{duration.fast}",
      "easing": "{easing.ease-in-out}"
    }
  },

  "transitions": {
    "default": { "$value": "all {duration.normal} {easing.ease-in-out}" },
    "colors": { "$value": "color {duration.fast} {easing.linear}, background-color {duration.fast} {easing.linear}" },
    "transform": { "$value": "transform {duration.normal} {easing.spring}" },
    "opacity": { "$value": "opacity {duration.fast} {easing.linear}" },
    "all-smooth": { "$value": "all {duration.slow} {easing.ease-in-out}" }
  },

  "component_animations": {
    "_comment_pattern": "Map each component to its animations - MUST match design-tokens.json component list",
    "_structure": {
      "stateOrInteraction": {
        "animation": "keyframe-name {duration.*} {easing.*} OR none",
        "transition": "{interactions.*} OR none"
      }
    },

    "button": {
      "hover": { "animation": "none", "transition": "{interactions.button-hover}" },
      "active": { "animation": "none", "transition": "{interactions.button-active}" }
    },
    "card": {
      "hover": { "animation": "none", "transition": "{interactions.card-hover}" }
    },
    "input": {
      "focus": { "animation": "none", "transition": "{interactions.input-focus}" }
    },
    "dialog": {
      "open": { "animation": "dialog-open {duration.normal} {easing.spring}" },
      "close": { "animation": "dialog-close {duration.normal} {easing.ease-in}" }
    },
    "dropdown": {
      "open": { "animation": "dropdown-open {duration.fast} {easing.ease-out}" },
      "close": { "animation": "dropdown-close {duration.fast} {easing.ease-in}" }
    },
    "toast": {
      "enter": { "animation": "toast-enter {duration.normal} {easing.ease-out}" },
      "exit": { "animation": "toast-exit {duration.normal} {easing.ease-in}" }
    },
    "accordion": {
      "open": { "animation": "accordion-down {duration.normal} {easing.ease-out}" },
      "close": { "animation": "accordion-up {duration.normal} {easing.ease-in}" }
    },
    "_comment_missing": "Add mappings for: tabs, switch, checkbox, badge, alert"
  },

  "accessibility": {
    "prefers_reduced_motion": {
      "duration": "0ms",
      "keyframes": {},
      "note": "Disable animations when user prefers reduced motion",
      "css_rule": "@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }"
    }
  },

  "_metadata": {
    "version": "string",
    "created": "ISO timestamp",
    "source": "code-import|explore|text",
    "code_snippets": [
      {
        "animation_name": "string - keyframe/transition name",
        "source_file": "string - absolute path",
        "line_start": "number",
        "line_end": "number",
        "snippet": "string - complete @keyframes or transition code",
        "context_type": "css-keyframes|css-transition|js-animation|scss-animation|etc"
      }
    ]
  },

  "_field_rules": {
    "schema": "$schema MUST reference W3C Design Tokens format specification",
    "duration_wrapper": "All duration values MUST use $value wrapper with ms units",
    "easing_wrapper": "All easing values MUST use $value wrapper with standard CSS easing or cubic-bezier()",
    "keyframes": "keyframes MUST define complete component state animations (open/close, enter/exit)",
    "interactions_refs": "interactions MUST reference duration and easing using {token.path} syntax",
    "component_mapping": "component_animations MUST map component states to specific keyframes and transitions",
    "component_coverage": "component_animations MUST be defined for all interactive and stateful components",
    "transitions_wrapper": "transitions MUST use $value wrapper for complete transition definitions",
    "accessibility": "accessibility.prefers_reduced_motion MUST be included with CSS media query rule",
    "code_snippets": "_metadata.code_snippets ONLY present in Code Import mode"
  },

  "_animation_component_integration": {
    "requirement": "Each component in design-tokens.json component section MUST have corresponding entry in component_animations",
    "state_based": "State-based animations (dialog.open, accordion.close) MUST use keyframe animations",
    "interaction": "Interaction animations (button.hover, input.focus) MUST use transitions",
    "consistency": "All animation references use {token.path} syntax for consistency"
  }
}