@import "tailwindcss";

@theme {
  --color-brand-50: #fef3ee;
  --color-brand-100: #fde4d4;
  --color-brand-500: #f97316;
  --color-brand-600: #ea580c;
  --color-brand-700: #c2410c;
}

/* ── Tooltip system ── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  background: #1c1c23;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1c1c23;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
}

/* Bottom position */
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
}
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #1c1c23;
}

/* Left position */
[data-tooltip-pos="left"]::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(-50%);
}
[data-tooltip-pos="left"]::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 2px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: #1c1c23;
}

/* Right position */
[data-tooltip-pos="right"]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
}
[data-tooltip-pos="right"]::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 2px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: #1c1c23;
}

/* Suppress tooltip on touch devices and when element is active/pressed */
@media (hover: none) {
  [data-tooltip]::after,
  [data-tooltip]::before {
    display: none;
  }
}

/* ── Micro-interactions ── */

/* Credits lightning bolt — vivid purple pulse glow */
@keyframes bolt-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); color: #9540d1; }
  30% { filter: drop-shadow(0 0 10px rgba(149, 64, 209, 0.8)) drop-shadow(0 0 20px rgba(149, 64, 209, 0.4)); color: #b366e8; }
  60% { filter: drop-shadow(0 0 6px rgba(149, 64, 209, 0.5)); color: #a855d6; }
}
.credits-bolt {
  animation: bolt-glow 2.5s ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
}

/* Credits pill — inner glow when nudge is showing */
@keyframes pill-inner-glow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(149, 64, 209, 0), 0 0 0 1px #eeeef0; }
  50% { box-shadow: inset 0 0 12px 1px rgba(149, 64, 209, 0.15), 0 0 0 1px rgba(149, 64, 209, 0.3); }
}
.credits-pill-glow {
  animation: pill-inner-glow 2s ease-in-out;
}

/* Credits low — red pulse ring */
@keyframes credits-low-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
}
.credits-low {
  animation: credits-low-pulse 2s ease-in-out 3;
}

/* Credits critical — border flash red */
@keyframes credits-critical {
  0%, 100% { border-color: #eeeef0; }
  50% { border-color: #ef4444; }
}
.credits-critical {
  animation: credits-critical 1.5s ease-in-out 3;
}

/* Notification bell shake — for important notifications */
@keyframes bell-shake {
  0% { transform: rotate(0); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-8deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(-3deg); }
  70% { transform: rotate(0); }
  100% { transform: rotate(0); }
}
.bell-shake {
  animation: bell-shake 0.8s ease-in-out;
  transform-origin: top center;
}

/* "New" badge — gradient glow sweep L-to-R, plays every 6s */
@keyframes badge-glow-sweep {
  0% { background-position: -100% 0; }
  40% { background-position: 200% 0; }
  100% { background-position: 200% 0; }
}
.badge-new {
  background: linear-gradient(
    90deg,
    #ff4f02 0%,
    #ff8a3d 25%,
    #fff 50%,
    #ff8a3d 75%,
    #ff4f02 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: badge-glow-sweep 6s ease-in-out infinite;
  animation-delay: 3s;
}
/* Fallback: keep the badge visible as a gradient by default */
.badge-new-bg {
  position: relative;
  overflow: hidden;
}
.badge-new-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shine-sweep 6s ease-in-out infinite;
  animation-delay: 3s;
}
@keyframes shine-sweep {
  0% { left: -100%; }
  30% { left: 150%; }
  100% { left: 150%; }
}

/* "AI" badge — sparkle twinkle */
@keyframes ai-sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
.badge-ai {
  position: relative;
}
.badge-ai::before,
.badge-ai::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #9540d1;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
  pointer-events: none;
}
.badge-ai::before {
  top: -4px;
  right: -3px;
  animation: ai-sparkle 4s ease-in-out infinite;
  animation-delay: 2s;
}
.badge-ai::after {
  bottom: -3px;
  left: -4px;
  width: 4px;
  height: 4px;
  animation: ai-sparkle 4s ease-in-out infinite;
  animation-delay: 3.5s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .credits-bolt,
  .credits-pill-glow,
  .credits-low,
  .credits-critical,
  .bell-shake,
  .badge-new,
  .badge-new-bg::after,
  .badge-ai::before,
  .badge-ai::after {
    animation: none;
  }
}