/* Masters Global Inc. — static build
   Custom design tokens + utilities layered on top of Tailwind CDN */

:root {
  --background: #050505;
  --foreground: #f4efe5;
  --surface: #101010;
  --surface-elevated: #191919;
  --muted: #1a1a1a;
  --muted-foreground: #8a8a8a;
  --border: #262626;
  --primary: #dc2f2b;              /* bold red */
  --primary-foreground: #f6f1e6;
  --secondary: #1e3fa3;             /* deep blue */
  --secondary-foreground: #f6f1e6;
  --accent: #f4a51a;                /* amber */
  --accent-foreground: #0f0f0f;
  --canvas: #10b981;                /* emerald */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Satoshi', system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-heading {
  font-family: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

::selection { background: var(--primary); color: var(--primary-foreground); }

/* Print / noise texture overlay */
.noise-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Custom color utilities that mirror tailwind config */
.bg-background { background-color: var(--background); }
.bg-surface { background-color: var(--surface); }
.bg-surface-elevated { background-color: var(--surface-elevated); }
.bg-muted { background-color: var(--muted); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-canvas { background-color: var(--canvas); }
.text-foreground { color: var(--foreground); }
.text-foreground\/80 { color: rgba(244,239,229,0.8); }
.text-foreground\/70 { color: rgba(244,239,229,0.7); }
.text-foreground\/60 { color: rgba(244,239,229,0.6); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.text-canvas { color: var(--canvas); }
.border-border { border-color: var(--border); }
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-accent { border-color: var(--accent); }
.border-canvas { border-color: var(--canvas); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Reveal animation (Intersection Observer applies .in-view) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.22,0.61,0.36,1), transform 0.9s cubic-bezier(0.22,0.61,0.36,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* Line reveal for headings */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(0.22,0.61,0.36,1); }
.line-mask.in-view > span,
.in-view .line-mask > span { transform: translateY(0); }

/* Marquee */
.marquee { display: flex; overflow: hidden; gap: 3rem; padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.marquee__track { display: flex; gap: 3rem; flex-shrink: 0; animation: marquee 28s linear infinite; padding-right: 3rem; }
.marquee__item { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: clamp(3rem, 7vw, 7rem); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; -webkit-text-stroke: 1.5px rgba(244,239,229,0.5); color: transparent; }
.marquee__item.accent { -webkit-text-stroke: 1.5px var(--primary); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Nav */
.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--primary); transition: width 0.3s ease; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Satoshi', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; padding: 1rem 2rem; border-radius: 999px; transition: all 0.3s ease; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--foreground); color: var(--background); }
.btn-outline { border-color: var(--border); color: var(--foreground); background: transparent; }
.btn-outline:hover { border-color: var(--foreground); }
.btn-light { background: var(--foreground); color: var(--background); }
.btn-light:hover { background: var(--primary); color: var(--primary-foreground); }
.btn svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.btn:hover svg { transform: translateX(4px); }

/* Product band border-hover accents */
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:border-secondary:hover { border-color: var(--secondary); }
.hover\:border-accent:hover { border-color: var(--accent); }
.hover\:border-canvas:hover { border-color: var(--canvas); }

/* Card hover lift for team monogram cards */
.team-card { transition: border-color 0.5s ease, background 0.5s ease; }
.team-card:hover .team-monogram { opacity: 0.9; }
.team-card:hover .team-bio { max-height: 240px; opacity: 1; }
.team-monogram { opacity: 0.2; transition: opacity 0.5s ease; }
.team-bio { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease; }

/* Founder monogram huge letter */
.founder-mono { font-size: clamp(8rem, 22vw, 16rem); font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: rgba(220,47,43,0.10); font-family: 'Cabinet Grotesk', sans-serif; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, .marquee__track { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .line-mask > span { transform: none; }
}

/* Utility: aspect ratios */
.aspect-16-10 { aspect-ratio: 16 / 10; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-1-1 { aspect-ratio: 1 / 1; }

/* Image overlay/clip */
.clip-img { position: relative; overflow: hidden; background: var(--surface); }
.clip-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22,0.61,0.36,1); }
.clip-img:hover img { transform: scale(1.03); }

/* Gradient art fills for products without real screens */
.art-trinity { background: radial-gradient(circle at 20% 20%, #dc2f2b 0%, transparent 40%), radial-gradient(circle at 80% 70%, #1e3fa3 0%, transparent 45%), linear-gradient(135deg, #0f0f0f, #1a1a1a); }
.art-canvas  { background: radial-gradient(circle at 70% 30%, #10b981 0%, transparent 45%), radial-gradient(circle at 20% 80%, #f4a51a 0%, transparent 40%), linear-gradient(135deg, #0d0d0d, #191919); }

/* Container */
.container { max-width: 1400px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 768px) { .container { padding-left: 2.5rem; padding-right: 2.5rem; } }

/* Form inputs */
.input {
  width: 100%; border: 1px solid var(--border); background: var(--surface);
  padding: 1rem 1.25rem; color: var(--foreground); font-family: 'Satoshi', sans-serif; font-size: 1rem;
  transition: border-color 0.3s ease; outline: none;
}
.input:focus { border-color: var(--primary); }
.input::placeholder { color: var(--muted-foreground); }

/* Mobile nav */
.mobile-nav { display: none; }
.mobile-nav.open { display: block; }

/* Small helpers */
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }