/* ============================================================
* Vilkax · vlx-logo-glow.css (Pass-155)
* ============================================================
*
* Standard "logo in a perfect circle, glowing, with a 3D bevel"
* treatment. Apply to ANY logo image - Vilkax mark, VAX coin,
* partner marks - and the renderer crops the source to a circle
* (any background is invisible past the edge), softens with a
* subtle inner shadow for depth, and adds a slow neon halo.
*
* Why CSS rather than re-rendering the PNG? Three reasons:
*
* 1. Resolution-independent. Same treatment at 28 px chat
* avatar AND 480 px hero composition.
* 2. GPU-accelerated. The clip-path + filter pipeline runs on
* the compositor; no main-thread cost.
* 3. Reversible. A future PNG re-render swaps in cleanly -
* strip the class and the rectangular source is back.
*
* Usage:
*
*
* 
*
*
*
* 
*
*
* Modifiers:
* .vlx-logo-glow-sm - 28 px (chat avatars)
* .vlx-logo-glow-md - 64 px (cards)
* .vlx-logo-glow-lg - 160 px (hero)
* .vlx-logo-glow-vax - gold-tinted glow (VAX coin)
* .vlx-logo-glow-flat - no animation (reduced motion / list rows)
*
* Reduced-motion users get a static (still circular + bevelled)
* version automatically.
* ============================================================ */
.vlx-logo-glow {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* Square aspect - clip-path needs it. */
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
/* Cushion the glow so it never clips against a parent border. */
isolation: isolate;
}
/* The actual image - clipped to a perfect circle and centered. */
.vlx-logo-glow > img,
.vlx-logo-glow > svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
/* Pull the visible mark in slightly so any near-edge antialiasing
of the source PNG never touches the ring boundary. */
padding: 4%;
box-sizing: border-box;
/* Hardware-accelerated clip in case clip-path on the wrapper
misbehaves on older WebKit (defensive double-mask). */
-webkit-mask: radial-gradient(circle, #000 99%, transparent 100%);
mask: radial-gradient(circle, #000 99%, transparent 100%);
}
/* 3D bevel - two stacked inner shadows simulate a top-light
highlight + a bottom shade. Sits OVER the image via
::after so it doesn't get clipped with the mark. Subtle -
reads as depth, not as a bezel. */
.vlx-logo-glow::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.22), /* top light */
inset 0 -2px 3px rgba(0, 0, 0, 0.35); /* bottom shade */
z-index: 2;
}
/* Outer ambient glow - slow breathing. Blue by default; the
VAX variant flips to gold below. */
.vlx-logo-glow::before {
content: "";
position: absolute;
inset: -8%;
border-radius: 50%;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 50% 50%,
rgba(96, 165, 250, 0.45) 0%,
rgba(37, 99, 235, 0.18) 38%,
rgba(37, 99, 235, 0) 72%);
filter: blur(2px);
animation: vlx-logo-glow-pulse 5.5s ease-in-out infinite;
}
@keyframes vlx-logo-glow-pulse {
0%, 100% {
opacity: 0.85;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
/* ── VAX variant ──────────────────────────────────────────────
* Re-tuned for the new aurora coin (mint → Vilkax-blue → violet on a
* deep-space disc with a spectrum rim). The old gold halo/brown shade
* was built for the previous gold coin and clashed with the new cool
* palette. The new mark is self-contained — it carries its own rim,
* depth and glow — so the wrapper now only adds a soft cool ambient
* halo + a whisper of bevel, and leaves the artwork itself alone (no
* brightness clamp / vignette that fought the old asset).
* - Halo flips gold → Vilkax-blue→violet, kept close to the rim.
* - Bevel neutralised (cool top-light + void bottom-shade).
* - The img gets only a soft blue lift shadow, no colour cast.
* ─────────────────────────────────────────────────────────────── */
.vlx-logo-glow-vax::before {
background:
radial-gradient(circle at 50% 50%,
rgba(77, 169, 255, 0.26) 0%,
rgba(153, 69, 255, 0.12) 40%,
rgba(77, 169, 255, 0) 62%);
}
.vlx-logo-glow-vax::after {
/* The coin already has its own spectrum rim — keep only a faint
* cool top-light + a void bottom-shade for a hint of depth. */
box-shadow:
inset 0 1.5px 1.5px rgba(234, 251, 255, 0.22),
inset 0 -3px 4px rgba(5, 7, 12, 0.45);
}
/* The new mark is balanced — a soft cool drop-shadow lifts it off the
* page; no brightness/contrast clamp or vignette (those were tuned to
* tame the old gold asset and would dull the aurora). */
.vlx-logo-glow-vax > img,
.vlx-logo-glow-vax > picture > img {
filter: drop-shadow(0 3px 10px rgba(40, 90, 160, 0.45));
}
/* ── Sizes ──────────────────────────────────────────────── */
.vlx-logo-glow-sm { width: 28px; height: 28px; }
.vlx-logo-glow-md { width: 64px; height: 64px; }
.vlx-logo-glow-lg { width: 160px; height: 160px; }
/* ── No-anim variant - list rows, dense surfaces ─────────── */
.vlx-logo-glow-flat::before { animation: none; opacity: 0.65; }
/* ── Reduced motion - kill the pulse universally ─────────── */
@media (prefers-reduced-motion: reduce) {
.vlx-logo-glow::before { animation: none; }
}
/* ── Hover lift (when wrapped in an ) ──────────────────── */
a.vlx-logo-glow,
.vlx-logo-glow a,
a > .vlx-logo-glow {
transition: transform 240ms ease;
}
a:hover > .vlx-logo-glow,
a.vlx-logo-glow:hover {
transform: translateY(-2px) scale(1.02);
}