/* ================================================================
   Parchhai Art & Architecture Studio — Shared Stylesheet
   ================================================================ */

/* ── Accent Lines Under Section Headings ── */
.accent-line::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: #6E7C5C;
  margin-top: 16px;
}

.accent-line-center::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: #6E7C5C;
  margin: 16px auto 0;
}

.accent-line-light::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: rgba(110, 124, 92, 0.5);
  margin-top: 16px;
}

.accent-line-sm::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: #6E7C5C;
  margin-top: 12px;
}

/* ── Scroll Fade-Up Animation ── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero Cinematic Zoom (Homepage Only) ── */
@keyframes heroZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

.hero-bg {
  animation: heroZoom 22s ease-out forwards;
}

/* ── Homepage Portfolio Card Hover ── */
.portfolio-card .portfolio-overlay {
  opacity: 0;
  transition: opacity 300ms ease;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-card img {
  transition: transform 300ms ease;
}

.portfolio-card:hover img {
  transform: scale(1.04);
}

/* ── Button Transitions ── */
.btn-primary,
.btn-outline,
.btn-whatsapp {
  transition: all 250ms ease-in-out;
}

/* ── FAQ Accordion (Services Page) ── */
.faq-answer {
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 250ms ease;
}

/* ── Portfolio Page: Filter Pills ── */
.filter-btn {
  border: 1px solid #6E7C5C;
  color: #2A2A2A;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.filter-btn:hover {
  background: rgba(110, 124, 92, 0.08);
}

.filter-btn.active {
  background: #6E7C5C;
  color: #ffffff;
  border-color: #6E7C5C;
}

.filter-btn.active:hover {
  background: #5A6A48;
}

/* ── Portfolio Page: Gallery ── */
.gallery-item.hidden {
  display: none;
}

/* ── Portfolio Page: Lightbox ── */
#lightbox {
  display: none;
}

#lightbox.open {
  display: flex;
}

#lightboxImg {
  transition: opacity 200ms ease;
}

#lightboxImg.loading {
  opacity: 0;
}

/* ── Form Input Focus (Contact Page) ── */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #6E7C5C;
}