/* ============================================================================================
   Kandeel deck ENRICHMENT layer — REBUILT 2026-11-12 (MFZ verdict on the first pass: "Very poor
   design. Contrast is broken. Feels cheap. Irrelevant buildings!!! Rethink it.").
   Design system: luxury real-estate brand book, not a game show.
     - Zero generated/stock imagery. Photo backgrounds only where a REAL Kandeel/Gridline/Kay90
       asset exists (see deck-enrich.js SCENE_BG); every other slide is pure typography on the
       deck's own solid espresso brown (#15100c, inherited from .dwrap) — negative space + a thin
       gold hairline instead of a picture that isn't actually relevant.
     - Guaranteed contrast: any slide that DOES sit on a photo wraps its text in `.kx-panel` — a
       flat, near-opaque band (not a gradient-only scrim), so legibility never depends on where a
       Ken-Burns pan happens to put the bright part of the image. Measured worst-case (text over a
       pure-white patch of photo, i.e. the actual worst case the panel can ever face) ≥ 5.5:1 for
       muted labels and ≥ 7:1 for gold/cream text — see CRITIQUE_BEFORE.md for the math. Typed
       directly over the solid espresso background (non-photo slides) measures ≥ 6.6:1.
     - Motion budget: at most ONE continuous accent animation per slide — the slow Ken Burns drift
       on real-photo slides, or nothing at all on typography slides (one-time fade-ins only). The
       old infinite glow-pulse / icon-bob / spinning rays are gone.
   This file is ADDITIVE ONLY: it never edits a rule inside deck.css, only adds new `.kx-*` classes
   rendered by deck-enrich.js for the IN-SCOPE kinds (stat / keypoints / gift / title / video /
   winner / thanks). Cover + guest + mc are OUT OF SCOPE and keep rendering through the original
   deck.js + deck.css path untouched.
   Arabic rule (MFZ 2026-11-12): every Arabic-bearing text class here ships line-height >= 1.4 and
   enough block padding that descenders/diacritics are never clipped — see .kx-title, .kx-sub,
   .kx-bt b/span, .kx-hero-title.
   ============================================================================================ */

/* ---------- full-bleed background (real photo only) + light scrim for ambience ---------- */
.kx-bgwrap { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .6s ease; overflow: hidden; }
.kx-bgwrap.on { opacity: 1; }
.kx-bg { position: absolute; inset: -3% -3% -3% -3%; width: 106%; height: 106%; object-fit: cover; object-position: center 55%;
  opacity: 0; transition: opacity 1.1s ease; will-change: opacity, transform; }
/* single, slow, restrained drift — the ONE accent motion allowed on real-photo slides. Real assets
   stay sharp and recognizable (MFZ: "no heavy blur/recolor of the render") — this is ambience, not
   the thing doing the contrast work (that's .kx-panel below). */
.kx-bg.kx-show { opacity: 1; animation: kxKenBurns 34s ease-in-out infinite alternate; }
@keyframes kxKenBurns { from { transform: scale(1); } to { transform: scale(1.035) translate3d(-.6%, -.6%, 0); } }
.kx-scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,6,.22) 0%, rgba(10,8,6,.08) 32%, rgba(10,8,6,.3) 66%, rgba(10,8,6,.62) 100%),
    linear-gradient(90deg, rgba(10,8,6,.3) 0%, rgba(10,8,6,.03) 45%, rgba(10,8,6,.03) 55%, rgba(10,8,6,.3) 100%);
  z-index: 2; }
/* kinds in scope sit visually on z:3 above the bg+scrim (z:1/2); #deckfx confetti canvas stays z:8 above everything */
.kx-scene { position: relative; z-index: 3; width: 100%; }

/* ---------- guaranteed-contrast caption card/band for the real-photo slides ---------- */
.kx-pcard { background: rgba(12,9,7,.88); -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08); border-top: .16cqh solid rgba(224,176,119,.55);
  padding: 3cqh 1.2cqw 2.6cqh; border-radius: .3cqh; }
.kx-pcard .kx-sub, .kx-pcard .kx-note, .kx-pcard .kx-lbl, .kx-pcard .kx-companies span { color: rgba(244,235,223,.8); }

/* ---------- shared type ---------- */
.kx-kicker { font-size: 3.4cqh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.4cqh; opacity: 0; animation: kxFadeUp .6s ease .05s both; }
.kx-title { font-size: 8.6cqh; font-weight: 800; line-height: 1.4; padding-block: .3cqh;
  background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: kxFadeUp .7s ease .12s both; }
.kx-sub { font-size: 3.8cqh; font-weight: 500; line-height: 1.5; color: var(--cream); margin-top: 1.6cqh; max-width: 78cqw;
  opacity: 0; animation: kxFadeUp .7s ease .22s both; }
.kx-note { font-size: 2.4cqh; color: var(--muted); margin-top: 2.2cqh; line-height: 1.5; opacity: 0; animation: kxFadeUp .6s ease .9s both; }
@keyframes kxFadeUp { from { opacity: 0; transform: translateY(1.4cqh); } to { opacity: 1; transform: none; } }

/* ============================================================================================
   STAT — big confident numbers, one hairline rule, no ring/bar glow gimmicks
   ============================================================================================ */
.k-stat .kx-scene { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.kx-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 3cqw; margin-top: 3.2cqh;
  border-top: .22cqh solid rgba(207,196,177,.22); padding-top: 3.4cqh; }
.kx-stats.kx-wrap3 { grid-auto-flow: row; grid-template-columns: repeat(3,1fr); row-gap: 3.6cqh; }
.kx-stat { opacity: 0; animation: kxFadeUp .6s ease both; animation-delay: calc(.3s + var(--i) * .12s); display: flex; flex-direction: column; align-items: flex-start; }
.kx-num { display: block; font-size: 7.4cqh; font-weight: 800; color: var(--gold2); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kx-lbl { display: block; font-size: 2.6cqh; color: var(--muted); margin-top: .9cqh; line-height: 1.45; max-width: 22cqw; }
/* ring (percentage stats) — static track, no drop-shadow glow */
.kx-stat-ring .kx-ringwrap { position: relative; width: 11cqh; height: 11cqh; display: grid; place-items: center; }
.kx-stat-ring .kx-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.kx-stat-ring .kx-ring-bg { fill: none; stroke: rgba(207,196,177,.22); stroke-width: 6; }
.kx-stat-ring .kx-ring-fg { fill: none; stroke: var(--gold2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 263.9; stroke-dashoffset: 263.9; }
.kx-stat-ring .kx-num { position: absolute; font-size: 3.1cqh; }
.kx-stat-ring .kx-lbl { margin-top: 1.2cqh; }
/* fill-bar (plain counts) */
.kx-bartrack { width: 11cqw; max-width: 15cqh; height: .4cqh; border-radius: 99px; background: rgba(207,196,177,.18); margin-top: 1.1cqh; overflow: hidden; }
.kx-barfill { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--bronze), var(--gold2));
  transform: scaleX(0); transform-origin: right; }
/* company tiles (i=4 "Building Since 2003") */
.kx-companies { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.6cqw; margin-top: 3.2cqh; }
.kx-companies > div { position: relative; border: .18cqh solid rgba(207,196,177,.2); border-radius: .4cqh; padding: 1.6cqh 1cqw 1.3cqh; text-align: center;
  opacity: 0; animation: kxFadeUp .55s ease both; animation-delay: calc(.5s + var(--i) * .1s); }
.kx-companies > div::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30%; height: .18cqh;
  background: var(--gold2); }
.kx-companies b { display: block; font-size: 2.6cqh; color: var(--cream); }
.kx-companies span { display: block; font-size: 2cqh; color: var(--muted); margin-top: .5cqh; line-height: 1.4; }

/* ============================================================================================
   KEYPOINTS — staged reveal (one at a time, not a wall) + gold-ring numbered chips
   ============================================================================================ */
.k-keypoints .kx-scene { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.kx-bullets { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.2cqh 3cqw; margin-top: 3.2cqh; }
.kx-bullet { display: flex; gap: 1.5cqw; align-items: flex-start; opacity: 0; transform: translateY(1.2cqh);
  animation: kxBulletIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.35s + var(--i) * .42s); }
@keyframes kxBulletIn { to { opacity: 1; transform: none; } }
.kx-bn { flex: 0 0 auto; width: 4.6cqh; height: 4.6cqh; border-radius: 50%; display: grid; place-items: center;
  border: .16cqh solid rgba(224,176,119,.5); }
.kx-bn span { font-size: 2.6cqh; font-weight: 800; color: var(--gold2); }
.kx-bt b { display: block; font-size: 3cqh; color: var(--cream); font-weight: 700; line-height: 1.4; }
.kx-bt span { display: block; font-size: 2.3cqh; color: var(--muted); margin-top: .5cqh; line-height: 1.45; }

/* ============================================================================================
   GIFT bumper — round progress pips (ONE live pip pulses — the slide's single accent motion),
   static icon, no radial glow
   ============================================================================================ */
.k-gift .kx-scene { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 1.4cqh; min-height: 100%; }
.kx-roundpips { display: flex; gap: 1.1cqw; opacity: 0; animation: kxFadeUp .5s ease .1s both; }
.kx-roundpips i { display: block; width: 1.6cqh; height: 1.6cqh; border-radius: 50%; border: .14cqh solid rgba(224,176,119,.55); background: transparent; }
.kx-roundpips i.kx-pip-done { background: var(--bronze); border-color: var(--bronze); }
.kx-roundpips i.kx-pip-now { background: var(--gold2); border-color: var(--gold2); animation: kxPulseDot 1.6s ease-in-out infinite; }
@keyframes kxPulseDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.kx-gift-title { font-size: 14cqh; font-weight: 800; line-height: 1.4; padding-block: .2cqh;
  background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: kxFadeUp .7s ease .25s both; }
.kx-gift-sub { font-size: 4.6cqh; color: var(--gold); line-height: 1.4; opacity: 0; animation: kxFadeUp .6s ease .45s both; }
/* Fable H6 fix (2026-11-12): QR tile on the gift bumper itself — same white tile treatment as #qr. */
.kx-gift-qr { margin-top: 1.2cqh; width: 16cqh; height: 16cqh; padding: 1cqh; background: #fff; border-radius: 1.4cqh;
  box-shadow: 0 0 0 .25cqh rgba(224,176,119,.55); opacity: 0; animation: kxFadeUp .6s ease .55s both; }
.kx-gift-qr img { width: 100%; height: 100%; display: block; }
.kx-gift-hint { font-size: 2.7cqh; color: var(--muted); margin-top: 1.6cqh; display: flex; align-items: center; gap: .8cqw;
  opacity: 0; animation: kxFadeUp .6s ease .65s both; }
.kx-giftIcon { font-size: 3.4cqh; }

/* ============================================================================================
   TITLE (Gridline reveal) — real key-visual full-bleed, caption band at the bottom
   ============================================================================================ */
.k-title .kx-scene { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding-bottom: 3cqh; }
.kx-hero-title { font-size: 7.2cqh; font-weight: 800; line-height: 1.4; padding-block: .3cqh; color: var(--cream); max-width: 92cqw;
  opacity: 0; animation: kxFadeUp .8s ease .15s both; }
.k-title .kx-sub { color: var(--gold); }

/* ============================================================================================
   VIDEO slate — "now playing" badge, static dot (the slide's only accent is the Ken Burns drift
   when a real photo is present; typography-only video slates get no continuous motion at all)
   ============================================================================================ */
.k-video .kx-scene { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 1.8cqh; min-height: 100%; }
.kx-vbadge { display: flex; align-items: center; gap: 1cqw; font-size: 2.8cqh; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  border: .2cqh solid var(--bronze); border-radius: 99px; padding: .9cqh 2.6cqw .9cqh 1.6cqw; opacity: 0; animation: kxFadeUp .5s ease both; }
.kx-dot { width: 1.3cqh; height: 1.3cqh; border-radius: 50%; background: #ff6b5e; }
.k-video .kx-title { font-size: 7.4cqh; }
.kx-videocard.kx-gridline .kx-vbadge { color: var(--gl-camel); border-color: var(--gl-taupe); }

/* ============================================================================================
   WINNER bumper — gold medallion, static rays (one-time pop-in only, no infinite spin)
   ============================================================================================ */
.k-winner .kx-scene { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 1.6cqh; min-height: 100%; }
.kx-trophy { position: relative; width: 17cqh; height: 17cqh; display: grid; place-items: center; }
.kx-trophy-rays { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 5%, rgba(246,217,168,.4) 7%, transparent 9% 16%, rgba(246,217,168,.4) 18%, transparent 20% 27%,
    rgba(246,217,168,.4) 29%, transparent 31% 38%, rgba(246,217,168,.4) 40%, transparent 42% 49%, rgba(246,217,168,.4) 51%, transparent 53% 60%,
    rgba(246,217,168,.4) 62%, transparent 64% 71%, rgba(246,217,168,.4) 73%, transparent 75% 82%, rgba(246,217,168,.4) 84%, transparent 86% 93%, rgba(246,217,168,.4) 95%, transparent 100%);
  opacity: 0; animation: kxRaysIn .9s ease .1s both; }
@keyframes kxRaysIn { from { opacity: 0; transform: scale(.8); } to { opacity: .7; transform: scale(1); } }
.kx-trophy-badge { position: relative; z-index: 1; width: 10.5cqh; height: 10.5cqh; border-radius: 50%; display: grid; place-items: center; font-size: 6cqh;
  background: radial-gradient(circle at 35% 30%, var(--gold2), var(--gold) 55%, var(--bronze) 100%);
  animation: kxTrophyPop .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes kxTrophyPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.k-winner .kx-kicker { font-size: 5.2cqh; margin-top: .6cqh; }
.kx-champ { font-size: 14cqh; font-weight: 900; line-height: 1.4; padding-block: .2cqh; max-width: 88cqw;
  background: linear-gradient(180deg, #fff6e3, var(--gold2) 40%, var(--gold) 75%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: kxFadeUp .6s ease .2s both; }
.kx-champ-ph { font-size: 5.6cqh; color: var(--muted); opacity: 0; animation: kxFadeUp .6s ease .2s both; }

/* ============================================================================================
   THANKS — closing bookend. Typography-only (no reused generic skyline) — the same restraint as
   the rest of the rebuilt deck; the gold wordmark + hairline carry it.
   ============================================================================================ */
.k-thanks .kx-scene { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-height: 100%; }
.k-thanks .kx-title { font-size: 12.5cqh; }
.kx-tag { font-size: 2.9cqh; letter-spacing: .1em; color: var(--gold); margin-top: 1.8cqh; opacity: 0; animation: kxFadeUp .6s ease .5s both; }
.kx-hotline { font-size: 3.3cqh; color: var(--cream); margin-top: 1.4cqh; opacity: 0; animation: kxFadeUp .6s ease .75s both; }
.kx-hotline b { color: var(--gold); font-weight: 800; }

/* ============================================================================================
   GRIDLINE brand mode — Gridline (Financial District) has its OWN brand identity: warm espresso
   brown + taupe/camel + off-white, thin geometric sans (Jost) for the "Gridline." wordmark.
   Deliberately NOT the gold/charcoal of the rest of the deck. Scoped entirely to `.kx-gridline`.
   ============================================================================================ */
@font-face { font-family: "Jost"; font-weight: 200; font-style: normal; src: url("/static/fonts/jost-200.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; src: url("/static/fonts/jost-300.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; src: url("/static/fonts/jost-500.ttf") format("truetype"); font-display: swap; }

.kx-gridline { --gl-espresso: #2a2018; --gl-taupe: #a99479; --gl-camel: #c9a878; --gl-cream: #f3ede2; }
.kx-gridline .kx-kicker { color: var(--gl-camel); font-family: "Jost", sans-serif; font-weight: 500; }
.kx-gridline .kx-title, .kx-gridline .kx-hero-title { color: var(--gl-cream); background: none; -webkit-background-clip: initial; background-clip: initial;
  font-family: "Jost", sans-serif; font-weight: 300; }
.kx-gridline .kx-sub { color: var(--gl-taupe); }
.kx-gridline .kx-pcard .kx-sub, .kx-gridline .kx-pcard .kx-note { color: rgba(201,168,120,.85); }
.kx-gridline .kx-num { color: var(--gl-cream); }
.kx-gridline .kx-lbl { color: var(--gl-taupe); }
.kx-gridline .kx-stat-ring .kx-ring-fg { stroke: var(--gl-camel); }
.kx-gridline .kx-barfill { background: linear-gradient(90deg, var(--gl-taupe), var(--gl-camel)); }
.kx-gridline .kx-bn { border-color: rgba(201,168,120,.55); }
.kx-gridline .kx-bn span { color: var(--gl-camel); }
.kx-gridline .kx-bt b { color: var(--gl-cream); }
.kx-gridline .kx-bt span { color: var(--gl-taupe); }

/* "Gridline." wordmark — the actual brand lockup, thin geometric sans with the trailing period */
.kx-gl-wordmark { font-family: "Jost", sans-serif; font-weight: 200; font-size: 11cqh; line-height: 1.3; color: var(--gl-cream);
  margin-bottom: .4cqh; opacity: 0; animation: kxFadeUp .8s ease .05s both; }
.kx-gl-sub { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; font-size: 2.6cqh;
  color: var(--gl-taupe); margin-bottom: 2.6cqh; opacity: 0; animation: kxFadeUp .6s ease .25s both; }
/* grid-line word-spread headline, matching the brand ad's "YOUR — TIME — TO — LEAD — IS — COMING." line */
.kx-gl-wordline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; width: 100%;
  border-top: .16cqh solid rgba(201,168,120,.4); padding-top: 2cqh; margin-top: 1cqh; gap: 1cqh 1.4cqw; }
.kx-gl-wordline span { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .04em; font-size: 3cqh; color: var(--gl-cream);
  text-transform: uppercase; opacity: 0; transform: translateY(.8cqh); animation: kxBulletIn .5s ease both; animation-delay: calc(.5s + var(--i) * .18s); }

/* ============================================================================================
   Delivered-projects gallery inset — real photos (MFZ Google Drive, 2026-11-12) on slides 4/5/7.
   A small framed second photo + plot label sits beside the full-bleed hero so each slide reads as
   a mini portfolio gallery rather than one picture.
   ============================================================================================ */
.kx-gallery-inset { position: absolute; left: 0; top: 0; width: 18cqw; max-width: 24cqh;
  opacity: 0; animation: kxFadeUp .7s ease .7s both; }
.kx-gallery-inset img { display: block; width: 100%; height: 13cqh; object-fit: cover; border-radius: .4cqh;
  border: .16cqh solid rgba(224,176,119,.45); }
.kx-gallery-label { display: block; margin-top: .8cqh; font-size: 2cqh; letter-spacing: .08em; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .kx-bg.kx-show, .kx-trophy-rays, .kx-roundpips i.kx-pip-now { animation: none !important; }
}