/* =====================================================================
   CA TradePoint - Multi-page HTML/CSS website
   Converted from Next.js + Tailwind + framer-motion source.
   All visual styling preserved 1:1.
   ===================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- Tailwind Play CDN (preserves all utility classes) ---------- */
/* Loaded via <script src="https://cdn.tailwindcss.com"></script> in HTML  */

/* ---------- Custom theme tokens (from globals.css :root) ---------- */
:root {
  --radius: 0.75rem;

  --background: #ffffff;
  --foreground: #1a1d2b;
  --card: #ffffff;
  --card-foreground: #1a1d2b;
  --popover: #ffffff;
  --popover-foreground: #1a1d2b;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #f3f4f6;
  --secondary-foreground: #1f2535;
  --muted: #f3f4f6;
  --muted-foreground: #5b6478;
  --accent: #eef2ff;
  --accent-foreground: #1f2535;
  --destructive: #ef4444;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: #2563eb;

  /* Brand utility colors */
  --brand-blue: #0067ff;
  --brand-blue-dark: #005ee9;
  --brand-navy: #0f172a;
  --brand-slate: #364151;
  --brand-light-blue: #e7f6ff;
  --brand-near-black: #070614;
  --brand-gray-blue: #d1dae5;
}

/* ---------- Base body / typography (from globals.css @layer base) ---------- */
* {
  border-color: var(--border);
  outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
}
html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* ---------- Font display utility ---------- */
.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }
.font-sans { font-family: 'Inter', system-ui, sans-serif; }

/* ---------- Brand color utilities ---------- */
.text-brand-navy { color: var(--brand-navy); }
.bg-brand-navy { background-color: var(--brand-navy); }
.bg-brand-blue { background-color: var(--brand-blue); }
.text-brand-blue { color: var(--brand-blue); }
.bg-brand-light-blue { background-color: var(--brand-light-blue); }
.border-brand-blue { border-color: var(--brand-blue); }

/* ---------- Gradient utilities (from globals.css @layer utilities) ---------- */
.gradient-brand {
  background: linear-gradient(135deg, #0067ff 0%, #005ee9 50%, #0048c7 100%);
}
.gradient-navy {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}
.gradient-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 103, 255, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0, 94, 233, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
}
.gradient-text {
  background: linear-gradient(135deg, #0067ff 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gradient-mesh {
  background-color: #0f172a;
  background-image:
    radial-gradient(at 20% 30%, rgba(0, 103, 255, 0.35) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(56, 189, 248, 0.25) 0px, transparent 50%),
    radial-gradient(at 60% 80%, rgba(0, 94, 233, 0.3) 0px, transparent 50%),
    radial-gradient(at 10% 90%, rgba(99, 102, 241, 0.2) 0px, transparent 50%);
}

/* ---------- Glass card ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Shimmer ---------- */
.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

/* ---------- Pulse ring (floating WhatsApp) ---------- */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.7; }
}
.animate-pulse-ring {
  animation: pulse-ring 2.5s ease-in-out infinite;
}

/* ---------- Gradient shift ---------- */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* ---------- Generic pulse (for eyebrow dots) ---------- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* =====================================================================
   Framer-motion replacement: scroll-reveal + entrance animations
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Floating hero cards ---------- */
@keyframes floatCard-1 {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(0); }
}
@keyframes floatCard-2 {
  0%, 100% { transform: translateY(12px); }
  50% { transform: translateY(0); }
}
@keyframes floatCard-3 {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(0); }
}
@keyframes floatCard-4 {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(0); }
}
.float-card-1 { animation: floatCard-1 5s ease-in-out infinite; }
.float-card-2 { animation: floatCard-2 5s ease-in-out infinite; }
.float-card-3 { animation: floatCard-3 5s ease-in-out infinite; }
.float-card-4 { animation: floatCard-4 5s ease-in-out infinite; }

/* ---------- Animated hero blobs ---------- */
@keyframes blobA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,-40px)} }
@keyframes blobB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,60px)} }
@keyframes blobC { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-60px)} }
.blob-a { animation: blobA 20s ease-in-out infinite; }
.blob-b { animation: blobB 24s ease-in-out infinite; }
.blob-c { animation: blobC 18s ease-in-out infinite; }

/* ---------- Scroll indicator ---------- */
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.scroll-dot { animation: scrollDot 1.6s ease-in-out infinite; }

/* ---------- Slow spin (solar sun, etc.) ---------- */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 30s linear infinite; }
.spin-slow-20 { animation: spin-slow 20s linear infinite; }

/* ---------- Drop animation (water droplet) ---------- */
@keyframes drop {
  0% { transform: translateY(10px); opacity: 0.6; }
  100% { transform: translateY(30px); opacity: 0; }
}
.water-drop { animation: drop 2s ease-out infinite; }

/* ---------- Suction visualisation ---------- */
@keyframes suction {
  0% { transform: translateY(40px); opacity: 0; }
  50% { opacity: 0.6; }
  100% { transform: translateY(0); opacity: 0; }
}
.suction { animation: suction 1.8s ease-out infinite; }

/* ---------- Bounce-y for chimney visual ---------- */
@keyframes bounce-y-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.bounce-y-soft { animation: bounce-y-soft 4s ease-in-out infinite; }

/* ---------- Spinner (form submit) ---------- */
@keyframes spin-fast {
  to { transform: rotate(360deg); }
}
.spinner {
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 9999px;
  width: 20px;
  height: 20px;
  display: inline-block;
  animation: spin-fast 1s linear infinite;
}

/* ---------- Custom scrollbar ---------- */
.scrollbar-custom::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-custom::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.scrollbar-custom::-webkit-scrollbar-thumb { background: var(--brand-blue); border-radius: 4px; }
.scrollbar-custom::-webkit-scrollbar-thumb:hover { background: var(--brand-blue-dark); }

/* ---------- Text balance ---------- */
.text-balance { text-wrap: balance; }

/* ---------- Line clamp helpers (Tailwind utility fallback) ---------- */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Header scrolled state ---------- */
.header-scrolled {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

/* ---------- Mobile menu open animation ---------- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}
.mobile-menu.open {
  max-height: calc(100vh - 4rem);
  opacity: 1;
}

/* ---------- Dropdown menu animation ---------- */
.dropdown-panel {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.dropdown-wrap:hover .dropdown-panel,
.dropdown-wrap:focus-within .dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Floating top button fade in ---------- */
.fab-top {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fab-top.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ---------- Form input base (mimics shadcn Input) ---------- */
.form-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 30%, transparent);
}
.form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  outline: none;
  resize: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 30%, transparent);
}
.form-select {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 2rem;
}
.form-select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 30%, transparent);
}

/* ---------- Toast notification (for contact form) ---------- */
.toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  max-width: 22rem;
}
.toast.show { transform: translateX(0); }
.toast-title { font-weight: 600; color: var(--brand-navy); }
.toast-desc { font-size: 0.875rem; color: #5b6478; margin-top: 0.25rem; }

/* ---------- Tooltip under hero heading (animated svg path) ---------- */
@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}
.draw-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawPath 1s ease 0.8s forwards;
}

/* ---------- Hide scroll indicator on small screens ---------- */
@media (max-width: 1023px) {
  .lg-only { display: none !important; }
}