/* ════════════════════════════════════════════════════════════════════════
   zIcon_demo.css — a ONE-OFF dressed-up icon (opt in: zBrush [page, leaf, zIcon_demo]).
   Proof of how far a zIcon reskins purely through your own _zClass on the canonical
   surface — here a rocket with a light-streak satellite in orbit. _zClass lands on the
   icon's wrapper <div>; the glyph stays the inner <i>, so the orbit ring rides the
   wrapper's ::after and touches NOTHING else. Bifrost-only — the terminal prints 🚀.
   ════════════════════════════════════════════════════════════════════════ */

/* the launch pad — a square stage the rocket sits centered on, the orbit's anchor */
.zRocket-orbit {
    position:    relative;
    display:     grid;
    place-items: center;
    width:       7rem;
    height:      7rem;
    margin:      1.4rem auto;
}

/* the rocket — big, glowing; lifted above the orbit ring so the streak passes behind */
.zRocket-orbit .bi {
    position:    relative;
    z-index:     1;
    font-size:   3.4rem;
    line-height: 1;
    filter:      drop-shadow(0 0 10px rgba(96, 165, 250, 0.7));
}

/* the orbit — a masked ring carrying a comet light-streak that fades up to a bright
   satellite "head", spinning forever around the rocket */
.zRocket-orbit::after {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    background:    conic-gradient(from 0deg,
                       rgba(96, 165, 250, 0) 0deg,
                       rgba(96, 165, 250, 0) 250deg,
                       rgba(96, 165, 250, 0.35) 315deg,
                       #93c5fd 350deg,
                       #ffffff 360deg);
    -webkit-mask:  radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask:  radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation:     zRocket-orbit-spin 1.8s linear infinite;
    pointer-events: none;
}

@keyframes zRocket-orbit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .zRocket-orbit::after { animation: none; }
}