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

:root {
  /* ------------------------------ */
  /*         BRAND COLORS           */
  /* ------------------------------ */

  --wgp-primary: #1F4AFF;         /* Electric blue */
  --wgp-primary-dark: #1638C4;    /* Deep blue */
  --wgp-secondary: #16C784;       /* Emerald green */
  --wgp-accent: #8A54FF;          /* WGP purple accent */

  --wgp-warning: #FFB03A;
  --wgp-danger: #FF4E4E;

  /* DARK THEME BACKGROUNDS */
  --wgp-bg-1: #0F1629;            /* Page background */
  --wgp-bg-2: #111D3C;            /* Section background */
  --wgp-bg-card: #152044;         /* Card surfaces */
  --wgp-bg-hover: #1A2A52;        /* Hover state */

  /* ------------------------------ */
  /*            GRADIENTS           */
  /* ------------------------------ */

  --wgp-gradient-1: linear-gradient(135deg, #1F4AFF 0%, #8A54FF 100%);
  --wgp-gradient-2: linear-gradient(135deg, #1F4AFF 0%, #16C784 100%);
  --wgp-gradient-3: linear-gradient(135deg, #0F1629 0%, #111D3C 100%); /* Subtle dark */

  /* Node glow gradients (for animated lines + icons) */
  --wgp-node-glow-blue: radial-gradient(circle, rgba(31,74,255,0.6) 0%, rgba(31,74,255,0) 70%);
  --wgp-node-glow-green: radial-gradient(circle, rgba(22,199,132,0.6) 0%, rgba(22,199,132,0) 70%);
  --wgp-node-glow-accent: radial-gradient(circle, rgba(138,84,255,0.6) 0%, rgba(138,84,255,0) 70%);

  /* ------------------------------ */
  /*            TEXT COLORS         */
  /* ------------------------------ */

  --wgp-text-primary: #FFFFFF;
  --wgp-text-secondary: #A8B3CF;
  --wgp-text-muted: #6E7994;

  /* ------------------------------ */
  /*            BORDERS             */
  /* ------------------------------ */

  --wgp-border: rgba(255, 255, 255, 0.08);
  --wgp-border-strong: rgba(255, 255, 255, 0.18);

  /* ------------------------------ */
  /*          SHADOWS / GLOWS       */
  /* ------------------------------ */

  --wgp-glow-blue: 0 0 18px rgba(31, 74, 255, 0.55);
  --wgp-glow-green: 0 0 18px rgba(22, 199, 132, 0.55);
  --wgp-glow-purple: 0 0 18px rgba(138, 84, 255, 0.55);

  /* ------------------------------ */
  /*         RADIUS / SPACING       */
  /* ------------------------------ */

  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* ------------------------------ */
  /*             FONTS             */
  /* ------------------------------ */

  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --h1-size: 3rem;        /* 48px */
  --h2-size: 2.25rem;     /* 36px */
  --h3-size: 1.5rem;      /* 24px */
  --h4-size: 1.25rem;     /* 20px */

  --body-lg: 1.125rem;    /* 18px */
  --body-md: 1rem;        /* 16px */
  --body-sm: 0.875rem;    /* 14px */

  /* Weights */
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-regular: 400;

  /* ------------------------------ */
  /*            BUTTONS             */
  /* ------------------------------ */

  --btn-primary-bg: var(--wgp-primary);
  --btn-primary-text: #fff;
  --btn-primary-hover: var(--wgp-primary-dark);

  --btn-secondary-bg: rgba(255,255,255,0.08);
  --btn-secondary-border: var(--wgp-border);
  --btn-secondary-hover: rgba(255,255,255,0.16);

  --btn-ghost-text: var(--wgp-text-secondary);
  --btn-ghost-hover: rgba(255,255,255,0.05);

  /* ------------------------------ */
  /*             CARDS              */
  /* ------------------------------ */

  --card-bg: var(--wgp-bg-card);
  --card-radius: var(--radius-lg);
  --card-border: var(--wgp-border);
  --card-padding: 24px;

  /* Hover states */
  --card-hover-bg: var(--wgp-bg-hover);
  --card-hover-border: var(--wgp-border-strong);

  /* ------------------------------ */
  /*         ANIMATION TOKENS       */
  /* ------------------------------ */

  --fade-speed: 0.45s;
  --slide-speed: 0.55s;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /* These match the "smooth floating" behavior you showed */
  --node-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------ */
  /*          LAYOUT TOKENS         */
  /* ------------------------------ */

  --section-width: 1200px;
  --content-width: 900px;
}

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 220 25% 8%;
    --foreground: 210 40% 98%;

    --card: 220 20% 12%;
    --card-foreground: 210 40% 98%;

    --popover: 220 20% 12%;
    --popover-foreground: 210 40% 98%;

    --primary: 140 65% 32%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 18%;
    --secondary-foreground: 210 40% 98%;

    --muted: 220 15% 15%;
    --muted-foreground: 215 20% 65%;

    --accent: 220 15% 18%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 15% 20%;
    --input: 220 15% 15%;
    --ring: 140 60% 35%;

    --radius: 0.75rem;

    /* Premium gradients */
    --gradient-primary: linear-gradient(135deg, hsl(140 60% 35%), hsl(140 60% 30%));
    --gradient-dark: linear-gradient(135deg, hsl(220 25% 8%), hsl(220 20% 12%));
    --gradient-overlay: linear-gradient(135deg, hsl(220 25% 8% / 0.9), hsl(220 20% 12% / 0.8));
    
    /* Premium shadows */
    --shadow-premium: 0 25px 50px -12px hsl(220 25% 8% / 0.8);
    --shadow-glow: 0 0 40px hsl(140 60% 35% / 0.2);

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* LoveFrom-style heading with typing + blinking cursor */
.lovefrom-heading {
  display: inline-flex;
  align-items: flex-end;
  white-space: nowrap;
}

/* Cursor line */
.lf-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 6px;
  background-color: #4b5563; /* soft gray, tweak if needed */
  animation: lfBlink 0.7s steps(2, start) infinite;
}

/* Fade cursor out after typing finishes */
.lf-cursor--done {
  animation: lfBlink 0.7s steps(2, start) 3, lfCursorFade 0.3s ease forwards;
}

@keyframes lfBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes lfCursorFade {
  to {
    opacity: 0;
  }
}

/* glowing dot animation */
@keyframes flowDot {
  0% {
    opacity: 0;
    transform: translateY(40px);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  20% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-140px);
    box-shadow: 0 0 16px rgba(255,255,255,1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-200px);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
}

/* reusable class for the dots */
.flow-dot {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: white;
  border-radius: 50%;
  animation: flowDot 6s linear infinite;
  pointer-events: none;
  opacity: 0;
}

/* branch column moving dots */
.column-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  animation: columnDotMove linear infinite;
}

/* animation for dots moving top → bottom in each column */
@keyframes columnDotMove {
  0% {
    transform: translate(-50%, -20%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 120%);
    opacity: 0;
  }
}

/* Row connector moving dot - fade in, move up, fade out */
@keyframes rowConnectorDotUp {
  0% {
    bottom: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}

.row-connector-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
  animation: rowConnectorDotUp 2.5s ease-in-out infinite;
}

/* row-to-row moving dots (legacy) */
@keyframes rowDotUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(-36px); /* move upward to next row */
  }
  100% {
    opacity: 0;
    transform: translateY(-36px);
  }
}

.row-moving-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px rgba(255,255,255,0.85);
  animation: rowDotUp var(--dot-speed, 3s) linear infinite;
}

@keyframes floatUpOnce {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-25px);
    opacity: 0;
  }
}

.particle {
  animation: floatUpOnce 3.5s linear infinite;
}

.ai-particle-dot {
  opacity: 0;
  animation-name: ai-particle-pulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes ai-particle-pulse {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  85% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

.ai-line-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 9999px;
  box-shadow: 0 0 12px 6px rgba(255,255,255,0.9);
  animation: travel linear infinite;
}

@keyframes travel {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) scale(0.4);
  }
  10% {
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.4);
  }
}

@keyframes travel-to-center {
  0% {
    left: var(--start-x);
    top: var(--start-y);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    left: var(--end-x);
    top: var(--end-y);
    opacity: 0;
  }
}

.moving-dot {
  opacity: 0;
  animation-name: travel-to-center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Floating animation for icons */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Trunk dot moving UP animation - synced with horizontal trunk dots */
@keyframes trunk-move-up {
  0% {
    top: calc(5rem + 6rem);
    opacity: 0;
  }
  5% {
    top: calc(5rem + 6rem);
    opacity: 1;
  }
  45% {
    top: 5rem;
    opacity: 1;
  }
  50% {
    top: 5rem;
    opacity: 0;
  }
  100% {
    top: 5rem;
    opacity: 0;
  }
}

.trunk-dot-up {
  animation: trunk-move-up 6s linear infinite;
}

/* Synced vertical column dots - travel up from branches to trunk line */
@keyframes columnDotUp {
  0% {
    top: calc(5rem + 6rem);
    opacity: 0;
  }
  5% {
    top: calc(5rem + 6rem);
    opacity: 1;
  }
  45% {
    top: 5rem;
    opacity: 1;
  }
  50% {
    top: 5rem;
    opacity: 0;
  }
  100% {
    top: 5rem;
    opacity: 0;
  }
}

.synced-column-dot {
  animation: columnDotUp 6s linear infinite !important;
  animation-delay: 0s !important;
}

/* Slow pulse animation for badge */
@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.badge-pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}

/* Inbox ring pulse animation - bigger scale */
@keyframes inbox-ring-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.inbox-ring-pulse {
  animation: inbox-ring-pulse 3s ease-in-out infinite;
}

/* Opacity-only pulse for scaled rings */
@keyframes ring-opacity-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.ring-opacity-pulse {
  animation: ring-opacity-pulse 3s ease-in-out infinite;
}

/* Typing indicator bouncing dots */
@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}

.typing-dot {
  animation: typing-bounce 1.4s ease-in-out infinite;
}

/* Connector dot moving up and down */
@keyframes connector-dot-move {
  0%, 100% {
    top: 10%;
  }
  50% {
    top: 70%;
  }
}

.connector-dot-animate {
  animation: connector-dot-move 3s ease-in-out infinite;
}

/* Arrow pulsing down to touch block */
@keyframes arrow-pulse {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.arrow-pulse {
  animation: arrow-pulse 1.5s ease-in-out infinite;
}

/* Horizontal trunk dots - left to center */
@keyframes trunkDotLeft {
  0% {
    left: 15.5%;
    opacity: 0;
  }
  5% {
    left: 15.5%;
    opacity: 1;
  }
  45% {
    left: 50%;
    opacity: 1;
  }
  50% {
    left: 50%;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 0;
  }
}

/* Horizontal trunk dots - right to center */
@keyframes trunkDotRight {
  0% {
    right: 15.5%;
    opacity: 0;
  }
  5% {
    right: 15.5%;
    opacity: 1;
  }
  45% {
    right: 50%;
    opacity: 1;
  }
  50% {
    right: 50%;
    opacity: 0;
  }
  100% {
    right: 50%;
    opacity: 0;
  }
}

/* trunk-dot-right class moved to bottom for sync */

/* Vertical dot moving up from below to center - synced with horizontal dots */
@keyframes trunkDotUp {
  0% {
    top: calc(5rem + 6rem);
    opacity: 0;
  }
  5% {
    top: calc(5rem + 6rem);
    opacity: 1;
  }
  45% {
    top: 5rem;
    opacity: 1;
  }
  50% {
    top: 5rem;
    opacity: 0;
  }
  100% {
    top: 5rem;
    opacity: 0;
  }
}

.trunk-dot-center-up {
  animation: trunkDotUp 6s linear infinite;
}

/* Big center dot that appears when all 3 dots merge, then travels up to inbox */
@keyframes centerDotUp {
  0%, 44% {
    top: 5rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  45% {
    top: 5rem;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
  50% {
    top: 5rem;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  90% {
    top: 0;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  95% {
    top: 0;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    top: 0;
    opacity: 0;
  }
}

.center-dot-up {
  animation: centerDotUp 6s linear infinite;
  animation-delay: 0s !important;
}

.trunk-dot-left {
  animation: trunkDotLeft 6s linear infinite;
  animation-delay: 0s !important;
}

.trunk-dot-right {
  animation: trunkDotRight 6s linear infinite;
  animation-delay: 0s !important;
}