0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');




:root {
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
  --font-label: 'Jost', sans-serif;

  --background-50: 0.988 0.006 305;
  --background-100: 0.972 0.012 305;
  --background-200: 0.945 0.02 305;
  --background-300: 0.9 0.028 305;
  --background-400: 0.82 0.033 305;
  --background-500: 0.72 0.038 305;
  --background-600: 0.62 0.038 305;
  --background-700: 0.52 0.035 305;
  --background-800: 0.42 0.03 305;
  --background-900: 0.32 0.025 305;
  --background-950: 0.22 0.02 305;

  --primary-50: 0.965 0.018 308;
  --primary-100: 0.925 0.038 308;
  --primary-200: 0.855 0.065 309;
  --primary-300: 0.765 0.1 310;
  --primary-400: 0.63 0.14 311;
  --primary-500: 0.5 0.155 312;
  --primary-600: 0.44 0.145 312;
  --primary-700: 0.38 0.125 312;
  --primary-800: 0.31 0.1 312;
  --primary-900: 0.25 0.075 312;
  --primary-950: 0.17 0.05 312;

  --accent-50: 0.982 0.014 90;
  --accent-100: 0.955 0.035 88;
  --accent-200: 0.915 0.062 86;
  --accent-300: 0.875 0.085 84;
  --accent-400: 0.83 0.105 82;
  --accent-500: 0.785 0.115 80;
  --accent-600: 0.69 0.11 76;
  --accent-700: 0.57 0.1 70;
  --accent-800: 0.46 0.08 67;
  --accent-900: 0.37 0.06 65;
  --accent-950: 0.27 0.04 65;

  --secondary-50: 0.975 0.012 342;
  --secondary-100: 0.945 0.025 342;
  --secondary-200: 0.895 0.04 342;
  --secondary-300: 0.825 0.055 343;
  --secondary-400: 0.74 0.065 344;
  --secondary-500: 0.66 0.068 345;
  --secondary-600: 0.57 0.062 345;
  --secondary-700: 0.48 0.055 345;
  --secondary-800: 0.39 0.048 345;
  --secondary-900: 0.31 0.04 345;
  --secondary-950: 0.22 0.028 345;

  --foreground-50: 0.972 0.006 300;
  --foreground-100: 0.925 0.01 300;
  --foreground-200: 0.845 0.014 300;
  --foreground-300: 0.745 0.018 300;
  --foreground-400: 0.635 0.022 300;
  --foreground-500: 0.545 0.025 300;
  --foreground-600: 0.46 0.028 300;
  --foreground-700: 0.39 0.03 300;
  --foreground-800: 0.31 0.032 300;
  --foreground-900: 0.25 0.032 300;
  --foreground-950: 0.18 0.03 300;
}

body {
  font-family: var(--font-body);
  background: oklch(var(--background-50));
  color: oklch(var(--foreground-950));
}

html { scroll-behavior: smooth; }

.nl-extra-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-floaty { animation: floaty 5s ease-in-out infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.9s ease-out both; }

/* Oracle tarot card flip */
.tarot-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.tarot-inner.is-flipped {
  transform: rotateY(180deg);
}
.tarot-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tarot-front {
  transform: rotateY(180deg);
}

@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-soft-float { animation: softFloat 6s ease-in-out infinite; }