/* ============ Base (from original index.css) ============ */
* {
    font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    background: #fbfaf8;
    color: #12204c;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #ffad06;
    border-radius: 999px;
}

/* Selection */
::selection {
    background: #c8a86a;
    color: #12204c ;
}

/* Homepage header, scrolled state — see the note in js/main.js next to
   updateHeader() for why this can't just be Tailwind utility classes. */
#site-header.header-scrolled {
    background-color: rgba(251, 250, 248, 0.9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Blueprint grid pattern */
.blueprint-grid {
    background-image: linear-gradient(to right, rgba(18,32,76,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,32,76,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Diagonal crosshatch — architectural concrete-section hatching, used behind the CTA panel */
.hatch-pattern {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 15px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 15px),
    repeating-linear-gradient(45deg, rgba(200,168,106,0.06) 0px, rgba(200,168,106,0.06) 1px, transparent 1px, transparent 60px);
}

/* Soft brand-blue glow — replaces a few flat navy backgrounds with subtle depth */
.glow-navy {
    background-image: radial-gradient(1100px 560px at 88% -12%, rgba(35,57,142,0.55), transparent 60%);
}

/* Hide scrollbar for carousel */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Technical line animation */
@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* ============ Runtime animation system (replaces Framer Motion) ============ */
/* Reveal-on-scroll: mirrors the original <Reveal> component
   (opacity 0 -> 1, translateY(y) -> 0, blur(8px) -> 0, 0.9s custom ease, per-instance delay) */
[data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-y, 24px));
    filter: blur(8px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform, filter;
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* Hero parallax + progress bar are transform-driven directly from JS (see js/main.js) */
#hero-parallax {
    will-change: transform;
}

#scroll-progress {
    transform: scaleX(0);
    transition: transform 0.08s linear;
}

/* Capacity bar fill */
#capacity-bar-fill {
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ Overlays / Drawers / Modals (replace AnimatePresence) ============ */
/* Position, z-index, background and blur are set per-element via each
   element's own Tailwind classes in the HTML (e.g. "fixed inset-0 bg-[...]
   backdrop-blur-[...] z-[...]"). This shared class must NOT hard-code those
   properties again: since this stylesheet loads after tailwind.css and the
   specificity is identical, doing so would silently override the intended
   per-element values (this previously forced every overlay to z-index:70 and
   blur(6px), which put the mobile menu's overlay above its own drawer and
   made the opened menu look blurry). Only the open/close animation lives here. */
.overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
}

.overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Positioning (fixed/top/right/width/z-index) comes from each element's own
   Tailwind classes in the HTML, exactly as in the original JSX — these two
   classes only add the slide transform, so nothing about placement/size changes. */
.drawer-anim-from-right {
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drawer-anim-from-right.is-open {
    transform: translateX(0);
}

.drawer-anim-from-left {
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.drawer-anim-from-left.is-open {
    transform: translateX(0);
}

.modal-center {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-center.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-card {
    transform: scale(0.96);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}

.modal-center.is-open .modal-card {
    transform: scale(1);
    opacity: 1;
}

.toast-wrap {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translate(-50%, 12px);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-wrap.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

body.no-scroll {
    overflow: hidden;
}

/* Page entrance — whole page fades in from white on first load */
#page-fade {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fbfaf8;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.8s ease;
}

#page-fade.is-hidden {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    #page-fade {
        display: none;
    }
}

.icon-svg:not(.hidden) {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============ Projects — Iran map with pins ============ */
.map-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease .15s;
}

.map-pin.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.map-pin-pulse {
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(225, 29, 46, 0.55);
    transform: translateX(-50%);
    animation: mapPinPulse 2.4s ease-out infinite;
}

@keyframes mapPinPulse {
    0% {
        opacity: .7;
        transform: translateX(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(3.2);
    }
}

.map-pin-icon {
    position: relative;
    width: 24px;
    height: 34px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-pin:hover .map-pin-icon,
.map-pin:focus-visible .map-pin-icon,
.map-pin.is-active .map-pin-icon {
    transform: translateY(-5px) scale(1.1);
}

.map-pin-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 172px;
    max-width: 226px;
    background: #fff;
    color: #12204c;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 11.5px;
    line-height: 1.6;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    white-space: normal;
}

.map-pin-tooltip small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(18, 32, 76, .55);
}

.map-pin-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
}

.map-pin:hover .map-pin-tooltip,
.map-pin:focus-visible .map-pin-tooltip,
.map-pin.is-active .map-pin-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.map-pin.is-active {
    z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
    .map-pin-pulse {
        animation: none;
    }
}

/* ===== Province hit-regions on the projects map ===== */
.map-province-chip.is-active-chip {
    background: #ffad06;
    color: #12204c;
    border-color: #ffad06;
}

#map-stage {
    cursor: pointer;
}

#map-stage:has(#map-zoom-group.is-zoomed) {
    cursor: default;
}

/* ===== "PROCESS — 04" section background artwork (desktop only, see index.html) =====
   Uses plain CSS instead of Tailwind arbitrary-value utility classes because this
   project's tailwind.css is a static, pre-compiled file (not the in-browser JIT the
   README describes) — classes not already present in the original design (e.g.
   bg-cover, bg-center, bg-[#fbfaf8]/78) compile to nothing and fail silently. */
.process-bg-image {
    background-image: url('../images/process-bg.jpg');
    background-size: cover;
    background-position: center 40%;
}

/* Mobile only: the image is much more tightly cropped on narrow/tall screens, and
   "center" ends up showing too much of the right-hand side of the photo. Shifting
   the horizontal focal point pulls the visible crop back toward the middle of the
   crane. Desktop/tablet (>=640px) are untouched — see the rule above. */
@media (max-width: 639px) {
  .process-bg-image {
    background-position: 25% 40%;
  }
}

.process-bg-tint {
    background-color: rgba(251, 250, 248, 0.66);
}

.process-bg-fade-bottom {
    background: linear-gradient(to top, #ecebe8 0%, rgba(236, 235, 232, 0) 100%);
}

/* ===== Navy-tinted muted text (readability fix for PROCESS section over the new
   background photo) — same approach as the process-bg-* rules above: these opacity
   variants of #12204c (18, 32, 76) aren't in the pre-compiled tailwind.css, so they
   need to be defined here directly instead of as Tailwind arbitrary-value classes. */
.text-navy-40 {
    color: rgba(18, 32, 76, 0.40);
}

.text-navy-50 {
    color: rgba(18, 32, 76, 0.50);
}

.text-navy-55 {
    color: rgba(18, 32, 76, 0.55);
}

/* "نمایش بیشتر" end-of-row tiles: mobile-only (see the media block below),
   hidden by default so tablet/desktop — which keep the original centered
   button below the grid — never see these. */
.products-more-tile,
.projects-more-tile {
    display: none;
}

/* ============ Mobile-only compaction (phones under 640px) ============
   Everything in this block is scoped to max-width:639px, matching Tailwind's
   own sm: breakpoint (640px). Tablet (>=640px) and desktop are completely
   untouched — this only shortens the page on phones, it never changes what
   content exists, only how it's laid out. */
@media (max-width: 639px) {

  /* --- 1. Turn stacked/2-col grids into horizontal swipe carousels ---
     #process-mobile-items is handled separately below (max-width:1023px) —
     see the note there for why it needs a wider range than the rest of
     these rows. #stat-cards-grid is NOT included here — it keeps its
     original grid-cols-2 layout (2x2) on phones too; see rule further
     below. --- */
  #services-grid,
  [data-paginate-products],
  #quality-steps-grid,
  #home-projects-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  #services-grid::-webkit-scrollbar,
  [data-paginate-products]::-webkit-scrollbar,
  #quality-steps-grid::-webkit-scrollbar,
  #home-projects-grid::-webkit-scrollbar {
    display: none;
  }

  /* Stat cards ("سال تجربه", "مساحت کارخانه", ...): stay a plain 2x2 grid on
     phones (same as tablet/desktop) instead of a horizontal scroll row, so
     all four are visible without needing to swipe. */
  #stat-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Homepage project cards: same idea as product cards below. */
  #home-projects-grid > [data-project-province] {
    flex: 0 0 85%;
    scroll-snap-align: start;
    height: 420px;
  }

  /* Service cards: one main card visible with a peek of the next. */
  #services-grid > div {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  /* Product cards: same idea; auto-rows-[320px] no longer applies in flex
     mode, so each card gets an explicit height instead. */
  [data-paginate-products] > [data-product-card] {
    flex: 0 0 85%;
    scroll-snap-align: start;
    height: 340px;
  }

  /* Quality / QC steps (Material, Production, Testing, Inspection, Delivery). */
  #quality-steps-grid > div {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  /* The flex item (the reveal-animation wrapper div) stretches to match the
     tallest card by default, but the visible blue card inside it doesn't fill
     that stretched height on its own — cards with less text end up shorter. */
  #quality-steps-grid > div > div {
    height: 100%;
  }

  /* "نمایش بیشتر" tiles at the end of the products / homepage-projects rows,
     replacing the centered button that used to sit below the grid on phones. */
  #products-load-more-wrap,
  #projects-show-more-wrap {
    display: none !important;
  }
  .products-more-tile,
  .projects-more-tile {
    display: flex;
    flex: 0 0 55%;
    scroll-snap-align: start;
  }
  .products-more-tile {
    height: 340px;
  }
  .projects-more-tile {
    height: 420px;
  }

  /* --- 2. "داستان بنا آفرین" story: collapse everything after the Mission
     card (Vision, Values, management quote, and the whole History timeline)
     behind a "نمایش بیشتر" button. Hidden only below 640px; tablet/desktop
     keep showing all of it exactly as before. --- */
  .about-mobile-collapsed {
    display: none;
  }

  /* --- 3. Tighter vertical rhythm between sections --- */
  .mobile-tight-py {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  #products,
  #services {
    margin-top: 2.25rem !important;
  }
}

/* ===== "فرآیند همکاری" (PROCESS) mobile timeline row =====
   Unlike the other rows above (services, products, projects, quality —
   which are real CSS Grids that reflow into 2/3 columns at tablet width via
   their own sm:/lg: classes, and only need the horizontal-swipe override on
   phones), #process-mobile-items has no such fallback layout: in the HTML
   it's an entirely separate "lg:hidden" block from the desktop 8-column
   timeline, with nothing in between. Scoping its horizontal-scroll rule to
   max-width:639px (like the block above) left it as a plain wrapping block
   from 640px–1023px — exactly the range where it's still visible — so the
   8 steps stacked vertically instead of staying in one row. Matching this
   query to lg:hidden's own 1023px cutoff keeps it a single horizontal strip
   for every width it's actually shown at, and (since the row can no longer
   overflow past the section's edge) stops the whole page from gaining
   horizontal scroll, which was also what made the background art appear to
   drag sideways when the arrow was clicked — the browser was auto-scrolling
   the whole page horizontally to bring the newly-focused arrow into view. */
@media (max-width: 1023px) {
  #process-mobile-items {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 22px;
    padding: 4px 4px 10px;
    scrollbar-width: none;
  }
  #process-mobile-items::-webkit-scrollbar {
    display: none;
  }
  .process-mobile-step {
    flex: 0 0 84px;
    text-align: center;
    scroll-snap-align: start;
  }
}

/* ===== Mobile-only horizontal-scroll arrow wrappers (.hscroll-wrap) =====
   min-width:0 is required here because the products *filter chip* row is a
   flex item inside a "flex flex-wrap justify-between" header row. A flex
   item's automatic minimum width is normally its content's natural width —
   UNLESS that item has its own `overflow` set, in which case the spec drops
   it to 0. The original filter row relied on that quirk (it has
   overflow-x-auto directly on itself) to be allowed to shrink and scroll.
   Wrapping it in this plain .hscroll-wrap div (which has no overflow of its
   own) put a non-overflowing element back in the flex row, so the browser
   reverted to sizing it to fit all the chips — silently breaking the scroll
   and pushing the row off-screen. Forcing min-width:0 on every .hscroll-wrap
   restores the original shrink behavior; it's a no-op for the other
   .hscroll-wrap rows (products grid, services grid, projects grid, quality
   steps, process steps) since those aren't competing for space in a flex
   row to begin with. */
.hscroll-wrap {
    min-width: 0;
}