@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: #ffffff;
    --foreground: #1A1A2E;
    --primary: #2D5FA6;
    --primary-dark: #1e4a8a;
    --gold: #C9A84C;
    --warm-gray: #F7F5F2;
    --muted: #6B7280;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    color: #1A1A2E;
    background: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
  }
}

/* ─── Keyframes ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(1.2deg); }
  66%       { transform: translateY(-5px) rotate(-0.8deg); }
}

@keyframes float-alt {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  50%       { transform: translateY(-14px) rotate(-1.5deg) scale(1.03); }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(2.2);  opacity: 0; }
}

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

@keyframes gradient-flow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

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

@keyframes slide-left {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scale-pop {
  0%   { transform: scale(0.88); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

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

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
  50%       { box-shadow: 0 0 18px 4px rgba(201, 168, 76, 0.22); }
}

@keyframes border-flow {
  0%, 100% { border-color: rgba(45, 95, 166, 0.2); }
  50%       { border-color: rgba(201, 168, 76, 0.5); }
}

@keyframes line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── Scroll-triggered animations ─── */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Base — slide up (default) */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Slide from left */
  .animate-from-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .animate-from-left.visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Slide from right */
  .animate-from-right {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .animate-from-right.visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Scale pop in */
  .animate-scale-in {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.5s ease,
                transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .animate-scale-in.visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Fade only */
  .animate-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  .animate-fade-in.visible {
    opacity: 1;
  }

  /* Continuous float */
  .animate-float       { animation: float     5s ease-in-out infinite; }
  .animate-float-alt   { animation: float-alt 7s ease-in-out infinite 0.8s; }
  .animate-float-slow  { animation: float     9s ease-in-out infinite 2s; }

  /* Pulse ring */
  .animate-pulse-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid currentColor;
    animation: pulse-ring 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }

  /* Gold shimmer text */
  .text-shimmer {
    background: linear-gradient(90deg,
      #b8923e 0%, #e8c96a 30%, #C9A84C 50%, #f0d890 70%, #b8923e 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3.5s linear infinite;
  }

  /* Gradient button shimmer */
  .btn-shimmer {
    background-size: 200% auto;
    animation: gradient-flow 3s ease infinite;
  }

  /* Glow pulse on hover */
  .hover\:glow-gold:hover { animation: glow-pulse 1.6s ease-in-out infinite; }

  /* Growing underline accent */
  .line-grow {
    transform-origin: left center;
    animation: line-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Count-up fade */
  .animate-count-up {
    animation: count-up 0.6s ease both;
  }

  /* Stagger helpers */
  .delay-75  { transition-delay:  75ms !important; }
  .delay-150 { transition-delay: 150ms !important; }
  .delay-225 { transition-delay: 225ms !important; }
  .delay-300 { transition-delay: 300ms !important; }
  .delay-400 { transition-delay: 400ms !important; }
  .delay-500 { transition-delay: 500ms !important; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-from-left,
  .animate-from-right,
  .animate-scale-in,
  .animate-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-float,
  .animate-float-alt,
  .animate-float-slow,
  .text-shimmer,
  .btn-shimmer {
    animation: none;
  }
}