/* ==================================================================
   100% BONUS ACCOUNT — homepage feature section.
   Markup lives inline in index.html (single consumer), directly below
   #home-accounts and above #markets. It promotes the account that
   /bonus-account carries under a recorded BRD §7 conflict — see the note
   at the top of page/bonus-account.html; the same Compliance sign-off
   gates this section.

   Ported from update/Home/royce-home-bonus.html. Deviations, and why:

   1. CLASS NAMES. The prototype scopes everything under the id
      #royce-home-bonus with .rhb-* children. Here the section is the
      class .rz-bonus with BEM children, in step with .rz-mkt / .rz-mt5 /
      .rz-fund on the same page.

   2. FONTS. Marcellus + Inter are dropped; the section inherits the
      self-hosted 'Ping AR + LT' — neither Google font covers Arabic
      (NFR-10). Sizes and line-heights are the prototype's.

   3. TOKENS. Navy, ivory and the two golds resolve to the site's
      --royce-* custom properties (css/style.css), which carry the BRD
      §9.1 values the prototype hard-codes. The cobalt / electric / cyan
      accent family is the promotion's own signature and stays scoped to
      this section — it is never used for a fill larger than a 5px bar.

   4. FIXED DARK, NOT THEME-AWARE. The grid lines, glows and bar fills
      are drawn for a dark plate, so the section keeps its own background
      in both themes — the same call css/markets.css and css/funding.css
      made. The 1px gradient seams (::before / ::after) are kept: on the
      dark theme this sits between two dark bands and they are what
      separates it from them.

   5. REVEAL USES THE SITE'S OBSERVER. The prototype ships an IIFE that
      adds .rhb-armed / .rhb-in through an IntersectionObserver.
      general.js already does exactly this for .animate-on-scroll, so the
      section opts into that and no script is added. The blanket fade
      style.css attaches to .animate-on-scroll is cancelled so only the
      staggered children move; the prototype's .rhb-d1…d6 delays become a
      --d custom property on each .rz-bonus__r element.

   6. NO COUNT-UP. The prototype counts the three ledger amounts up from
      zero in JS. Maintainer decision: the amounts are static text with
      data-lang keys, and only the bars animate.

   7. RTL. Physical left / right offsets are logical here (the bar fills,
      the fact dividers, the mobile fact labels), so the ledger reads
      correctly under dir="rtl" without a second rule set.

   CONTENT RULES CARRIED OVER FROM /bonus-account
    · Every figure is a value already published on that page, rendered
      verbatim — bonus rate 100%, maximum Bonus Credit up to USD 50,000.
      Do not round, restate or "tidy" any of them.
    · The ledger is a worked example, labelled as illustrative; it makes
      no claim about when or how Bonus Credit is applied.
    · Bonus Credit is promotional trading credit and is not withdrawable
      cash — the note under the CTAs says so in the page's approved words.
   ================================================================== */

/* #region ------- ( 1- Section shell ) ---------- */
.rz-bonus {
  --rz-bonus-cobalt: #1b3fa8;
  --rz-bonus-electric: #2e6bff;
  --rz-bonus-cyan: #4fd8e8;
  --rz-bonus-deep: #060f1e;
  --rz-bonus-pad-y: clamp(66px, 6.4vw, 86px);
  --rz-bonus-gutter: clamp(20px, 4vw, 40px);
  --rz-bonus-maxw: 1240px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--rz-bonus-pad-y) 0;
  background: radial-gradient(120% 90% at 88% 8%, rgba(46, 107, 255, 0.2) 0%, rgba(46, 107, 255, 0) 58%), radial-gradient(70% 60% at 96% 96%, rgba(79, 216, 232, 0.1) 0%, rgba(79, 216, 232, 0) 60%), linear-gradient(180deg, var(--royce-navy) 0%, var(--rz-bonus-deep) 52%, var(--royce-navy) 100%);
  color: var(--royce-ivory);
  -webkit-font-smoothing: antialiased;
}
.rz-bonus *,
.rz-bonus *::before,
.rz-bonus *::after {
  box-sizing: border-box;
}

/* seam-free transitions into the sections above and below */
.rz-bonus::before,
.rz-bonus::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
}
.rz-bonus::before {
  top: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 216, 232, 0.42) 28%, rgba(214, 166, 28, 0.42) 62%, transparent 100%);
}
.rz-bonus::after {
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(214, 166, 28, 0.24) 40%, transparent 100%);
}

.rz-bonus__container {
  max-width: var(--rz-bonus-maxw);
  margin: 0 auto;
  padding: 0 var(--rz-bonus-gutter);
  position: relative;
  z-index: 1;
}

.rz-bonus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(40px, 5.6vw, 84px);
  align-items: center;
}
/* #endregion */

/* #region ------- ( 2- Copy column ) ---------- */
.rz-bonus__eyebrow {
  display: block;
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--royce-gold);
}
.rz-bonus__title {
  margin: 0 0 20px;
  font-weight: 400;
  font-size: clamp(33px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--royce-ivory);
}
.rz-bonus__title-sub {
  display: block;
  margin-top: 6px;
  color: rgba(248, 248, 248, 0.52);
}
.rz-bonus__lede {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(14.5px, 1.06vw, 16px);
  line-height: 1.72;
  color: rgba(248, 248, 248, 0.66);
}

/* facts */
.rz-bonus__facts {
  display: flex;
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid rgba(248, 248, 248, 0.1);
  border-bottom: 1px solid rgba(248, 248, 248, 0.1);
}
.rz-bonus__fact {
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 0;
  padding-inline-end: 22px;
}
.rz-bonus__fact + .rz-bonus__fact {
  padding-inline-start: 22px;
  border-inline-start: 1px solid rgba(248, 248, 248, 0.1);
}
.rz-bonus__fact-value {
  margin: 0 0 6px;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.15;
  color: var(--royce-ivory);
}
.rz-bonus__fact-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.44);
}

/* CTAs */
.rz-bonus__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.rz-bonus__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 17px 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.rz-bonus__btn--primary {
  background: var(--royce-gold);
  color: var(--royce-navy);
  border: 1px solid var(--royce-gold);
  box-shadow: 0 0 0 rgba(214, 166, 28, 0);
}
.rz-bonus__btn--primary:hover {
  background: var(--royce-gold-hover);
  border-color: var(--royce-gold-hover);
  color: var(--royce-navy);
  box-shadow: 0 10px 34px rgba(214, 166, 28, 0.22);
}
.rz-bonus__btn--ghost {
  background: transparent;
  color: var(--royce-ivory);
  border: 1px solid rgba(79, 216, 232, 0.38);
}
.rz-bonus__btn--ghost:hover {
  color: var(--royce-ivory);
  border-color: var(--rz-bonus-cyan);
  background: rgba(79, 216, 232, 0.07);
}
.rz-bonus__btn:focus-visible {
  outline: 2px solid var(--royce-gold);
  outline-offset: 3px;
}

.rz-bonus__note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(248, 248, 248, 0.38);
}
/* #endregion */

/* #region ------- ( 3- Signature visual — capacity ledger ) ---------- */
.rz-bonus__visual {
  position: relative;
  padding: clamp(26px, 2.6vw, 38px) 0;
}
.rz-bonus__grid-lines {
  position: absolute;
  inset: 0 -8% 0 -4%;
  background-image: repeating-linear-gradient(90deg, rgba(248, 248, 248, 0.055) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(248, 248, 248, 0.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(75% 70% at 55% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 55% 50%, #000 20%, transparent 100%);
  pointer-events: none;
}
.rz-bonus__ledger {
  position: relative;
}

.rz-bonus__line-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 11px;
}
.rz-bonus__tag {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.46);
  white-space: nowrap;
}
.rz-bonus__tag--lit {
  color: rgba(79, 216, 232, 0.86);
}
.rz-bonus__tag--gold {
  color: var(--royce-gold);
}

.rz-bonus__amount {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1;
  color: rgba(248, 248, 248, 0.9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rz-bonus__amount--total {
  font-size: clamp(29px, 3.1vw, 40px);
  color: var(--royce-ivory);
  text-shadow: 0 0 34px rgba(79, 216, 232, 0.3);
}

.rz-bonus__track {
  position: relative;
  height: 3px;
  background: rgba(248, 248, 248, 0.07);
  overflow: hidden;
}
.rz-bonus__track--total {
  height: 5px;
  background: rgba(248, 248, 248, 0.05);
}
.rz-bonus__fill {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
}
.rz-bonus__fill--funds {
  inset-inline-start: 0;
  width: 50%;
  background: linear-gradient(90deg, rgba(27, 63, 168, 0.35), var(--rz-bonus-electric));
}
.rz-bonus__fill--bonus {
  inset-inline-start: 50%;
  width: 50%;
  background: linear-gradient(90deg, var(--rz-bonus-electric), var(--rz-bonus-cyan));
  box-shadow: 0 0 20px rgba(79, 216, 232, 0.45);
}
.rz-bonus__fill--total {
  inset-inline-start: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(27, 63, 168, 0.55) 0%, var(--rz-bonus-electric) 42%, var(--rz-bonus-cyan) 88%, var(--royce-gold) 100%);
}

/* operators sit in the ledger gutter with a ruled sum line */
.rz-bonus__operator {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}
.rz-bonus__operator span {
  font-size: 17px;
  line-height: 1;
  color: rgba(214, 166, 28, 0.8);
}
.rz-bonus__operator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(248, 248, 248, 0.14), transparent);
}
.rz-bonus__operator--sum::after {
  background: linear-gradient(90deg, rgba(214, 166, 28, 0.42), rgba(214, 166, 28, 0.06));
}

.rz-bonus__legend {
  margin: 26px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(248, 248, 248, 0.34);
  max-width: 42ch;
}
/* #endregion */

/* #region ------- ( 4- Entrance choreography ) ---------- */
/* general.js adds .animate-in to any .animate-on-scroll element. The
   blanket fade style.css attaches to that class is cancelled here so the
   section does not move as a whole — only the .rz-bonus__r children rise,
   each on its own --d delay, and the bars fill after them. See deviation 5. */
.rz-bonus.animate-on-scroll {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
.rz-bonus .rz-bonus__r {
  opacity: 0;
  transform: translateY(14px);
}
.rz-bonus .rz-bonus__fill {
  width: 0;
}
.rz-bonus.animate-in .rz-bonus__r {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.68s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.68s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0s);
}
.rz-bonus.animate-in .rz-bonus__fill {
  transition: width 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rz-bonus.animate-in .rz-bonus__fill--funds {
  width: 50%;
  transition-delay: 0.3s;
}
.rz-bonus.animate-in .rz-bonus__fill--bonus {
  width: 50%;
  transition-delay: 0.62s;
}
.rz-bonus.animate-in .rz-bonus__fill--total {
  width: 100%;
  transition-delay: 0.98s;
}
/* #endregion */

/* #region ------- ( 5- Responsive ) ---------- */
@media (max-width: 1199.98px) {
  .rz-bonus__grid {
    gap: clamp(38px, 5vw, 56px);
  }
  .rz-bonus__fact {
    padding-inline-end: 16px;
  }
  .rz-bonus__fact + .rz-bonus__fact {
    padding-inline-start: 16px;
  }
}

@media (max-width: 991.98px) {
  .rz-bonus {
    --rz-bonus-pad-y: clamp(62px, 9vw, 74px);
  }
  .rz-bonus__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .rz-bonus__lede {
    max-width: 58ch;
  }
  .rz-bonus__visual {
    padding: 8px 0 0;
  }
  .rz-bonus__grid-lines {
    inset: -14px -4%;
  }
}

/* Mobile — designed separately, not a squeezed desktop column */
@media (max-width: 767.98px) {
  .rz-bonus {
    --rz-bonus-pad-y: 64px;
    --rz-bonus-gutter: 22px;
    background: radial-gradient(120% 46% at 80% 4%, rgba(46, 107, 255, 0.2) 0%, rgba(46, 107, 255, 0) 62%), linear-gradient(180deg, var(--royce-navy) 0%, var(--rz-bonus-deep) 58%, var(--royce-navy) 100%);
  }
  .rz-bonus__grid {
    gap: 40px;
  }

  .rz-bonus__eyebrow {
    margin-bottom: 18px;
    font-size: 10.5px;
    letter-spacing: 0.2em;
  }
  .rz-bonus__title {
    font-size: 33px;
    line-height: 1.12;
    margin-bottom: 18px;
  }
  .rz-bonus__title-sub {
    margin-top: 4px;
  }
  .rz-bonus__lede {
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.78;
    max-width: 100%;
  }

  /* metrics stack as clean ruled rows — never a dense inline row */
  .rz-bonus__facts {
    display: block;
    margin-bottom: 30px;
    border-top: 1px solid rgba(248, 248, 248, 0.1);
    border-bottom: none;
  }
  .rz-bonus__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(248, 248, 248, 0.1);
  }
  .rz-bonus__fact + .rz-bonus__fact {
    padding-inline-start: 0;
    border-inline-start: none;
  }
  .rz-bonus__fact-value {
    margin: 0;
    font-size: 20px;
  }
  .rz-bonus__fact-label {
    font-size: 10.5px;
    text-align: end;
    color: rgba(248, 248, 248, 0.46);
  }

  /* full-width, easy-to-tap CTAs */
  .rz-bonus__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }
  .rz-bonus__btn {
    width: 100%;
    padding: 19px 24px;
    font-size: 12.5px;
  }
  .rz-bonus__note {
    font-size: 11.5px;
  }

  /* ledger sits below the copy as a clean vertical sequence */
  .rz-bonus__line-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 13px;
  }
  .rz-bonus__tag {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .rz-bonus__amount {
    font-size: 26px;
  }
  .rz-bonus__amount--total {
    font-size: 34px;
  }
  .rz-bonus__operator {
    margin: 24px 0;
  }
  .rz-bonus__legend {
    margin-top: 24px;
    max-width: 100%;
  }
}

@media (max-width: 399.98px) {
  .rz-bonus {
    --rz-bonus-gutter: 18px;
  }
  .rz-bonus__title {
    font-size: 30px;
  }
  .rz-bonus__amount {
    font-size: 24px;
  }
  .rz-bonus__amount--total {
    font-size: 31px;
  }
  .rz-bonus__fact-value {
    font-size: 18px;
  }
}
/* #endregion */

/* #region ------- ( 6- Reduced motion ) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rz-bonus .rz-bonus__r {
    opacity: 1;
    transform: none;
  }
  .rz-bonus .rz-bonus__fill--funds,
  .rz-bonus .rz-bonus__fill--bonus {
    width: 50%;
  }
  .rz-bonus .rz-bonus__fill--total {
    width: 100%;
  }
  .rz-bonus .rz-bonus__r,
  .rz-bonus .rz-bonus__fill,
  .rz-bonus .rz-bonus__btn {
    transition: none !important;
  }
}
/* #endregion */