/* olloa reward + draw-in motion — load after olloa-tokens.css. Behaviour: the Motion section. */

@keyframes olloa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes olloa-sun  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes olloa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes olloa-pop  { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes olloa-card-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes olloa-card-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-18px); } }

/* Card transitions */
.olloa-card-in  { animation: olloa-card-in  var(--olloa-dur-base) var(--olloa-ease-out) both; }
.olloa-card-out { animation: olloa-card-out var(--olloa-dur-base) var(--olloa-ease-out) both; }

/* Session dot: correct answer (Hand-off) */
.olloa-dot { width: 10px; height: 10px; border-radius: 999px; box-sizing: border-box; background: var(--olloa-sunken); }
.olloa-dot[data-state="current"] { background: transparent; border: 1.5px solid var(--olloa-ink); }
.olloa-dot[data-state="again"]   { background: var(--olloa-ink-muted); }
.olloa-dot[data-state="correct"] { background: var(--olloa-reward); animation: olloa-pop var(--olloa-dur-reward) var(--olloa-ease-out) both; }

/* Sun (card matured, new best streak, level-up) */
.olloa-sun-core { transform-box: fill-box; transform-origin: center;
  animation: olloa-sun var(--olloa-dur-reward) var(--olloa-ease-out) both; }
.olloa-sun-rays { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: olloa-draw 300ms var(--olloa-ease-out) 120ms forwards; }

/* Monoline draw-in: give each stroked path pathLength="1" */
.olloa-draw      { stroke-dasharray: 1; stroke-dashoffset: 1; animation: olloa-draw var(--olloa-dur-draw) var(--olloa-ease-out) forwards; }
.olloa-draw-late { stroke-dasharray: 1; stroke-dashoffset: 1; animation: olloa-draw var(--olloa-dur-draw) var(--olloa-ease-out) 150ms forwards; }
.olloa-fill-in   { opacity: 0; animation: olloa-fade 300ms var(--olloa-ease-out) 300ms forwards; }
.olloa-fade-in   { opacity: 0; animation: olloa-fade var(--olloa-dur-reward) var(--olloa-ease-out) 200ms forwards; }

@media (prefers-reduced-motion: reduce) {
  .olloa-card-in, .olloa-card-out, .olloa-dot[data-state="correct"], .olloa-sun-core, .olloa-sun-rays,
  .olloa-draw, .olloa-draw-late, .olloa-fill-in, .olloa-fade-in {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}