/* ════════════════════════════════════════════════════════════════════════
   zHeader_demo.css — a ONE-OFF wild heading (opt in: zBrush [page, leaf, demo.zHeader_demo]).
   Proof for the Headings leaf's "_zClass — your own look" lesson: hand a zH1
   any class YOU wrote and the built-in header colors step aside. Deliberately
   over-the-top — a tilted rainbow-gradient headline with a slow hue cycle —
   so it looks like nothing zOS ships. Headings DO carry an author _zClass
   directly (unlike navbar/crumbs), so no wrapper scoping is needed.
   ════════════════════════════════════════════════════════════════════════ */
.demo-wild {
    display:                 inline-block;
    font-size:               clamp(2.2rem, 5vw, 3.2rem);
    font-weight:             900;
    letter-spacing:          0.04em;
    transform:               rotate(-2deg);
    background:              linear-gradient(90deg, #ff5f00 0%, #ffd700 25%, #87d700 50%, #00d7ff 75%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    filter:                  drop-shadow(0 0 18px rgba(255, 95, 0, 0.35));
    animation:               demo-wild-hue 5s linear infinite;
}
@keyframes demo-wild-hue { to { filter: drop-shadow(0 0 18px rgba(255, 95, 0, 0.35)) hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-wild { animation: none; } }