/* ==========================================================================
   AKY Serv Services Limited — Site Styles
   Refined construction/engineering theme built on Tailwind CSS (CDN)
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

.font-display {
  font-family: 'Poppins', sans-serif;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
#site-header {
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}

#site-header.scrolled {
  box-shadow: 0 4px 24px -8px rgba(28, 25, 23, .25);
}

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

#mobile-menu.open {
  max-height: 28rem;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero-bg {
  background-image: linear-gradient(115deg, rgba(20, 16, 12, .94) 0%, rgba(48, 23, 6, .9) 45%, rgba(48, 23, 6, .82) 100%), url('../img/bg.jpeg');
  background-size: cover;
  background-position: center;
}

.page-hero-bg {
  background-image: linear-gradient(115deg, rgba(28, 22, 16, .92) 10%, rgba(48, 23, 6, .8) 100%), url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}

.hero-pattern {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0px, rgba(255, 255, 255, .035) 2px, transparent 2px, transparent 14px);
}

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll animation                                              */
/* ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ---------------------------------------------------------------------- */
/* Cards & utilities                                                       */
/* ---------------------------------------------------------------------- */
.card-hover {
  transition: transform .35s ease, box-shadow .35s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -16px rgba(28, 25, 23, .35);
}

.gradient-text {
  background: linear-gradient(90deg, #d9a14b 0%, #b07d4c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Portfolio gallery */
.gallery-item img {
  transition: transform .6s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  background: linear-gradient(180deg, rgba(28, 22, 16, 0) 35%, rgba(28, 22, 16, .85) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Filter buttons */
.filter-btn {
  background-color: #fff;
  color: #5E2D0C;
}

.filter-btn:hover {
  background-color: #F3E8DC;
}

.filter-btn.active {
  background-color: #8B4513;
  color: #fff;
  border-color: #8B4513;
}

/* Back to top */
#back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Lightbox */
#lightbox {
  background: rgba(15, 12, 10, .92);
}

/* Counter */
.counter-number {
  font-variant-numeric: tabular-nums;
}

/* Scrollbar accent */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #F3E8DC;
}

::-webkit-scrollbar-thumb {
  background: #8B4513;
  border-radius: 8px;
}