/* ==========================================================================
   animations.css — scroll reveal + logo propeller spin
   All motion killed by prefers-reduced-motion.
   ========================================================================== */

/* --- Scroll reveal: fade + 48px rise ------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 520ms var(--bf-ease-reveal),
              transform 520ms var(--bf-ease-reveal);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 60ms; }
.reveal--delay-2 { transition-delay: 120ms; }
.reveal--delay-3 { transition-delay: 180ms; }
.reveal--delay-4 { transition-delay: 240ms; }

/* Hero first paint — visible by default, just rises in on load */
.hero .reveal { transition-duration: 620ms; }

/* --- Logo propeller spin ------------------------------------------------ */

@keyframes bf-prop-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.prop-honey, .prop-sage, .prop-terra, .prop-teal {
  transform-origin: 100px 100px;  /* centre of 200×200 viewBox */
  transform-box: view-box;
}

.prop-honey { animation: bf-prop-spin 28s linear infinite; }
.prop-sage  { animation: bf-prop-spin 36s linear infinite; }
.prop-terra { animation: bf-prop-spin 22s linear infinite; }
.prop-teal  { animation: bf-prop-spin 44s linear infinite; }

/* --- Infographic subtle lifecycle --------------------------------------- */

@keyframes bf-nested-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

.nested-inner {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: bf-nested-breathe 8s ease-in-out infinite;
}

/* --- Reduced motion: kill everything ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .prop-honey, .prop-sage, .prop-terra, .prop-teal,
  .nested-inner {
    animation: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}