/* ============================================================
/* ============================================================
   Aisle — Home Page Animation CSS Additions
   Add these rules to the BOTTOM of Home.css
   (or paste into the <style> tag in Home.php)
============================================================ */

/* ── SECTION REVEAL HELPERS ──────────────────────────────────
   These complement the JS-driven IntersectionObserver animations.
   The JS adds opacity/transform via inline style; these CSS rules
   provide the easing and duration so transitions are smooth.
─────────────────────────────────────────────────────────── */

/* ── HERO SECTION ────────────────────────────────────────────
   The hero content starts invisible; JS triggers fade-up on load
─────────────────────────────────────────────────────────── */
.home-logo-section img,
.home-logo-section h1,
.home-logo-section p,
.home-group-btn {
  opacity: 0;
  transform: translateY(40px);
}

/* ── ABOUT SECTION ───────────────────────────────────────────
   Left-to-right slide for the header text
─────────────────────────────────────────────────────────── */
.about-subtitle,
.about-title,
.about-description {
  opacity: 0;
  transform: translateY(30px);
}

.about-card {
  opacity: 0;
  transform: translateY(40px);
}

.stat-item {
  opacity: 0;
  transform: scale(0.85);
}

/* ── SERVICE SECTION ─────────────────────────────────────────*/
.service-subtitle,
.service-title,
.service-description,
.slider-container {
  opacity: 0;
  transform: translateY(40px);
}

/* ── FAQ SECTION ─────────────────────────────────────────────
   FAQ items slide in from the left, one by one
─────────────────────────────────────────────────────────── */
.faq-subtitle,
.faq-title,
.faq-description {
  opacity: 0;
  transform: translateY(30px);
}

.faq-item {
  opacity: 0;
  transform: translateX(-40px);
  max-width: 100%;        /* ADD THIS */
  overflow: hidden;       /* ADD THIS */
}

/* ── FOOTER ──────────────────────────────────────────────────*/
.footer-brand,
.footer-column,
.footer-bottom {
  opacity: 0;
  transform: translateY(30px);
}

/* ── NAVBAR SCROLL STATE (base transition) ───────────────────*/
.menu-bar {
  transition:
    padding 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-bottom 0.35s ease;
}

/* ── VENDOR CARD HOVER — slide-up overlay ────────────────────
   Adds a "Browse Providers →" overlay on hover
─────────────────────────────────────────────────────────── */
.vendor-card {
  overflow: hidden;
}

.vendor-card .card-hover-overlay {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(212, 175, 55, 0.95) 0%,
    transparent 100%
  );
  padding: 16px;
  text-align: center;
  transition: bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 60%;
}

.vendor-card .card-hover-overlay span {
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.vendor-card:hover .card-hover-overlay {
  bottom: 0;
}

/* ── FAQ — CREAM BG INSTEAD OF BLACK ────────────────────────
   Override the current heavy black hover/active state
─────────────────────────────────────────────────────────── */
.faq-item:hover {
  background: #fdf8f0 !important;
  backdrop-filter: none;
}

.faq-item:hover .faq-question {
  color: #d4af37;
}

.faq-item.active {
  background: #fdf8f0 !important;
  border-color: #d4af37;
  border-left: 4px solid #d4af37;
}

.faq-item.active .faq-question {
  color: #9a7a2e;
}

.faq-item.active .faq-answer p {
  color: #333 !important;
}

/* ── STAT COUNTERS — gold emphasis ──────────────────────────*/
.stat-number {
  transition: color 0.3s ease;
}

/* ── BUTTON GROUP — stagger entrance ────────────────────────
   A tiny vertical line separator above CTA buttons
─────────────────────────────────────────────────────────── */
.home-group-btn::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #d4af37, transparent);
  margin-bottom: 24px;
  margin-left: 6px;
}

/* ── PAGE LOAD FLASH PREVENTION ─────────────────────────────
   Prevents content from flashing before JS initialises.
   JS removes this class from <body> on DOMContentLoaded.
─────────────────────────────────────────────────────────── */
body.aisle-loading * {
  animation-play-state: paused !important;
}