/* ════════════════════════════════════════════════════════════════════════
   zBtn_demo.css — a ONE-OFF reskinned button (opt in: zBrush [page, leaf, demo.zBtn_demo]).
   Proof of how far a zBtn reskins purely through your OWN class on the canonical
   surface — here a chunky neon arcade button. _zClass: arcade-btn lands on the
   <button> next to the canonical .zBtn, so every rule below is reached from that
   one class. NOTHING zOS owns is overridden — this is the author's own class.
   Bifrost-only — the terminal just confirms with y/yes.
   ════════════════════════════════════════════════════════════════════════ */

/* the button — a glowing arcade cabinet key */
.arcade-btn.zBtn,
.arcade-btn {
    position:        relative;
    border:          0;
    border-radius:   14px;
    padding:         0.95rem 2.4rem;
    font-family:     ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight:     800;
    font-size:       1rem;
    text-transform:  uppercase;
    letter-spacing:  0.18em;
    color:           #04111f;
    cursor:          pointer;
    background:      linear-gradient(120deg, #22d3ee, #a855f7, #f472b6, #22d3ee);
    background-size: 300% 100%;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.18) inset,
        0 6px 0 0 #6d28d9,                       /* the chunky 3D base edge */
        0 10px 26px rgba(168, 85, 247, 0.55),    /* the neon spill */
        0 0 22px rgba(34, 211, 238, 0.6);
    transition:      transform 0.08s ease, box-shadow 0.2s ease, background-position 0.6s ease;
    animation:       arcade-hue 6s linear infinite;
}

/* the drifting gradient keeps the glow alive at rest */
@keyframes arcade-hue {
    0%   { background-position:   0% 50%; }
    100% { background-position: 300% 50%; }
}

/* hover — brighter, lifted off the cabinet */
.arcade-btn.zBtn:hover,
.arcade-btn:hover {
    transform:  translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.28) inset,
        0 8px 0 0 #6d28d9,
        0 14px 34px rgba(168, 85, 247, 0.7),
        0 0 30px rgba(34, 211, 238, 0.85);
}

/* press — slammed down onto the base edge */
.arcade-btn.zBtn:active,
.arcade-btn:active {
    transform:  translateY(4px);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.22) inset,
        0 2px 0 0 #6d28d9,
        0 6px 18px rgba(168, 85, 247, 0.5),
        0 0 18px rgba(34, 211, 238, 0.55);
}

/* keyboard focus — a clear neon ring, no default outline */
.arcade-btn.zBtn:focus-visible,
.arcade-btn:focus-visible {
    outline:      none;
    box-shadow:
        0 0 0 3px #04111f,
        0 0 0 6px #22d3ee,
        0 10px 26px rgba(168, 85, 247, 0.6);
}

/* respect reduced-motion — hold the gradient still */
@media (prefers-reduced-motion: reduce) {
    .arcade-btn.zBtn,
    .arcade-btn { animation: none; }
}