/* Home section: hero (templates/site/home/hero.html). Paths are relative to static/home/, so kit art is ../kit/... */
/* Hero: one painting filling the column. Red grunge zone left with a jagged slash on its edge, the battle scene through the middle,
   a dark wedge on the right holding the #01 game. Copy sits straight on the red, with no box. */
.ax-hero { --hang: clamp(12px, 10.6vw - 96.6px, 56px); position: relative; isolation: isolate; overflow: visible clip; display: flex; padding-block: clamp(32px, 3.4vw, 56px); container-type: inline-size; border-bottom: 2px solid var(--ax-red); }
.ax-hero-scene, .ax-hero-scene .scene { position: absolute; inset: 0; }
.ax-hero-scene { z-index: -3; overflow: hidden; }
.ax-hero-scene .sl-stage { inset: 0; width: 100%; }
/* Picture hover (site-apex.css --ax-art-*), subtle on the scene: it zooms and turns inside its clip while the hero is hovered. */
.ax-hero-scene .scene { --ax-art-zoom: 1.04; --ax-art-turn: -1deg; transition: scale var(--ax-art-t), rotate var(--ax-art-t); }
.ax-hero-red { position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 70% at 18% 18%, #b3241a, transparent 70%), linear-gradient(180deg, #921b15 0, #5f1511 55%, #170708 100%); clip-path: polygon(0 0, 54% 0, 38% 100%, 0 100%); -webkit-mask: url("../fx/grunge.webp") 0 0 / 420px; mask: url("../fx/grunge.webp") 0 0 / 420px; }
.ax-hero-slash { position: absolute; inset: 0; z-index: -2; background: #c22a1f; clip-path: polygon(54% 0, 57.5% 0, 50% 34%, 52% 36%, 43% 74%, 45% 76%, 40.5% 100%, 38% 100%, 42% 78%, 40% 76%, 48.5% 37%, 46.5% 35%); }
.ax-hero-wedge { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(33, 33, 35, .94), rgba(16, 16, 18, .97)); clip-path: polygon(96% 0, 100% 0, 100% 100%, 79% 100%); }
/* Copy panel: the user's PLAY BEYOND LIMITS panel (Downloads/designs.png, 669x282) with its text painted out, enlarged
   (kit/hero-panel.webp, 2x) to hold the logo, HUB and both buttons in its dark left field. Its baked picture
   is replaced by the user's volcanic-citadel-under-siege scene (kit/hero-panel-scene.webp; frame, red trims and slash kept).
   Its baked Apex-style triangle emblem is painted out (the slash runs on through it) and the user's hex_three_bullets
   (05_Apex_Tactical_UI/04_Icons_Badges_Emblems) sits in its place. Sizes are in cqw of the panel so the copy scales with it.
   The panel is centred vertically on the hero picture (equal top and bottom padding); the #01 card overlaps the panel's
   lower-right corner, clear of the copy, buttons and emblem. The red wash and slash behind the old copy sit out on desktop. */
.ax-hero-red, .ax-hero-slash { display: none; }
.ax-hero-panel { position: relative; width: min(1120px, calc(100% - 48px)); aspect-ratio: 1338 / 564; margin: auto auto auto calc(-1 * var(--hang)); container-type: inline-size; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)); }
/* The panel art is drawn wider than the panel box (user: "needs to be WIDER ... so it overlaps the frame"): same height, left
   part (x 0-380 of the art) and right part (x 540-1338: scene, slash, emblem) at the panel's scale, and the plain dark middle
   (x 380-540) stretched so the art runs to the hero's right edge. The copy keeps the panel box's width, so it doesn't grow.
   The whole panel (art, copy, buttons, emblem) is shifted left as one unit (user: "MOVE, not size") so it overhangs the hero's
   left edge by --hang (56px at 1440, 20px at 1100, inside the page gutter); width, height and stretch stay as they were
   at left 24px / right 0. The hero clips only vertically; its scene clips itself. */
.ax-hero::after { --k: calc(min(1120px, 100cqw - 48px) / 1338); content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--hang)); right: calc(24px + var(--hang)); top: clamp(32px, 3.4vw, 56px); height: calc(564 * var(--k)); border: solid transparent; border-width: 0 calc(798 * var(--k)) 0 calc(380 * var(--k)); border-image: url("../kit/hero-panel-scene.webp") 0 798 0 380 fill / 0 calc(798 * var(--k)) 0 calc(380 * var(--k)) / 0 stretch; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)); pointer-events: none; }
.ax-hero-copy { position: absolute; left: 9%; top: 7%; bottom: 13%; width: 44%; display: flex; flex-direction: column; justify-content: center; }
/* Lockup (user): HUB sits to the right of BARRAGE, centred on it vertically. HUB keeps its 3.4cqw height; BARRAGE is enlarged
   so its letters (.19283 of its width) match the page banners' (site-apex.css: .145 x the panel x .6956), so 52.306cqw wide.
   BARRAGE is centred on the two-button group (52.4cqw wide), as the page banners are, and HUB hangs 1.6cqw to its right:
   centring the whole row there would push BARRAGE's B onto the panel frame's left edge. */
.ax-lockup { position: relative; display: flex; align-items: center; justify-content: center; width: 52.4cqw; }
.ax-lockup .ax-sublogo { position: absolute; top: 0; bottom: 0; left: calc(50% + 26.153cqw + 1.6cqw); width: max-content; display: flex; align-items: center; }
.ax-logo { flex: none; width: 52.306cqw; }
.ax-logo img { width: 100%; height: auto; }
.ax-sublogo { flex: none; line-height: 0; }
.ax-sublogo img { width: auto; height: 3.4cqw; }
/* Hover (user): BARRAGE and HUB only grow evenly from their centres, with the site glow along their letters. */
.ax-logo img, .ax-sublogo img { transition: var(--ax-hover-t); }
.ax-logo img:hover, .ax-sublogo img:hover { filter: var(--ax-hover-fx); scale: var(--ax-hover-scale); }
.ax-actions { display: flex; gap: 1.2cqw; margin-top: 2.2cqw; }
.ax-actions .ax-btn { flex: none; width: 25.6cqw; height: 6.5cqw; padding: 0 6.7cqw 2px 3.6cqw; font-size: max(14px, 2.16cqw); }
/* Shared neighbour push (site-apex.css): the hovered button grows and the other one moves aside. Hover motion runs under reduced motion too (user). */
.ax-hero:is(:hover, :focus-within) .ax-hero-scene .scene { scale: var(--ax-art-zoom); rotate: var(--ax-art-turn); }
.ax-actions > .ax-btn:is(:hover, :focus-visible) ~ .ax-btn { translate: var(--ax-hover-push) 0; }
.ax-actions > .ax-btn:has(~ .ax-btn:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push)) 0; }
.ax-copy.is-copied { filter: brightness(1.45); }

@media (max-width: 1100px) {
  .ax-hero-wedge { clip-path: polygon(97% 0, 100% 0, 100% 100%, 84% 100%); }
}
@media (max-width: 760px) {
  .ax-hero { display: block; min-height: 0; padding: 0; overflow: hidden; }
  .ax-hero::after { display: none; }
  .ax-hero-red { clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); }
  .ax-hero-slash, .ax-hero-wedge { display: none; }
  .ax-hero-red { display: block; }
  /* Phones: the panel holds the logo and HUB; the buttons follow under it. */
  .ax-hero-panel { width: auto; aspect-ratio: auto; margin: 0; container-type: normal; background: none; filter: none; }
  .ax-hero-copy { position: relative; inset: auto; width: auto; display: grid; grid-template-rows: auto auto; align-content: start; padding: 18px 16px 28px; }
  .ax-hero-copy::before { content: ""; grid-area: 1 / 1 / 3 / 2; z-index: -1; align-self: start; aspect-ratio: 1338 / 564; background: url("../kit/hero-panel-scene.webp") 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
  .ax-lockup { grid-area: 1 / 1; justify-content: flex-start; gap: 8px; width: auto; margin: 7.5% 0 0 9%; }
  .ax-logo { width: 58.217%; }
  .ax-lockup .ax-sublogo { position: static; }
  .ax-sublogo img { height: clamp(16px, 4.6vw, 30px); }
  .ax-actions { flex-wrap: wrap; gap: 12px; margin-top: 20px; }
  .ax-actions .ax-btn { flex: 1 1 240px; width: auto; height: 70px; padding: 0 84px 2px 46px; font-size: 21px; }
}
/* Entrance: the same keyframes and timings as the other pages (site-motion.css). The copy rises in with the .07s stagger,
   the #01 card slides in (site-apex.css) and the panel art fades in (page-in); site.js leaves .ax-hero out of the scroll reveal. */
.ax-hero-copy > * { animation: rise-in .8s var(--ease) backwards; }
.ax-hero-copy > :nth-child(2) { animation-delay: .07s; }
.ax-hero-copy > :nth-child(3) { animation-delay: .14s; }
.ax-hero-copy > :nth-child(4) { animation-delay: .21s; }
.ax-hero-copy > :nth-child(n+5) { animation-delay: .28s; }
.ax-hero::after, .ax-hero-copy::before { animation: page-in .9s ease backwards; }
@media (prefers-reduced-motion: reduce) {
  .ax-hero-copy > * { animation-name: page-in; }
}