/*
 * Akola One website — design tokens + marketing animations.
 * Tokens mirror the app's shadcn/zinc + blue theme (packages/ui/globals.css),
 * expressed here as space-separated RGB channels so Tailwind opacity modifiers
 * (bg-primary/15, border-border, ...) work via `rgb(var(--x) / <alpha-value>)`
 * — see assets/tw-config.js.
 */

:root {
  --radius: 0.5rem;

  --background: 255 255 255;
  --foreground: 20 20 23;
  --card: 255 255 255;
  --card-foreground: 20 20 23;
  --popover: 255 255 255;
  --popover-foreground: 20 20 23;
  --primary: 37 99 235;          /* blue-600 */
  --primary-foreground: 248 250 252;
  --secondary: 244 244 245;
  --secondary-foreground: 39 39 42;
  --muted: 244 244 245;
  --muted-foreground: 113 113 122;
  --accent: 244 244 245;
  --accent-foreground: 39 39 42;
  --destructive: 220 38 38;
  --destructive-foreground: 250 250 250;
  --border: 228 228 231;
  --input: 228 228 231;
  --ring: 37 99 235;

  color-scheme: light;
}

.dark {
  --background: 9 9 11;
  --foreground: 250 250 250;
  --card: 24 24 27;
  --card-foreground: 250 250 250;
  --popover: 24 24 27;
  --popover-foreground: 250 250 250;
  --primary: 59 130 246;         /* blue-500 */
  --primary-foreground: 248 250 252;
  --secondary: 39 39 42;
  --secondary-foreground: 250 250 250;
  --muted: 39 39 42;
  --muted-foreground: 161 161 170;
  --accent: 39 39 42;
  --accent-foreground: 250 250 250;
  --destructive: 239 68 68;
  --destructive-foreground: 250 250 250;
  --border: 39 39 42;
  --input: 63 63 70;
  --ring: 59 130 246;

  color-scheme: dark;
}

html { scroll-behavior: smooth; }

body {
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

/* Thin, theme-aware scrollbars (mirrors the app). */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgb(var(--muted-foreground) / 0.35);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--muted-foreground) / 0.55); }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--muted-foreground) / 0.35) transparent; }

/* ---------------------------------------------------------------- keyframes */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes aurora { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, -30px) scale(1.2); } }
@keyframes gradient-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes blob {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33% { border-radius: 62% 38% 41% 59% / 58% 63% 37% 42%; }
  66% { border-radius: 38% 62% 58% 42% / 63% 41% 59% 37%; }
}
@keyframes glow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dash { 0% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 0; } }
@keyframes spin-cw { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------- animation utility classes
   (defined here rather than via Tailwind so the CDN needn't generate them) */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float 9s ease-in-out infinite; }
.animate-marquee { animation: marquee 34s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 40s linear infinite; }
.animate-aurora { animation: aurora 16s ease-in-out infinite alternate; }
.animate-gradient { animation: gradient-pan 6s ease infinite; }
.animate-blob { animation: blob 16s ease-in-out infinite; }
.animate-glow { animation: glow 4s ease-in-out infinite; }
.animate-slide-up { animation: slide-up 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-fade-in { animation: fade-in 0.6s ease forwards; }
.animate-dash { animation: dash 2s ease-in-out infinite; }
.animate-beam { animation: spin-cw 6s linear infinite; }

/* Gradient text helper (bg-clip-text with the brand gradient). */
.brand-gradient-text {
  background-image: linear-gradient(to right, rgb(var(--primary)), #6366f1, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
}

/* Scroll-reveal — JS toggles .is-visible via IntersectionObserver. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Product-tour progress bar fill. */
.tour-progress { animation: grow 3.8s linear forwards; transform-origin: left; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}