/* ============================================
   TIA Luxury Cars — Custom CSS
   Styles that Tailwind CDN cannot handle.
   ============================================ */

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #a06b3f; border-radius: 3px; }

/* --- Selection --- */
::selection { background: #c9875d; color: #0a0a0a; }

/* ============================================
   Keyframe Animations
   ============================================ */

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(1.4); opacity: 0.4; }
}

@keyframes whatsappPing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes preloaderLine {
  0%   { width: 0; }
  100% { width: 100%; }
}

@keyframes preloaderSlideUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

@keyframes slideUp {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes counterPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* --- Scroll Indicator Line --- */
.scroll-indicator-line {
  background: linear-gradient(to bottom, #c9875d, transparent);
  animation: scrollPulse 2s ease-in-out infinite;
  transform-origin: top;
}

/* --- Preloader Logo Animation --- */
.preloader-logo {
  animation: fadeIn 0.8s ease forwards;
}
.preloader-line {
  animation: preloaderLine 1.2s 0.4s ease-out forwards;
  width: 0;
}

/* ============================================
   Custom Cursor
   ============================================ */

.cursor-dot,
.cursor-circle {
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  border-radius: 50%;
  top: 0;
  left: 0;
  will-change: transform;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: #c9875d;
}

.cursor-circle {
  width: 32px;
  height: 32px;
  border: 1.5px solid #c9875d;
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
}

body.custom-cursor-active { cursor: none; }
body.custom-cursor-active a,
body.custom-cursor-active button { cursor: none; }

/* ============================================
   Noise Texture Overlay
   ============================================ */

.noise-bg {
  position: relative;
}

.noise-bg > * {
  position: relative;
  z-index: 2;
}

.noise-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* ============================================
   Lightbox
   ============================================ */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-image-container {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
}

.lightbox-image-container img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  transform: scale(0.95);
  transition: transform 0.35s ease;
}

.lightbox-overlay.active .lightbox-image-container img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 9001;
  color: #fff;
  font-size: 1.75rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.lightbox-close:hover { opacity: 1; }

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9001;
  color: #fff;
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.lightbox-arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

.lightbox-arrow--prev { left: 1rem; }
.lightbox-arrow--next { right: 1rem; }

.lightbox-caption {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
}

/* ============================================
   Preloader
   ============================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader__logo {
  max-width: 120px;
  margin-bottom: 2rem;
}

.preloader__line {
  width: 160px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.preloader__line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #c9875d;
  animation: preloaderLine 2s ease-out forwards;
}

.preloader.done {
  animation: preloaderSlideUp 0.6s 0.15s ease-in forwards;
}

/* ============================================
   Accessibility — Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   Testimonial Carousel — Mobile Scroll Snap
   ============================================ */

.testimonial-carousel {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.testimonial-carousel::-webkit-scrollbar {
  display: none;
}

.testimonial-carousel > * {
  scroll-snap-align: center;
}

/* ============================================
   Video Hero
   ============================================ */

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.45) 0%,
    rgba(10, 10, 10, 0.2) 40%,
    rgba(10, 10, 10, 0.6) 100%
  );
  pointer-events: none;
}

/* ============================================
   Gallery image sharpness
   ============================================ */
.gallery-img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 500ms ease, filter 500ms ease;
  will-change: transform;
}
.group:hover .gallery-img {
  transform: scale(1.03) translateZ(0);
  filter: brightness(1.1);
}

/* ============================================
   Mobile: safe-area insets for fixed elements
   Keeps floating buttons clear of iPhone notch
   and home-indicator bar on iOS 11+ devices.
   ============================================ */
[data-whatsapp-btn] {
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  right: max(1.5rem, env(safe-area-inset-right));
}
[data-scroll-top] {
  bottom: max(6rem, calc(env(safe-area-inset-bottom) + 4.5rem));
  right: max(1.5rem, env(safe-area-inset-right));
}
[data-cookie-banner] {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================
   Landscape phones: keep hero readable when the
   viewport is short (iPhone SE / rotated iPhone 13).
   Uses svh so the URL bar doesn't eat content.
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  #hero {
    min-height: 100svh;
  }
}

/* ============================================
   Keyboard-visible focus outlines
   Only applied on focus-visible (keyboard), not
   on mouse/touch, so there's no visual noise.
   ============================================ */
[data-faq-toggle]:focus-visible {
  outline: 2px solid #c9875d;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   Fleet carousel
   ============================================ */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar { display: none; }

[data-fleet-dots] button[aria-current="true"] {
  background: #c9875d;
  width: 24px;
}