/* ============================================================
   Homepage-only styles
   - InteractiveDemo: tab states, screen transitions, achievement popup, confetti
   - Enterprise: feature card states, screen transitions
   ============================================================ */

/* --- InteractiveDemo: tabs --- */
.demo-tab {
  color: var(--color-gray-500);
  background: transparent;
  cursor: pointer;
  border: 0;
}
.demo-tab:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-50);
}
.demo-tab.active {
  color: #ffffff;
  background: var(--color-purple-600);
  box-shadow: 0 2px 8px rgba(91, 52, 181, 0.25);
}

/* --- InteractiveDemo: screen transitions --- */
.demo-screen {
  display: none;
  animation: demo-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo-screen.active {
  display: block;
}
@keyframes demo-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- InteractiveDemo: achievement popup pop-in --- */
@keyframes achievement-pop {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- InteractiveDemo: confetti --- */
@keyframes confetti-fall {
  0%   { translate: 0 -10px; rotate: 0deg;   opacity: 1; }
  80%  { opacity: 1; }
  100% { translate: 0 520px; rotate: 720deg; opacity: 0; }
}
@keyframes confetti-drift {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: 30px; }
}
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti-fall linear forwards, confetti-drift ease-in-out infinite;
}

/* --- Enterprise: feature card interactive states --- */
.ent-feature {
  cursor: pointer;
}
.ent-feature:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ent-feature.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(157, 130, 224, 0.4);
  box-shadow: 0 0 0 1px rgba(157, 130, 224, 0.15), 0 4px 16px rgba(91, 52, 181, 0.15);
}

/* --- Enterprise: screen transitions --- */
.ent-screen {
  display: none;
  animation: ent-screen-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
}
.ent-screen.active {
  display: block;
}
.ent-screen > div {
  height: 100%;
}
@keyframes ent-screen-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}