/* ==========================================================================
   Furaha Foods — animation system
   Recreates the Framer Motion behaviour from the Lovable build:
   - Reveal-on-scroll fade + rise (opacity 0->1, translateY 24px->0)
   - Progress line scaleX(0 -> 1)
   - CTA image scale(1.08 -> 1)
   - Accordion (single-open, animated height)
   - Header products dropdown + mobile drawer transitions
   ========================================================================== */

/* ---- Reveal elements (exact markers left in the exported markup) ------- */
[style="opacity:1"] {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[style="opacity:1"].fu-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* CTA banner image zoom-out */
[style="transform:scale(1.08)"] {
  transform: scale(1.08) !important;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
[style="transform:scale(1.08)"].fu-in {
  transform: scale(1) !important;
}

/* Process progress line */
[style="transform-origin:left;transform:scaleX(0)"] {
  transform: scaleX(0) !important;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
[style="transform-origin:left;transform:scaleX(0)"].fu-in {
  transform: scaleX(1) !important;
}

@media (prefers-reduced-motion: reduce) {
  [style="opacity:1"],
  [style="transform:scale(1.08)"],
  [style="transform-origin:left;transform:scaleX(0)"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Accordion (FAQ) — single-open, animated height --------------------- */
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary { list-style: none; cursor: pointer; }
.accordion-item summary::marker { content: ""; }

.accordion-item .accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.22s ease;
}
.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.accordion-item .accordion-panel-inner { overflow: hidden; min-height: 0; }

.accordion-item:not(.is-open) .chevron-icon {
  transform: rotate(0deg) !important;
  transition: transform 0.3s ease;
}
.accordion-item.is-open .chevron-icon { transform: rotate(180deg) !important; }

@media (prefers-reduced-motion: reduce) {
  .accordion-item .accordion-panel { transition: none; }
}

/* ---- Header: Products nav trigger — arrow + label highlight ------------- */
.group\/products button[aria-haspopup="true"] {
  transition: color 0.2s ease;
}
.group\/products button[aria-haspopup="true"] span {
  transition: color 0.2s ease;
}
.group\/products button[aria-expanded="true"],
.group\/products button[aria-expanded="true"] span {
  color: var(--emerald);
}
.group\/products button[aria-haspopup="true"] svg.lucide-chevron-down {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.group\/products button[aria-expanded="true"] svg.lucide-chevron-down {
  transform: rotate(180deg);
  animation: fuChevronBob 1.4s cubic-bezier(0.45, 0, 0.55, 1) 0.45s infinite;
}
@keyframes fuChevronBob {
  0%, 100% { transform: rotate(180deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .group\/products button[aria-haspopup="true"] svg.lucide-chevron-down {
    animation: none;
    transition: none;
  }
}

/* ---- Header: products dropdown ------------------------------------------ */
#products-panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
#products-panel.is-open {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Small gold dot that marks the current page inside the dropdown */
#products-panel a[role="menuitem"] .dropdown-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#products-panel a[role="menuitem"]:hover .dropdown-dot,
#products-panel a[role="menuitem"][aria-current="page"] .dropdown-dot {
  opacity: 1;
}

/* Whichever product page is currently open stays highlighted, not just on hover */
#products-panel a[role="menuitem"][aria-current="page"] {
  background-color: var(--wheat);
  color: var(--gold);
}

/* ---- Header: mobile drawer + overlay ------------------------------------ */
#mobile-overlay {
  opacity: 0;
  transition: opacity 0.28s ease;
}
#mobile-overlay.is-open {
  display: block !important;
  opacity: 1;
}
#mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
#mobile-drawer.is-open {
  display: block !important;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  #products-panel, #mobile-overlay, #mobile-drawer { transition: none; }
}

/* ---- Conditional form sections (Inquiry form) --------------------------- */
.fu-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s ease-out, opacity 0.22s ease-out;
}
.fu-collapse.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.fu-collapse > .fu-collapse-inner { overflow: hidden; min-height: 0; }

/* Success card entrance */
.fu-success-in {
  animation: fuSuccessIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fuSuccessIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fu-spin { animation: fuSpin 0.9s linear infinite; }
@keyframes fuSpin { to { transform: rotate(360deg); } }

/* "Products" nav dropdown label — bold on hover/open. */
.group\/products:hover > button > span,
.group\/products > button[aria-expanded="true"] > span,
.group\/products > button:focus-visible > span {
  font-weight: 700;
}

/* ---- Application section image cards --------------------------------- */
/* Fixed aspect ratio so the image height matches the text column height
   instead of towering over it (was relying on the image's native 4:3
   intrinsic size, which made images much taller than the accompanying
   copy and left blank space above/below the shorter text column). */
.app-media {
  aspect-ratio: 3 / 2;
  max-height: 440px;
}
.app-media img {
  height: 100%;
  width: 100%;
}
@media (max-width: 767px) {
  .app-media {
    aspect-ratio: 4 / 3;
    max-height: 340px;
  }
}

/* "Recognised Standards and Certifications" logos — sized up from the
   default h-14/md:h-[72px] (56px/72px) so the certification marks read
   more clearly. */
section[aria-label="Recognised standards and certifications"] li {
  height: 6rem; /* was 4rem (h-16) */
}
section[aria-label="Recognised standards and certifications"] img {
  height: 5rem; /* was 3.5rem (h-14) */
  width: auto;
}
@media (min-width: 768px) {
  section[aria-label="Recognised standards and certifications"] li {
    height: 7rem; /* was 5rem (md:h-20) */
  }
  section[aria-label="Recognised standards and certifications"] img {
    height: 6rem; /* was 4.5rem / 72px (md:h-[72px]) */
  }
}