/* DXB "wow" layer — elevation, depth, tilt, reveals, Lenis rules.
   Loaded after ui-layer.css. Everything is transform/opacity/box-shadow only (no layout shift).
   Kill switch: <html data-wow="off"> (build env NEXT_PUBLIC_WOW=off) or localStorage['dxb-wow']='off'
   (JS effects). Every rule below is under html:not([data-wow="off"]). */

html:not([data-wow="off"]) {
  /* 4-level elevation: tight contact shadow + two soft ambient layers, tinted DXB blue-black */
  --dxb-e1: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.04);
  --dxb-e2: 0 1px 2px rgba(16,24,40,.05), 0 4px 10px rgba(16,24,40,.06), 0 10px 24px rgba(16,24,40,.05);
  --dxb-e3: 0 2px 4px rgba(16,24,40,.05), 0 8px 16px rgba(16,24,40,.08), 0 20px 40px rgba(2,40,120,.10);
  --dxb-e4: 0 4px 8px rgba(16,24,40,.06), 0 16px 32px rgba(16,24,40,.12), 0 36px 72px rgba(2,40,120,.16);
  /* existing tokens (dropdowns, dialogs, hovers, stuck bars) inherit the new depth */
  --dxb-sh-1: var(--dxb-e1);
  --dxb-sh-2: var(--dxb-e2);
  --dxb-sh-3: var(--dxb-e3);
}

/* ---------- Lenis (rules from lenis/dist/lenis.css that we need) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped { overflow: clip; }
html.lenis.lenis-stopped.dxb-modal-open { overflow: hidden !important; } /* class lock stays the owner */

/* ---------- elevation on surfaces ---------- */
html:not([data-wow="off"]) body #t_Header { box-shadow: var(--dxb-e1); }
html:not([data-wow="off"]) body .searchForm.search-stuck { box-shadow: 0 1px 0 var(--dxb-line), var(--dxb-e3); }
html:not([data-wow="off"]) body .white-bar { box-shadow: var(--dxb-e1); }
html:not([data-wow="off"]) body .t-Report-wrap { box-shadow: var(--dxb-e1); }
html:not([data-wow="off"]) body .t-Cards .t-Cards-item .t-Card { box-shadow: var(--dxb-e1); }
html:not([data-wow="off"]) body .t-Cards .t-Cards-item:hover .t-Card { box-shadow: var(--dxb-e3); }
html:not([data-wow="off"]) body .ui-dialog { box-shadow: var(--dxb-e4); }
html:not([data-wow="off"]) body .t-NavigationBar-menu.a-Menu { box-shadow: var(--dxb-e3); }

/* KPI cards: resting e2, lift to e3, tilt-ready */
html:not([data-wow="off"]) body .t-BadgeList-item .t-BadgeList-wrap {
  display: block;
  box-shadow: var(--dxb-e2);
  border-radius: var(--dxb-r-md);
  will-change: auto;
  transition: box-shadow var(--dxb-t-slow) ease, transform 220ms var(--dxb-ease-out);
}
html:not([data-wow="off"]) body .t-BadgeList-item .t-BadgeList-wrap:hover { box-shadow: var(--dxb-e3); }

/* ---------- pointer tilt (vars written by WowFx; mouse only) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html:not([data-wow="off"]) body :is(.t-BadgeList-item .t-BadgeList-wrap, .t-Cards-item .t-Card, [data-wow-tilt])[data-wow-active] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px);
    box-shadow: var(--dxb-e4);
    z-index: 1;
  }
}

/* ---------- entrance + scroll reveal (transform/opacity, compositor only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dxb-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

  /* KPI cards are mounted when data arrives: stagger them in */
  html:not([data-wow="off"]) body .t-BadgeList-item { animation: dxb-rise 520ms var(--dxb-ease-out) both; }
  html:not([data-wow="off"]) body .t-BadgeList-item:nth-child(2) { animation-delay: 70ms; }
  html:not([data-wow="off"]) body .t-BadgeList-item:nth-child(3) { animation-delay: 140ms; }
  html:not([data-wow="off"]) body .t-BadgeList-item:nth-child(4) { animation-delay: 210ms; }

  /* card grids reveal on scroll with a per-column stagger (Chromium/Safari 26; plain render elsewhere) */
  @supports (animation-timeline: view()) {
    html:not([data-wow="off"]) body .t-Body-contentInner .t-Cards .t-Cards-item {
      animation: dxb-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    html:not([data-wow="off"]) body .t-Body-contentInner .t-Cards .t-Cards-item:nth-child(4n+2) { animation-range: entry 6% entry 48%; }
    html:not([data-wow="off"]) body .t-Body-contentInner .t-Cards .t-Cards-item:nth-child(4n+3) { animation-range: entry 12% entry 54%; }
    html:not([data-wow="off"]) body .t-Body-contentInner .t-Cards .t-Cards-item:nth-child(4n+4) { animation-range: entry 18% entry 60%; }
  }
}