/**
 * Global CSS Variables and Utilities for Encoders Theme.
 * Derived from Next.js Tailwind v4 configuration in CLT Appliance Repair.
 */

:root {
  /* Brand palette — warm gold + ivory + slate */
  --color-bg: #fbf8f1;
  --color-bg-soft: #f5efe1;
  --color-surface: #ffffff;
  --color-ink: #0c0f17;
  --color-ink-2: #1f2330;
  --color-muted: #5b6072;
  --color-line: #ebe3cd;
  --color-line-strong: #d9cfa4;

  /* Gold scale */
  --color-gold-50: #fdf8e6;
  --color-gold-100: #f8ecbf;
  --color-gold-200: #f0d985;
  --color-gold-300: #e7c351;
  --color-gold-400: #d4a72c;
  --color-gold-500: #b8881a;
  --color-gold-600: #966a10;
  --color-gold-700: #6e4e0b;

  /* Brand semantic mapping */
  --color-primary: var(--color-gold-400);
  --color-primary-strong: var(--color-gold-500);
  --color-primary-deep: var(--color-gold-700);
  --color-accent-navy: #0c1326;

  /* Typographic Variables */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-sans: 'Inter', sans-serif;

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(15, 18, 30, 0.04), 0 8px 24px rgba(15, 18, 30, 0.06);
  --shadow-pop: 0 10px 40px rgba(184, 136, 26, 0.18), 0 2px 6px rgba(15, 18, 30, 0.06);
}

/* Tasteful noise overlay used inside hero and backgrounds */
.noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* Glass card surface */
.glass {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(217, 207, 164, 0.6);
}

/* Radial masking for shader canvas overlays */
.hero-shader-mask {
  mask-image: radial-gradient(
    120% 80% at 50% 30%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: radial-gradient(
    120% 80% at 50% 30%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Infinite Marquee Animations */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}