/* =====================================================================
   TINYBOTS — MOTION  (animations.css)
   Restraint is the rule: the wink fires rarely. One wink at a time.
   All motion is gated behind prefers-reduced-motion and the .reduce class.
   ===================================================================== */

/* ---- The winking o -------------------------------------------------
   Wrap the <circle>+<path> of the o-mark in <g class="wgrp">.
   Add .wink-auto for ambient looping, or trigger .do-wink once via JS. */
.wgrp{ transform-box: fill-box; transform-origin: center; }

.wink-auto{ animation: tb-winkAuto var(--wink-interval, 6.4s) ease-in-out infinite; }
.wgrp.do-wink{ animation: tb-winkOnce var(--wink-dur, .52s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }

@keyframes tb-winkAuto{
  0%,82%,100%{ transform: scaleY(1) scaleX(1) rotate(0); }
  86%{ transform: scaleY(.10) scaleX(1.06) rotate(-3deg); }  /* close */
  90%{ transform: scaleY(1.09) scaleX(.97) rotate(0); }      /* overshoot */
  95%{ transform: scaleY(1) scaleX(1); }
}
@keyframes tb-winkOnce{
  0%{ transform: scaleY(1) scaleX(1); }
  34%{ transform: scaleY(.10) scaleX(1.06) rotate(-3deg); }
  68%{ transform: scaleY(1.09) scaleX(.97); }
  100%{ transform: scaleY(1) scaleX(1); }
}

/* ---- Focus-dot / cursor blink (the persimmon period) --------------- */
.dot-blink{ animation: tb-cursor 1.1s steps(1,end) infinite; }
@keyframes tb-cursor{ 0%,55%{opacity:1} 56%,100%{opacity:.12} }

/* ---- Draw-on reveal (ring strokes in, smile lands last) ------------
   Markup: <circle class="ring-draw" ... transform="rotate(-90 20 20)"/>
           <path  class="smile-draw" pathLength="100" .../>
   Toggle .drawn on the parent <svg> (JS triggers on scroll-in).         */
.ring-draw{ stroke-dasharray:98; stroke-dashoffset:98; }
.smile-draw{ stroke-dasharray:100; stroke-dashoffset:100; }
.drawn .ring-draw{ animation: tb-draw .6s ease forwards; }
.drawn .smile-draw{ animation: tb-draw .42s ease .52s forwards; }
@keyframes tb-draw{ to{ stroke-dashoffset:0; } }

/* ---- Loader (the smile sweeps the o) -------------------------------
   IMPORTANT: rotate around the o's centre (20,20), not the path's box. */
.loader-arc{ transform-box: view-box; transform-origin: 20px 20px; animation: tb-spin 1s linear infinite; }
@keyframes tb-spin{ to{ transform: rotate(360deg); } }

/* ---- Decorative sun slow-spin -------------------------------------- */
.sun-spin{ transform-box: fill-box; transform-origin: center; animation: tb-spin 26s linear infinite; }

/* ---- Reveal on scroll (optional, JS adds .in) ---------------------- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ---- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .wink-auto,.wgrp.do-wink,.dot-blink,.loader-arc,.sun-spin,
  .drawn .ring-draw,.drawn .smile-draw{ animation: none !important; }
  .ring-draw,.smile-draw{ stroke-dashoffset:0 !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}
body.reduce .wink-auto, body.reduce .wgrp.do-wink, body.reduce .dot-blink,
body.reduce .loader-arc, body.reduce .sun-spin,
body.reduce .drawn .ring-draw, body.reduce .drawn .smile-draw{ animation:none !important; }
body.reduce .ring-draw, body.reduce .smile-draw{ stroke-dashoffset:0 !important; }