/* ========================================================================== 
   HAIKAL UNITED v1.4.2 — PERFORMANCE + FILTER MODAL
   Loaded last on public pages so it can safely override older presentation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Faster global motion defaults
   -------------------------------------------------------------------------- */
:root {
  --motion-page: .34s;
  --motion-page-fade: .42s;
  --motion-fast: .18s;
  --motion-ui: .28s;
  --motion-premium: .46s;
}

html {
  scrollbar-gutter: stable;
}

body {
  overflow-x: clip;
}

/* Keep the header premium without an expensive large-radius blur. */
.nav {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Faster page entrance and reveal. */
.reveal {
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--motion-premium) cubic-bezier(.2, .7, .2, 1),
    transform var(--motion-premium) cubic-bezier(.2, .7, .2, 1);
}

.reveal-section {
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .52s cubic-bezier(.2, .7, .2, 1),
    transform .52s cubic-bezier(.2, .7, .2, 1);
}

/* Avoid permanent GPU promotion on a background that only moves on desktop. */
.hero-bg {
  will-change: auto;
  transition: transform .12s linear;
}

@media (hover: hover) and (pointer: fine) {
  .hero:hover .hero-bg {
    will-change: transform;
  }
}

/* --------------------------------------------------------------------------
   02. Progressive rendering for sections below the fold
   -------------------------------------------------------------------------- */
@supports (content-visibility: auto) {
  main > .section:not(:first-child),
  .projects-section,
  .timeline-section,
  .applications-section,
  .specs-section,
  .quote-section,
  .product-tools-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}

/* Images that are not above the fold decode independently. */
.product-card img,
.project-card img,
.latest-card img,
.gallery-thumbnail img {
  image-rendering: auto;
}

/* --------------------------------------------------------------------------
   03. Catalog control bar
   -------------------------------------------------------------------------- */
.catalog-controlbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.catalog-controlbar .catalog-toolbar {
  min-width: 0;
  margin: 0;
}

.filter-modal-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 16px;
  border: 1px solid #d7dce1;
  border-radius: 15px;
  background: #fff;
  color: #111820;
  box-shadow: 0 8px 24px rgba(17, 24, 32, .06);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease,
    background var(--motion-ui) ease;
}

.filter-modal-trigger svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filter-modal-trigger:hover {
  transform: translateY(-2px);
  border-color: #c9933f;
  box-shadow: 0 12px 28px rgba(17, 24, 32, .09);
}

.filter-count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 999px;
  background: #111820;
  color: #fff;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   04. Filter modal — closed by default, polished on desktop
   -------------------------------------------------------------------------- */
html.filter-modal-open,
body.filter-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.filter-modal[hidden] {
  display: none;
}

.filter-modal {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}

.filter-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(7, 10, 14, .62);
  opacity: 0;
  cursor: default;
  transition: opacity .26s ease;
}

.filter-dialog {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 28px;
  background: #f8f6f1;
  color: #111820;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .24);
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(.985);
  transition:
    opacity .28s cubic-bezier(.2, .7, .2, 1),
    transform .32s cubic-bezier(.2, .7, .2, 1);
  -webkit-overflow-scrolling: touch;
}

.filter-modal.is-open .filter-modal-backdrop {
  opacity: 1;
}

.filter-modal.is-open .filter-dialog {
  opacity: 1;
  transform: none;
}

.filter-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.filter-dialog-head h2 {
  margin: 4px 0 7px;
  font-size: clamp(27px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.filter-dialog-head p {
  max-width: 620px;
  margin: 0;
  color: #6f7883;
}

.filter-kicker {
  color: #a7722d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
}

.filter-modal-close {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid #d9dde1;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition:
    transform var(--motion-ui) ease,
    background var(--motion-ui) ease,
    border-color var(--motion-ui) ease;
}

.filter-modal-close:hover {
  transform: rotate(6deg) scale(1.04);
  border-color: #c9933f;
  background: #fffdf9;
}

.filter-modal-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #111820;
}

.filter-modal-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.filter-modal-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* The old inline filter box is now the content of the modal. */
.filter-modal-form.advanced-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.filter-modal-form.advanced-filters label {
  color: #59636f;
  font-weight: 700;
}

.filter-modal-form.advanced-filters input,
.filter-modal-form.advanced-filters select {
  border-color: #d8dde2;
  background: #fff;
  color: #111820;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background var(--motion-fast) ease;
}

.filter-modal-form.advanced-filters input:focus,
.filter-modal-form.advanced-filters select:focus {
  border-color: #c9933f;
  box-shadow: 0 0 0 3px rgba(201, 147, 63, .13);
}

.filter-modal-form .filter-actions {
  padding-top: 8px;
}

.filter-modal-form .filter-actions .btn {
  min-width: 150px;
}

/* --------------------------------------------------------------------------
   05. Remove costly blur from floating catalog UI
   -------------------------------------------------------------------------- */
.compare-check {
  background: rgba(10, 14, 19, .94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.compare-tray {
  background: rgba(12, 17, 23, .985);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   06. Touch devices — keep the site alive, but not continuously expensive
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 980px) {
  .hero::before,
  .hero::after {
    animation: none !important;
  }

  .hero-bg {
    will-change: auto !important;
    transition: none;
  }

  .experience-hero .hero-bg,
  .hero > .hero-bg.has-photo,
  [dir="rtl"] .hero > .hero-bg.has-photo {
    animation-duration: 28s;
  }

  .interactive-card,
  .why-card,
  .latest-card,
  .timeline-item,
  .experience-card,
  .product-card,
  .btn {
    transition-duration: .24s;
  }

  .reveal {
    transform: translate3d(0, 14px, 0);
    transition-duration: .38s;
  }

  .reveal-section {
    transform: translate3d(0, 16px, 0);
    transition-duration: .42s;
  }

  .filter-modal {
    align-items: end;
    padding: 0;
  }

  .filter-dialog {
    width: 100%;
    max-height: min(88dvh, 820px);
    padding:
      22px
      max(18px, env(safe-area-inset-left))
      max(22px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-right));
    border: 0;
    border-radius: 28px 28px 0 0;
    transform: translate3d(0, 38px, 0);
  }

  .filter-dialog::before {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    margin: -8px auto 16px;
    border-radius: 999px;
    background: #d5d9dd;
  }

  .filter-dialog-head {
    gap: 16px;
  }

  .filter-dialog-head h2 {
    font-size: 28px;
  }

  .filter-modal-form.advanced-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-modal-form .filter-actions {
    position: sticky;
    bottom: -1px;
    z-index: 2;
    margin-inline: -4px;
    padding: 14px 4px 2px;
    background: linear-gradient(180deg, rgba(248,246,241,0), #f8f6f1 24%);
  }

  .catalog-controlbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .filter-modal-trigger {
    width: 100%;
  }

  .catalog-controlbar .catalog-toolbar {
    gap: 6px;
  }
}

@media (max-width: 620px) {
  .filter-modal-form.advanced-filters {
    grid-template-columns: 1fr;
  }

  .filter-modal-form .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .filter-modal-form .filter-actions .btn {
    min-width: 0;
    width: 100%;
  }

  .catalog-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   07. Motion accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .filter-modal-backdrop,
  .filter-dialog,
  .filter-modal-trigger,
  .filter-modal-close {
    transition: none !important;
  }
}

/* The filter form is revealed by its modal, not the page scroll observer. */
.filter-modal-form.reveal,
.filter-modal-form.reveal.in-view {
  opacity: 1;
  transform: none;
  transition: none;
}


/* --------------------------------------------------------------------------
   07. v1.4.5 visual coherence / contrast pass
   The cinematic hero uses a dark image overlay, so all hero copy and utility
   cards use a consistent light-on-dark palette instead of inheriting dark text.
   -------------------------------------------------------------------------- */
.experience-hero {
  color: #f8f5ef;
  background: #0d131a;
}
.experience-hero .hero-overlay {
  background:
    linear-gradient(90deg, rgba(8,12,17,.88), rgba(8,12,17,.58) 58%, rgba(8,12,17,.36)),
    linear-gradient(180deg, rgba(8,12,17,.16), rgba(8,12,17,.78));
}
[dir="rtl"] .experience-hero .hero-overlay {
  background:
    linear-gradient(270deg, rgba(8,12,17,.88), rgba(8,12,17,.58) 58%, rgba(8,12,17,.36)),
    linear-gradient(180deg, rgba(8,12,17,.16), rgba(8,12,17,.78));
}
.experience-hero .eyebrow { color: #d7a14c; }
.experience-hero h1 {
  color: #fbf8f2;
  text-shadow: 0 3px 22px rgba(0,0,0,.34);
}
.experience-hero p {
  color: rgba(242,245,248,.84);
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.experience-hero .btn.primary {
  background: #d09a43;
  border-color: #d09a43;
  color: #10151b;
}
.experience-hero .btn.primary:hover {
  background: #e6b45e;
  border-color: #e6b45e;
}
.experience-hero .btn.ghost {
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.94);
  color: #10151b;
}
.experience-hero .btn.ghost:hover {
  background: #fff;
  border-color: #e4b86c;
  color: #7a541d;
}
.experience-hero .hero-contact li {
  border-color: rgba(255,255,255,.16);
  background: rgba(12,18,25,.72);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.experience-hero .hero-contact strong { color: #fff; }
.experience-hero .hero-contact span { color: #aeb8c3; }
.experience-hero .hero-scroll-cue { color: rgba(255,255,255,.72); }

/* Keep the same black / ivory / warm-gold identity through dark sections. */
.section.dark .eyebrow,
.cinematic-cta .eyebrow { color: #d7a14c; }
.section.dark h2,
.section.dark h3,
.cinematic-cta h2 { color: #f8f5ef; }
.section.dark p,
.section.dark .lead,
.section.dark .section-copy,
.cinematic-cta p { color: #b9c2cc; }
.contact .eyebrow { color: #9b681f; }
.contact h2 { color: #151b22; }
.contact .lead { color: #59636e; }

@media (max-width: 680px) {
  .experience-hero .hero-overlay,
  [dir="rtl"] .experience-hero .hero-overlay {
    background:
      linear-gradient(180deg, rgba(8,12,17,.48) 0%, rgba(8,12,17,.77) 48%, rgba(8,12,17,.95) 82%, rgba(8,12,17,.98) 100%);
  }
  .experience-hero h1 { text-shadow: 0 3px 18px rgba(0,0,0,.4); }
  .experience-hero .hero-contact li { background: rgba(13,19,26,.82); }
}