/* Interactive title chips for the homepage H1.
   Subtle, “graphite + ChatGPT green” accent. Respects reduced motion. */

   :root {
    /* accent set (tweak freely) */
    --zyx-acc-0: #10a37f; /* c0: zyx */
    --zyx-acc-1: #4cc9f0; /* c1: fun */
    --zyx-acc-2: #c678dd; /* c2: expressive design language */
    --zyx-acc-3: #e5c07b; /* c3: context engineering */
  
    /* neutral ink used for the separator */
    --zyx-sep: var(--md-default-fg-color--lighter, #7b8087);
  }
  
  /* base */
  .zyx-hero {
    display: block;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  
  .zyx-hero .sep {
    color: var(--zyx-sep);
    margin: 0 .35rem;
  }
  
  /* shared chip styling */
  .title-chunk {
    position: relative;
    display: inline-block;
    padding: 0 .1rem;
    transition:
      color .18s ease,
      transform .18s ease,
      filter .18s ease,
      text-shadow .18s ease,
      background-size .28s ease;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px; /* anim underline */
    cursor: default;
  }
  
  /* Respect reduced motion: keep color/underline only */
  @media (prefers-reduced-motion: reduce) {
    .title-chunk {
      transition: color .18s ease, background-size .28s ease;
    }
    .title-chunk:hover {
      transform: none !important;
      filter: none !important;
      text-shadow: none !important;
    }
  }
  
  /* ---------- Individual FX (each is different & subtle) ---------- */
  
  /* 0) zyx — slight pop + glow, green accent */
  .title-chunk.c0 { color: inherit; }
  .title-chunk.c0:hover {
    color: var(--zyx-acc-0);
    transform: translateY(-1px) scale(1.03);
    text-shadow: 0 0 10px color-mix(in oklab, var(--zyx-acc-0) 35%, transparent);
    background-size: 100% 2px;
  }
  
  /* 1) fun — playful wiggle + cyan accent */
  .title-chunk.c1:hover {
    color: var(--zyx-acc-1);
    animation: zyx-wiggle 320ms ease both;
    background-size: 100% 2px;
  }
  @keyframes zyx-wiggle {
    0%   { transform: rotate(0deg) translateY(0); }
    35%  { transform: rotate(-0.6deg) translateY(-1px); }
    70%  { transform: rotate(0.6deg) translateY(-1px); }
    100% { transform: rotate(0deg) translateY(0); }
  }
  
  /* 2) expressive design language — smooth skew slide + purple accent */
  .title-chunk.c2:hover {
    color: var(--zyx-acc-2);
    transform: translateY(-1px) skewX(-2deg);
    background-size: 100% 2px;
    text-shadow: 0 0 8px color-mix(in oklab, var(--zyx-acc-2) 25%, transparent);
  }
  
  /* 3) context engineering — micro lift + gold underline “grow” */
  .title-chunk.c3 {
    background-image:
      linear-gradient(var(--zyx-acc-3), var(--zyx-acc-3));
  }
  .title-chunk.c3:hover {
    color: var(--zyx-acc-3);
    transform: translateY(-1px);
    background-size: 100% 2px; /* underline fills in */
  }
  
  /* Optional: make the hover area feel a bit roomier on touchpads */
  .title-chunk::after {
    content: "";
    position: absolute;
    inset: -2px -4px;
  }