/**
 * Theme T&B — motion and interaction styles.
 *
 * @package Theme_TB
 * @since 1.0.0
 */

html[data-tb-navigating="true"] .tb-site-nav .tb-nav-pill.is-active,
html[data-tb-navigating="true"] .tb-mobile-nav .tb-nav-pill.is-active {
  opacity: 0.85;
}

html[data-tb-navigating="true"]::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--tb-color-primary), var(--tb-color-accent), var(--tb-color-secondary));
  z-index: 99999;
  animation: tb-nav-progress 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tb-nav-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.tb-animate-fade-in {
  animation: tb-fade-in var(--tb-duration-slow) var(--tb-ease) both;
}

.tb-animate-slide-up {
  animation: tb-slide-up var(--tb-duration-slow) var(--tb-ease) both;
}

@keyframes tb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tb-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tb-card {
  transition: transform var(--tb-transition), box-shadow var(--tb-transition);
}

.tb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tb-shadow-high);
}

.tb-ripple {
  position: relative;
  overflow: hidden;
}

.tb-scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--tb-duration-slow) var(--tb-ease), transform var(--tb-duration-slow) var(--tb-ease);
}

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

@media (prefers-reduced-motion: reduce) {
  .tb-animate-fade-in,
  .tb-animate-slide-up {
    animation: none;
  }

  .tb-card:hover {
    transform: none;
  }

  .tb-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}