@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter:wght@300..700&display=swap');
@import 'tailwindcss';

@theme {
  --color-primary: #5BA4D9;
  --color-primary-dark: #006494;
  --color-primary-light: #8EC5E8;
  --color-navy: #1C2B3A;
  --color-teal: #2EC4A0;
  --color-surface: #f8f9fa;
  --color-surface-low: #f3f4f5;
  --color-surface-high: #ffffff;
  --color-on-surface: #191c1d;
  --color-outline: #72787e;
  --color-outline-variant: #c2c7ce;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  --shadow-subtle: 0 20px 40px rgba(25, 28, 29, 0.06);
  --shadow-card: 0 4px 16px rgba(25, 28, 29, 0.04);
}

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-on-surface);
    background-color: var(--color-surface);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    letter-spacing: -0.02em;
  }
}

@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .label-md {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
}

/* ── Hero GPU-composited animations ──────────────────────────────────── */

@keyframes hero-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5px, -10px); }
}
@keyframes hero-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-6px, 7px); }
}
@keyframes hero-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hero-spin-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes hero-orbit-a {
  0%     { transform: translate(0px, 170px); }
  12.5%  { transform: translate(120px, 120px); }
  25%    { transform: translate(170px, 0px); }
  37.5%  { transform: translate(120px, -120px); }
  50%    { transform: translate(0px, -170px); }
  62.5%  { transform: translate(-120px, -120px); }
  75%    { transform: translate(-170px, 0px); }
  87.5%  { transform: translate(-120px, 120px); }
  100%   { transform: translate(0px, 170px); }
}
@keyframes cookie-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes hero-orbit-b {
  0%     { transform: translate(0px, -130px); }
  12.5%  { transform: translate(-90px, -90px); }
  25%    { transform: translate(-130px, 0px); }
  37.5%  { transform: translate(-90px, 90px); }
  50%    { transform: translate(0px, 130px); }
  62.5%  { transform: translate(90px, 90px); }
  75%    { transform: translate(130px, 0px); }
  87.5%  { transform: translate(90px, -90px); }
  100%   { transform: translate(0px, -130px); }
}

.hero-drift-a {
  animation: hero-drift-a 22s ease-in-out infinite;
  will-change: transform;
}
.hero-drift-b {
  animation: hero-drift-b 28s ease-in-out infinite;
  will-change: transform;
}
.hero-spin {
  animation: hero-spin 30s linear infinite;
  will-change: transform;
}
.hero-spin-reverse {
  animation: hero-spin-reverse 60s linear infinite;
  will-change: transform;
}
.hero-orbit-a {
  animation: hero-orbit-a 20s linear infinite;
  will-change: transform;
}
.hero-orbit-b {
  animation: hero-orbit-b 16s linear infinite;
  will-change: transform;
}
