/*
 * Design tokens (ported from the Lovable export's styles.css) and custom
 * utility classes that the Tailwind CDN build can't express via its
 * JS config (keyframe-driven reveal effects, the topo background image,
 * and the small subset of tailwindcss-animate utilities actually used).
 */

:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  --font-sans: "Raleway", ui-sans-serif, system-ui, sans-serif;

  --background: oklch(1 0 0);
  --foreground: oklch(0.22 0.05 257);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.05 257);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.05 257);
  --primary: oklch(0.27 0.08 257);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.97 0.005 250);
  --secondary-foreground: oklch(0.27 0.08 257);
  --muted: oklch(0.97 0.005 250);
  --muted-foreground: oklch(0.48 0.02 250);
  --accent: oklch(0.55 0.13 150);
  --accent-foreground: oklch(0.99 0 0);
  --brand-green: oklch(0.55 0.13 150);
  --brand-green-foreground: oklch(0.99 0 0);
  --brand-navy: oklch(0.25 0.06 260);
  --brand-navy-foreground: oklch(0.99 0 0);
  --surface: oklch(0.985 0.005 150);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.92 0.01 250);
  --input: oklch(0.92 0.01 250);
  --ring: oklch(0.55 0.13 150);
}

* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Scroll-reveal effect (driven by assets/js/reveal.js) */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.reveal-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-image {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(10px);
  transition:
    opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

.reveal-image-in {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-image {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Topographic-line background pattern used on muted sections */

.bg-topo {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23144d2e' stroke-width='1' stroke-opacity='0.07'%3E%3Cpath d='M-40,60 Q80,-10 200,60 T440,60'/%3E%3Cpath d='M-40,100 Q80,30 200,100 T440,100'/%3E%3Cpath d='M-40,140 Q80,70 200,140 T440,140'/%3E%3Cpath d='M-40,180 Q80,110 200,180 T440,180'/%3E%3Cpath d='M-40,220 Q80,150 200,220 T440,220'/%3E%3Cpath d='M-40,260 Q80,190 200,260 T440,260'/%3E%3Cpath d='M-40,300 Q80,230 200,300 T440,300'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 320px 320px;
}

/* Minimal hand-written subset of tailwindcss-animate, covering only the
   utilities actually used (TechExplorer / ValueSelector panel transitions) */

@keyframes adri-enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, var(--tw-enter-translate-y, 0), 0);
  }
}

.animate-in {
  animation-name: adri-enter;
  animation-duration: 150ms;
  animation-fill-mode: both;
  --tw-enter-opacity: initial;
  --tw-enter-translate-y: initial;
}

.fade-in {
  --tw-enter-opacity: 0;
}

.slide-in-from-bottom-2 {
  --tw-enter-translate-y: 0.5rem;
}

.duration-500 {
  animation-duration: 500ms;
}