component: Preloader
name: preloader
category: feedback
version: 1.0.0

ai:
  intent: "Cinematic atmospheric preloader overlay"
  visual_role: "Initial full-screen progress state"
  density: "comfortable"
  preferred_when:
    - "Cinematic luxury landing pages"
    - "Asset-heavy storefronts or portfolios"
  avoid_when:
    - "Subsequent in-page micro actions (use button spinner or alert)"

base:
  position: fixed
  inset: 0
  background-color: "var(--qhr-color-bg)"
  z-index: 9999
  display: flex
  align-items: center
  justify-content: center
  transition: "opacity 0.6s var(--qhr-motion-luxury, cubic-bezier(0.25, 0.8, 0.25, 1))"

variants:
  default:
    background-color: "var(--qhr-color-bg)"
  luxury:
    background-color: "var(--qhr-color-bg)"
    border-top: "2px solid var(--qhr-color-gold)"

sizes:
  md:
    max-width: "280px"

states:
  active:
    opacity: 1
    pointer-events: auto
  dismissed:
    opacity: 0
    pointer-events: none

contract:
  anatomy:
    - root
    - content
    - logo
    - progress-track
    - progress-bar
    - percentage
  props:
    variant:
      default: luxury
      values: [default, luxury]
    targetPercentage:
      default: 100