/* ============================================================
   Zexovo · site-wide motion polish (additive, reduced-motion aware)
   Linked on every page. Never hides content; only enriches motion.
   ============================================================ */

/* scroll-progress bar */
#zx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent, #f97316);
  z-index: 600; border-radius: 0 3px 3px 0;
  transition: width .1s linear;
  box-shadow: 0 0 10px -2px var(--accent, #f97316);
}

/* nav gains a soft shadow + subtle translucency once scrolled */
.nav { transition: box-shadow .28s ease, background-color .28s ease, backdrop-filter .28s ease; }
.nav.zx-scrolled {
  box-shadow: 0 8px 28px -14px rgba(20, 23, 32, .22);
  background-color: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

@media (prefers-reduced-motion: no-preference) {
  /* consistent card hover-lift across every page's card type */
  .pcard.clickable, .cap, .ind, .how-step,
  .persona-card, .num-card, .tl-card, .sc-thumb, .featured {
    transition: transform .24s var(--ease, cubic-bezier(.22,1,.36,1)),
                box-shadow .24s var(--ease, cubic-bezier(.22,1,.36,1));
    will-change: transform;
  }
  .pcard.clickable:hover, .cap:hover, .ind:hover, .how-step:hover,
  .persona-card:hover, .num-card:hover, .tl-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px -20px rgba(20, 23, 32, .26);
  }
  .sc-thumb:hover { transform: translateY(-4px) scale(1.015); }

  /* image/screenshot tiles get a gentle zoom on hover */
  .ft-shot img, .sc-app-img img, .browser-screen img { transition: transform .4s var(--ease, cubic-bezier(.22,1,.36,1)); }
  .featured:hover .ft-shot img,
  .sc-app:hover .sc-app-img img { transform: scale(1.025); }

  /* tactile press feedback on buttons */
  button { transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease; }
  button:active { transform: translateY(1px) scale(.992); }

  /* eyebrow live-dots / status dots get a soft glow pulse */
  .ld, .pcard-tag.tag-live .d, .bc-glow { will-change: opacity; }
}

/* ============================================================
   Featured AI HRMS showcase — HR command center image
   glow + gentle float, on-brand with the floating hero tiles
   ============================================================ */
.ft-showcase { position: relative; }
.ft-showcase img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  filter: drop-shadow(0 28px 60px rgba(249, 115, 22, .16));
}
.ft-showcase::before {
  content: ""; position: absolute; inset: -10% -8% -14% -8%;
  background: radial-gradient(58% 56% at 62% 42%, rgba(249, 115, 22, .22), transparent 72%);
  filter: blur(22px); z-index: -1; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .zx-float { animation: zxFloat 6.5s ease-in-out infinite; }
  @keyframes zxFloat { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
}

/* ============================================================
   Click-to-zoom lightbox (screenshots, showcases)
   ============================================================ */
.sc-thumb, .sc-app-img, .browser-screen, .ft-showcase, [data-zoom] { cursor: zoom-in; }
#zx-lightbox {
  position: fixed; inset: 0; z-index: 700;
  display: flex; align-items: center; justify-content: center; padding: 4vw;
  background: rgba(11, 13, 20, .8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; cursor: zoom-out;
  transition: opacity .28s ease, visibility .28s ease;
}
#zx-lightbox.open { opacity: 1; visibility: visible; }
#zx-lightbox img {
  max-width: 94vw; max-height: 88vh; border-radius: 16px;
  box-shadow: 0 50px 120px -24px rgba(0, 0, 0, .65);
  transform: scale(.9); opacity: .6;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
}
#zx-lightbox.open img { transform: scale(1); opacity: 1; }
.zx-lb-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .15); color: #fff;
  font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.zx-lb-close:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  #zx-lightbox img { transform: none; opacity: 1; transition: none; }
}

/* ── Mobile nav hamburger ─────────────────────────────────── */
.nav-ham {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; padding: 4px;
  border-radius: 8px; flex-shrink: 0;
  transition: background .15s;
}
.nav-ham:hover { background: rgba(0,0,0,.06); }
.nav-ham span {
  display: block; width: 22px; height: 2px;
  background: #141720; border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease, transform .22s ease;
}
body.nav-open .nav-ham span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-ham span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .nav-ham span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-mobile {
  position: fixed; top: 62px; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 99;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 20px 48px;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
body.nav-open .nav-mobile {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.nav-mob-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.22);
  z-index: 98; opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s .22s;
}
body.nav-open .nav-mob-backdrop {
  opacity: 1; visibility: visible;
  transition: opacity .22s ease, visibility 0s;
}
.nav-mob-section { margin-bottom: 4px; }
.nav-mob-head {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #666d80; padding: 18px 4px 8px;
}
.nav-mob-item {
  display: flex; flex-direction: column;
  padding: 13px 4px; text-decoration: none;
  color: #141720; font-size: 15px; font-weight: 600;
  border-bottom: 1px solid #dee1ea;
}
.nav-mob-item span { font-size: 12px; font-weight: 400; color: #666d80; margin-top: 2px; }
.nav-mob-link {
  display: block; padding: 14px 4px;
  text-decoration: none; color: #141720;
  font-size: 15px; font-weight: 500;
  border-bottom: 1px solid #dee1ea;
}
.nav-mob-cta { margin-top: 28px; }
.nav-mob-cta .btn-blue {
  display: block; width: 100%; padding: 14px !important;
  font-size: 15px !important; border-radius: 10px !important;
  text-align: center; box-sizing: border-box;
}

@media (max-width: 900px) { .nav-ham { display: flex; } }
@media (min-width: 901px) {
  .nav-ham { display: none !important; }
  body.nav-open .nav-mobile { opacity: 0 !important; visibility: hidden !important; }
  body.nav-open .nav-mob-backdrop { opacity: 0 !important; visibility: hidden !important; }
  body.nav-open { overflow: auto !important; }
}