/* Coderboy hero: the mascot is a vector drawing (redrawn from coderboy-hero.png)
   in separate parts, so the eyes, brows, head, hands and body can move. With no
   JavaScript, or with reduced motion, the same drawing simply stands still. */
.hero-mascot { width: 340px; max-width: 100%; position: relative; }
.coderboy-stage { position: relative; aspect-ratio: 811 / 985; isolation: isolate; }
.coderboy-rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block;
                filter: drop-shadow(0 16px 26px rgba(124, 58, 237, .14)); pointer-events: none; }
.coderboy-rig #cb-eyes, .coderboy-rig #cb-whites, .coderboy-rig #cb-pupils { transform-box: view-box; }

/* The whole drawing is the "say hello" button once the animation is live. */
.coderboy-wave { display: none; position: absolute; inset: 0; border: 0; border-radius: 35%;
                 background: transparent; cursor: pointer; touch-action: pan-y; }
.coderboy-controls { display: none; align-items: center; justify-content: space-between; gap: 8px;
                     font-size: 11px; color: #68567b; margin-top: 22px; }
.coderboy-pause { font: inherit; color: #6d28d9; border: 1px solid #d8c7f2; background: #fff;
                  border-radius: 20px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.coderboy-live .coderboy-wave { display: block; }
.coderboy-live .coderboy-controls { display: flex; }
.coderboy-wave:focus-visible, .coderboy-pause:focus-visible, .hero-ctas a:focus-visible { outline: 3px solid #7c3aed; outline-offset: 5px; }
.hero-ctas a:hover, .hero-ctas a:focus-visible { box-shadow: 0 6px 20px #7c3aed19; }

@media (max-width: 768px) {
  .hero-mascot { width: 230px; order: 0; margin: 12px auto 0; }
  .hero { padding-top: 105px; }
  .hero .container { gap: 22px; }
  .hero h1 { font-size: 42px; }
  .hero-mascot .coderboy-controls { font-size: 10px; margin-top: 18px; }
  .hero p.tagline { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .coderboy-wave, .coderboy-controls { display: none !important; }
}
@media (scripting: none) {
  #menu-toggle { display: none; }
  .nav-links { display: flex !important; position: static; flex-flow: row wrap; width: 100%; min-width: 0; border: 0; box-shadow: none; padding: 8px 0; gap: 0; }
  .nav-links a { font-size: 11px; padding: 5px; }
  nav { position: relative; }
  nav .container { flex-wrap: wrap; }
  .hero { padding-top: 45px; }
}