/* ==================================================================
   WELCOME OFFER, NATIONAL DAY VARIANT — Saudi National Day 100% Deposit
   Bonus, homepage only. One of the two offers index.html carries as
   <template>s inside [data-rz-promo]; that attribute picks which one
   js/home-welcome.js clones in and runs. Markup lives in that template
   (single consumer), last child of <main>. The supplied artwork is the
   entire visual surface. This file does three things and nothing else:
   it docks the artwork under the header at a size that always fits the
   screen, it slides it down as one object, and it pins three transparent
   controls to the buttons painted into the image. Promotes the account
   /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 layer.

   Ported from update/newDropDown/Dropdown National Day/assets/
   royce-welcome-bonus.css. Deviations, and why:

   1. CLASS NAMES. The package is .rz-welcome-bonus*. Here it is .rz-nd
      with BEM children — its own namespace, because css/home-welcome.css
      (the standing welcome offer) owns .rz-welcome and both stylesheets
      load on the homepage. The data-rz-welcome-* hooks that
      js/home-welcome.js binds to are shared with that offer, which is
      what lets one script drive whichever is switched on. Hotspot percentages are the package's, verbatim — they
      were measured against the pixel bounds of the painted buttons in
      these exact exports. If either artwork is re-rendered, re-measure.

   2. FONTS. The package's Inter stack is dropped; the disclosure line
      inherits the self-hosted 'Ping AR + LT', which covers Arabic
      (NFR-10). It is the only text this layer draws.

   3. HEADER HEIGHT. The package hard-codes --rz-wb-header-h at 76px
      (64px mobile). The site's header is fluid across its width tiers
      and is not assumed here: css/royce-header.css sets its resting
      height as --nav-h on <html>, and the dock reads that.

   4. LANGUAGE. The package's JS switches a --ar modifier class on. Here
      the Arabic copy is a pre-rendered page whose <html> carries
      lang="ar", so the Arabic hotspot and glow geometry keys off
      html[lang="ar"] and no script is involved. The artwork itself is
      swapped by the dictionary (hw_art_* keys, data-lang-attr).

   5. TOKENS. The focus ring resolves to --royce-gold-hover (BRD §9.1).
      The scrim, the sheen and the glow keep the package's own values:
      they are tuned to this dark, gold-framed artwork and paint nothing
      of their own on the page.

   6. SCRIM OVER THE HEADER. The layer sits at 9000, above the header
      (100) and below #loader (9999), and the scrim covers the whole
      viewport, header included — the dialog is aria-modal and the page
      behind it is inert (js/home-welcome.js), so the header should read
      as unavailable while it is open. The dock still starts at the
      header line, so the artwork emerges from behind the bar.

   ARTWORK PROVENANCE — UNCONFIRMED. The package notes the stock
   template archives supplied during design carry licence files that
   were not checked. Confirm the eight exports under
   /image/saudi-national-day/ are cleared for standalone web use before
   a production deploy (docs/www2026-audit.md §12).

   CONTENT RULES CARRIED OVER FROM /bonus-account
    · The disclosure is the site's approved wording, not the package's.
    · "Learn More" points at /bonus-account until /promotion-terms
      exists.
    · The painted "First qualifying deposit only" contradicts the bonus
      page (qualifying deposits are multiple). It is pixels; recorded in
      docs/www2026-audit.md §12 for Compliance and the designer.
   ================================================================== */

/* #region ------- ( 1- Root, tokens and choreography ) ---------- */
.rz-nd {
  /* ---- placement ------------------------------------------------ */
  /* the fixed header's resting height, a token set by css/royce-header.css */
  --rz-nd-nav-h: var(--nav-h);
  --rz-nd-side: 4vw; /* side margin either edge of the artwork */
  --rz-nd-max: 1520px; /* upper bound on very wide monitors */
  --rz-nd-safe: 48px; /* clearance below the artwork, so the CTA is
                              always reachable without scrolling */
  --rz-nd-ar: 2.45193; /* 1964 / 801 — the desktop artwork */
  --rz-nd-z: 9000; /* above the chrome, below #loader (9999) */

  /* ---- motion --------------------------------------------------- */
  --rz-nd-ease-open: cubic-bezier(0.22, 1, 0.36, 1);
  --rz-nd-ease-close: cubic-bezier(0.32, 0, 0.67, 0);
  --rz-nd-open-ms: 1200ms; /* full descent, start to settle */
  --rz-nd-close-ms: 420ms; /* retract — js RETRACT_MS sits just above this */
  --rz-nd-scrim-ms: 700ms;
  --rz-nd-travel: -112%; /* starts fully clear of the header line */
  --rz-nd-settle: 1350ms; /* decorative light waits for the slide to land */

  /* ---- decorative light ----------------------------------------- */
  --rz-nd-shine-a: 0.4; /* CTA streak strength; hover lifts it */
  --rz-nd-glow-a: 49% 18%; /* centre of the 100% headline */
  --rz-nd-glow-b: 90% 24%; /* centre of the National Day emblem */

  /* ---- surfaces ------------------------------------------------- */
  --rz-nd-scrim-rgb: 4, 11, 8;
  --rz-nd-focus: var(--royce-gold-hover, #e6be4a);

  position: fixed;
  inset: 0;
  z-index: var(--rz-nd-z);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}
.rz-nd *,
.rz-nd *::before,
.rz-nd *::after {
  box-sizing: border-box;
}

.rz-nd[hidden] {
  display: none;
}
.rz-nd.is-open {
  pointer-events: auto;
}
/* #endregion */

/* #region ------- ( 2- Scrim: the homepage stays visible, cooled back ) ---------- */
.rz-nd__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--rz-nd-scrim-rgb), 0.52) 0%, rgba(var(--rz-nd-scrim-rgb), 0.44) 55%, rgba(var(--rz-nd-scrim-rgb), 0.3) 100%);
  opacity: 0;
  transition: opacity var(--rz-nd-close-ms) var(--rz-nd-ease-close) 0ms;
  cursor: pointer;
}
.rz-nd.is-open .rz-nd__scrim {
  opacity: 1;
  transition: opacity var(--rz-nd-scrim-ms) var(--rz-nd-ease-open) 0ms;
}
/* #endregion */

/* #region ------- ( 3- Dock: clips the sheet at the header line ) ---------- */
/* The artwork appears to slide out from behind the navigation rather
   than over it. */
.rz-nd__dock {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--rz-nd-nav-h);
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  pointer-events: none;
}
/* #endregion */

/* #region ------- ( 4- The sheet is the artwork ) ---------- */
/* Width is whichever is smallest of: the design cap, the viewport minus
   its side margins, or the width implied by the height the screen can
   actually show. That last term is what keeps the gold CTA on screen on
   a 1366x768 or a 14-inch laptop without any scrolling. */
.rz-nd__sheet {
  position: relative;
  flex: 0 0 auto;
  pointer-events: auto;
  width: min(var(--rz-nd-max), calc(100vw - (var(--rz-nd-side) * 2)), calc((100vh - var(--rz-nd-nav-h) - var(--rz-nd-safe)) * var(--rz-nd-ar)));
  border-radius: 0; /* house standard: no radius */
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.72);
  transform: translate3d(0, var(--rz-nd-travel), 0);
  opacity: 0.001;
  /* base rule carries the CLOSING transition; .is-open overrides it below */
  transition:
    transform var(--rz-nd-close-ms) var(--rz-nd-ease-close) 0ms,
    opacity var(--rz-nd-close-ms) var(--rz-nd-ease-close) 0ms;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: none;
}

@supports (height: 100dvh) {
  .rz-nd__sheet {
    width: min(var(--rz-nd-max), calc(100vw - (var(--rz-nd-side) * 2)), calc((100dvh - var(--rz-nd-nav-h) - var(--rz-nd-safe)) * var(--rz-nd-ar)));
  }
}

.rz-nd.is-open .rz-nd__sheet {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition:
    transform var(--rz-nd-open-ms) var(--rz-nd-ease-open) 0ms,
    opacity 520ms var(--rz-nd-ease-open) 0ms;
}

/* Artwork. Proportional scaling only — never stretched, never cropped.
   The aspect-ratio on the wrapper reserves the box before the file
   arrives, so nothing on the page shifts when it loads. */
.rz-nd__art {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--rz-nd-ar);
  background: #060b08;
}

.rz-nd__img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* the box above already carries the artwork's exact ratio, so contain
     is a 1:1 fit — it can never stretch and can never crop */
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
}
/* #endregion */

/* #region ------- ( 5- Controls: transparent hit areas over the painted buttons ) ---------- */
/* Sized and centred in percentages of the artwork, so they stay locked
   to the painted buttons at every width. Each keeps a practical minimum
   hit target on smaller screens. */
.rz-nd__hit {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.rz-nd__hit:focus {
  outline: none;
}
.rz-nd__hit:focus-visible {
  outline: 2px solid var(--rz-nd-focus);
  outline-offset: 2px;
}

/* "Get 100% Bonus" — the gold pill.  centre 49.85% / 68.35% of the artwork */
.rz-nd__hit--cta {
  left: 49.85%;
  top: 68.35%;
  width: 20.47%;
  height: 11.11%;
  min-width: 150px;
  min-height: 44px;
  border-radius: 999px;
}
.rz-nd__hit--cta:hover,
.rz-nd__hit--cta:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 238, 186, 0.55),
    0 0 30px rgba(255, 210, 110, 0.3);
}

/* "Learn More".  centre 49.90% / 77.72% */
.rz-nd__hit--terms {
  left: 49.9%;
  top: 77.72%;
  width: 7.64%;
  height: 5.62%;
  min-width: 96px;
  min-height: 30px;
  border-radius: 3px;
}
.rz-nd__hit--terms:hover,
.rz-nd__hit--terms:focus-visible {
  box-shadow: 0 0 22px rgba(255, 210, 110, 0.26);
}

/* The X painted into the top right corner.  centre 96.84% / 6.49% */
.rz-nd__hit--close {
  left: 96.84%;
  top: 6.49%;
  width: 3.67%;
  height: 8.49%;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
}
.rz-nd__hit--close:hover,
.rz-nd__hit--close:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}
/* #endregion */

/* #region ------- ( 6- Arabic artwork: the same three controls, measured against the Arabic export ) ---------- */
/* Keyed off the page language, not the writing direction: the geometry
   belongs to the artwork the ar dictionary selects, and the hotspots are
   physical positions in that image — they do not mirror. */
html[lang='ar'] .rz-nd__hit--cta {
  left: 49.85%;
  top: 75.72%;
  width: 21.69%;
  height: 10.86%;
}

html[lang='ar'] .rz-nd__hit--terms {
  left: 50.15%;
  top: 84.77%;
  width: 9.17%;
  height: 5.24%;
}

html[lang='ar'] .rz-nd__hit--close {
  left: 96.95%;
  top: 6.99%;
  width: 3.67%;
  height: 8.49%;
}

/* the Arabic artwork places its emblem slightly differently */
html[lang='ar'] .rz-nd {
  --rz-nd-glow-a: 49% 18%;
  --rz-nd-glow-b: 87% 21%;
}
/* #endregion */

/* #region ------- ( 7- Decorative light: three inert layers, after the slide has settled ) ---------- */
/* Transform and opacity only: no filters, nothing that forces a repaint.
   All three are pointer-transparent and sit below the hit areas. */

/* 1. Sheen: one slow pass of light across the whole artwork */
.rz-nd__sheen,
.rz-nd__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.rz-nd__sheen {
  overflow: hidden;
}

.rz-nd__sheen::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 44%;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 0%, rgba(255, 241, 205, 0.1) 42%, rgba(255, 255, 255, 0.055) 56%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
  transform: translate3d(-150%, 0, 0) skewX(-10deg);
  will-change: transform;
}

.rz-nd.is-open .rz-nd__sheen::before {
  animation: rz-nd-sheen 15s var(--rz-nd-settle) linear infinite;
}

@keyframes rz-nd-sheen {
  0% {
    transform: translate3d(-150%, 0, 0) skewX(-10deg);
  }
  38% {
    transform: translate3d(330%, 0, 0) skewX(-10deg);
  }
  100% {
    transform: translate3d(330%, 0, 0) skewX(-10deg);
  }
}

/* 2. Gold glow: a slow breath over the two gold focal points. The
      positions are tokens, so each artwork and breakpoint can place them. */
.rz-nd__glow {
  background: radial-gradient(24% 40% at var(--rz-nd-glow-a), rgba(255, 208, 116, 0.2) 0%, rgba(255, 208, 116, 0) 70%), radial-gradient(17% 32% at var(--rz-nd-glow-b), rgba(255, 208, 116, 0.16) 0%, rgba(255, 208, 116, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: opacity;
}

.rz-nd.is-open .rz-nd__glow {
  animation: rz-nd-breathe 11s var(--rz-nd-settle) ease-in-out infinite;
}

@keyframes rz-nd-breathe {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.9;
  }
}

/* 3. CTA shine: a reflective streak crossing the gold pill every few
      seconds. It lives on the hotspot, so it is aligned to the painted
      button in both languages for free. */
.rz-nd__hit--cta {
  overflow: hidden;
}

.rz-nd__hit--cta::after {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 247, 219, var(--rz-nd-shine-a)) 48%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-170%, 0, 0) skewX(-14deg);
  pointer-events: none;
  will-change: transform;
}

.rz-nd.is-open .rz-nd__hit--cta::after {
  animation: rz-nd-cta-shine 7s var(--rz-nd-settle) cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.rz-nd__hit--cta:hover {
  --rz-nd-shine-a: 0.62;
}

@keyframes rz-nd-cta-shine {
  0% {
    transform: translate3d(-170%, 0, 0) skewX(-14deg);
  }
  26% {
    transform: translate3d(400%, 0, 0) skewX(-14deg);
  }
  100% {
    transform: translate3d(400%, 0, 0) skewX(-14deg);
  }
}
/* #endregion */

/* #region ------- ( 8- Regulatory line, inside the artwork's own frame ) ---------- */
.rz-nd__disclosure {
  position: absolute;
  z-index: 2;
  left: 9%;
  right: 9%;
  bottom: 2.2%;
  margin: 0;
  text-align: center;
  font-size: clamp(8px, 0.6vw, 11px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(248, 248, 248, 0.6);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* Arabic does not letter-space; it takes its own line height */
.rtl .rz-nd__disclosure {
  letter-spacing: 0;
  line-height: 1.7;
  font-size: clamp(8.5px, 0.62vw, 11.5px);
}
/* #endregion */

/* #region ------- ( 9- Screen-reader only ) ---------- */
.rz-nd__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* #endregion */

/* #region ------- ( 10- Tablet: the same artwork, a little more of the screen ) ---------- */
@media (max-width: 1199.98px) {
  .rz-nd {
    --rz-nd-side: 3vw;
    --rz-nd-safe: 36px;
  }
}

@media (max-width: 991.98px) {
  .rz-nd {
    --rz-nd-side: 2.4vw;
    --rz-nd-safe: 28px;
  }
  .rz-nd__disclosure {
    bottom: 2%;
    letter-spacing: 0.03em;
  }
}
/* #endregion */

/* #region ------- ( 11- Mobile: the portrait composition, with its own hotspot geometry ) ---------- */
@media (max-width: 767.98px) {
  .rz-nd {
    --rz-nd-side: 3vw;
    --rz-nd-safe: 24px;
    --rz-nd-ar: 0.642857; /* 1080 / 1680 — the mobile artwork */
    --rz-nd-glow-a: 50% 37%; /* the 100% sits mid-canvas in portrait */
    --rz-nd-glow-b: 75% 16%;
    /* one pass rather than a continuous presence, and a gentler streak */
    --rz-nd-shine-a: 0.34;
  }

  html[lang='ar'] .rz-nd {
    --rz-nd-glow-a: 50% 37%;
    --rz-nd-glow-b: 74% 12%;
  }

  .rz-nd.is-open .rz-nd__sheen::before {
    animation-duration: 18s;
  }

  .rz-nd__hit--cta {
    left: 50%;
    top: 79.08%;
    width: 58.9%;
    height: 8.4%;
    min-width: 180px;
    min-height: 48px;
  }

  .rz-nd__hit--terms {
    left: 49.86%;
    top: 87.26%;
    width: 24%;
    height: 4.2%;
    min-width: 120px;
    min-height: 40px;
  }

  .rz-nd__hit--close {
    left: 91.85%;
    top: 5.48%;
    width: 7.6%;
    height: 4.6%;
    min-width: 46px;
    min-height: 46px;
  }

  /* Arabic mobile composition */
  html[lang='ar'] .rz-nd__hit--cta {
    left: 50%;
    top: 82.03%;
    width: 58.7%;
    height: 7.8%;
  }

  html[lang='ar'] .rz-nd__hit--terms {
    left: 50%;
    top: 89.9%;
    width: 25%;
    height: 4.4%;
  }

  html[lang='ar'] .rz-nd__hit--close {
    left: 91.85%;
    top: 5.48%;
    width: 7.6%;
    height: 4.6%;
  }

  .rz-nd__disclosure {
    left: 7%;
    right: 7%;
    bottom: 1.6%;
    font-size: 9px;
    line-height: 1.45;
  }
}

/* short phones in landscape and very short windows: the height term in
   the width formula already shrinks the artwork, this just tightens the
   margins */
@media (max-height: 560px) {
  .rz-nd {
    --rz-nd-safe: 16px;
  }
  .rz-nd__disclosure {
    display: none;
  }
}
/* #endregion */

/* #region ------- ( 12- Reduced motion: it arrives without travelling ) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rz-nd {
    --rz-nd-open-ms: 200ms;
    --rz-nd-close-ms: 160ms;
    --rz-nd-ease-open: linear;
    --rz-nd-ease-close: linear;
  }
  .rz-nd__sheet,
  .rz-nd.is-open .rz-nd__sheet {
    transform: none !important;
    transition: opacity 200ms linear !important;
    will-change: auto;
  }
  .rz-nd__scrim,
  .rz-nd.is-open .rz-nd__scrim {
    transition: opacity 200ms linear !important;
  }
  .rz-nd__hit {
    transition: none !important;
  }

  /* Decorative light is removed, not slowed: it carries no information. */
  .rz-nd.is-open .rz-nd__sheen::before,
  .rz-nd.is-open .rz-nd__glow,
  .rz-nd.is-open .rz-nd__hit--cta::after {
    animation: none !important;
  }
  .rz-nd__sheen,
  .rz-nd__glow {
    display: none;
  }
  .rz-nd__hit--cta::after {
    display: none;
  }
}
/* #endregion */

/* #region ------- ( 13- Forced colours: give the invisible controls a visible box ) ---------- */
@media (forced-colors: active) {
  .rz-nd__hit {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
  }
  .rz-nd__hit:focus-visible {
    outline: 3px solid Highlight;
  }
}
/* #endregion */