/* =========================================================
   Bait Al Qanoon — Motion layer (elegant, light-first)
   Scroll reveal · hover · buttons · parallax · offcanvas · tooltips
   ========================================================= */

:root {
  --bq-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --bq-motion-dur: .7s;
}

/* ---------- Scroll reveal (content always readable; motion is lift-only) ---------- */
html.bq-motion-on .bq-reveal {
  opacity: 1;
  transform: translateY(22px);
  transition: transform var(--bq-motion-dur) var(--bq-motion-ease);
  will-change: transform;
}
html.bq-motion-on .bq-reveal.is-in {
  transform: none;
}
html.bq-motion-on .bq-reveal[data-reveal="left"] { transform: translateX(-22px); }
html.bq-motion-on .bq-reveal[data-reveal="right"] { transform: translateX(22px); }
html[dir="rtl"].bq-motion-on .bq-reveal[data-reveal="left"] { transform: translateX(22px); }
html[dir="rtl"].bq-motion-on .bq-reveal[data-reveal="right"] { transform: translateX(-22px); }
html.bq-motion-on .bq-reveal[data-reveal="left"].is-in,
html.bq-motion-on .bq-reveal[data-reveal="right"].is-in { transform: none; }
html.bq-motion-on .bq-reveal[data-reveal="scale"] {
  transform: scale(.97);
}
html.bq-motion-on .bq-reveal[data-reveal="scale"].is-in { transform: none; }

html.bq-motion-on .bq-stagger > .bq-reveal:nth-child(1) { transition-delay: .04s; }
html.bq-motion-on .bq-stagger > .bq-reveal:nth-child(2) { transition-delay: .1s; }
html.bq-motion-on .bq-stagger > .bq-reveal:nth-child(3) { transition-delay: .16s; }
html.bq-motion-on .bq-stagger > .bq-reveal:nth-child(4) { transition-delay: .22s; }
html.bq-motion-on .bq-stagger > .bq-reveal:nth-child(5) { transition-delay: .28s; }
html.bq-motion-on .bq-stagger > .bq-reveal:nth-child(6) { transition-delay: .34s; }

/* ---------- Hero: split text + draw line + parallax ---------- */
.pro-hero { --spot-x: 50%; --spot-y: 30%; }
.pro-hero__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    420px 280px at var(--spot-x) var(--spot-y),
    rgba(214, 176, 84, .22),
    transparent 55%
  );
  transition: background .15s linear;
}
.pro-hero__bg.bq-parallax {
  will-change: transform;
  transition: transform .4s var(--bq-motion-ease);
}
.pro-hero__logo {
  transition: transform .5s var(--bq-motion-ease), filter .5s;
}
.pro-hero.is-ready .pro-hero__logo {
  animation: bqLogoIn .9s var(--bq-motion-ease) both;
}
@keyframes bqLogoIn {
  from { opacity: 0; transform: translateY(12px) scale(.92); }
  to { opacity: 1; transform: none; }
}

.bq-split {
  display: inline-block;
}
.bq-split .bq-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.1em);
  transition:
    opacity .55s var(--bq-motion-ease),
    transform .55s var(--bq-motion-ease);
}
.pro-hero.is-ready .bq-split .bq-ch {
  opacity: 1;
  transform: none;
}
/* Arabic brand: fade only — never split letters (breaks joining) */
.pro-hero__brand.bq-brand-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--bq-motion-ease), transform .7s var(--bq-motion-ease);
}
.pro-hero.is-ready .pro-hero__brand.bq-brand-fade {
  opacity: 1;
  transform: none;
}

.bq-draw-line {
  display: block;
  width: 0;
  height: 2px;
  margin: 1rem auto 0;
  max-width: 5.5rem;
  background: linear-gradient(90deg, transparent, var(--bq-gold-soft, #d6b054), transparent);
  transition: width 1s .35s var(--bq-motion-ease);
}
.pro-hero.is-ready .bq-draw-line { width: 5.5rem; }

.bq-draw-svg {
  display: block;
  margin: .85rem auto 0;
  width: 72px;
  height: 18px;
  overflow: visible;
}
.bq-draw-svg path {
  fill: none;
  stroke: var(--bq-gold-soft, #d6b054);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.1s .2s var(--bq-motion-ease);
}
.pro-hero.is-ready .bq-draw-svg path { stroke-dashoffset: 0; }

.pro-hero__text.bq-reveal-hero,
.pro-hero__actions.bq-reveal-hero {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s var(--bq-motion-ease),
    transform .7s var(--bq-motion-ease);
}
.pro-hero.is-ready .pro-hero__text.bq-reveal-hero {
  opacity: 1;
  transform: none;
  transition-delay: .45s;
}
.pro-hero.is-ready .pro-hero__actions.bq-reveal-hero {
  opacity: 1;
  transform: none;
  transition-delay: .6s;
}

/* ---------- Card / image hover polish ---------- */
.pro-pillar,
.pro-practice,
.pro-person,
.pro-news__item,
.card-soft.bq-service-tile,
.bq-roster-card,
.bq-article-card {
  transition:
    transform .35s var(--bq-motion-ease),
    box-shadow .35s var(--bq-motion-ease),
    border-color .35s;
}
.pro-pillar:hover,
.card-soft.bq-service-tile:hover,
.bq-roster-card:hover,
.bq-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(40, 24, 12, .12);
  border-color: rgba(105, 10, 46, .22);
}
.pro-practice {
  position: relative;
  overflow: hidden;
}
.pro-practice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(74, 10, 33, .55) 100%);
  opacity: .85;
  transition: opacity .35s;
  pointer-events: none;
}
.pro-practice:hover::after { opacity: 1; }
.pro-practice__cap {
  transition: transform .35s var(--bq-motion-ease);
}
.pro-practice:hover .pro-practice__cap {
  transform: translateY(-4px);
}
.pro-news__item img,
.bq-article-card img,
.bq-roster-card img {
  transition: transform .55s var(--bq-motion-ease);
}
.pro-news__item:hover img,
.bq-article-card:hover img,
.bq-roster-card:hover img {
  transform: scale(1.04);
}

/* ---------- Button sheen / press ---------- */
.btn-hero,
.btn-gold,
.pro-invite .btn,
.pro-china .btn,
.btn-outline-gold {
  position: relative;
  overflow: hidden;
  transition:
    transform .25s var(--bq-motion-ease),
    box-shadow .25s,
    background .25s,
    color .25s,
    border-color .25s;
}
.btn-hero::after,
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 28%,
    rgba(255, 255, 255, .28) 48%,
    transparent 68%
  );
  transform: translateX(-130%);
  pointer-events: none;
}
.btn-hero:hover::after,
.btn-gold:hover::after {
  animation: bqSheen .75s var(--bq-motion-ease);
}
@keyframes bqSheen {
  to { transform: translateX(130%); }
}
.btn-hero:active,
.btn-gold:active,
.btn-outline-gold:active {
  transform: translateY(1px) scale(.985);
}

.whatsapp-float {
  transition: transform .3s var(--bq-motion-ease), box-shadow .3s;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
}

/* ---------- Soft scroll (desktop) ---------- */
html.bq-smooth {
  scroll-behavior: auto;
}

/* ---------- Offcanvas motion ---------- */
.bq-offcanvas.showing .nav-link,
.bq-offcanvas.show .nav-link {
  animation: bqNavIn .45s var(--bq-motion-ease) both;
}
.bq-offcanvas.show .nav-link:nth-child(1) { animation-delay: .05s; }
.bq-offcanvas.show .nav-link:nth-child(2) { animation-delay: .1s; }
.bq-offcanvas.show .nav-link:nth-child(3) { animation-delay: .15s; }
.bq-offcanvas.show .nav-link:nth-child(4) { animation-delay: .2s; }
.bq-offcanvas.show .nav-link:nth-child(5) { animation-delay: .25s; }
.bq-offcanvas.show .nav-link:nth-child(6) { animation-delay: .3s; }
.bq-offcanvas.show .nav-link:nth-child(7) { animation-delay: .35s; }
.bq-offcanvas.show .nav-link:nth-child(8) { animation-delay: .4s; }
.bq-offcanvas.show .bq-mobile-tools {
  animation: bqNavIn .5s .35s var(--bq-motion-ease) both;
}
@keyframes bqNavIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
html[dir="rtl"] .bq-offcanvas.show .nav-link {
  animation-name: bqNavInRtl;
}
@keyframes bqNavInRtl {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Advanced tooltips ---------- */
[data-bq-tip] {
  position: relative;
}
.btn-tool[data-bq-tip],
.btn-admin[data-bq-tip] {
  position: relative;
}
.bq-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: .35rem .65rem;
  border-radius: 8px;
  background: #2A0816;
  color: #F4E8D4;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 1200;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: opacity .2s, transform .2s var(--bq-motion-ease);
}
.bq-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #2A0816;
}
[data-bq-tip]:hover .bq-tip,
[data-bq-tip]:focus-visible .bq-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Lottie host ---------- */
.bq-lottie {
  width: 56px;
  height: 56px;
  margin: 0 auto .75rem;
  display: grid;
  place-items: center;
}
.bq-lottie svg { width: 100%; height: 100%; }
.pro-invite .bq-lottie {
  margin-bottom: 1rem;
}

/* ---------- China / invite polish ---------- */
.pro-china__row,
.pro-invite {
  transition: transform .4s var(--bq-motion-ease);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.bq-motion-on .bq-reveal,
  html.bq-motion-on .bq-reveal[data-reveal],
  .pro-hero__logo,
  .pro-hero__text.bq-reveal-hero,
  .pro-hero__actions.bq-reveal-hero,
  .pro-hero__brand.bq-brand-fade,
  .bq-split .bq-ch,
  .bq-draw-line,
  .bq-draw-svg path,
  .btn-hero::after,
  .btn-gold::after,
  .bq-offcanvas .nav-link,
  .bq-offcanvas .bq-mobile-tools {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    width: auto;
  }
  .bq-draw-line { width: 5.5rem; }
  html.bq-smooth { scroll-behavior: auto; }
  .pro-hero__shade::after { display: none; }
}