/* ==================================================================
   ROYCE CARD & WALLET — homepage feature section.
   Markup lives inline in index.html (single consumer), between
   #platforms and the funding mount. It is a teaser for /royce-card.

   Ported September 2026 from update/RoyceCard/HomeSection/adapter/
   (css/royce-home-card.css + partials/royce-card-home-section.html).
   Deviations from the package, and why:

   1. CLASS NAMES. The package prefixes everything royce-home-card-* with
      --rhc-* tokens. Here the section is .rz-hcard with BEM children and
      --rzhc-* tokens, in step with the other ported homepage sections.
      The SVG gradient id is rzHCardTrail.

   2. FONTS. Marcellus + Inter are dropped; the section inherits the
      self-hosted 'Ping AR + LT' (NFR-10).

   3. GOLD. Flat Royce Gold on the primary button, no gradient, no glow
      (BRD §9.1). The amber survives only as the runway lights.

   4. PALETTE — NOTE FOR REVIEW. Cobalt / azure / teal are the card
      artwork's colours, not BRD §9.1 tokens; scoped here, never on :root.
      Same call, same sign-off, as css/royce-card.css.

   5. FIXED DARK, NOT THEME-AWARE. The runway photograph is a dark plate,
      so the section keeps its own background in both themes — the same
      call css/home-social.css and css/funding.css made. The one thing
      that does read the theme is --rzhc-next-bg, the colour the bottom
      transition resolves into: it is the funding band's background
      (navy dark, ivory light, css/funding.css), so the seam lands on the
      section that follows.

   6. DIRECTION. Physical offsets are logical here; the trail is mirrored
      and the → flipped under html.rtl; letter-spacing is zeroed.

   7. MOTION. Reveal, off-screen pausing and the pointer tilt are
      js/royce-card.js, shared with the page. Hooks: .rz-reveal (+ .is-in),
      [data-rz-loop], [data-rz-tilt]. Off under prefers-reduced-motion.

   8. BUTTONS. .rz-hcard__btn is in the css/buttons.css base list; only
      colour and motion are here.
   ================================================================== */

/* #region ------- ( 1- Section shell ) ---------- */
.rz-hcard {
  --rzhc-navy: #081628;
  --rzhc-cobalt-deep: #0b3fae;
  --rzhc-azure: #2e90fa;
  --rzhc-teal: #12b8a6;
  --rzhc-teal-lit: #5be8d6;
  --rzhc-gold: var(--royce-gold);
  --rzhc-gold-hover: var(--royce-gold-hover);
  --rzhc-amber: #ffaa24;
  --rzhc-on: #ffffff;
  --rzhc-on-2: #d5e1f2;
  --rzhc-max: 1240px;
  --rzhc-gutter: 40px;
  --rzhc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* the band below: #funding.rz-fund, css/funding.css */
  --rzhc-next-bg: var(--royce-navy);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 5vw, 72px) 0 clamp(64px, 6vw, 88px);
  font-family:
    'Ping AR + LT',
    -apple-system,
    sans-serif;
  color: var(--rzhc-on);
  background: linear-gradient(135deg, var(--rzhc-navy) 0%, #0a2247 46%, var(--rzhc-cobalt-deep) 100%);
  -webkit-font-smoothing: antialiased;
}
html[data-bs-theme='light'] .rz-hcard {
  --rzhc-next-bg: var(--royce-ivory);
}
.rz-hcard,
.rz-hcard *,
.rz-hcard *::before,
.rz-hcard *::after {
  box-sizing: border-box;
}
/* #endregion */

/* #region ------- ( 2- Backdrop ) ---------- */
.rz-hcard__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.62;
  background-image: url('/image/royce-card/royce-card-runway.jpg');
  background-image: image-set(url('/image/royce-card/royce-card-runway.webp') type('image/webp'), url('/image/royce-card/royce-card-runway.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 74% 62%;
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, rgba(0, 0, 0, 0.55) 40%, #000 76%);
  mask-image: linear-gradient(100deg, transparent 8%, rgba(0, 0, 0, 0.55) 40%, #000 76%);
}
.rz-hcard__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(98deg, rgba(8, 22, 40, 0.97) 0%, rgba(8, 22, 40, 0.9) 26%, rgba(11, 44, 96, 0.66) 48%, rgba(11, 44, 96, 0.24) 66%, rgba(8, 22, 40, 0.3) 100%), linear-gradient(180deg, rgba(8, 22, 40, 0.5) 0%, rgba(8, 22, 40, 0) 30%, rgba(8, 22, 40, 0.55) 100%);
}
.rz-hcard__glow {
  position: absolute;
  z-index: -1;
  inset-inline-start: 48%;
  top: 6%;
  width: 58%;
  height: 78%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 170, 36, 0.24), rgba(255, 170, 36, 0) 72%);
  animation: rz-hcard-breathe 15s ease-in-out infinite alternate;
}
@keyframes rz-hcard-breathe {
  from {
    opacity: 0.55;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* fine runway lights along the lower edge */
.rz-hcard__lights {
  position: absolute;
  z-index: -1;
  inset-inline: 38% 0;
  bottom: 12%;
  height: 60px;
  pointer-events: none;
}
.rz-hcard__lights span {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rzhc-amber);
  box-shadow: 0 0 10px 2px rgba(255, 170, 36, 0.5);
  animation: rz-hcard-blink 6s var(--rzhc-ease) infinite;
}
.rz-hcard__lights span:nth-child(1) {
  inset-inline-start: 4%;
  animation-delay: 0s;
}
.rz-hcard__lights span:nth-child(2) {
  inset-inline-start: 17%;
  animation-delay: 0.5s;
  transform: scale(0.85);
}
.rz-hcard__lights span:nth-child(3) {
  inset-inline-start: 31%;
  animation-delay: 1s;
  transform: scale(0.7);
}
.rz-hcard__lights span:nth-child(4) {
  inset-inline-start: 46%;
  animation-delay: 1.5s;
  transform: scale(0.6);
}
.rz-hcard__lights span:nth-child(5) {
  inset-inline-start: 62%;
  animation-delay: 2s;
  transform: scale(0.5);
}
.rz-hcard__lights span:nth-child(6) {
  inset-inline-start: 79%;
  animation-delay: 2.5s;
  transform: scale(0.42);
}
@keyframes rz-hcard-blink {
  0%,
  100% {
    opacity: 0.28;
  }
  45% {
    opacity: 0.95;
  }
}
/* #endregion */

/* #region ------- ( 3- Layout and copy ) ---------- */
.rz-hcard__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  min-height: clamp(400px, 38vw, 520px);
  max-width: var(--rzhc-max);
  margin: 0 auto;
  padding: 0 var(--rzhc-gutter);
}

.rz-hcard__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rzhc-gold);
}
.rz-hcard__eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
}
.rz-hcard__title {
  margin: 0;
  font-size: clamp(32px, 3.9vw, 50px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--rzhc-on);
  text-shadow: 0 2px 26px rgba(8, 22, 40, 0.6);
}
.rz-hcard__lede {
  max-width: 50ch;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.66;
  color: #e7eef8;
}

.rz-hcard__relation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 14.5px;
  font-weight: 600;
}
.rz-hcard__relation i {
  display: inline-block;
  font-style: normal;
  font-size: 17px;
  color: var(--rzhc-on-2);
}
.rz-hcard__r {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  color: var(--rzhc-on);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.rz-hcard__r--acct {
  border-color: rgba(46, 144, 250, 0.62);
  background: rgba(46, 144, 250, 0.16);
}
.rz-hcard__r--wallet {
  border-color: rgba(18, 184, 166, 0.62);
  background: rgba(18, 184, 166, 0.16);
}
.rz-hcard__r--card {
  border-color: rgba(214, 166, 28, 0.62);
  background: rgba(214, 166, 28, 0.16);
}

.rz-hcard__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.rz-hcard__points li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rzhc-on);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition:
    transform 0.18s var(--rzhc-ease),
    border-color 0.18s ease,
    background 0.18s ease;
}
.rz-hcard__points li:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.13);
}
.rz-hcard__points li i {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.rz-hcard__p--wallet i {
  background: var(--rzhc-teal-lit);
}
.rz-hcard__p--wallet:hover {
  border-color: rgba(91, 232, 214, 0.7);
}
.rz-hcard__p--card i {
  background: var(--rzhc-azure);
}
.rz-hcard__p--card:hover {
  border-color: rgba(46, 144, 250, 0.7);
}
.rz-hcard__p--fee i {
  background: var(--rzhc-gold);
}
.rz-hcard__p--fee:hover {
  border-color: rgba(214, 166, 28, 0.7);
}

.rz-hcard__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 28px;
}
/* geometry is css/buttons.css; colour and motion only */
.rz-hcard__btn {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s var(--rzhc-ease);
}
.rz-hcard__btn--gold {
  background: var(--rzhc-gold);
  border-color: var(--rzhc-gold);
  color: var(--royce-black);
}
.rz-hcard__btn--gold:hover,
.rz-hcard__btn--gold:focus-visible {
  background: var(--rzhc-gold-hover);
  border-color: var(--rzhc-gold-hover);
  color: var(--royce-black);
  transform: translateY(-2px);
}
.rz-hcard__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--rzhc-on);
}
.rz-hcard__btn--ghost:hover,
.rz-hcard__btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--rzhc-on);
  color: var(--rzhc-on);
  transform: translateY(-2px);
}
.rz-hcard a:focus-visible {
  outline: 3px solid var(--rzhc-gold);
  outline-offset: 3px;
}

.rz-hcard__foot {
  max-width: 56ch;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #bdcadd;
}
/* #endregion */

/* #region ------- ( 4- Visual — wallet, trail, card ) ---------- */
/* Outer wrapper places; inner wrapper rotates. The script only ever writes
   to [data-rz-tilt], so motion cannot overwrite the positioning transform. */
.rz-hcard__visual {
  position: relative;
  padding-inline-end: clamp(0px, 2.6vw, 40px);
}
.rz-hcard__stack {
  position: relative;
  width: 100%;
  max-width: clamp(300px, 31vw, 430px);
  margin-inline: auto;
  padding-bottom: 52%;
}
.rz-hcard__pos {
  position: absolute;
  z-index: 3;
  inset-inline-start: 7%;
  bottom: 0;
  width: 90%;
}
.rz-hcard__tilt {
  position: relative;
  transform: rotate(-4deg);
  transform-origin: 50% 50%;
  transition: transform 560ms var(--rzhc-ease);
  filter: drop-shadow(0 26px 44px rgba(2, 8, 20, 0.76));
  will-change: transform;
}
.rz-hcard__tilt img {
  display: block;
  width: 100%;
  height: auto;
}
.rz-hcard__sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 3.72% / 5.89%;
}
.rz-hcard__sweep::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  inset-inline-start: -40%;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-16deg);
  animation: rz-hcard-sweep 8s var(--rzhc-ease) infinite;
}
@keyframes rz-hcard-sweep {
  0% {
    inset-inline-start: -40%;
  }
  50% {
    inset-inline-start: 120%;
  }
  100% {
    inset-inline-start: 120%;
  }
}

.rz-hcard__wallet {
  position: relative;
  z-index: 2;
  width: 80%;
  padding: 17px 18px 15px;
  background: linear-gradient(160deg, rgba(15, 38, 74, 0.92), rgba(8, 22, 40, 0.95));
  border: 1px solid rgba(46, 144, 250, 0.4);
  box-shadow:
    0 20px 40px -24px rgba(2, 8, 20, 0.9),
    0 0 34px -12px rgba(46, 144, 250, 0.3);
  animation: rz-hcard-walletglow 9s ease-in-out infinite alternate;
}
@keyframes rz-hcard-walletglow {
  from {
    box-shadow:
      0 20px 40px -24px rgba(2, 8, 20, 0.9),
      0 0 28px -14px rgba(46, 144, 250, 0.22);
  }
  to {
    box-shadow:
      0 20px 40px -24px rgba(2, 8, 20, 0.9),
      0 0 40px -10px rgba(18, 184, 166, 0.4);
  }
}
/* "Illustrative interface" — a real element, so it translates */
.rz-hcard__w-note {
  position: absolute;
  inset-inline-start: 0;
  top: -22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9bafc8;
}
.rz-hcard__w-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.rz-hcard__w-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #a7bad2;
}
.rz-hcard__w-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rzhc-teal-lit);
  border: 1px solid rgba(18, 184, 166, 0.6);
  background: rgba(18, 184, 166, 0.18);
}
.rz-hcard__w-bal {
  margin-top: 8px;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--rzhc-on);
}
.rz-hcard__w-rule {
  height: 1px;
  margin: 13px 0;
  background: rgba(46, 144, 250, 0.34);
}
.rz-hcard__w-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: #c3cedf;
}
.rz-hcard__w-line b {
  font-weight: 600;
  color: var(--rzhc-on);
}
.rz-hcard__w-line--in b {
  color: var(--rzhc-teal-lit);
}

.rz-hcard__trail {
  position: absolute;
  z-index: 2;
  inset-inline: 56% 2%;
  top: 14%;
  height: 140px;
  pointer-events: none;
}
.rz-hcard__trail svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rz-hcard__spark {
  animation: rz-hcard-dash 4s linear infinite;
}
@keyframes rz-hcard-dash {
  to {
    stroke-dashoffset: -250;
  }
}
/* #endregion */

/* #region ------- ( 5- Transition into the funding band ) ---------- */
/* Sits inside this section only; #funding is untouched. */
.rz-hcard__transition {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  pointer-events: none;
}
.rz-hcard__transition::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: linear-gradient(180deg, transparent 0%, transparent 58%, var(--rzhc-next-bg) 100%);
}
.rz-hcard__seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(46, 144, 250, 0), rgba(18, 184, 166, 0.75) 32%, rgba(214, 166, 28, 0.9) 64%, rgba(255, 170, 36, 0));
}
.rz-hcard__drop {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 2px;
  height: 46px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(214, 166, 28, 0), rgba(214, 166, 28, 0.85));
  animation: rz-hcard-drop 4.4s var(--rzhc-ease) infinite;
}
@keyframes rz-hcard-drop {
  0% {
    opacity: 0;
    transform: translateY(-26px);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* #endregion */

/* #region ------- ( 6- Reveals ) ---------- */
.rz-hcard .rz-reveal {
  opacity: 0;
  transform: translateY(20px);
}
.rz-hcard .rz-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms var(--rzhc-ease),
    transform 600ms var(--rzhc-ease);
  transition-delay: var(--d, 0s);
}
/* #endregion */

/* #region ------- ( 7- Responsive ) ---------- */
@media (max-width: 1199.98px) {
  .rz-hcard__inner {
    gap: 34px;
  }
  .rz-hcard__stack {
    max-width: clamp(290px, 32vw, 400px);
  }
}
@media (max-width: 1199.98px) {
  .rz-hcard__inner {
    min-height: 0;
  }
  .rz-hcard__lede {
    font-size: 16.5px;
  }
}
@media (max-width: 991.98px) {
  .rz-hcard {
    padding: clamp(48px, 7vw, 64px) 0 clamp(70px, 8vw, 88px);
  }
  /* Mobile order: headline, short description, card, then the rest. The copy
     column dissolves into the grid so its children can be reordered around
     the visual without duplicating any markup. Gap is 0 because every child
     already carries its own top margin. */
  .rz-hcard__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 24px;
  }
  .rz-hcard__copy {
    display: contents;
  }
  .rz-hcard__eyebrow {
    order: 1;
  }
  .rz-hcard__title {
    order: 2;
  }
  .rz-hcard__lede {
    order: 3;
  }
  .rz-hcard__visual {
    order: 4;
    margin: 30px 0 4px;
    padding-inline-end: 0;
  }
  .rz-hcard__relation {
    order: 5;
  }
  .rz-hcard__points {
    order: 6;
  }
  .rz-hcard__ctas {
    order: 7;
  }
  .rz-hcard__foot {
    order: 8;
  }
  .rz-hcard__bg {
    opacity: 0.5;
    background-position: 66% 54%;
    -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 46%);
    mask-image: linear-gradient(180deg, transparent 2%, #000 46%);
  }
  .rz-hcard__stack {
    max-width: min(94%, 560px);
    padding-bottom: 46%;
  }
  .rz-hcard__wallet {
    width: 82%;
  }
  .rz-hcard__trail {
    display: none;
  }
  /* the stacked layout leaves no clear band for them */
  .rz-hcard__lights {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .rz-hcard__title {
    font-size: clamp(29px, 8vw, 36px);
  }
  .rz-hcard__lede {
    font-size: 16px;
  }
  .rz-hcard__stack {
    max-width: min(94%, 380px);
    padding-bottom: 50%;
  }
  .rz-hcard__pos {
    inset-inline-start: 4%;
    width: 93%;
  }
  .rz-hcard__wallet {
    width: 90%;
  }
  .rz-hcard__points {
    flex-direction: column;
    align-items: stretch;
  }
  .rz-hcard__points li {
    justify-content: flex-start;
  }
  .rz-hcard__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .rz-hcard__btn {
    width: 100%;
  }
  .rz-hcard__relation {
    gap: 8px;
    font-size: 13.5px;
  }
  .rz-hcard__r {
    padding: 6px 11px;
  }
}
/* #endregion */

/* #region ------- ( 8- RTL ) ---------- */
.rtl .rz-hcard__eyebrow,
.rtl .rz-hcard__title,
.rtl .rz-hcard__w-note,
.rtl .rz-hcard__w-label,
.rtl .rz-hcard__w-chip {
  letter-spacing: 0;
}
.rtl .rz-hcard__trail svg {
  transform: scaleX(-1);
}
.rtl .rz-hcard__relation i {
  transform: scaleX(-1);
}
.rtl .rz-hcard__sweep::after {
  transform: skewX(16deg);
}
/* #endregion */

/* #region ------- ( 9- Reduced motion ) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rz-hcard .rz-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .rz-hcard__glow,
  .rz-hcard__lights span,
  .rz-hcard__sweep::after,
  .rz-hcard__spark,
  .rz-hcard__wallet,
  .rz-hcard__drop {
    animation: none;
  }
  .rz-hcard__sweep::after,
  .rz-hcard__drop {
    display: none;
  }
  .rz-hcard__tilt {
    transition: none;
  }
  .rz-hcard__btn:hover,
  .rz-hcard__points li:hover {
    transform: none;
  }
}
/* #endregion */