@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* next/font registers these — fall back to system stacks if we ever
       render before the font loads. */
    --font-sans:
      var(--font-inter), 'Inter', system-ui, -apple-system, sans-serif;
    --font-display:
      var(--font-display), 'Plus Jakarta Sans', system-ui, -apple-system,
      sans-serif;
    --font-mono:
      var(--font-mono), 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
      monospace;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-sans);
    color: theme('colors.ink.DEFAULT');
  }

  h1,
  h2,
  h3,
  h4,
  .font-display {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
  }

  .font-mono,
  code,
  kbd {
    font-family: var(--font-mono);
  }

  /* Urdu RTL support */
  [dir='rtl'] body {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.6;
  }
}

@layer utilities {
  .glass {
    @apply backdrop-blur-glass bg-white/20 border border-white/30;
  }

  .glass-dark {
    @apply backdrop-blur-glass bg-brand/30 border border-brand/40 text-white;
  }
}

@layer components {
  .coach-agent-avatar {
    display: inline-block;
    position: relative;
    overflow: visible;
    vertical-align: middle;
    transform-origin: 50% 88%;
    animation: coach-agent-float 3.2s ease-in-out infinite;
  }

  .coach-agent-character {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    filter: drop-shadow(0 10px 10px rgb(15 45 70 / 24%));
    transform: scale(1.16);
    transform-origin: 50% 86%;
  }

  .coach-agent-sm .coach-agent-character {
    transform: scale(1.2);
  }

  .coach-agent-lg .coach-agent-character {
    transform: scale(1.12);
  }

  .coach-agent-listening {
    animation-duration: 2.4s;
  }

  .coach-agent-listening .coach-agent-character {
    transform: scale(1.18);
  }

  .coach-agent-thinking .coach-agent-character {
    transform: scale(1.15) rotate(-1deg);
  }

  .coach-agent-speaking {
    animation-name: coach-agent-talk;
    animation-duration: 1.1s;
  }

  .coach-agent-speaking .coach-agent-character {
    transform: scale(1.18);
  }
}

@keyframes coach-agent-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes coach-agent-talk {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-1px) rotate(-1.5deg);
  }
  70% {
    transform: translateY(1px) rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-agent-avatar {
    animation: none;
  }
}