/* Auton motion kit v1 — pairs with Auton Round and the Auton icon set.
   Rules: feedback on press instantly; critically damped (no bounce); animate from the current value;
   one motion idea at a time; everything respects prefers-reduced-motion. */
:root{
  --ease: cubic-bezier(.2,0,0,1);          /* default: fast out, soft landing */
  --ease-in-out: cubic-bezier(.4,0,.2,1);  /* loops and back-and-forth */
  --ease-exit: cubic-bezier(.4,0,1,1);     /* leaving the screen */
  --dur-press: 100ms;   /* button / tile press */
  --dur-fast: 120ms;    /* hover, colour, small state */
  --dur-base: 200ms;    /* menus, toggles, icon moves */
  --dur-slow: 360ms;    /* sheets, page entrances, success */
  --dur-brand: 900ms;   /* logo and hero moments only */
  --stagger: 60ms;      /* between items in a list or grid */
  --rise: 12px;         /* entrance distance */
}

/* 1. Press: instant feedback, release springs back */
.a-press{transition:transform var(--dur-base) var(--ease)}
.a-press:active{transform:scale(.98);transition-duration:var(--dur-press)}

/* 2. Entrance: fade + rise, stagger children with style="--i:n" */
.a-reveal{animation:a-rise var(--dur-slow) var(--ease) both;animation-delay:calc(var(--i,0) * var(--stagger))}
@keyframes a-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}

/* 3. Draw-on for any stroked SVG path (set pathLength="1" on the path) */
.a-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:a-draw var(--dur-slow) var(--ease) forwards;animation-delay:var(--delay,0ms)}
@keyframes a-draw{to{stroke-dashoffset:0}}

/* 4. Charging dots: the five dots of the Auton mark fill in order, then reset (loader / "charging now") */
.a-dots circle{fill:var(--dot-off,#C9D3DA);animation:a-dot 1600ms var(--ease-in-out) infinite}
.a-dots circle:nth-of-type(1){animation-delay:0ms}
.a-dots circle:nth-of-type(2){animation-delay:160ms}
.a-dots circle:nth-of-type(3){animation-delay:320ms}
.a-dots circle:nth-of-type(4){animation-delay:480ms}
.a-dots circle:nth-of-type(5){animation-delay:640ms}
@keyframes a-dot{0%,8%{fill:var(--dot-off,#C9D3DA)}18%,70%{fill:var(--dot-on,#01B75C)}85%,100%{fill:var(--dot-off,#C9D3DA)}}

/* 5. Bolt pulse: live charging state (slow, calm, never flashing) */
.a-pulse{animation:a-pulse 2000ms var(--ease-in-out) infinite;transform-box:fill-box;transform-origin:center}
@keyframes a-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.94)}}

/* 6. Success: ring + check draw on in sequence */
.a-success .ring{stroke-dasharray:1;stroke-dashoffset:1;animation:a-draw var(--dur-slow) var(--ease) forwards}
.a-success .tick{stroke-dasharray:1;stroke-dashoffset:1;animation:a-draw var(--dur-base) var(--ease) 260ms forwards}

/* 7. Icon micro-motion on hover/focus of the parent (.a-icon-host) */
.a-icon-host .ai{transition:transform var(--dur-base) var(--ease)}
.a-icon-host:hover .ai-nudge,.a-icon-host:focus-visible .ai-nudge{transform:translateX(3px)}
.a-icon-host:hover .ai-lift,.a-icon-host:focus-visible .ai-lift{transform:translateY(-2px)}
.a-icon-host:hover .ai-turn,.a-icon-host:focus-visible .ai-turn{transform:rotate(90deg)}
.a-icon-host:hover .ai-ring,.a-icon-host:focus-visible .ai-ring{animation:a-ring 600ms var(--ease)}
.a-icon-host:hover .ai-flash,.a-icon-host:focus-visible .ai-flash{animation:a-flash 600ms var(--ease)}
@keyframes a-ring{0%{transform:rotate(0)}25%{transform:rotate(12deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@keyframes a-flash{0%,100%{opacity:1}30%{opacity:.35}60%{opacity:1}80%{opacity:.6}}
.ai{transform-box:fill-box;transform-origin:center}

/* 8. Logo reveal (markup as in auton-logo-animated.svg: .lt letters, .a-sweep mask ring, .a-boltm bolt mask) */
.a-logo .lt{animation:a-rise 480ms var(--ease) both;transform-box:fill-box}
.a-logo .lt:nth-of-type(1){animation-delay:100ms}.a-logo .lt:nth-of-type(2){animation-delay:160ms}
.a-logo .lt:nth-of-type(3){animation-delay:220ms}.a-logo .lt:nth-of-type(4){animation-delay:520ms}
.a-sweep{stroke-dasharray:1;stroke-dashoffset:1;animation:a-draw var(--dur-brand) var(--ease) 250ms forwards}
.a-boltm{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:a-bolt var(--dur-slow) var(--ease) 900ms forwards}
@keyframes a-bolt{to{transform:scale(1)}}

/* Reduced motion: keep meaning, drop movement */
@media (prefers-reduced-motion:reduce){
  .a-reveal,.a-logo .lt{animation:a-fade var(--dur-base) linear both;animation-delay:0ms}
  .a-draw,.a-success .ring,.a-success .tick,.a-sweep{animation:none;stroke-dashoffset:0}
  .a-boltm{animation:none;transform:none}
  .a-pulse,.a-icon-host .ai{animation:none!important;transform:none!important}
  .a-dots circle{animation-duration:3200ms}
  .a-press:active{transform:none;opacity:.8}
}
@keyframes a-fade{from{opacity:0}to{opacity:1}}