/* Landing-page hero: copy on the left, the gold "Stonk man" on the right.
 * The art is inline SVG in index.html (original suit + chart artwork) around a placeholder head image (/img/stonk-man-head.webp) that is tinted
 * gold by an SVG filter.  To swap in your own artwork later: replace that image file, or replace the <svg> inside <figure class="stonk-art">. */
.hero.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center;
  max-width: 1040px; padding-top: 44px;
}
.hero-split .hero-copy { min-width: 0; }

.stonk-art { margin: 0; position: relative; justify-self: center; width: min(100%, 430px); }
.stonk-art svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 44px rgba(236, 188, 61, .30)); }
.stonk-art figcaption { margin-top: 10px; text-align: center; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.stonk-art figcaption b { color: var(--title-gold, var(--accent)); letter-spacing: .2em; font-size: 14px; }

/* the art is gold on warm-black whatever the page theme */
.stonk-art .stonk-word { font-weight: 800; letter-spacing: .28em; font-size: 21px; }

/* glints: four-point stars that twinkle at different times (off for reduced-motion) */
.stonk-art .spark { transform-box: fill-box; transform-origin: center; animation: stonk-twinkle 3.4s ease-in-out infinite; }
.stonk-art .s2 { animation-delay: .7s; animation-duration: 2.8s; }
.stonk-art .s3 { animation-delay: 1.5s; animation-duration: 3.9s; }
.stonk-art .s4 { animation-delay: 2.1s; }
.stonk-art .s5 { animation-delay: .3s; animation-duration: 4.4s; }
@keyframes stonk-twinkle { 0%, 100% { opacity: .1; transform: scale(.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(25deg); } }
/* the arrow "grows" once on load */
.stonk-art .arrow { stroke-dasharray: 900; stroke-dashoffset: 0; animation: stonk-draw 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes stonk-draw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .stonk-art .spark { animation: none; opacity: .85; }
  .stonk-art .arrow { animation: none; }
}

.landing {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 560px; margin: 0 auto; padding: 28px 22px 64px;
}
.landing .stonk-art { width: min(100%, 430px); }
.landing-controls { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 22px; width: min(100%, 360px); }
.landing-skin { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; font-weight: 650; }
.landing-skin > span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.landing-skin .skin-pick-wrap { justify-content: center; }
.landing-skin .skin-pick { max-width: none; width: 100%; padding: 10px 12px; font-size: 15px; }
.landing-go { display: inline-block; padding: 12px 22px; font-size: 16px; font-weight: 700; width: 100%; text-align: center; box-sizing: border-box; }
.landing-go:hover { text-decoration: none; }

@media (max-width: 820px) {
  .hero.hero-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .stonk-art { width: min(100%, 340px); }
}