/* ========================================
   QATAR AC — Custom Styles
   (Tailwind CDN handles utilities)
======================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* ---------- Brand colours ---------- */
:root {
  --red:   #E13232;
  --dark:  #050614;
  --navy:  #213448;
}

/* ---------- Scroll-reveal animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

.animate-fadeInUp   { animation: fadeInUp 0.6s ease forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease forwards; }
.animate-fadeInRight{ animation: fadeInRight 0.6s ease forwards; }
.animate-scaleIn    { animation: scaleIn 0.5s ease forwards; }
.animate-ping       { animation: ping 1.5s ease-out infinite; }
.animate-bounce     { animation: bounce 1s ease-in-out infinite; }

/* Initially hidden for scroll reveal */
.reveal { opacity: 0; }
.reveal.visible { animation: fadeInUp 0.6s ease forwards; }
.reveal-left.visible  { animation: fadeInLeft 0.6s ease forwards; }
.reveal-right.visible { animation: fadeInRight 0.6s ease forwards; }
.reveal-scale.visible { animation: scaleIn 0.5s ease forwards; }

/* ---------- Header hide-on-scroll ---------- */
header.hide { transform: translateY(-100%); }
header      { transition: transform 0.3s ease; }

/* ---------- Service card hover ---------- */
.service-card:hover img { transform: scale(1.1); }
.service-card img       { transition: transform 0.7s ease; }

/* ---------- Gallery ---------- */
.gallery-item { display: block; }
.gallery-item.hidden { display: none; }

/* ---------- Blog filter ---------- */
.blog-card { display: flex; }
.blog-card.hidden { display: none; }

/* ---------- Line clamp ---------- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Dropdown ---------- */
.dropdown-menu {
  transform-origin: top;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.dropdown-menu.open { opacity: 1; transform: scaleY(1); visibility: visible; }
.dropdown-menu.closed { opacity: 0; transform: scaleY(0); visibility: hidden; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  transform-origin: top;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.mobile-menu.open { opacity: 1; transform: scaleY(1); visibility: visible; max-height: 85vh; overflow-y: auto; }
.mobile-menu.closed { opacity: 0; transform: scaleY(0); visibility: hidden; }

/* ---------- Mobile service accordion ---------- */
.mobile-service-list { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.mobile-service-list.open { max-height: 600px; }

/* ---------- Footer scroll-to-top ---------- */
.scroll-top-btn:hover { transform: translateX(-50%) translateY(-5px); }
.scroll-top-btn       { transition: transform 0.3s ease; }

/* ---------- Lightbox ---------- */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#lightbox.active { display: flex; }

/* ---------- Admin sidebar transition ---------- */
.admin-sidebar {
  transition: transform 0.3s ease;
}
.admin-sidebar.open { transform: translateX(0); }

/* ---------- Step vertical line ---------- */
.step-line {
  position: absolute;
  left: 1.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #E13232, #f87171, transparent);
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }