/*
Theme Name: Tara's limo by infyras
Theme URI: https://taraslimo.com
Author: infyras
Author URI: https://infyras.com
Description: Custom luxury transportation theme for Tara's Limo & Airport Service — Dallas, TX. Dark gold glassmorphism design with animated beams, auto-scroll gallery, and booking integration.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taras-limo
Tags: dark, luxury, transportation, custom-background, custom-logo, menu-support
*/

/* ============================================================
   FONT FACES – Self-hosted for performance
   ============================================================ */
@font-face {
  font-family: 'Bebas Neue';
  src: url('assets/fonts/bebas/bebas-neue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair/playfair-display-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair/playfair-display-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair/playfair-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/poppins/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/poppins/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/poppins/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   CSS DESIGN SYSTEM — VARIABLES
   ============================================================ */
:root {
  /* Color palette */
  --background: hsl(220, 8%, 8%);
  --foreground: hsl(60, 9%, 95%);
  --card: hsl(220, 10%, 12%);
  --card-foreground: hsl(60, 9%, 92%);
  --primary: hsl(45, 100%, 70%);
  --primary-foreground: hsl(220, 8%, 8%);
  --secondary: hsl(220, 8%, 18%);
  --muted: hsl(220, 10%, 15%);
  --muted-foreground: hsl(60, 5%, 65%);
  --accent: hsl(45, 100%, 70%);
  --border: hsl(220, 8%, 22%);
  --input: hsl(220, 10%, 20%);

  /* Radius */
  --radius: 0.75rem;

  /* Z-index hierarchy */
  --z-background: 0;
  --z-content: 10;
  --z-navbar: 50;
  --z-modal: 100;

  /* Typography */
  --font-hero: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Poppins', 'Helvetica Neue', sans-serif;
  --font-ui: 'Poppins', system-ui, sans-serif;

  /* Gradients */
  --gradient-luxury: linear-gradient(135deg, hsl(45, 100%, 70%), hsl(38, 95%, 68%));
  --gradient-dark: linear-gradient(135deg, hsl(220, 8%, 8%), hsl(220, 12%, 15%));

  /* Shadows */
  --shadow-luxury: 0 25px 50px -12px hsl(45 100% 70% / 0.3);
  --shadow-glow: 0 0 40px hsl(45 100% 70% / 0.35);
  --shadow-elegant: 0 15px 35px -10px hsl(220 20% 5% / 0.9);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

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

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

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.text-primary {
  color: var(--primary);
}

.text-muted {
  color: var(--muted-foreground);
}

.text-foreground {
  color: var(--foreground);
}

.font-hero {
  font-family: var(--font-hero);
}

.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

.font-ui {
  font-family: var(--font-ui);
}

.bg-card {
  background: linear-gradient(135deg, hsl(220, 10%, 12%/0.9), hsl(220, 8%, 8%/0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
}

.rounded {
  border-radius: var(--radius);
}

.shadow-luxury {
  box-shadow: var(--shadow-luxury);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes shine {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

@keyframes scroll-gallery {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  to {
    opacity: 1;
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px hsl(45 100% 70% / 0.3);
  }

  50% {
    box-shadow: 0 0 40px hsl(45 100% 70% / 0.6);
  }
}