/* Homepage v5 (desktop) — hero (design "Hero Desktop"): one dark panel, headline and actions on one side, the stack
 * of featured lot cards under a beam of light on the other; under it the 3D platform gallery.
 * Markup: components/home/v5/hero.php, hero-lot.php, hero-gallery.php · Script: home-v5/hero.js.
 * The panel is [data-v5-dark], so it keeps the dark palette in both themes; the page and the gallery follow the theme
 * (the gallery cards are dark objects with fixed colours). */

.v5-hg {
    position: relative; overflow: hidden; background: rgb(var(--bg));
    /* A container, so the gallery is sized from the page width without the scrollbar (cqw). */
    container-type: inline-size;
    /* The fixed nav (home-v5.css) is 14px + 64px tall. */
    padding: 78px 0 0;
    /* The platform gallery's scale P (see .v5-hg__stage), set here so the hero panel can take the same width as the
     * row of cards (1.18·P) and the two stand one under the other. --cw: the sections' content width. */
    --cw: calc(min(100cqw, var(--page-max)) - 2 * var(--page-gutter));
    --P: clamp(560px, calc(var(--cw) / 1.18), 1390px);
}
/* As wide as the row of platform cards under it (1.18·P): the sections' content box (--page-max / --page-gutter,
 * site-width.css) unless P was shrunk to fit the first screen (see the short-screen block below the gallery). */
.v5-hg__wrap { position: relative; z-index: 4; max-width: calc(1.18 * var(--P) + 2 * var(--page-gutter)); margin: 0 auto; padding: clamp(16px, 2.6vh, 26px) var(--page-gutter) 0; }

/* ---- Panel ----
 * Layers, back to front: graphite base, the silk art fading in towards the cards (.v5-hg__silk), fine diagonal
 * lines under the beam (.v5-hg__lines). --hp-dir / --hp-x keep the lit side under the cards in both reading directions. */
.v5-hg__panel {
    --hp-dir: 90deg; --hp-x: 80%;
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 38%, 600px); min-height: 470px;
    border-radius: 28px; border: 1px solid rgb(255 255 255 / 0.09);
    background: linear-gradient(180deg, #08080a 0%, #040405 55%, #000 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 40px 90px -50px rgb(0 0 0 / 0.9);
}
html[dir="rtl"] .v5-hg__panel { --hp-dir: 270deg; --hp-x: 20%; }
html[data-theme="light"] .v5-hg__panel { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 30px 70px -40px rgb(46 36 22 / 0.45); }
.v5 .v5-hg__silk {
    position: absolute; top: -10%; inset-inline-end: -4%; z-index: -1; width: 72%; max-width: none; height: 120%;
    object-fit: cover; opacity: 0.22; filter: grayscale(1); pointer-events: none; user-select: none;
    -webkit-mask-image: linear-gradient(var(--hp-dir), transparent 0%, #000 65%); mask-image: linear-gradient(var(--hp-dir), transparent 0%, #000 65%);
}
.v5-hg__lines {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 14px);
    -webkit-mask-image: radial-gradient(60% 100% at var(--hp-x) 10%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 100% at var(--hp-x) 10%, #000 0%, transparent 75%);
}

/* ---- Copy ---- */
.v5-hg__copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: 40px; padding-inline: clamp(28px, 4.2vw, 64px) 12px; container-type: inline-size; }
.v5 .v5-hg__sale { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding-inline: 12px 4px; border-radius: 999px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.12); font-size: 12px; font-weight: 500; color: rgb(255 255 255 / 0.8); }
.v5 .v5-hg__sale:hover { color: #fff; border-color: rgb(255 255 255 / 0.3); }
.v5-hg__sale-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / 0.18); }
.v5-hg__sale-val { height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: rgb(255 255 255 / 0.1); font-weight: 600; color: #fff; }

/* One row per line: a longer translation is scaled down by hero.js instead of wrapping. */
.v5 .v5-hg__title { align-self: stretch; margin-top: 22px; font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif; font-weight: 700; font-size: min(78px, 10.6cqi); line-height: 1.06; letter-spacing: -0.058em; color: #fff; }
html:is([lang|="ar"], [lang|="fa"], [lang|="ur"], [lang|="hi"], [lang|="th"]) .v5-hg__title { line-height: 1.32; letter-spacing: 0; }
.v5-hg__line { display: block; white-space: nowrap; }
/* The first line follows the front lot (hero.js): out upwards, in from below. */
.v5-hg__swap { display: inline-block; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.v5-hg__swap.is-out { opacity: 0; transform: translateY(-0.2em); }
.v5-hg__swap.is-in { opacity: 0; transform: translateY(0.2em); transition: none; }
.v5-hg__line--muted { padding-bottom: 0.06em; background: linear-gradient(180deg, #b4b4bb 0%, #55555c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.v5 .v5-hg__lead { margin-top: 22px; max-width: 44ch; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.6; color: rgb(255 255 255 / 0.62); }

/* Three pills: "Browse handles" filled, "Join the channel" and "Message us" glass. */
.v5-hg__actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.v5 .v5-hg__cta, .v5 .v5-hg__ghost { display: inline-flex; align-items: center; gap: 12px; height: 56px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.v5 .v5-hg__cta { padding-inline: 22px 6px; background: linear-gradient(180deg, #ffffff 0%, #dcdce0 100%); color: #000; box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 0 0 5px rgb(255 255 255 / 0.05), 0 16px 44px -16px rgb(255 255 255 / 0.45); }
.v5 .v5-hg__cta:hover { color: #000; transform: translateY(-1px); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 0 0 6px rgb(255 255 255 / 0.08), 0 20px 50px -16px rgb(255 255 255 / 0.55); }
.v5 .v5-hg__ghost { padding-inline: 20px 6px; color: #fff; background: linear-gradient(180deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.03) 100%); border: 1px solid rgb(255 255 255 / 0.13); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); }
.v5 .v5-hg__ghost:hover { color: #fff; background: linear-gradient(180deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0.05) 100%); border-color: rgb(255 255 255 / 0.24); }
.v5-hg__ghost .fa-telegram { font-size: 18px; }
.v5-hg__go { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: translate .25s ease; }
.v5-hg__cta .v5-hg__go { background: #000; color: #fff; }
.v5-hg__ghost .v5-hg__go { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.v5 :is(.v5-hg__cta, .v5-hg__ghost):hover .v5-hg__go { translate: 2px 0; }
html[dir="rtl"] .v5 :is(.v5-hg__cta, .v5-hg__ghost):hover .v5-hg__go { translate: -2px 0; }
.v5 .v5-hg__msg { padding-inline: 7px 22px; }
.v5-hg__msg-ico { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font-size: 14px; }
.v5-hg__msg-txt { display: flex; flex-direction: column; line-height: 1.2; }
.v5-hg__msg-title { font-size: 14.5px; }
.v5-hg__msg-sub { font-size: 11.5px; font-weight: 500; color: rgb(255 255 255 / 0.5); }

/* ---- Featured lots: a beam from the panel's top edge onto a fanned stack of cards (hero-lot.php) ----
 * Each card is drawn at its design size (252px wide); slots move it with transform about a pivot below the card, so
 * the side cards fan out. --k scales the whole stack to narrower columns (the individual scale property, so it
 * composes with the entrance animation's transform) and --dir mirrors the fan in RTL. */
.v5-hg__lotcol { position: relative; min-height: 470px; }
.v5-hg__beam { position: absolute; top: 0; left: 50%; width: 460px; margin-left: -230px; height: 100%; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0.04) 55%, rgb(255 255 255 / 0) 85%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.v5-hg__beam-top { position: absolute; top: -1px; left: 50%; width: 180px; height: 2px; margin-left: -90px; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, rgb(255 255 255 / 0), #fff, rgb(255 255 255 / 0)); box-shadow: 0 0 28px 6px rgb(255 255 255 / 0.3); }
.v5-hg__floor { position: absolute; left: 50%; top: calc(50% + 117px * var(--k, 1)); width: 440px; height: 60px; margin-left: -220px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 70%); }
/* 330px stage centred in the column (the design's 470px panel puts it 46px from the top). */
.v5-hg__lotwrap { --dir: 1; position: absolute; left: 0; right: 0; top: 50%; height: 330px; margin-top: -189px; scale: var(--k, 1); transform-origin: 50% 50%; }
.v5-hg__lotcol { --k: 1; }
html[dir="rtl"] .v5-hg__lotwrap { --dir: -1; }
@media (max-width: 1279.98px) { .v5-hg__lotcol { --k: 0.9; } }
@media (max-width: 1099.98px) { .v5-hg__lotcol { --k: 0.8; } }
@media (max-width: 899.98px) { .v5-hg__lotcol { --k: 0.7; } }

.v5 .v5-hg__lot {
    position: absolute; top: 0; left: 50%; width: 252px; margin-left: -126px; padding: 16px; border-radius: 24px; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; text-align: start; color: #fff; font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif;
    border: 1px solid transparent;
    background:
        radial-gradient(120% 60% at 50% 0%, #2a2a2e 0%, #111113 55%, #0a0a0b 100%) padding-box,
        linear-gradient(180deg, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0.08) 38%, rgb(255 255 255 / 0.06) 70%, rgb(255 255 255 / 0.22) 100%) border-box;
    box-shadow: 0 30px 70px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(0 0 0 / 0.6);
    cursor: pointer; transform-origin: 50% 120%; will-change: transform, filter;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .6s ease, opacity .6s ease;
}
.v5 .v5-hg__lot:hover { color: #fff; }
.v5 .v5-hg__lot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 24px; }
.v5-hg__lot[data-pos="0"] { z-index: 20; transform: none; }
.v5-hg__lot[data-pos="1"] { z-index: 10; transform: translate(calc(128px * var(--dir)), 20px) rotate(calc(8deg * var(--dir))) scale(0.86); filter: brightness(0.5); }
.v5-hg__lot[data-pos="-1"] { z-index: 9; transform: translate(calc(-128px * var(--dir)), 20px) rotate(calc(-8deg * var(--dir))) scale(0.86); filter: brightness(0.5); }
.v5-hg__lot[data-pos^="off"] { z-index: 1; opacity: 0; pointer-events: none; filter: brightness(0.5); }
.v5-hg__lot[data-pos="off-r"] { transform: translate(calc(180px * var(--dir)), 40px) rotate(calc(14deg * var(--dir))) scale(0.76); }
.v5-hg__lot[data-pos="off-l"] { transform: translate(calc(-180px * var(--dir)), 40px) rotate(calc(-14deg * var(--dir))) scale(0.76); }
.v5-hg__lot[data-pos="1"]:hover, .v5-hg__lot[data-pos="-1"]:hover { filter: brightness(0.7); }

.v5 .v5-hg__lot-silk { position: absolute; inset: 0; z-index: -1; width: 100%; max-width: none; height: 62%; object-fit: cover; opacity: 0.22; filter: grayscale(1); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.v5-hg__lot-lit { position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0), #fff, rgb(255 255 255 / 0)); opacity: 0; transition: opacity .6s; }
.v5-hg__lot[data-pos="0"] .v5-hg__lot-lit { opacity: 1; }

.v5-hg__lot-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v5-hg__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v5 .v5-hg__brand img { width: 24px; height: auto; opacity: 0.8; }
.v5-hg__brand-txt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; white-space: nowrap; color: #d6d6da; }
.v5-hg__lot-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffffff 0%, #d9d9de 100%); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 6px 16px rgb(0 0 0 / 0.5); color: #0a0a0a; font-size: 16px; }

/* --len (characters) keeps a long handle inside the card's 216px content box. */
.v5-hg__handle { display: block; margin-top: 42px; text-align: center; font-size: min(60px, calc(216px / (var(--len, 3) * 0.62))); line-height: 1; font-weight: 700; letter-spacing: -0.035em; white-space: nowrap; padding-bottom: 0.08em; margin-bottom: -0.08em; background: linear-gradient(180deg, #ffffff 0%, #e2e2e6 42%, #8a8a92 58%, #f0f0f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgb(255 255 255 / 0.16)); }
.v5-hg__lot-meta { align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 24px; margin-top: 14px; padding-inline: 10px 5px; border-radius: 999px; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); font-size: 11.5px; font-weight: 500; color: rgb(255 255 255 / 0.7); }
.v5-hg__lot-meta-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v5-hg__ok { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #000; font-size: 7px; }
/* Ticket-style dashed cut across the whole card. */
.v5-hg__lot-cut { display: block; height: 1px; margin: 30px -16px 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.16) 0 4px, transparent 4px 9px); }

.v5-hg__lot-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-top: 14px; }
.v5-hg__ask { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v5-hg__ask-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #76767c; }
.v5-hg__ask-val { font-size: 26px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.v5-hg__buy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #dcdce0 100%); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 8px 20px -6px rgb(255 255 255 / 0.35); color: #000; font-size: 13px; font-weight: 700; white-space: nowrap; }
.v5-hg__buy i { font-size: 10px; }
html[dir="rtl"] .v5-hg__brand-txt, html[dir="rtl"] .v5-hg__ask-label { letter-spacing: 0; }

/* ---- Platform gallery: cards on an arc of radius 1.3·P, seen through a P-deep perspective ---- */
/* P comes from .v5-hg (the five cards span 1.18·P, so P = cw / 1.18 fills the content width edge to edge, up to the
 * widest frame: 1640 / 1.18 ≈ 1390). Bottom margin: just the floor reflection; the next section starts right after it. */
.v5-hg__stage { position: relative; z-index: 2; height: calc(var(--P) * 0.4); margin-top: calc(var(--P) * -0.035); margin-bottom: calc(var(--P) * 0.03); scroll-margin-top: 96px; }
.v5-hg__halo { position: absolute; left: 50%; top: 50%; width: 900px; height: 520px; margin: -260px 0 0 -450px; background: radial-gradient(ellipse 30% 46% at 50% 50%, rgb(var(--glow) / 0.2) 0%, rgb(var(--glow) / 0.06) 45%, rgb(var(--glow) / 0) 75%); pointer-events: none; }
.v5-hg__view { position: absolute; inset: 0 0 -18% 0; perspective: var(--P); perspective-origin: 50% 40%; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%); }
.v5-hg__orbit { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; animation: v5hgSway 16s ease-in-out infinite; }
/* The card is painted once, in its lit look. Lighting it up only fades the dark veil (::before) out and the
 * brighter rim (::after) in, and lifts it: opacity and transform, which the compositor animates without
 * repainting the card or its reflection. */
.v5 .v5-hg__card {
    position: absolute; left: calc(var(--P) * -0.125); top: calc(var(--P) * -0.1625); width: calc(var(--P) * 0.25); height: calc(var(--P) * 0.325);
    display: flex; flex-direction: column; padding: 1.1em; border-radius: 1.1em; overflow: hidden; pointer-events: auto;
    font-size: calc(var(--P) * 0.0158); color: #f2f2f4;
    background:
        linear-gradient(160deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0) 38%),
        linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, rgb(0 0 0 / 0.55) 100%),
        url(../images/product-card-silk.webp) var(--bx, 50%) var(--by, 50%) / 260% auto no-repeat, #070708;
    box-shadow: 0 2.4em 4em -1.6em rgb(0 0 0 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.18);
    -webkit-box-reflect: below 0.9em linear-gradient(transparent 85%, rgb(255 255 255 / 0.16));
    /* Rotated about the eye (z = P) onto an arc of radius 1.3·P. The translateZ(P) belongs on the card, not on a
     * parent: a parent plane at the eye cannot be inverted, and Chrome then sends every click to the stage. */
    transform: translateZ(var(--P)) rotateY(calc(var(--d) * -12.5deg)) translateZ(calc(var(--P) * -1.3));
    backface-visibility: hidden;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.v5 .v5-hg__card.is-lit { transform: translateZ(var(--P)) rotateY(calc(var(--d) * -12.5deg)) translateZ(calc(var(--P) * -1.3)) translateY(-0.9em); }
.v5-hg__card::before, .v5-hg__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity .7s ease; }
/* Unlit = the lit look under this veil (its 0.25→0.55 black becomes 0.55→0.8). */
.v5-hg__card::before { background: linear-gradient(180deg, rgb(0 0 0 / 0.4) 0%, rgb(0 0 0 / 0.56) 100%); }
.v5-hg__card::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.32); opacity: 0; }
.v5-hg__card.is-lit::before { opacity: 0; }
.v5-hg__card.is-lit::after { opacity: 1; }
.v5-hg__card > * { position: relative; }
.v5 .v5-hg__card:hover { color: #f2f2f4; }
.v5 .v5-hg__card:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 1.1em; }
.v5-hg__card-line { position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: 0.25; transition: opacity .7s ease; }
.v5-hg__card.is-lit .v5-hg__card-line { opacity: 0.9; }
.v5-hg__card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; font-size: 0.62em; font-weight: 700; letter-spacing: 0.18em; white-space: nowrap; color: rgb(255 255 255 / 0.5); }
.v5-hg__card-ico { flex: 1; display: flex; align-items: center; justify-content: center; }
/* The lit glow is a soft disc behind the logo (a fading drop-shadow filter would repaint every frame). */
.v5-hg__card-ico::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9em; height: 9em; margin: -4.5em 0 0 -4.5em; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0)); opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.v5-hg__card.is-lit .v5-hg__card-ico::before { opacity: 1; }
.v5-hg__card-ico i { position: relative; font-size: 6.4em; background: linear-gradient(180deg, #ffffff 0%, #f1f1f4 30%, #a9a9b0 52%, #e6e6ea 58%, #85858d 82%, #4a4a52 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.72; filter: drop-shadow(0 0.5em 0.9em rgb(0 0 0 / 0.8)); transition: opacity .7s ease, transform .7s ease; }
.v5-hg__card.is-lit .v5-hg__card-ico i { opacity: 1; transform: scale(1.06); }
.v5-hg__card-foot { display: flex; flex-direction: column; gap: 0.3em; }
.v5-hg__card-name { display: flex; align-items: center; gap: 0.5em; font-size: 1.5em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; }
.v5-hg__card-price { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; font-size: 0.82em; font-weight: 600; white-space: nowrap; color: rgb(255 255 255 / 0.6); }
.v5-hg__card-price i { font-size: 0.85em; opacity: 0.6; transition: opacity .7s ease; }
.v5-hg__card.is-lit .v5-hg__card-price i { opacity: 1; }

/* Lite mode (html.lite: no GPU, see includes/perf_lite_head.php): the cards stand flat in a straight row. Drawn on
 * the CPU, the 3D arc cost 25-50 ms on every scroll frame while the gallery was on screen; flat, the homepage
 * scrolls at 60 fps. The row fills the content width the arc spans (1.18·P): five cards of 0.2232·P (0.8928 of
 * their 0.25·P size) and four 0.016·P gaps. The beam and its flare end on the lit card's top edge: the row's
 * middle is 0.236·P down the stage (the view runs 18% below it), the card top 0.145·P above that, lifted 0.9em. */
html.lite .v5-hg__view { perspective: none; -webkit-mask-image: none; mask-image: none; }
html.lite .v5-hg__tilt, html.lite .v5-hg__orbit { transform: none !important; transform-style: flat; }
html.lite .v5 .v5-hg__card { transform: translateX(calc(var(--d) * var(--P) * 0.2392)) scale(0.8928); backface-visibility: visible; }
html.lite .v5 .v5-hg__card.is-lit { transform: translateX(calc(var(--d) * var(--P) * 0.2392)) translateY(-0.9em) scale(0.8928); }
html.lite .v5-hg__seam { height: calc(0.077 * var(--P)); }
html.lite .v5-hg__flare { top: calc(0.077 * var(--P)); }

/* Short screens (800-1040px tall): the hero panel and the whole row of platform cards share the first screen, one
 * under the other at the same width. The panel gets shorter (390px instead of 470px: tighter spacing, a 62px title, 48px buttons)
 * and P shrinks to what fits: the panel ends --hg-end from the top (78px nav + the wrap's top padding + the panel)
 * and the cards reach 0.34·P below it, so P ≤ (100vh − --hg-end − 24px) / 0.34 = --P-fit leaves them ending ~24px
 * above the window's bottom. The whole homepage takes that width: --page-max (site-width.css) narrows to the card
 * row plus its gutters, so the nav bar, the hero, the cards and every section below keep one edge. Taller screens
 * keep the full-size hero and the site width; shorter ones scroll. */
@media (min-width: 768px) and (min-height: 800px) and (max-height: 1040px) {
    body.home-v5 {
        --hg-end: calc(78px + min(26px, 2.6vh) + 390px);
        --P-fit: calc((100vh - var(--hg-end) - 24px) * 2.94);
        --page-max: min(var(--page-max-site), calc(1.18 * var(--P-fit) + 2 * var(--page-gutter)));
        --page-inner: calc(var(--page-max) - 2 * var(--page-gutter));
        --site-content: var(--page-inner);
        --site-box: calc(var(--site-content) + 2 * var(--site-gutter));
    }
    /* Their title runs at line-height 1.32 instead of 1.06: two 62px lines, ~30px taller. */
    html:is([lang|="ar"], [lang|="fa"], [lang|="ur"], [lang|="hi"], [lang|="th"]) body.home-v5 { --hg-end: calc(78px + min(26px, 2.6vh) + 420px); }
    .v5-hg__panel, .v5-hg__lotcol { min-height: 390px; }
    .v5-hg__copy { padding-block: 28px; }
    .v5 .v5-hg__title { margin-top: 16px; font-size: min(62px, 9cqi); }
    .v5 .v5-hg__lead { margin-top: 14px; }
    .v5-hg__actions { margin-top: 22px; gap: 8px; }
    .v5 :is(.v5-hg__cta, .v5-hg__ghost) { height: 48px; gap: 10px; font-size: 14px; }
    .v5 .v5-hg__cta { padding-inline: 18px 5px; }
    .v5 .v5-hg__ghost { padding-inline: 16px 5px; }
    .v5 .v5-hg__msg { padding-inline: 5px 18px; }
    .v5-hg__go, .v5-hg__msg-ico { width: 38px; height: 38px; }
    .v5-hg__msg-title { font-size: 13.5px; }
}
/* The narrowed page leaves the lot column too slim for the full-size fan: its side cards would cover the copy. */
@media (min-width: 1280px) and (max-width: 1499.98px) and (min-height: 800px) and (max-height: 1040px) { .v5-hg__lotcol { --k: 0.8; } }

/* The beam that hangs the middle card, its flare and the sparks rising along it. */
.v5-hg__seam { position: absolute; z-index: 3; left: 50%; top: 0; width: 1.5px; height: calc(50% - 0.128 * var(--P)); margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, rgb(var(--fg) / 0) 0%, rgb(var(--fg) / 0.9) 70%, rgb(var(--fg)) 100%); box-shadow: 0 0 8px rgb(var(--glow) / 0.8), 0 0 24px rgb(var(--glow) / 0.4); animation: v5hgSeam 2.4s ease-in-out infinite; pointer-events: none; }
.v5-hg__flare { position: absolute; z-index: 1; left: 50%; top: calc(50% - 0.128 * var(--P)); width: 300px; height: 60px; margin: -30px 0 0 -150px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--glow) / 0.42), rgb(var(--glow) / 0.16) 55%, rgb(var(--glow) / 0)); pointer-events: none; }
.v5-hg__sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.v5-hg__sparks > span { position: absolute; border-radius: 50%; background: rgb(var(--fg)); box-shadow: 0 0 6px rgb(var(--glow)); opacity: 0; animation: v5hgRise 5s linear infinite; }
html[data-theme="light"] .v5-hg__seam { opacity: 0.5; animation: none; }

/* ---- Scroll hand-off to the next section ----
 * hero.js writes 0…1 progress values: --hx on the panel (page scrolled) and --gx on the gallery (passing
 * under the nav). Unset, every value means "at rest". */
/* Own layers, so the per-frame transform / opacity updates while scrolling never repaint their content. */
.v5-hg__wrap { transform: translateY(calc(var(--hx, 0) * -70px)); opacity: calc(1 - var(--hx, 0) * 0.85); will-change: transform, opacity; }
.v5-hg__stage { opacity: calc(1 - var(--gx, 0) * 0.9); will-change: opacity; }
/* Tilts the arc back around the cards' own depth (0.3·P behind the pivot) and lifts it. */
.v5-hg__tilt { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: translateY(calc(var(--gx, 0) * var(--P) * -0.06)) translateZ(calc(var(--P) * -0.3)) rotateX(calc(var(--gx, 0) * 30deg)) translateZ(calc(var(--P) * 0.3)); }
.v5-hg__seam { transform-origin: 50% 0; transform: scaleY(calc(1 - var(--gx, 0))); }

/* ---- Entrance (held while the intro splash covers the page, see home-v5-reveal.css) ---- */
/* Opacity + rise only: an animated blur over large text and the lot cards is the costliest thing to paint. */
.v5-hg__panel, .v5-hg__sale, .v5-hg__line, .v5-hg__lead, .v5-hg__actions, .v5-hg__lotwrap { animation: v5hgUp 1s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.v5-hg__sale { animation-delay: .1s; }
.v5-hg__line { animation-delay: .16s; }
.v5-hg__line--muted { animation-delay: .26s; }
.v5-hg__lead { animation-delay: .36s; }
.v5-hg__actions { animation-delay: .46s; }
.v5-hg__lotwrap { animation-duration: 1.1s; animation-delay: .4s; }
.v5-hg__beam, .v5-hg__beam-top, .v5-hg__floor { animation: v5hgFade 1.4s ease .3s backwards; }
.v5-hg__stage { animation: v5hgIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) .55s backwards; }

@keyframes v5hgUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes v5hgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v5hgIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes v5hgSway { 0%, 100% { transform: translateZ(var(--P)) rotateY(-0.6deg) translateZ(calc(var(--P) * -1)); } 50% { transform: translateZ(var(--P)) rotateY(0.6deg) translateZ(calc(var(--P) * -1)); } }
@keyframes v5hgSeam { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes v5hgRise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }