.motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(24px) scale(.988);
  transition: opacity .72s ease, transform .72s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .reveal-item.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .brand img, .official-logo img { animation: bee-logo-float 6s ease-in-out infinite; }
  .button.primary, .nav-cta {
    background-size: 180% 180%;
    animation: bee-button-glow 6s ease-in-out infinite;
  }
  .card, .service-card, .related a, .specialist-services a, .faq details {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }
  .card:hover, .service-card:hover, .related a:hover, .specialist-services a:hover {
    transform: translateY(-7px);
  }
  .faq details[open] > p, .faq-wide details[open] > p { animation: bee-answer-in .3s ease both; }

  @keyframes bee-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  @keyframes bee-button-glow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @keyframes bee-answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .motion-ready .reveal-item { opacity: 1; transform: none; transition: none; }
}