/* assets/css/main.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Jost:wght@300;400;500;600&family=Tajawal:wght@300;400;500;700&family=Libre+Baskerville:ital,wght@1,400;1,700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Brand - Red Urban */
  --color-brand-red:     #C7245B;
  --color-brand-dark:    #000000;

  /* Neutrals */
  --color-white:         #FFFFFF;
  --color-off-white:     #F5F5F5;
  --color-light-gray:    #F0EDE8;
  --color-mid-gray:      #9E9789;
  --color-dark-gray:     #1A1A1A;

  /* Transitions */
  --transition-smooth:   all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@layer base {
  body {
    @apply font-jost text-dark-gray bg-white antialiased;
    scroll-behavior: smooth;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-montserrat uppercase tracking-tight;
    font-weight: 800;
  }

  /* serif accent for project names */
  .font-serif-accent {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
  }

  /* RTL font family override when [dir="rtl"] is present */
  [dir="rtl"] body {
    @apply font-tajawal;
  }
}

@layer components {
  .btn-primary {
    @apply relative inline-block bg-brand-red text-white px-10 py-5 font-montserrat font-extrabold text-[0.8rem] tracking-[0.3em] uppercase overflow-hidden transition-all duration-500 z-10 text-center;
  }

  .btn-primary::after {
    content: '';
    @apply absolute inset-0 bg-black -translate-x-full transition-transform duration-500 ease-in-out -z-10;
  }

  .btn-primary:hover::after {
    @apply translate-x-0;
  }

  .btn-primary:hover {
    @apply tracking-[0.4em] shadow-xl;
  }

  .btn-outline {
    @apply relative inline-block bg-transparent text-brand-red border border-brand-red px-10 py-5 font-montserrat font-extrabold text-[0.8rem] tracking-[0.3em] uppercase overflow-hidden transition-all duration-500 z-10 text-center;
  }

  .btn-outline::after {
    content: '';
    @apply absolute inset-0 bg-brand-red -translate-x-full transition-transform duration-500 ease-in-out -z-10;
  }

  .btn-outline:hover::after {
    @apply translate-x-0;
  }

  .btn-outline:hover {
    @apply text-white tracking-[0.4em] shadow-xl;
  }

  /* Two-tone heading helper */
  .heading-split {
    @apply flex flex-wrap gap-x-3;
  }
  .heading-split span:first-child {
    @apply text-black;
  }
  .heading-split span:nth-child(2) {
    @apply text-brand-red;
  }

  .nav-link {
    @apply font-montserrat font-bold text-[0.8125rem] uppercase tracking-wider relative transition-colors duration-300;
  }

  /* Circular CTA Button (Signature live site element) */
  .circle-btn {
    @apply relative w-32 h-32 flex items-center justify-center rounded-full border border-black/10 transition-all duration-700 hover:border-brand-red hover:bg-brand-red/5;
    cursor: pointer;
  }
  
  .circle-btn-text {
    @apply absolute inset-0 w-full h-full;
    animation: spin 15s linear infinite;
  }

  .circle-btn svg:not(.circle-btn-text) {
    @apply transition-transform duration-500 ease-out;
  }
  
  .circle-btn:hover svg:not(.circle-btn-text) {
    transform: scale(1.2);
  }
}

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

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

@keyframes ken-burns {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.1) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}

.animate-ken-burns {
  animation: ken-burns 20s ease-in-out infinite;
}

.reveal {
  opacity: 0;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

/* Spotlight horizontal scroll */
.spotlight-strip {
  @apply flex overflow-x-auto gap-4 py-8 no-scrollbar;
  scroll-snap-type: x mandatory;
}
.spotlight-item {
  @apply flex-none w-[280px] h-[450px] relative overflow-hidden rounded-sm;
  scroll-snap-align: start;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  @apply bg-off-white;
}
::-webkit-scrollbar-thumb {
  @apply bg-brand-red/40 rounded-full hover:bg-brand-red/60;
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  background: rgba(199, 36, 91, 0.4);
  border: 1px solid rgba(199, 36, 91, 0.8);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: width 0.3s, height 0.3s, background 0.3s, opacity 0.3s;
}

.custom-cursor.active {
  width: 45px;
  height: 45px;
  background: rgba(199, 36, 91, 0.15);
}

/* Hero Form UI - Robust Premium Design */
.hero-form-input {
  display: block;
  width: 100%;
  background-color: #fcfcfc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  padding: 1.25rem 1.5rem;
  outline: none;
  transition: all 0.4s ease;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border-radius: 0;
}

.phone-input-group {
  display: flex !important;
  align-items: center;
  width: 100%;
  background-color: #fcfcfc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  border-radius: 0;
}

.phone-input-group .hero-form-input {
  border: none !important;
  background-color: transparent !important;
  flex: 1;
  padding-left: 0.5rem !important;
}

.country-code-select {
  width: auto !important;
  min-width: 90px;
  background-color: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 1.25rem 1.5rem 1.25rem 1rem !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-opacity='0.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  background-size: 0.7rem !important;
}

[dir="rtl"] .country-code-select {
  border-right: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 1.25rem 1rem 1.25rem 1.5rem !important;
  background-position: left 0.5rem center !important;
}

.phone-input-group:focus-within {
  background-color: #fff;
  border-color: #C7245B;
  border-bottom-color: #C7245B;
  box-shadow: 0 10px 30px -10px rgba(199, 36, 91, 0.15);
}

.hero-form-input:focus {
  background-color: #fff;
  border-color: #C7245B;
  border-bottom-color: #C7245B;
  box-shadow: 0 10px 30px -10px rgba(199, 36, 91, 0.15);
}

.hero-form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #000 !important;
  color: #fff !important;
  padding: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 0.7rem;
  border: none;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.hero-form-btn:hover {
  background-color: #C7245B !important;
  letter-spacing: 0.5em;
  box-shadow: 0 20px 40px -10px rgba(199, 36, 91, 0.4);
  transform: translateY(-2px);
}

.hero-form-btn:active {
  transform: scale(0.98);
}

/* Ensure select elements look consistent */
select.hero-form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-opacity='0.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 1rem;
}

/* RTL Adjustments */
[dir="rtl"] .hero-form-input {
  text-align: right;
}

[dir="rtl"] select.hero-form-input {
  background-position: left 1.5rem center;
}

/* Form Error States */
.hero-form-input.error {
  border-color: #C7245B;
  background-color: rgba(199, 36, 91, 0.05);
}