/* Hero candidate 1 "The Crash" (12 Nov 2026). v8: the chosen hero (owner, 12 Nov 2026), linked last so it overrides sec-hero.css. Every selector is scoped to #hero.hv1 or #sticky.
   One idea: the real 1-hour re-run line rises, then crashes across the screen while the H1 number counts RM10,000 -> RM2,600.
   Trading terminal meets movie poster: ink stage, faint grid, mono data strip, one glowing red line, one glowing yellow button.
   Colour meanings kept: red = loss (line, number), white = the start, yellow = the button only.
   Phone: strip -> H1 -> tag -> chart band (Anson bottom-right, the line in front of him) -> date -> button -> gifts.
   Desktop (>= 960): text left over a scrim, the chart full-bleed behind, Anson standing right in front of it. */

/* ================= stage ================= */
#hero.hv1 { --hv1-sh: clamp(150px, calc(100svh - 440px), 310px);
  /* mono for Latin + digits; CJK falls through to the page's Chinese face (a generic monospace fallback spaces Chinese out) */
  --hv1-mono: "JetBrains Mono", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-monospace, monospace;
  position: relative; overflow: hidden; padding: 12px 0 var(--ds-s5); color: var(--ds-text-d);
  background: radial-gradient(90% 60% at 80% 62%, rgba(229,72,77,.10) 0%, rgba(11,13,16,0) 60%), radial-gradient(120% 80% at 50% 0%, #121620 0%, var(--ds-ink) 70%), var(--ds-ink); }
#hero.hv1::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--ds-line-d); }
#hero .hv1-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 100% 44px, 44px 100%;
  -webkit-mask-image: radial-gradient(80% 70% at 60% 55%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 70% at 60% 55%, #000 30%, transparent 100%); }
#hero .ds-wrap { position: relative; z-index: 3; }

/* ================= terminal strip ================= */
#hero .hv1-term { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s3); }
#hero .hv1-kick { margin: 0; font: 700 13px/1.3 var(--ds-zh); letter-spacing: .04em; color: var(--ds-text-d); white-space: nowrap; }
#hero .hv1-live { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--ds-dn-d); vertical-align: 1px;
  box-shadow: 0 0 0 3px rgba(229,72,77,.22), 0 0 10px rgba(229,72,77,.8); }
#hero .hv1-tick-2 { display: none; }
#hero .hv1-tick { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.3 var(--hv1-mono); letter-spacing: 0; color: var(--ds-mute-d); }

/* ================= H1: three lines fitted to the phone width; the red number is the biggest thing on the page ================= */
#hero .hv1-top { margin-top: var(--ds-s4); --u: calc(100vw - 2 * var(--ds-gutter)); }
#hero .hv1-h1 { margin: 0; font-family: var(--ds-zh); font-weight: 900; letter-spacing: -.01em; color: var(--ds-text-d); text-wrap: initial; }
#hero .hv1-h1 .l { display: block; white-space: nowrap; }
#hero .hv1-h1 .l:nth-child(1) { font-size: calc(var(--u) / 13.6); font-weight: 700; line-height: 1.3; color: var(--ds-text-d2); }
#hero .hv1-h1 .l:nth-child(2) { margin-top: 2px; font-size: calc(var(--u) / 9.2); line-height: 1.16; }
#hero .hv1-h1 .l:nth-child(3) { font-size: calc(var(--u) / 6.3); line-height: 1.04; letter-spacing: -.02em; }
#hero .hv1-h1 .num { font-family: var(--ds-num); font-weight: 800; font-stretch: 86%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#hero .hv1-h1 .n0 { position: relative; display: inline-block; color: var(--ds-text-d2); font-weight: 700; }
#hero .hv1-h1 .n0::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 54%; height: .09em; border-radius: 1px; background: var(--ds-dn-d);
  box-shadow: 0 0 8px rgba(229,72,77,.7); transform-origin: left center; }
#hero .hv1-h1 .dn { color: #ff5a5f; text-shadow: 0 0 28px rgba(229,72,77,.55), 0 0 2px rgba(229,72,77,.6); }

/* the label that names the red number */
#hero .hv1-tag { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 600 13px/1.35 var(--hv1-mono); letter-spacing: 0; color: var(--ds-mute-d); }
#hero .hv1-tag-k { flex: none; width: 18px; height: 2px; border-radius: 1px; background: var(--ds-dn-d); box-shadow: 0 0 6px rgba(229,72,77,.8); }
#hero .hv1-sub { margin: var(--ds-s3) 0 0; font: 700 16px/1.45 var(--ds-zh); color: var(--ds-text-d); }

/* ================= chart band + Anson ================= */
/* --hv1-gap: the space above the band; tall phones (band 310) get more air so his hair clears the sub line */
#hero .hv1-stage { --hv1-gap: clamp(8px, calc(var(--hv1-sh) - 286px), 24px); position: relative; z-index: 2; height: var(--hv1-sh); margin-top: var(--hv1-gap); }
#hero .hv1-chart { position: absolute; inset: 0 0 0 0; z-index: 2; pointer-events: none; }
#hero .hv1-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 5px rgba(229,72,77,.55)) drop-shadow(0 0 16px rgba(229,72,77,.28)); }
#hero .hv1-area { fill: url(#hv1-a); }
#hero .hv1-glow { fill: none; stroke: url(#hv1-s); stroke-width: 7; stroke-opacity: .18; stroke-linejoin: round; stroke-linecap: round; }
#hero .hv1-ln { fill: none; stroke: url(#hv1-s); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

/* the RM10,000 start line: geometry = the baked path (log scale, pad top 7%, bottom 10%): RM10,000 sits at 47.0% */
#hero .hv1-base { position: absolute; left: 0; right: 0; top: 47%; height: 0; border-top: 1px dashed rgba(244,241,234,.28); }
#hero .hv1-base span { position: absolute; left: 3%; top: 8px; font: 600 12px/1 var(--hv1-mono); color: var(--ds-mute-d); white-space: nowrap; }

/* the end of the line: x 96.5%, y 89.0% */
#hero .hv1-end { position: absolute; left: 96.5%; top: 89%; width: 0; height: 0; z-index: 3; }
#hero .hv1-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a5f;
  box-shadow: 0 0 0 4px rgba(229,72,77,.25), 0 0 16px 2px rgba(229,72,77,.9); }
#hero .hv1-end-t { position: absolute; right: 12px; bottom: 6px; display: grid; justify-items: end; gap: 1px; padding: 5px 8px; border-radius: 8px;
  background: rgba(11,13,16,.82); border: 1px solid rgba(229,72,77,.45); white-space: nowrap; font: 600 12px/1.3 var(--hv1-mono); color: var(--ds-text-d2); }
#hero .hv1-end-l { display: block; }
#hero .hv1-end-t b { font: 800 22px/1 var(--ds-num); font-stretch: 86%; font-variant-numeric: tabular-nums; color: #ff5a5f; }

/* the scan line that draws the chart (motion only) */
#hero .hv1-scan { display: none; }

/* Anson: top fixed just under the tag line (his hair clears it), bottom 4px under the band, so his chin sits at ~44% of the band,
   above the RM10,000 start line (47%): the line crosses his suit, never his face. Bleeds 20px off the right edge (shoulder only). */
#hero .hv1-person { position: absolute; z-index: 1; right: -20px; top: calc(-41px - var(--hv1-gap)); height: calc(var(--hv1-sh) + 45px + var(--hv1-gap)); aspect-ratio: 508 / 588; pointer-events: none; }
#hero .hv1-person picture, #hero .hv1-person img { display: block; width: 100%; height: 100%; }
#hero .hv1-person img { object-fit: contain; object-position: right bottom;
  -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
#hero .hv1-badge { display: none; }

/* ================= action: date, the one button, gifts ================= */
#hero .hv1-act { margin-top: var(--ds-s2); }
#hero .hv1-when { display: block; margin: 0; padding: 0; border: 0; }
#hero .hv1-when > div { display: block; }
#hero .hv1-when dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ds-s2); margin: 0; }
#hero .hv1-when dd b { font: 900 17px/1.4 var(--ds-zh); color: var(--ds-text-d); white-space: nowrap; }
#hero .hv1-when dd > span { font: 400 13px/1.4 var(--ds-zh); color: var(--ds-text-d2); white-space: nowrap; }
#hero .hv1-when dd span span { font: inherit; color: inherit; }

#hero .hv1-btn { overflow: hidden; width: 100%; min-height: 60px; margin-top: 10px; font-size: 19px; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255,221,102,.65), 0 0 42px -6px rgba(255,212,59,.65), 0 18px 40px -18px rgba(255,212,59,.9); }
#hero .hv1-btn .arrow { margin-left: 2px; }
@media (hover: hover) { #hero .hv1-btn:hover { box-shadow: 0 0 0 1px rgba(255,221,102,.8), 0 0 56px -4px rgba(255,212,59,.75), 0 22px 44px -18px rgba(255,212,59,.95); } }

#hero .hv1-gift { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font: 400 13px/1.4 var(--ds-zh); color: var(--ds-text-d2); text-align: center; }
#hero .hv1-gift svg { flex: none; width: 16px; height: 16px; color: var(--ds-text-d); }
#hero .hv1-gift b { font-weight: 900; color: var(--ds-text-d); }
#hero .hv1-fine { margin: var(--ds-s4) 0 0; font: 400 12px/1.6 var(--ds-zh); color: var(--ds-mute-d); text-align: center; text-wrap: balance; }
#hero .closed-note { margin-top: var(--ds-s4); padding: 2px 0 2px var(--ds-s4); border-radius: 0; background: none; border-left: 3px solid var(--ds-line-d);
  font: 700 var(--ds-fs-lead)/1.5 var(--ds-zh); color: var(--ds-text-d); }
body.ended #hero .hv1-gift, body.ended #hero .hv1-fine { display: none; }

/* ================= motion: once, 900ms (html.hv1-m is set by the inline script under the H1; never with reduced motion) ================= */
@keyframes hv1-wipe { from { clip-path: inset(-20% 100% -20% -2%); } to { clip-path: inset(-20% -2% -20% -2%); } }
@keyframes hv1-scan { 0% { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(2%); opacity: 0; } }
@keyframes hv1-shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes hv1-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hv1-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hv1-strike { from { transform: scaleX(0); } to { transform: none; } }
html.hv1-m #hero .hv1-chart svg { animation: hv1-wipe .9s cubic-bezier(.45,.05,.55,.95) both; }
html.hv1-m #hero .hv1-scan { display: block; position: absolute; inset: 0; border-right: 1px solid rgba(244,241,234,.55);
  animation: hv1-scan .9s cubic-bezier(.45,.05,.55,.95) both; }
html.hv1-m #hero .hv1-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: hv1-shine .4s .5s ease-in-out both; }
html.hv1-m #hero .hv1-dot { animation: hv1-pop .2s .7s var(--ds-ease-thunk) both; }
html.hv1-m #hero .hv1-end-t { animation: hv1-in .2s .7s var(--ds-ease) both; }
html.hv1-m #hero .hv1-h1 .n0::after { animation: hv1-strike .45s .1s var(--ds-ease) both; }
@media (prefers-reduced-motion: reduce) { #hero .hv1 *, #hero.hv1 * { animation: none !important; } }

/* ================= small phones (<= 374: 360x640) ================= */
@media (max-width: 374px) {
  #hero.hv1 { --hv1-sh: clamp(140px, calc(100svh - 420px), 260px); padding-top: 10px; }
  #hero .hv1-tick { font-size: 12px; }
  #hero .hv1-top { margin-top: 12px; }
  #hero .hv1-sub { margin-top: 8px; font-size: 15px; }
  #hero .hv1-tag { font-size: 12.5px; }
  #hero .hv1-person { top: calc(-33px - var(--hv1-gap)); height: calc(var(--hv1-sh) + 37px + var(--hv1-gap)); }   /* the sub block is 8px shorter here */
  #hero .hv1-when dd b { font-size: 16px; }
  #hero .hv1-when dd > span { font-size: 12px; }
  #hero .hv1-btn { min-height: 56px; font-size: 18px; }
}

/* ================= tablet (720-959): the phone stack, roomier ================= */
@media (min-width: 720px) and (max-width: 959px) {
  #hero.hv1 { --hv1-sh: 340px; padding-top: var(--ds-s5); }
  #hero .hv1-top { --u: 640px; }
  #hero .hv1-tick { font-size: 12px; }
  #hero .hv1-btn { width: auto; min-width: 380px; }
  #hero .hv1-gift { justify-content: flex-start; }
  #hero .hv1-fine { text-align: left; max-width: 40em; }
}

/* ================= desktop: the phone order, as a poster. Strip -> H1 -> the chart band (full-bleed from the left edge
   to Anson) -> date + button. Anson stands on the right, full height, looking at where the line ends. ================= */
@media (min-width: 960px) {
  #hero.hv1 { --hv1-ch: clamp(170px, 29vh, 290px);
    display: flex; flex-direction: column; min-height: min(900px, 100vh); padding: 22px 0 clamp(24px, 4vh, 44px);
    background: radial-gradient(40% 45% at 58% 58%, rgba(229,72,77,.13) 0%, rgba(11,13,16,0) 70%), radial-gradient(90% 90% at 72% 18%, #131823 0%, var(--ds-ink) 70%), var(--ds-ink); }
  #hero .hv1-bg { background-size: 100% 64px, 64px 100%;
    -webkit-mask-image: radial-gradient(70% 80% at 45% 55%, #000 35%, transparent 100%); mask-image: radial-gradient(70% 80% at 45% 55%, #000 35%, transparent 100%); }

  #hero .hv1-term { padding-bottom: 14px; border-bottom: 1px solid var(--ds-line-d); }
  #hero .hv1-kick { font-size: 14px; }
  #hero .hv1-tick { font-size: 12px; color: var(--ds-mute-d); }

  #hero .hv1-top { margin-top: auto; padding-top: clamp(20px, 4vh, 40px); }
  #hero .hv1-h1 .l:nth-child(1) { font-size: clamp(24px, 3.3vh, 30px); }
  #hero .hv1-h1 .l:nth-child(2) { margin-top: 4px; font-size: clamp(50px, 7.4vh, 68px); }
  #hero .hv1-h1 .l:nth-child(3) { font-size: clamp(76px, 11.8vh, 108px); line-height: 1.02; }
  #hero .hv1-tag { margin-top: 12px; font-size: 13px; }
  #hero .hv1-sub { display: none; }

  /* the band: full-bleed from the left edge, ends just left of Anson (the line's last point sits by his shoulder) */
  #hero .hv1-stage { position: static; height: auto; margin: clamp(4px, 1.5vh, 16px) 0 0; }
  #hero .hv1-chart { position: relative; z-index: auto; height: var(--hv1-ch); width: calc(50vw + 140px); }
  #hero .hv1-chart svg, #hero .hv1-base, #hero .hv1-scan { z-index: 1; }
  #hero .hv1-end { z-index: 4; }
  #hero .hv1-ln { stroke-width: 3; }
  #hero .hv1-glow { stroke-width: 11; }
  #hero .hv1-base { right: calc(-50vw + 140px); }
  #hero .hv1-base span { left: auto; right: calc(50vw - 140px + 24px); top: auto; bottom: 6px; font-size: 12px; }
  #hero .hv1-dot { left: -6px; top: -6px; width: 12px; height: 12px; }
  #hero .hv1-end-t { right: auto; left: 16px; bottom: auto; top: -26px; padding: 7px 11px; font-size: 11px; justify-items: start; }
  #hero .hv1-end-t b { font-size: 28px; }

  #hero .hv1-person { z-index: 2; right: max(16px, calc((100vw - 1360px) / 2)); top: auto; bottom: 0; height: min(790px, 88%); aspect-ratio: 580 / 906; }
  #hero .hv1-person img { object-position: center bottom; -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); }
  #hero .hv1-badge { display: grid; position: absolute; left: -20px; bottom: 6%; gap: 2px; max-width: 340px; padding: 12px 16px;
    border: 1px solid var(--ds-line-d); border-radius: var(--ds-r-s); background: rgba(11,13,16,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  #hero .hv1-badge-k { font: 700 11px/1.35 var(--ds-zh); letter-spacing: .08em; color: var(--ds-mute-d); }
  #hero .hv1-badge-n { font: 800 22px/1.15 var(--ds-num); font-stretch: 92%; color: var(--ds-text-d); }
  #hero .hv1-badge-r { font: 400 13px/1.4 var(--ds-zh); color: var(--ds-text-d2); }
  #hero .hv1-badge-s { margin-top: 2px; font: 400 13px/1.4 var(--ds-zh); color: var(--ds-mute-d); white-space: nowrap; }
  #hero .hv1-badge-s .num { font: 800 14px var(--ds-num); font-stretch: 88%; color: var(--ds-text-d); }

  #hero .hv1-act { margin-top: clamp(8px, 2vh, 20px); margin-bottom: auto; }
  #hero .hv1-act > * { max-width: 600px; }
  #hero .hv1-when dd b { font-size: 20px; }
  #hero .hv1-when dd > span { font-size: 15px; }
  #hero .hv1-btn { width: 440px; min-height: 64px; margin-top: 12px; font-size: 21px; }
  #hero .hv1-gift { justify-content: flex-start; font-size: 14px; }
  #hero .hv1-fine { max-width: 44em; margin-top: 12px; text-align: left; text-wrap: pretty; }
}

/* ================= register button always on screen =================
   Phone (< 720): the shared bottom #sticky bar (lander.js shows it once the hero button scrolls away).
   >= 720: zh.css hides #sticky; on this page it comes back as a slim top bar, shown by hero-v1.js (.hv1-on)
   whenever the hero button is off screen, other buttons or not. */
@media (min-width: 720px) {
  #sticky.hv1-top-bar { display: block; top: 0; bottom: auto; padding: 8px var(--ds-gutter); border-top: 0; border-bottom: 1px solid var(--ds-line-d);
    box-shadow: 0 16px 32px -20px rgba(0,0,0,.8); transform: translateY(-110%); }
  #sticky.hv1-top-bar.hv1-on { transform: none; }
  #sticky.hv1-top-bar .sticky-in { max-width: var(--ds-max); min-height: 48px; }
  #sticky.hv1-top-bar .sticky-when { display: flex; align-items: baseline; gap: 12px; }
  #sticky.hv1-top-bar .sticky-when b { font-size: 15px; }
  #sticky.hv1-top-bar .sticky-when > span { font-size: 14px; }
  #sticky.hv1-top-bar .btn { min-height: 46px; padding: 0 28px; font-size: 17px;
    box-shadow: 0 0 0 1px rgba(255,221,102,.6), 0 0 28px -6px rgba(255,212,59,.6); }
  body:has(#sheet.show) #sticky.hv1-top-bar { transform: translateY(-110%); }
  body.ended #sticky.hv1-top-bar { display: none; }
}

@media (min-width: 720px) { #hero .hv1-tick-2 { display: inline; } }