@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* ==========================================================================
   Design Tokens & CSS Variables
   ========================================================================== */
:root {
  --color-primary: #bc000a;
  --color-primary-container: #e61919;
  --color-on-primary: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-dim: #d9dadb;
  --color-surface-bright: #f8f9fa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4f5;
  --color-surface-container: #edeeef;
  --color-surface-container-high: #e7e8e9;
  --color-surface-container-highest: #e1e3e4;
  --color-on-surface: #191c1d;
  --color-on-surface-variant: #5e3f3b;
  --color-inverse-surface: #2e3132;
  --color-inverse-on-surface: #f0f1f2;
  --color-outline: #936e69;
  --color-outline-variant: #e8bcb6;
  --color-surface-tint: #c0000b;
  --color-secondary: #2b2d30;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #e0dfe4;
  --color-on-secondary-container: #626267;
  --color-secondary-fixed: #e3e2e7;
  --color-on-secondary-fixed-variant: #46474b;
  --color-tertiary: #5a5c5e;
  --color-background: #f8f9fa;
  --color-on-background: #191c1d;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 24px;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button {
  cursor: pointer;
  background-color: transparent;
  background-image: none;
}

ul, ol {
  list-style: none;
}

/* Material Symbols icon helper */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Site Logo */
.site-logo {
  height: 56px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
}

/* Velocity Red Bar */
.velocity-bar {
  width: 40px;
  height: 4px;
  background-color: var(--color-primary);
  margin-bottom: 1rem;
  transition: width 0.4s ease;
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  border-color: var(--color-primary);
  transform: translateY(-4px);
}

/* Hero & Section Overlays */
.bg-overlay-hero {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.48) 50%, rgba(0, 0, 0, 0.22) 100%);
}

.bg-overlay-banner {
  background: rgba(0, 0, 0, 0.6);
}

.bg-overlay-dark {
  background: rgba(0, 0, 0, 0.65);
}

.bg-overlay-cta {
  background: rgba(0, 0, 0, 0.50);
}

/* ==========================================================================
   Typography Classes
   ========================================================================== */
.font-display-lg { font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; }
.font-headline-lg { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; }
.font-headline-md { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; }
.font-body-lg { font-family: 'Inter', sans-serif; font-weight: 400; }
.font-body-md { font-family: 'Inter', sans-serif; font-weight: 400; }
.font-button { font-family: 'Inter', sans-serif; font-weight: 600; }
.font-label-caps { font-family: 'JetBrains Mono', monospace; font-weight: 600; }

.text-display-lg { font-size: 72px; line-height: 80px; letter-spacing: -0.04em; }
.text-headline-lg { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; }
.text-headline-md { font-size: 32px; line-height: 40px; }
.text-body-lg { font-size: 18px; line-height: 28px; }
.text-body-md { font-size: 16px; line-height: 24px; }
.text-button { font-size: 14px; line-height: 20px; }
.text-label-caps { font-size: 12px; line-height: 16px; letter-spacing: 0.1em; }

@media (max-width: 768px) {
  .text-display-lg { font-size: 42px; line-height: 48px; }
  .text-headline-lg { font-size: 32px; line-height: 40px; }
  .text-headline-md { font-size: 24px; line-height: 32px; }
}

/* ==========================================================================
   Color Utilities
   ========================================================================== */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.bg-primary\/10 { background-color: rgba(188, 0, 10, 0.1); }
.bg-primary\/15 { background-color: rgba(188, 0, 10, 0.15); }
.bg-primary\/20 { background-color: rgba(188, 0, 10, 0.2); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface\/90 { background-color: rgba(248, 249, 250, 0.9); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest); }
.bg-inverse-surface { background-color: var(--color-inverse-surface); }
.bg-white { background-color: #ffffff; }
.bg-black\/95 { background-color: rgba(0, 0, 0, 0.95); }
.bg-black\/85 { background-color: rgba(0, 0, 0, 0.85); }
.bg-black\/80 { background-color: rgba(0, 0, 0, 0.8); }
.bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }
.bg-black\/65 { background-color: rgba(0, 0, 0, 0.65); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-emerald-600 { background-color: #059669; }

.opacity-35 { opacity: 0.35; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-65 { opacity: 0.65; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }

.text-primary { color: var(--color-primary); }
.text-on-primary { color: var(--color-on-primary); }
.text-secondary { color: var(--color-secondary); }
.text-on-surface { color: var(--color-on-surface); }
.text-inverse-on-surface { color: var(--color-inverse-on-surface); }
.text-inverse-on-surface\/90 { color: rgba(240, 241, 242, 0.9); }
.text-inverse-on-surface\/85 { color: rgba(255, 255, 255, 0.9); }
.text-inverse-on-surface\/70 { color: rgba(240, 241, 242, 0.7); }
.text-white { color: #ffffff; }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }

.border-primary { border-color: var(--color-primary); }
.border-outline-variant { border-color: var(--color-outline-variant); }
.border-outline-variant\/30 { border-color: rgba(232, 188, 182, 0.3); }
.border-outline-variant\/50 { border-color: rgba(232, 188, 182, 0.5); }
.border-secondary-container { border-color: var(--color-secondary-container); }
.border-white { border-color: #ffffff; }

/* ==========================================================================
   Layout, Spacing & Sizing Utilities
   ========================================================================== */
.max-w-container-max { max-width: 1280px; }
.py-section-padding { padding-top: 100px; padding-bottom: 100px; }
@media (min-width: 768px) {
  .py-section-padding { padding-top: 120px; padding-bottom: 120px; }
}

.px-margin-desktop { padding-left: 64px; padding-right: 64px; }
@media (max-width: 767px) {
  .md\:px-margin-desktop { padding-left: 16px; padding-right: 16px; }
}

.gap-gutter { gap: 24px; }

/* Sticky Navbar */
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.z-10 { z-index: 10; }
.z-0 { z-index: 0; }

.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Navigation Links */
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  transition: color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 4px;
}

/* Animations */
.animate-fade-in {
  animation: fadeIn 0.8s ease-in-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 1rem;
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-secondary-container);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--color-on-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(188, 0, 10, 0.15);
}

/* Interactive Lightbox Modal */
#gig-lightbox {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#gig-lightbox.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#gig-lightbox.active #gig-lightbox-img {
  transform: scale(1) !important;
  opacity: 1 !important;
}