/* ============================================================
   Qimam Development Holding — motion & interaction layer
   Restrained, professional scroll/hover animations.
   Shared by index.html · company.html · companies-other.html
   Inspired (subtly) by the calm motion language of health.sa.
   ============================================================ */

/* ---- Scroll progress bar (top of viewport) ---------------- */
#qm-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #1A7A4C 0%, #C9A24B 100%);
  z-index: 60;
  transition: width .12s linear;
  pointer-events: none;
}

/* ---- Reveal on scroll ------------------------------------- *
   Hidden state only applies once JS confirms it can reveal
   (html.js). If the enhancement script never runs, a safety
   fallback in each page reveals everything, so content is
   never permanently hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="scale"] { transform: scale(.94); }

/* A [data-stagger] container reveals its direct children in sequence.
   Hidden state is declared here (render-blocking) so there is no flash
   before the engine tags the children. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* legacy .reveal elements (index.html) flow through same engine */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
}

[data-reveal].is-revealed,
.reveal.is-revealed,
[data-stagger] > .is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Interactive icons ------------------------------------ *
   Icon wrappers tagged .icon-pop lift + tilt when their card
   (or any .group ancestor) is hovered. */
.icon-pop {
  transition:
    transform .4s cubic-bezier(.34,1.56,.64,1),
    background-color .3s ease,
    color .3s ease;
}
.group:hover .icon-pop,
.card-hover:hover .icon-pop,
a:hover > .icon-pop,
.icon-pop:hover {
  transform: translateY(-2px) rotate(-6deg) scale(1.08);
}

/* gentle, continuous float for accent icons (hero / quote) */
@keyframes qm-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.icon-float { animation: qm-float 4.5s ease-in-out infinite; }

/* check marks (objectives) sweep in once their row is revealed */
.icon-check { transition: transform .45s cubic-bezier(.34,1.56,.64,1) .15s; }
.js [data-reveal] .icon-check,
.js .reveal .icon-check { transform: scale(.3) rotate(-25deg); }
[data-reveal].is-revealed .icon-check,
.reveal.is-revealed .icon-check { transform: none; }

/* ---- Animated nav underline + scrollspy active state ------ */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: #1A7A4C;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #1A7A4C; }

/* ---- Hero subtle Ken-Burns zoom --------------------------- */
@keyframes qm-kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.13); }
}
.hero-zoom { animation: qm-kenburns 20s ease-out forwards; transform-origin: center; }

/* ---- Back-to-top button ----------------------------------- */
#qm-top {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  height: 3rem;
  width: 3rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: #0E5233;
  box-shadow: 0 12px 30px -8px rgba(14,82,51,.55);
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background-color .25s ease;
  z-index: 55;
}
#qm-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#qm-top:hover { background: #C9A24B; }
#qm-top svg { height: 1.25rem; width: 1.25rem; }

/* ---- Respect reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .reveal,
  .js [data-stagger] > *,
  [data-reveal].is-revealed,
  .reveal.is-revealed,
  [data-stagger] > .is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .icon-float,
  .hero-zoom { animation: none !important; }
  .icon-pop,
  .nav-link::after { transition: none !important; }
  #qm-progress { display: none; }
}