src/index.css

@import "tailwindcss";

@source "../node_modules/streamdown/dist/*.js";

@font-face {
  font-family: "Sohne";
  src: url("/fonts/Söhne/Söhne-Leicht.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sohne";
  src: url("/fonts/Söhne/Söhne-Buch.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sohne";
  src: url("/fonts/Söhne/Söhne-Kräftig.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrains/JetBrainsMono-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrains/JetBrainsMono-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

@layer base {
  html,
  body {
    font-family:
      "Sohne",
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    font-size: 17px;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    color: #000000;
  }

  #root {
    height: 100%;
  }

  /* Sleek scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  *:hover {
    scrollbar-color: #d4d4d8 transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
  }

  *:hover::-webkit-scrollbar-thumb {
    background: #d4d4d8;
  }

  *:hover::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
  }

  :root {
    --brand-white: #ffffff;
    --brand-black: #000000;
    --brand-purple-light: #cd82f0;
    --brand-purple: #5505af;
    --brand-orange: #ff5f1e;
    --brand-white-70: #ffffffb3;
    --brand-white-50: #ffffff80;
    --brand-white-30: #ffffff4d;
    --brand-white-10: #ffffff1a;
    --brand-black-70: #000000b3;
    --brand-black-50: #00000080;
    --brand-black-30: #0000004d;
    --brand-black-10: #0000001a;
    --brand-purple-light-70: #cd82f0b3;
    --brand-purple-light-50: #cd82f080;
    --brand-purple-light-30: #cd82f04d;
    --brand-purple-light-10: #cd82f01a;
    --brand-purple-70: #5505afb3;
    --brand-purple-50: #5505af80;
    --brand-purple-30: #5505af4d;
    --brand-purple-10: #5505af1a;
    --brand-orange-70: #ff5f1eb3;
    --brand-orange-50: #ff5f1e80;
    --brand-orange-30: #ff5f1e4d;
    --brand-orange-10: #ff5f1e1a;
    --background: var(--brand-white);
    --foreground: var(--brand-black);
    --card: var(--brand-white);
    --card-foreground: var(--brand-black);
    --popover: var(--brand-white);
    --popover-foreground: var(--brand-black);
    --primary: var(--brand-black);
    --primary-foreground: var(--brand-white);
    --secondary: #f8f8fa;
    --secondary-foreground: var(--brand-black);
    --muted: #f8f8fa;
    --muted-foreground: var(--brand-black-70);
    --accent: var(--brand-purple-10);
    --accent-foreground: var(--brand-black);
    --destructive: #dc2626;
    --destructive-foreground: var(--brand-white);
    --border: var(--brand-black-10);
    --input: var(--brand-black-10);
    --ring: var(--brand-purple);
    --radius: 0.5rem;
  }
}

.brand-surface {
  background:
    radial-gradient(
      ellipse 70% 50% at 86% 12%,
      var(--brand-purple-light-30),
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 50% at 12% 86%,
      var(--brand-orange-30),
      transparent 72%
    ),
    radial-gradient(
      ellipse 65% 45% at 55% 52%,
      var(--brand-purple-10),
      transparent 72%
    ),
    var(--brand-white);
}

/* Landing page accent motion */
.landing-brand-glow {
  background:
    radial-gradient(
      ellipse 52% 38% at 12% 25%,
      var(--brand-purple-light-30),
      transparent
    ),
    radial-gradient(
      ellipse 48% 38% at 88% 68%,
      var(--brand-orange-30),
      transparent
    );
  animation: brand-shift 10s ease-in-out infinite;
}

@keyframes brand-shift {
  0%, 100% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -6px, 0);
  }
}

/* Gentle pulse for "click to continue" text */
@keyframes pulse-gentle {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.animate-pulse-gentle {
  animation: pulse-gentle 2.5s ease-in-out infinite;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-rise-in {
  animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-rise-in-delayed {
  animation: rise-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}

.font-support {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Fade-in for chat transition */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out both;
}

/* Thinking shimmer animation */
@keyframes thinking-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.thinking-shimmer {
  background: linear-gradient(
    105deg,
    #6d6d6d 0%,
    #6d6d6d 40%,
    #5505af 50%,
    #6d6d6d 60%,
    #6d6d6d 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: thinking-shimmer 2s ease-in-out infinite;
}