/* ==========================================================================
   animations.css — one-time entrance animations
   Currently: the nav brand logo (inline SVG) reveals itself left → right,
   with each part settling into its true brand color as the reveal passes
   over it. Plays once on load, never loops.
   ========================================================================== */

/* ---- Brand logo reveal ---------------------------------------------- */

.brand-logo{
  clip-path: inset(0 100% 0 0);
  animation: logoWipeReveal 1.3s cubic-bezier(.22,.68,.35,1) .1s 1 forwards;
}

.logo-part{
  opacity: 0;
  fill: var(--ink); /* pre-reveal tone: the parts emerge out of this */
  animation-duration: .55s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* Icon (left side, x ≈ 84–463) settles in first ... */
.icon-arm{
  animation-name: logoColorIn-blue;
  animation-delay: .1s;
}
.icon-foot{
  animation-name: logoColorIn-mono;
  animation-delay: .18s;
}

/* ...then the wordmark (x ≈ 484–1099) as the wipe reaches it. */
.text-ryces{
  animation-name: logoColorIn-mono;
  animation-delay: .62s;
}
.text-builders{
  animation-name: logoColorIn-mono;
  animation-delay: .7s;
}

@keyframes logoWipeReveal{
  from{ clip-path: inset(0 100% 0 0); }
  to{   clip-path: inset(0 0% 0 0); }
}

@keyframes logoColorIn-blue{
  from{ opacity: 0; fill: var(--ink); }
  to{   opacity: 1; fill: #1E7CBA; }
}
@keyframes logoColorIn-mono{
  from{ opacity: 0; fill: var(--ink); }
  to{   opacity: 1; fill: var(--logo-mono); }
}

/* Respect reduced-motion: show the finished, correctly colored logo with
   no wipe/fade at all. */
@media (prefers-reduced-motion: reduce){
  .brand-logo{ clip-path: none; animation: none; }
  .logo-part{ opacity: 1; animation: none; }
  .icon-arm{ fill: #1E7CBA; }
  .icon-foot,
  .text-ryces,
  .text-builders{ fill: var(--logo-mono); }
}