@import "tailwindcss";

/* =============================================================================
   SilkCircuit Design Tokens
   ============================================================================= */

/* Base fallback - defaults to neon (must come FIRST for specificity) */
:root {
  --sc-purple: oklch(64% 0.31 328);
  --sc-magenta: oklch(70% 0.32 328);
  --sc-cyan: oklch(92% 0.16 180);
  --sc-coral: oklch(72% 0.22 350);
  --sc-yellow: oklch(95% 0.13 105);
  --sc-green: oklch(88% 0.23 145);
  --sc-red: oklch(68% 0.22 25);
  --sc-bg-base: oklch(10% 0.02 285);
  --sc-bg-dark: oklch(6% 0.015 285);
  --sc-bg-highlight: oklch(14% 0.025 285);
  --sc-bg-elevated: oklch(17% 0.03 285);
  --sc-bg-surface: oklch(21% 0.035 285);
  --sc-fg-primary: oklch(98% 0.005 110);
  --sc-fg-muted: oklch(62% 0.035 280);
  --sc-fg-subtle: oklch(42% 0.03 280);
  --background: var(--sc-bg-base);
  --foreground: var(--sc-fg-primary);
  --entity-pattern: var(--sc-purple);
  --entity-rule: var(--sc-red);
  --entity-template: var(--sc-cyan);
  --entity-tool: var(--sc-yellow);
  --entity-language: var(--sc-coral);
  --entity-topic: var(--sc-magenta);
  --entity-episode: var(--sc-green);
  --entity-knowledge-source: var(--sc-fg-muted);
}

/* -----------------------------------------------------------------------------
   Neon (Dark Theme) - The original SilkCircuit aesthetic
   ----------------------------------------------------------------------------- */
[data-theme="neon"] {
  /* Core palette - OKLCH for perceptual uniformity and P3 gamut */
  --sc-purple: oklch(64% 0.31 328);
  --sc-magenta: oklch(70% 0.32 328);
  --sc-cyan: oklch(92% 0.16 180);
  --sc-coral: oklch(72% 0.22 350);
  --sc-yellow: oklch(95% 0.13 105);
  --sc-green: oklch(88% 0.23 145);
  --sc-red: oklch(68% 0.22 25);

  /* Background hierarchy - deep purples */
  --sc-bg-base: oklch(10% 0.02 285);
  --sc-bg-dark: oklch(6% 0.015 285);
  --sc-bg-highlight: oklch(14% 0.025 285);
  --sc-bg-elevated: oklch(17% 0.03 285);
  --sc-bg-surface: oklch(21% 0.035 285);

  /* Foreground */
  --sc-fg-primary: oklch(98% 0.005 110);
  --sc-fg-muted: oklch(62% 0.035 280);
  --sc-fg-subtle: oklch(42% 0.03 280);

  /* Semantic */
  --background: var(--sc-bg-base);
  --foreground: var(--sc-fg-primary);

  /* Entity type colors */
  --entity-pattern: var(--sc-purple);
  --entity-rule: var(--sc-red);
  --entity-template: var(--sc-cyan);
  --entity-tool: var(--sc-yellow);
  --entity-language: var(--sc-coral);
  --entity-topic: var(--sc-magenta);
  --entity-episode: var(--sc-green);
  --entity-knowledge-source: var(--sc-fg-muted);
}

/* -----------------------------------------------------------------------------
   Dawn (Light Theme) - Warm, focused, professional
   ----------------------------------------------------------------------------- */
[data-theme="dawn"] {
  /* Core palette - adjusted for light backgrounds, higher contrast */
  --sc-purple: oklch(42% 0.28 300); /* Deeper purple for contrast */
  --sc-magenta: oklch(40% 0.26 340); /* Rich magenta */
  --sc-cyan: oklch(45% 0.16 200); /* Deeper teal */
  --sc-coral: oklch(50% 0.22 350); /* Vivid coral */
  --sc-yellow: oklch(52% 0.16 85); /* Golden, darker for contrast */
  --sc-green: oklch(45% 0.2 145); /* Deeper green */
  --sc-red: oklch(50% 0.24 25); /* Vivid red */

  /* Background hierarchy - clear visual separation
     dark: page body (soft gray)
     base: sidebar, containers
     elevated: cards (bright white to pop)
     highlight: hover states
     surface: deep areas, dividers */
  --sc-bg-dark: oklch(95% 0.01 290); /* Page body - soft lavender gray */
  --sc-bg-base: oklch(97% 0.008 290); /* Sidebar, containers */
  --sc-bg-elevated: oklch(100% 0 0); /* Cards - pure white for pop */
  --sc-bg-highlight: oklch(94% 0.015 290); /* Hover states */
  --sc-bg-surface: oklch(91% 0.02 290); /* Deep areas, dividers */

  /* Foreground - dark purple-grays, high contrast */
  --sc-fg-primary: oklch(18% 0.03 290); /* Near black */
  --sc-fg-muted: oklch(45% 0.04 290); /* Medium gray */
  --sc-fg-subtle: oklch(65% 0.03 290); /* Lighter gray for borders */

  /* Semantic */
  --background: var(--sc-bg-dark);
  --foreground: var(--sc-fg-primary);

  /* Entity type colors - same references, palette adjusts */
  --entity-pattern: var(--sc-purple);
  --entity-rule: var(--sc-red);
  --entity-template: var(--sc-cyan);
  --entity-tool: var(--sc-yellow);
  --entity-language: var(--sc-coral);
  --entity-topic: var(--sc-magenta);
  --entity-episode: var(--sc-green);
  --entity-knowledge-source: var(--sc-fg-muted);
}

@theme inline {
  /* Custom breakpoint for extra-small screens */
  --breakpoint-xs: 475px;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  --font-mono: var(--font-fira-code), "Fira Code", monospace;

  /* SilkCircuit colors for Tailwind */
  --color-sc-purple: var(--sc-purple);
  --color-sc-magenta: var(--sc-magenta);
  --color-sc-cyan: var(--sc-cyan);
  --color-sc-coral: var(--sc-coral);
  --color-sc-yellow: var(--sc-yellow);
  --color-sc-green: var(--sc-green);
  --color-sc-red: var(--sc-red);

  --color-sc-bg-base: var(--sc-bg-base);
  --color-sc-bg-dark: var(--sc-bg-dark);
  --color-sc-bg-highlight: var(--sc-bg-highlight);
  --color-sc-bg-elevated: var(--sc-bg-elevated);
  --color-sc-bg-surface: var(--sc-bg-surface);

  --color-sc-fg-primary: var(--sc-fg-primary);
  --color-sc-fg-muted: var(--sc-fg-muted);
  --color-sc-fg-subtle: var(--sc-fg-subtle);
}

/* =============================================================================
   Layout Shadows - Theme-aware depth effects
   ============================================================================= */

/* Dark mode defaults (neon) */
.shadow-header {
  box-shadow:
    0 4px 16px oklch(0% 0 0 / 0.4),
    0 2px 8px oklch(0% 0 0 / 0.3),
    inset 0 -1px 0 oklch(100% 0 0 / 0.05);
}

[data-theme="dawn"] .shadow-header {
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.06),
    0 2px 6px oklch(0% 0 0 / 0.04),
    0 0 0 1px oklch(0% 0 0 / 0.04);
}

.shadow-sidebar {
  box-shadow:
    4px 0 24px oklch(0% 0 0 / 0.5),
    8px 0 40px oklch(0% 0 0 / 0.3),
    inset -1px 0 0 oklch(100% 0 0 / 0.05);
}

[data-theme="dawn"] .shadow-sidebar {
  box-shadow:
    1px 0 3px oklch(0% 0 0 / 0.06),
    2px 0 8px oklch(0% 0 0 / 0.04),
    0 0 0 1px oklch(0% 0 0 / 0.04);
}

/* =============================================================================
   Card Depth System - Theme-aware shadows for visual hierarchy

   Dark (Neon): Deep shadows + inner highlights + colored glows
   Light (Dawn): Soft shadows + subtle borders + accent underlines
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base Card Shadow
   ----------------------------------------------------------------------------- */
.shadow-card {
  /* Dark mode: layered depth with inner glow */
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 2px 4px oklch(0% 0 0 / 0.3),
    0 4px 8px oklch(0% 0 0 / 0.2),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px oklch(100% 0 0 / 0.04);
}

[data-theme="dawn"] .shadow-card {
  /* Light mode: crisp, subtle shadow */
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.06),
    0 2px 4px oklch(0% 0 0 / 0.04),
    0 0 0 1px oklch(0% 0 0 / 0.06);
}

/* -----------------------------------------------------------------------------
   Elevated Card Shadow
   ----------------------------------------------------------------------------- */
.shadow-card-elevated {
  /* Dark mode: prominent lift with purple tint */
  box-shadow:
    0 2px 4px oklch(0% 0 0 / 0.4),
    0 4px 8px oklch(0% 0 0 / 0.3),
    0 8px 16px oklch(0% 0 0 / 0.25),
    0 12px 24px oklch(0% 0 0 / 0.15),
    0 0 0 1px color-mix(in oklch, var(--sc-purple) 15%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.08);
}

[data-theme="dawn"] .shadow-card-elevated {
  /* Light mode: elegant lift with subtle purple border */
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.08),
    0 4px 8px oklch(0% 0 0 / 0.06),
    0 8px 16px oklch(0% 0 0 / 0.04),
    0 0 0 1px color-mix(in oklch, var(--sc-purple) 20%, transparent);
}

/* -----------------------------------------------------------------------------
   Hover State Shadow
   ----------------------------------------------------------------------------- */
.shadow-card-hover {
  /* Dark mode: lifted with purple glow */
  box-shadow:
    0 2px 4px oklch(0% 0 0 / 0.4),
    0 4px 8px oklch(0% 0 0 / 0.35),
    0 8px 16px oklch(0% 0 0 / 0.25),
    0 16px 32px oklch(0% 0 0 / 0.15),
    0 0 20px color-mix(in oklch, var(--sc-purple) 20%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.08);
}

[data-theme="dawn"] .shadow-card-hover {
  /* Light mode: lifted with purple accent */
  box-shadow:
    0 2px 4px oklch(0% 0 0 / 0.08),
    0 4px 8px oklch(0% 0 0 / 0.06),
    0 8px 16px oklch(0% 0 0 / 0.05),
    0 0 0 1px color-mix(in oklch, var(--sc-purple) 30%, transparent);
}

/* -----------------------------------------------------------------------------
   Colored Glow Variants - For emphasis states
   ----------------------------------------------------------------------------- */

/* Purple Glow */
.shadow-glow-purple {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 2px 4px oklch(0% 0 0 / 0.3),
    0 4px 8px oklch(0% 0 0 / 0.2),
    0 0 16px color-mix(in oklch, var(--sc-purple) 30%, transparent),
    0 0 32px color-mix(in oklch, var(--sc-purple) 15%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px color-mix(in oklch, var(--sc-purple) 20%, transparent);
}

[data-theme="dawn"] .shadow-glow-purple {
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.08),
    0 4px 8px color-mix(in oklch, var(--sc-purple) 12%, transparent),
    0 0 0 1px color-mix(in oklch, var(--sc-purple) 35%, transparent);
}

/* Cyan Glow */
.shadow-glow-cyan {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 2px 4px oklch(0% 0 0 / 0.3),
    0 4px 8px oklch(0% 0 0 / 0.2),
    0 0 16px color-mix(in oklch, var(--sc-cyan) 25%, transparent),
    0 0 32px color-mix(in oklch, var(--sc-cyan) 12%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px color-mix(in oklch, var(--sc-cyan) 18%, transparent);
}

[data-theme="dawn"] .shadow-glow-cyan {
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.08),
    0 4px 8px color-mix(in oklch, var(--sc-cyan) 15%, transparent),
    0 0 0 1px color-mix(in oklch, var(--sc-cyan) 40%, transparent);
}

/* Coral Glow */
.shadow-glow-coral {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 2px 4px oklch(0% 0 0 / 0.3),
    0 4px 8px oklch(0% 0 0 / 0.2),
    0 0 16px color-mix(in oklch, var(--sc-coral) 28%, transparent),
    0 0 32px color-mix(in oklch, var(--sc-coral) 12%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px color-mix(in oklch, var(--sc-coral) 18%, transparent);
}

[data-theme="dawn"] .shadow-glow-coral {
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.08),
    0 4px 8px color-mix(in oklch, var(--sc-coral) 12%, transparent),
    0 0 0 1px color-mix(in oklch, var(--sc-coral) 35%, transparent);
}

/* Green Glow */
.shadow-glow-green {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 2px 4px oklch(0% 0 0 / 0.3),
    0 4px 8px oklch(0% 0 0 / 0.2),
    0 0 16px color-mix(in oklch, var(--sc-green) 22%, transparent),
    0 0 32px color-mix(in oklch, var(--sc-green) 10%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px color-mix(in oklch, var(--sc-green) 15%, transparent);
}

[data-theme="dawn"] .shadow-glow-green {
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.08),
    0 4px 8px color-mix(in oklch, var(--sc-green) 15%, transparent),
    0 0 0 1px color-mix(in oklch, var(--sc-green) 40%, transparent);
}

/* Red Glow */
.shadow-glow-red {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 2px 4px oklch(0% 0 0 / 0.3),
    0 4px 8px oklch(0% 0 0 / 0.2),
    0 0 16px color-mix(in oklch, var(--sc-red) 25%, transparent),
    0 0 32px color-mix(in oklch, var(--sc-red) 12%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px color-mix(in oklch, var(--sc-red) 18%, transparent);
}

[data-theme="dawn"] .shadow-glow-red {
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.08),
    0 4px 8px color-mix(in oklch, var(--sc-red) 12%, transparent),
    0 0 0 1px color-mix(in oklch, var(--sc-red) 35%, transparent);
}

/* Yellow Glow */
.shadow-glow-yellow {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.4),
    0 2px 4px oklch(0% 0 0 / 0.3),
    0 4px 8px oklch(0% 0 0 / 0.2),
    0 0 16px color-mix(in oklch, var(--sc-yellow) 20%, transparent),
    0 0 32px color-mix(in oklch, var(--sc-yellow) 10%, transparent),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px color-mix(in oklch, var(--sc-yellow) 15%, transparent);
}

[data-theme="dawn"] .shadow-glow-yellow {
  box-shadow:
    0 1px 3px oklch(0% 0 0 / 0.08),
    0 4px 8px color-mix(in oklch, var(--sc-yellow) 15%, transparent),
    0 0 0 1px color-mix(in oklch, var(--sc-yellow) 45%, transparent);
}

/* -----------------------------------------------------------------------------
   Ring Effect - Subtle border enhancement
   ----------------------------------------------------------------------------- */
.ring-card {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.3),
    0 2px 4px oklch(0% 0 0 / 0.2),
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    inset 0 0 0 1px oklch(100% 0 0 / 0.05);
}

[data-theme="dawn"] .ring-card {
  box-shadow:
    0 1px 2px oklch(0% 0 0 / 0.06),
    0 0 0 1px oklch(0% 0 0 / 0.08);
}

/* =============================================================================
   Base Styles
   ============================================================================= */

body {
  background: var(--sc-bg-dark);
  color: var(--sc-fg-primary);
  font-family: var(--font-sans);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sc-bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--sc-fg-subtle);
  border-radius: 4px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sc-fg-muted);
}

/* Selection */
::selection {
  background: color-mix(in oklch, var(--sc-purple) 40%, transparent);
}

/* Focus outline - subtle purple instead of bright cyan */
:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--sc-purple) 50%, transparent);
  outline-offset: 2px;
}

/* =============================================================================
   Typography
   ============================================================================= */

h1,
h2,
h3,
h4 {
  font-weight: 600;
  color: var(--sc-fg-primary);
}

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

/* =============================================================================
   Animations - Electric & Playful
   ============================================================================= */

/* Core animations */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 10px color-mix(in oklch, var(--sc-purple) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 20px color-mix(in oklch, var(--sc-purple) 50%, transparent);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

/* Shimmer effect for loaders and highlights */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Gradient rotation for borders */
@keyframes gradient-rotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Orbital spin for advanced loaders */
@keyframes orbital-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

/* Bounce in animation */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Spark burst effect */
@keyframes spark-burst {
  0% {
    opacity: 1;
    transform: scale(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.5) rotate(180deg);
  }
}

/* Glow pulse - softer than pulse-glow */
@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Logo glow - subtle breathing effect */
@keyframes logo-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(225, 53, 255, 0.3))
      drop-shadow(0 0 20px rgba(128, 255, 234, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(225, 53, 255, 0.5))
      drop-shadow(0 0 28px rgba(128, 255, 234, 0.25));
  }
}

.animate-logo-glow {
  animation: logo-glow 4s ease-in-out infinite;
  transition: filter 0.4s ease;
}

/* =============================================================================
   Logo Tagline - Collective Intelligence
   ============================================================================= */

@keyframes tagline-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes tagline-breathe {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.9;
  }
}

.tagline-word {
  background: linear-gradient(
    90deg,
    var(--sc-fg-muted) 0%,
    var(--sc-fg-muted) 45%,
    color-mix(in oklch, var(--sc-purple) 50%, var(--sc-fg-muted)) 50%,
    var(--sc-fg-muted) 55%,
    var(--sc-fg-muted) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tagline-shimmer 12s linear infinite;
  transition: filter 0.4s ease;
}

.tagline-word:nth-child(3) {
  animation-delay: 2s;
}

.tagline-word:nth-child(5) {
  animation-delay: 4s;
}

.tagline-separator {
  display: inline-block;
  color: var(--sc-fg-muted);
  opacity: 0.4;
  transition: opacity 0.4s ease;
}

/* Hover state - gentle brighten via filter */
a:hover .tagline-word {
  filter: brightness(1.3);
}

a:hover .tagline-separator {
  opacity: 0.6;
}

/* Wiggle for attention */
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

/* Electric scan line effect */
@keyframes scan-line {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Gradient shimmer for text */
@keyframes gradient-text {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Scale bounce on hover */
@keyframes scale-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Confetti celebration */
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotateZ(720deg);
  }
}

/* Utility animation classes */
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.animate-shake {
  animation: shake 0.5s ease-out;
}

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

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--sc-cyan) 20%, transparent),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

.animate-shimmer-slow {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--sc-purple) 8%, transparent),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 5s ease-in-out infinite;
}

.animate-gradient-rotate {
  background-size: 200% 200%;
  animation: gradient-rotate 3s ease infinite;
}

.animate-orbital {
  animation: orbital-spin 1.5s linear infinite;
}

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

.animate-bounce-in {
  animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

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

/* Accordion animations */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

/* Hover effects */
.hover-spark {
  position: relative;
  overflow: hidden;
}

.hover-spark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--sc-cyan) 40%, transparent),
    transparent 70%
  );
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    width 0.6s ease,
    height 0.6s ease,
    opacity 0.6s ease;
  pointer-events: none;
}

.hover-spark:hover::before {
  width: 300px;
  height: 300px;
  opacity: 1;
}

/* Gradient border animation */
.gradient-border {
  position: relative;
  background: var(--sc-bg-base);
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--sc-purple),
    var(--sc-cyan),
    var(--sc-coral),
    var(--sc-purple)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
  opacity: 1;
  animation: gradient-rotate 3s ease infinite;
  background-size: 200% 200%;
}

/* Electric scan effect for loading states */
.electric-scan {
  position: relative;
  overflow: hidden;
}

.electric-scan::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sc-cyan), transparent);
  animation: scan-line 2s ease-in-out infinite;
}

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, var(--sc-purple), var(--sc-cyan), var(--sc-coral));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-text 3s ease infinite;
}

/* Reduced motion support - respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* =============================================================================
   View Transitions - Smooth page navigation
   ============================================================================= */

@view-transition {
  navigation: auto;
}

/* Breadcrumb slides horizontally, fades content */
::view-transition-old(breadcrumb) {
  animation: 150ms ease-out fade-out;
}

::view-transition-new(breadcrumb) {
  animation: 150ms ease-in fade-in;
}

/* Main content fades smoothly */
::view-transition-old(page-content) {
  animation: 200ms ease-out fade-out;
}

::view-transition-new(page-content) {
  animation: 200ms ease-in 50ms fade-in;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
