/* MOHUR collection — "Minted, not printed." A cotton-rag pressed card in a
   velvet jewel box: letterpress deboss, guilloché seal, one living-foil system
   driven by --foil-shift (rest 50 = engraved). Scope: .mhr-* under .mhr-root. */

/* ============ FONTS ============ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 560;
  font-display: swap;
  src: url("/assets/fraunces-560-bbbad29a.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 98%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/instrument-sans-var-400-600-570a9648.woff2") format("woff2");
}
@font-face {
  font-family: "InstrumentSans-fallback";
  src: local("Arial");
  size-adjust: 99%;
  ascent-override: 96%;
  descent-override: 25%;
  line-gap-override: 0%;
}
/* ₹ intentionally falls through to the system stack — the distributable
   Instrument Sans lacks U+20B9; every target OS ships it. */

/* ============ FOIL PHYSICS ============ */
/* Registered where supported; elsewhere --foil-shift still works as a plain
   custom property (the foil controller writes numbers inline, calc() follows). */
@property --foil-shift { syntax: "<number>"; inherits: true; initial-value: 50; }

/* ============ GROUND: the velvet box ============ */
.mhr-root {
  --velvet: #131110;
  --stock: #F5EFE3;
  --stock-hi: #FBF6EA;
  --well: #EFE7D4;
  --ink: #221D18;
  --ink-72: rgba(34, 29, 24, .74);
  --ink-60: rgba(34, 29, 24, .62);
  --ink-45: rgba(34, 29, 24, .5);
  --hairline: rgba(34, 29, 24, .16);
  --hairline-2: rgba(34, 29, 24, .3);
  --core: #C0392B;          /* Sindoor ink */
  --core-deep: #96271B;
  --foil-lo: #8C6D2F; --foil-mid: #C9A961; --foil-hi: #F7E7B4;
  --foil-g: linear-gradient(105deg, #8F7030 0%, #BE9A52 22%, #DCC07F 38%, #F8E9B8 50%, #DCC07F 62%, #BE9A52 78%, #8F7030 100%);
  --serif: "Fraunces", "Fraunces-fallback", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "InstrumentSans-fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --settle: cubic-bezier(.22, 1, .36, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  --foil-shift: 50; /* plain-property fallback where @property is unsupported */

  min-height: 100dvh;
  background:
    radial-gradient(90% 46% at 50% 14%, rgba(192, 57, 43, .055), transparent 72%),
    radial-gradient(130% 92% at 50% -8%, #1F1713 0%, #141110 54%, #0F0D0C 100%);
  background-color: var(--velvet);
  font-family: var(--sans);
  color: var(--ink);
  padding: clamp(14px, 3.5vw, 64px) clamp(12px, 4vw, 24px) calc(clamp(24px, 5vh, 80px) + env(safe-area-inset-bottom));
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
/* grain over the velvet — kills gradient banding on cheap panels */
.mhr-root::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--grain);
  background-size: 64px 64px;
  opacity: .07;
  mix-blend-mode: overlay;
}
.mhr-root ::selection { background: rgba(192, 57, 43, .25); }
.mhr-root :focus-visible { outline: 2px solid var(--core); outline-offset: 3px; border-radius: 3px; }
.mhr-root [hidden] { display: none !important; }

.mhr-stage { position: relative; z-index: 1; max-width: 26rem; margin-inline: auto; }

/* ============ THE OBJECT: cotton-rag card ============ */
.mhr-kard {
  position: relative;
  background: linear-gradient(172deg, var(--stock-hi) 0%, var(--stock) 34%, #F1EADB 100%);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .42),
    0 12px 32px rgba(0, 0, 0, .4),
    0 40px 96px rgba(0, 0, 0, .5);
  padding: 0 clamp(18px, 6vw, 28px);
}
/* paper grain, multiplied into the stock */
.mhr-kard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: var(--grain);
  background-size: 64px 64px;
  opacity: .05;
  mix-blend-mode: multiply;
}

/* bookmark chip, restyled to sit on the stock */
.mhr-top-actions { position: absolute; top: 12px; right: 12px; z-index: 7; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.mhr-top-actions .p-2 {
  background: rgba(251, 246, 234, .92);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 1px 2px rgba(34, 29, 24, .16);
  border-radius: 9px;
  color: var(--ink-60);
}

/* ============ FOIL SURFACES — one shared system, one light ============ */
.mhr-foil {
  --fp: calc((var(--foil-shift, 50) - var(--fo, 0)) * 1.4%);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 46%), var(--foil-g);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, var(--fp) 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), inset 0 -1px 1px rgba(96, 72, 26, .45), 0 1px 2px rgba(34, 29, 24, .22);
}

/* letterpress: dark bites above, paper ridge below */
.mhr-deboss { text-shadow: 0 -1px 0 rgba(34, 29, 24, .2), 0 1px 0 rgba(255, 255, 255, .74); }

/* ============ THE FACE ============ */
.mhr-face { padding-top: 34px; text-align: center; }
.mhr-seal {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(closest-side, #F2EBDB 62%, #EDE4D0 100%);
  box-shadow: inset 0 2px 5px rgba(34, 29, 24, .2), inset 0 -1px 0 rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .75);
}
.mhr-seal svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.mhr-portrait {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(34, 29, 24, .35);
}
.mhr-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhr-cartouche {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 560 18px/1 var(--serif);
  letter-spacing: .05em;
  color: #FBF5E6;
  text-shadow: 0 1px 1px rgba(96, 72, 26, .55);
}
.mhr-mint {
  margin-top: 12px;
  font: 500 10px/1 var(--sans);
  letter-spacing: .24em;
  color: var(--ink-45);
  font-feature-settings: 'tnum';
}
.mhr-eyebrow { margin-top: 26px; font: 600 10.5px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-60); }
.mhr-eyebrow a { color: inherit; text-decoration: none; }
.mhr-eyebrow a:active { color: var(--core-deep); }
.mhr-eyebrow-logo { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin: -2px 5px 0 0; vertical-align: middle; }
.mhr-name {
  margin-top: 10px;
  font: 560 clamp(36px, 10.4vw, 42px)/1.04 var(--serif);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.mhr-rule { width: 74px; height: 3px; border-radius: 2px; margin: 16px auto 0; --fo: 10; }
.mhr-tagline {
  margin: 14px auto 0;
  max-width: 32ch;
  font: 500 10px/1.9 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* the verbs */
.mhr-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 26px; }
.mhr-medal {
  position: relative;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 15px 4px 12px;
  background: linear-gradient(178deg, var(--stock-hi), #F2EBDC);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(34, 29, 24, .16), 0 3px 8px rgba(34, 29, 24, .08);
  text-decoration: none;
  color: var(--ink);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.mhr-medal:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(34, 29, 24, .28), inset 0 -1px 0 rgba(255, 255, 255, .5); }
.mhr-medal svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mhr-medal span { font: 600 10px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.mhr-medal--save { color: var(--core-deep); }
.mhr-medal--save svg { stroke: var(--core-deep); }

/* ============ THE PAYMENT SLIP ============ */
.mhr-perf { position: relative; height: 19px; margin-top: 30px; }
.mhr-perf::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 9px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--hairline-2) 0 7px, transparent 7px 13px);
  background-size: 13px 1px;
}
.mhr-notch {
  position: absolute;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #0D0B0A;
  box-shadow: inset 0 1.5px 2.5px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .5);
}
.mhr-notch--l { left: calc(clamp(18px, 6vw, 28px) * -1); margin-left: -8.5px; }
.mhr-notch--r { right: calc(clamp(18px, 6vw, 28px) * -1); margin-right: -8.5px; }

.mhr-slip-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.mhr-slip-kicker { font: 500 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-45); }
.mhr-slip-title { margin-top: 7px; font: 560 21px/1.1 var(--serif); letter-spacing: .005em; color: var(--ink); }
.mhr-roundel {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 500 20px/1 var(--sans);
  color: #FBF5E6;
  text-shadow: 0 1px 1px rgba(96, 72, 26, .55);
  --fo: 20;
}
.mhr-plate {
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--well);
  border: 0;
  border-radius: 10px;
  padding: 14px 14px 13px 16px;
  box-shadow: inset 0 2px 4px rgba(34, 29, 24, .2), inset 0 -1px 0 rgba(255, 255, 255, .65);
  font-family: var(--sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease-out;
}
.mhr-plate:active { transform: translateY(1px); }
.mhr-upi-id { display: block; font: 600 17.5px/1.2 var(--sans); letter-spacing: .005em; font-feature-settings: 'tnum'; overflow-wrap: anywhere; }
.mhr-plate-cap { display: block; margin-top: 5px; font: 500 8.5px/1 var(--sans); letter-spacing: .22em; color: var(--ink-45); text-transform: uppercase; }
.mhr-copytag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--hairline-2);
  border-radius: 5px;
  padding: 6px 9px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-72);
  background: var(--stock-hi);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(34, 29, 24, .12);
}
.mhr-copytag svg { width: 11px; height: 11px; stroke: var(--core-deep); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mhr-copytag.mhr-did { border-color: transparent; color: var(--core-deep); background: transparent; box-shadow: none; }
.mhr-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.mhr-chip {
  display: grid;
  place-items: center;
  padding: 11px 2px;
  border-radius: 9px;
  text-decoration: none;
  background: linear-gradient(178deg, var(--stock-hi), #F2EBDC);
  border: 1px solid var(--hairline);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(34, 29, 24, .14);
  font: 600 13px/1 var(--sans);
  font-feature-settings: 'tnum';
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.mhr-chip small { font: 600 9px/1 var(--sans); letter-spacing: .13em; color: var(--ink-60); text-transform: uppercase; }
.mhr-chip:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(34, 29, 24, .26); }

/* the cheque's amount line */
.mhr-amountline { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mhr-amount-rupee { font: 500 15px/1 var(--sans); color: var(--ink-60); }
.mhr-amount-input {
  flex: 1;
  min-width: 0;
  padding: 8px 2px 9px;
  font: 500 15px/1.2 var(--sans);
  font-feature-settings: 'tnum';
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px dotted rgba(34, 29, 24, .34);
  border-radius: 0;
}
.mhr-amount-input::placeholder { color: var(--ink-45); }
.mhr-amount-input:focus { outline: none; border-bottom: 1.5px solid var(--core); }
.mhr-amount-go {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 11px 13px;
  border-radius: 9px;
  text-decoration: none;
  background: linear-gradient(178deg, #2E2620, var(--ink));
  color: var(--stock);
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 5px rgba(0, 0, 0, .25);
  transition: transform .08s ease-out;
}
.mhr-amount-go:active { transform: translateY(1px); }
.mhr-amount-sum { font: 600 9.5px/1 var(--sans); font-feature-settings: 'tnum'; letter-spacing: .02em; }

/* ============ SECTIONS ============ */
.mhr-sec { margin-top: 34px; }
.mhr-sec-h {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.mhr-sec-h::before { content: ''; width: 12px; height: 1px; background: var(--core); opacity: .8; }
.mhr-sec-h::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* copperplate leader rows */
.mhr-rows { margin-top: 6px; }
.mhr-row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 13px 2px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
}
.mhr-row:active { background: rgba(34, 29, 24, .05); }
.mhr-lbl { flex: none; font: 600 10px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-60); }
.mhr-lead { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(34, 29, 24, .34); transform: translateY(-3px); }
.mhr-val {
  flex: 0 1 auto; /* shrinks when label + leader + value overrun the row */
  min-width: 0; /* let it shrink past the nowrap text; .mhr-valt then ellipsizes */
  max-width: 62%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 13.5px/1.2 var(--sans);
  font-feature-settings: 'tnum';
  color: var(--ink);
}
.mhr-valt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tailwind preflight blocks svg; flex-none keeps the arrow on the line */
.mhr-ne { flex: none; width: 11px; height: 11px; stroke: var(--ink-45); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* enclosure rows carry a specimen thumb */
.mhr-row--enc { align-items: center; }
.mhr-row--enc .mhr-lbl { max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhr-row--enc .mhr-lead { transform: none; }
.mhr-enc-thumb {
  flex: none;
  width: 24px;
  height: 31px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--stock-hi);
  box-shadow: 0 1px 2px rgba(34, 29, 24, .18);
}
.mhr-enc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* about — the house style */
.mhr-about { margin-top: 16px; font: 400 15px/1.68 var(--sans); color: var(--ink-72); }
.mhr-about .trix-content { font: inherit; color: inherit; }
.mhr-about .trix-content::first-letter {
  float: left;
  font: 560 46px/.84 var(--serif);
  color: var(--core);
  padding: 5px 9px 0 0;
}
.mhr-about a { color: var(--core-deep); text-decoration: underline; text-underline-offset: 2px; }
.mhr-readmore-row { margin-top: 8px; text-align: center; }
.mhr-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-60);
  text-decoration: none;
  border-bottom: 1px dotted rgba(34, 29, 24, .34);
  padding-bottom: 3px;
}
.mhr-readmore svg { width: 12px; height: 12px; }

/* ============ THE HALLMARK ============ */
.mhr-hallmark { margin-top: 38px; text-align: center; }
.mhr-qrframe { display: inline-block; padding: 4px; border-radius: 14px; --fo: 28; }
.mhr-qrpad {
  background: var(--stock-hi);
  border-radius: 10px;
  padding: 12px;
  box-shadow: inset 0 1px 3px rgba(34, 29, 24, .16);
}
/* real generated QR PNG; multiply seats it into the stock pad */
.mhr-qrpad img { display: block; width: 146px; height: 146px; mix-blend-mode: multiply; }
.mhr-qr-cap { margin-top: 13px; font: 600 9.5px/1 var(--sans); letter-spacing: .26em; color: var(--ink-60); text-transform: uppercase; }
.mhr-share {
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: 10px 17px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-72);
  cursor: pointer;
  transition: transform .08s ease-out;
}
.mhr-share svg { width: 13px; height: 13px; stroke: var(--ink-72); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mhr-share:active { transform: translateY(1px); background: rgba(34, 29, 24, .05); }

/* ============ THE EXCHANGE ============ */
.mhr-exchange { margin-top: 34px; text-align: center; }
.mhr-exchange-kicker { font: 500 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-45); }
.mhr-exchange-btn {
  width: 100%;
  margin-top: 10px;
  padding: 16px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  background: linear-gradient(178deg, #2E2620, var(--ink));
  color: var(--stock);
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform .08s ease-out;
}
.mhr-exchange-btn:active { transform: translateY(1px); }

/* ============ COLOPHON ============ */
.mhr-colophon { margin-top: 36px; padding-bottom: 30px; text-align: center; }
.mhr-punch {
  display: inline-block;
  width: 19px;
  height: 19px;
  --fo: 36;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13.3 6.9 17.1 10.7 24 12 17.1 13.3 13.3 17.1 12 24 10.7 17.1 6.9 13.3 0 12 6.9 10.7 10.7 6.9 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13.3 6.9 17.1 10.7 24 12 17.1 13.3 13.3 17.1 12 24 10.7 17.1 6.9 13.3 0 12 6.9 10.7 10.7 6.9 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mhr-colophon p { margin-top: 9px; font: 600 9px/1.8 var(--sans); letter-spacing: .24em; color: var(--ink-45); text-transform: uppercase; }
.mhr-colophon a { color: var(--ink-60); text-decoration: underline; text-decoration-color: rgba(192, 57, 43, .55); text-underline-offset: 3px; }

/* intent sentinel — invisible scroll marker */
.mhr-sentinel { display: block; height: 2px; }

/* ============ TILT PILL (iOS permission gate) ============ */
.mhr-tiltpill {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #241D17;
  border: 1px solid rgba(201, 169, 97, .5);
  border-radius: 999px;
  padding: 10px 15px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .16em;
  color: #D9BC77;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  cursor: pointer;
}
.mhr-tiltpill svg { width: 11px; height: 11px; fill: currentColor; }
.mhr-tiltpill:focus-visible { outline-color: #C9A961; }

/* the shared connect modal, dressed as a paper sheet on the velvet */
.mhr-root .modal-container .container { background: linear-gradient(174deg, #FBF6EA, #F5EFE3); }

/* ============ ENTRANCE — the card settles onto the velvet ============ */
.mhr-kard { animation: mhr-settle .48s var(--settle) .04s both; }
@keyframes mhr-settle { from { opacity: 0; transform: translateY(24px) scale(.965); } }
.mhr-face > * { animation: mhr-rise .35s ease-out both; animation-delay: calc(.26s + var(--i, 0) * .06s); }
@keyframes mhr-rise { from { opacity: 0; transform: translateY(8px); } }

/* no-JS: the foil still breathes once every 14s. Runs on background-position
   (var() resolves per element), so it needs neither @property nor the engine;
   the foil controller adds .mhr-js and takes over. */
.mhr-root:not(.mhr-js) .mhr-foil { animation: mhr-foildrift 14s ease-in-out 2s infinite alternate; }
@keyframes mhr-foildrift {
  from { background-position: 0 0, calc((34 - var(--fo, 0)) * 1.4%) 0; }
  to { background-position: 0 0, calc((66 - var(--fo, 0)) * 1.4%) 0; }
}

/* ============ REDUCED MOTION — engraved stillness ============ */
@media (prefers-reduced-motion: reduce) {
  .mhr-root, .mhr-root *, .mhr-root ::before, .mhr-root ::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============ WIDER STAGES: the card centered in the velvet box ============ */
@media (min-width: 760px) {
  .mhr-root { padding-top: max(7vh, 48px); }
  .mhr-kard { border-radius: 16px; }
}