/* LulaSync Interactive Animations & Micro-Interactions */
@media (prefers-reduced-motion: no-preference) {
  .role-pill, .btn-fire, .btn-outline, .btn-gold-outline, .btn-wa,
  .product-card, .live-build-card, .cs-card, .dailyui-card, .service-card, .bundle-card,
  .nav-link, .nav-cta, .show-tab, .filter-tag, .chip {
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.22s ease,
                background 0.22s ease,
                color 0.22s ease;
    position: relative;
    overflow: hidden;
  }

  .btn-fire:hover, .btn-outline:hover, .btn-gold-outline:hover, .btn-wa:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 28px rgba(240, 165, 0, 0.32);
  }

  .cs-card:hover, .dailyui-card:hover, .product-card:hover, .live-build-card:hover, .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(240, 165, 0, 0.38);
    z-index: 2;
  }

  /* Interactive 3D Tilt Card Glow Overlay */
  .card-glow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(circle 280px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(240, 165, 0, 0.16), transparent 75%);
    z-index: 10;
  }

  .cs-card:hover .card-glow-overlay,
  .dailyui-card:hover .card-glow-overlay,
  .product-card:hover .card-glow-overlay {
    opacity: 1;
  }

  /* Click Ripple Effect */
  .ls-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleAnim 0.55s linear;
    pointer-events: none;
  }

  @keyframes rippleAnim {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }

  /* Staggered Scroll Reveal */
  .reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .reveal-up.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Interactive Role Chip Pulse */
  .role-pill:hover, .role-chip:hover, .chip:hover {
    transform: scale(1.05);
    box-shadow: 0 0 14px rgba(240, 165, 0, 0.3);
  }

  /* Filter Tag Active & Switch Animation */
  .filter-tag.active {
    background: var(--gold, #F0A500) !important;
    color: #0A0705 !important;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(240, 165, 0, 0.35);
  }

  .show-tab.active {
    box-shadow: 0 4px 18px rgba(240, 165, 0, 0.28);
    transform: translateY(-2px);
  }

  /* Card In Animation */
  @keyframes cardIn {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .tab-panel.active .cs-card,
  .tab-panel.active .dailyui-card {
    animation: cardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}