/* =====================================================================
   NoVi — engaging informative boxes (all non-home pages). Owned by landing-motion.
   Behaviour: src/components/motion/BoxMotion*.tsx. Contract:
     [data-reveal] (+ --reveal-i)   one-shot fade/rise when scrolled into view
     [data-count]                   count-up (server renders the final value)
     .mb-lift                       hover lift + gold sheen sweep + gold base line
     .mb-icon                       icon micro-animation (pop on reveal, nudge on hover)
     .mb-stats > .mb-stat           animated number tiles
     .mb-art > [data-art-frame]     editorial visuals, hidden when the file is missing
   Only opacity / translate / clip-path / transform animate. Tokens: --novi-*, --fs-*, --ff-*
   (with fallbacks). Reduced motion: every box in its final state, no movement.
   ===================================================================== */

:root {
  --mb-ease: var(--novi-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  --mb-gold: var(--novi-gold, #be9565);
  --mb-gold-hi: var(--novi-gold-hi, #e2c192);
  --mb-grad: var(--novi-grad-gold, var(--novi-gold-grad, linear-gradient(90deg, #e2c192, #be9565 55%, #7a5a36)));
  --mb-surface: var(--novi-surface, #161513);
  --mb-line: var(--novi-line, rgba(255, 255, 255, 0.1));
}

/* ------------------------------------------------------------------ reveal */
.bm-wait { opacity: 0; }
.bm-in {
  animation: mb-rise 0.85s var(--mb-ease) both;
  animation-delay: calc(min(var(--reveal-i, 0), 6) * 75ms);
}
@keyframes mb-rise {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}

/* ------------------------------------------------------------------ counters */
.mb-count { display: inline-block; font-variant-numeric: tabular-nums lining-nums; unicode-bidi: isolate; white-space: nowrap; }

/* ------------------------------------------------------- hover lift + gold sheen */
.mb-lift,
.novi-contact__card,
.novi-articles__card,
.novi-portfolio .projects-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mb-lift::before,
.novi-contact__card::before,
.novi-articles__card::before,
.novi-portfolio .projects-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 32%,
    color-mix(in srgb, var(--mb-gold-hi) 14%, transparent) 44%,
    color-mix(in srgb, var(--mb-gold-hi) 30%, transparent) 50%,
    color-mix(in srgb, var(--mb-gold-hi) 14%, transparent) 56%,
    transparent 68%
  );
  transform: translateX(-115%);
  transition: transform 1s var(--mb-ease);
}
[dir="rtl"] .mb-lift::before,
.novi-rtl .mb-lift::before { transform: translateX(115%); }
.mb-lift::after,
.novi-contact__card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: var(--mb-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--mb-ease);
}
[dir="rtl"] .mb-lift::after,
.novi-rtl .mb-lift::after,
.novi-rtl .novi-contact__card::after { transform-origin: right center; }

.mb-lift,
.novi-contact__card {
  transition: border-color 0.4s, box-shadow 0.5s var(--mb-ease), transform 0.5s var(--mb-ease);
}
@media (hover: hover) {
  .mb-lift:hover,
  .novi-contact__card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--mb-gold) 55%, transparent);
    box-shadow: 0 28px 60px -34px rgba(0, 0, 0, 0.75), 0 0 0 1px color-mix(in srgb, var(--mb-gold) 14%, transparent);
  }
  .mb-lift:hover::before,
  .novi-contact__card:hover::before,
  .novi-articles__card:hover::before,
  .novi-portfolio .projects-box:hover::before { transform: translateX(115%); }
  [dir="rtl"] .mb-lift:hover::before,
  .novi-rtl .mb-lift:hover::before,
  .novi-rtl .novi-contact__card:hover::before,
  .novi-rtl .novi-articles__card:hover::before { transform: translateX(-115%); }
  .mb-lift:hover::after,
  .novi-contact__card:hover::after { transform: scaleX(1); }
}
.mb-lift:focus-within::after,
.mb-lift:focus-visible::after { transform: scaleX(1); }

/* ------------------------------------------------------------ icon micro-motion */
/* pop-in uses opacity/translate (animation), hover uses rotate/scale (transition): they never fight */
.mb-icon { display: inline-grid; place-items: center; }
.mb-icon,
.novi-contact__list i,
.novi-office__contacts i { transition: rotate 0.5s var(--mb-ease), scale 0.5s var(--mb-ease), box-shadow 0.5s, background-color 0.5s; }
.bm-in .mb-icon,
.bm-in.mb-icon { animation: mb-pop 0.9s var(--mb-ease) both; animation-delay: calc(min(var(--reveal-i, 0), 6) * 75ms + 260ms); }
@keyframes mb-pop {
  0% { opacity: 0; translate: 0 10px; }
  100% { opacity: 1; translate: 0 0; }
}
@media (hover: hover) {
  .mb-lift:hover .mb-icon,
  .novi-office__contacts li:hover i,
  .novi-contact__list li:hover i { rotate: -10deg; scale: 1.14; }
  .nl-step:hover .nl-step__num { scale: 1.06; box-shadow: 0 0 0 6px color-mix(in srgb, var(--mb-gold) 16%, transparent); }
}

/* ------------------------------------------------------------ number tiles */
.mb-stats {
  list-style: none;
  margin: 26px 0 6px;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mb-stats--compact { margin-top: 32px; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mb-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 22px 22px 24px;
  border-radius: 16px;
  text-align: start;
  border: 1px solid var(--mb-line);
  background:
    radial-gradient(240px 120px at 0% 0%, color-mix(in srgb, var(--mb-gold) 12%, transparent), transparent 70%),
    var(--mb-surface);
}
[dir="rtl"] .mb-stat,
.novi-rtl .mb-stat {
  background:
    radial-gradient(240px 120px at 100% 0%, color-mix(in srgb, var(--mb-gold) 12%, transparent), transparent 70%),
    var(--mb-surface);
}
.mb-stat__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mb-gold) 50%, transparent);
  color: var(--mb-gold-hi);
  font-size: 15px;
}
.mb-stat__value {
  color: var(--mb-gold-hi);
  font-family: var(--ff-head, "Montserrat", sans-serif);
  font-weight: 600;
  font-size: var(--fs-stat, clamp(36px, 2vw + 26px, 60px));
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.12em;
}
.mb-stat__value[data-long] { justify-content: flex-start; font-size: calc(var(--fs-stat, clamp(36px, 2vw + 26px, 60px)) * 0.74); }
.mb-stat__unit { font-size: 0.42em; font-weight: 500; letter-spacing: 0.02em; color: var(--mb-gold-hi); white-space: nowrap; }
.mb-stat__value > .mb-stat__unit:first-child { align-self: center; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .mb-stat__value .mb-count {
    background: var(--mb-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.mb-stat__value--text { font-size: var(--fs-h3, clamp(20px, 0.6vw + 17px, 26px)); line-height: 1.25; }
.mb-stat__label {
  color: var(--novi-text, #edeae4);
  font-family: var(--ff-body, "Source Sans 3", sans-serif);
  font-size: var(--fs-body, 16px);
  font-weight: 600;
  line-height: 1.4;
}
.mb-stat__note {
  color: var(--novi-muted, rgba(237, 234, 228, 0.66));
  font-family: var(--ff-body, "Source Sans 3", sans-serif);
  font-size: var(--fs-small, 14px);
  line-height: 1.5;
}
.mb-stats--compact .mb-stat { padding: 18px 18px 20px; }
.mb-stats--compact .mb-stat__value, .mb-stats--compact .mb-stat__value[data-long] { font-size: clamp(28px, 1.2vw + 20px, 40px); }
.mb-stats--compact .mb-stat__value--text { font-size: var(--fs-lead, clamp(17px, 0.3vw + 15.5px, 20px)); }
.mb-stats--compact .mb-stat__label { font-size: var(--fs-small, 14px); }
.mb-stats--compact .mb-stat__note { font-size: 13px; }
/* suffixes ("m²", "villas") read smaller than the digits */
.mb-stat__value .mb-count { font-size: inherit; }
[dir="rtl"] .mb-stat__label, [dir="rtl"] .mb-stat__note, .novi-rtl .mb-stat__label, .novi-rtl .mb-stat__note {
  font-family: var(--ff-body, "Tajawal", sans-serif);
}
.mb-numbers__eyebrow { margin-bottom: 10px; }
.mb-company-facts .mb-company-facts__title {
  margin: 0;
  color: var(--novi-text, #edeae4);
  font-family: var(--ff-head, "Montserrat", sans-serif);
  font-size: var(--fs-h2, clamp(28px, 1.5vw + 20px, 42px));
  font-weight: 600;
  line-height: 1.2;
  text-align: start;
}
[dir="rtl"] .mb-company-facts__title { font-family: var(--ff-head, "Tajawal", sans-serif); font-weight: 700; }
.mb-company-facts .mb-company-facts__title::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 14px; background: var(--mb-grad); }

/* ------------------------------------------------------------ steps & FAQ */
.nl-step__num .mb-count { min-width: 0; }
.nl-faq__item[open] .nl-faq__a { animation: mb-open 0.5s var(--mb-ease) both; }
@keyframes mb-open {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
.nl-faq__item { transition: border-color 0.4s; }
.nl-faq__item[open] { border-bottom-color: color-mix(in srgb, var(--mb-gold) 45%, transparent); }

/* ------------------------------------------------------------ CTA band */
.mb-glow { box-shadow: 0 40px 90px -60px color-mix(in srgb, var(--mb-gold) 55%, transparent); }

/* ------------------------------------------------------------ art band */
.nl-section.mb-art-section { padding-block: 0 clamp(36px, 4.5vw, 64px); background: transparent; border-top: 0; }
.mb-art-section + .nl-section { border-top: 0; }
.mb-art {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.mb-art:has(> .mb-art__frame--1x1:first-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mb-art:has(> .mb-art__frame--16x9 + .mb-art__frame--16x9) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mb-art__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--mb-line);
  background: var(--mb-surface);
}
.mb-art__frame:first-child { aspect-ratio: 16 / 9; }
.mb-art__frame--1x1:first-child { aspect-ratio: 1 / 1; }
.mb-art__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--mb-ease);
}
@media (hover: hover) {
  .mb-art__frame:hover img { transform: scale(1.045); }
}
.mb-art__tag {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 999px;
  color: #f4efe8;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(226, 193, 146, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--ff-head, "Montserrat", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
[dir="rtl"] .mb-art__tag, .novi-rtl .mb-art__tag { font-family: var(--ff-head, "Tajawal", sans-serif); font-size: 12px; letter-spacing: 0; }
.mb-art__frame.bm-in { animation: mb-unveil 1.1s var(--mb-ease) both; animation-delay: calc(min(var(--reveal-i, 0), 6) * 110ms); }
@keyframes mb-unveil {
  from { opacity: 0.2; clip-path: inset(0 0 100% 0 round 18px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); }
}
/* art still being generated: hide the frame, let the other one take the row, drop the band if none */
.mb-art__frame[data-art-missing] { display: none; }
.mb-art:has(> [data-art-missing]) { grid-template-columns: minmax(0, 1fr); }
.mb-art:has(> [data-art-missing]) > .mb-art__frame:not([data-art-missing]) { aspect-ratio: 21 / 9; }
.mb-art-section:not(:has([data-art-frame]:not([data-art-missing]))) { display: none; }

@media (max-width: 767px) {
  .mb-art,
  .mb-art:has(> .mb-art__frame--1x1:first-child),
  .mb-art:has(> .mb-art__frame--16x9 + .mb-art__frame--16x9) { grid-template-columns: minmax(0, 1fr); }
  .mb-art__frame:not(:first-child) { aspect-ratio: 4 / 3; }
  .mb-art:has(> [data-art-missing]) > .mb-art__frame:not([data-art-missing]) { aspect-ratio: 4 / 3; }
  .mb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mb-stat { padding: 16px 14px 18px; }
  .mb-stat__value, .mb-stat__value[data-long] { font-size: clamp(26px, 7vw, 36px); }
  .mb-stat__value[data-long] { font-size: clamp(22px, 6vw, 30px); }
  .mb-stats--compact .mb-stat__value, .mb-stats--compact .mb-stat__value[data-long] { font-size: clamp(22px, 6vw, 30px); }
}
@media (max-width: 380px) {
  .mb-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ light theme */
:root[data-theme="light"] .mb-art__frame { border-color: var(--novi-line, rgba(14, 14, 14, 0.1)); }
:root[data-theme="light"] .mb-lift:hover,
:root[data-theme="light"] .novi-contact__card:hover { box-shadow: 0 26px 50px -34px rgba(60, 40, 20, 0.35); }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bm-wait { opacity: 1; }
  .bm-in, .bm-in .mb-icon, .bm-in.mb-icon, .mb-art__frame.bm-in, .nl-faq__item[open] .nl-faq__a { animation: none !important; }
  .mb-lift::before, .novi-contact__card::before, .novi-articles__card::before, .novi-portfolio .projects-box::before { display: none; }
  .mb-lift, .mb-lift:hover, .novi-contact__card:hover { transform: none !important; }
  .mb-icon, .mb-lift:hover .mb-icon, .nl-step:hover .nl-step__num, .novi-office__contacts li:hover i, .novi-contact__list li:hover i { rotate: none !important; scale: none !important; }
  .mb-art__frame img, .mb-art__frame:hover img { transition: none; transform: none; }
}