/* Syncc logo component (src/brand/logo.js, brand/react/SynccLogo.tsx).
 * Colours: set --sf-logo-cell and --sf-logo-ink (ink falls back to currentColor).
 * Intro: add the sf-logo--animate class (animate prop). CSS only; off under prefers-reduced-motion.
 * Every part has data-part (ear | cell | nose | letter | cursor), data-index and --i for staggering. */
.sf-logo { display: inline-block; vertical-align: middle; overflow: visible; }
.sf-logo [data-part]:not(g) { transform-box: fill-box; transform-origin: 50% 50%; }
.sf-logo { --sf-logo-stagger: 45ms; --sf-logo-word-delay: 380ms; }
.sf-logo--wordmark { --sf-logo-word-delay: 0ms; }

@media (prefers-reduced-motion: no-preference) {
  /* Cells (and cheeks) pop in one after another. */
  .sf-logo--animate [data-part="cell"] {
    animation: sf-logo-pop .48s cubic-bezier(.34, 1.56, .64, 1) backwards;
    animation-delay: calc(var(--i, 0) * var(--sf-logo-stagger));
  }
  /* Ears flick up from their base. */
  .sf-logo--animate [data-part="ear"] {
    transform-origin: 50% 100%;
    animation: sf-logo-ear .6s cubic-bezier(.34, 1.56, .64, 1) backwards;
    animation-delay: calc(var(--i, 0) * var(--sf-logo-stagger) + 160ms);
  }
  /* The booked cell lands last, then pings twice. */
  .sf-logo--animate [data-part="nose"] {
    animation: sf-logo-pop .48s cubic-bezier(.34, 1.56, .64, 1) backwards, sf-logo-ping .7s ease-out 2;
    animation-delay: calc(var(--i, 0) * var(--sf-logo-stagger)), calc(var(--i, 0) * var(--sf-logo-stagger) + 460ms);
  }
  /* Letters rise in, staggered. */
  .sf-logo--animate [data-part="letter"] {
    animation: sf-logo-rise .55s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(var(--sf-logo-word-delay) + var(--i, 0) * 40ms);
  }
  /* The cursor block types in after the last letter and blinks twice. */
  .sf-logo--animate [data-part="cursor"] {
    animation: sf-logo-pop .4s cubic-bezier(.34, 1.56, .64, 1) backwards, sf-logo-blink 1s steps(1, end) 2;
    animation-delay: calc(var(--sf-logo-word-delay) + 300ms), calc(var(--sf-logo-word-delay) + 700ms);
  }
}

@keyframes sf-logo-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes sf-logo-ear { from { opacity: 0; transform: scaleY(.1) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes sf-logo-ping { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes sf-logo-rise { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes sf-logo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sf-logo--animate [data-part] { animation: none !important; }
}