.spore-journey-host{
    position:relative;
}

.spore-journey-zone-field{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.spore-journey-zone-field--back{
    z-index:0;
}

.spore-journey-zone-field--front{
    z-index:2;
}

.spore-journey-host > *:not(.spore-journey-zone-field){
    position:relative;
    z-index:1;
}

.spore-journey-particle{
    --spore-size:50px;
    --spore-rgb:244,185,66;
    --spore-opacity:.70;
    --spore-rotation:0deg;

    width:var(--spore-size);
    height:var(--spore-size);

    position:absolute;
    left:0;
    top:0;

    border-radius:50%;

    /*
     * v0.8.1
     * 高光縮小，主要面積維持品牌色。
     * 只有最外圈才逐漸淡出。
     */
    background:
        radial-gradient(
            circle at 31% 27%,
            rgba(255,255,255,.34) 0%,
            rgba(255,255,255,.14) 4%,
            rgba(var(--spore-rgb),.82) 10%,
            rgba(var(--spore-rgb),.76) 34%,
            rgba(var(--spore-rgb),.66) 62%,
            rgba(var(--spore-rgb),.46) 80%,
            rgba(var(--spore-rgb),.18) 92%,
            rgba(var(--spore-rgb),0) 100%
        );

    opacity:var(--spore-opacity);

    box-shadow:
        0 0 16px rgba(var(--spore-rgb),.20),
        0 0 34px rgba(var(--spore-rgb),.13),
        0 0 56px rgba(var(--spore-rgb),.07);

    transform:
        translate3d(-50%,-50%,0)
        rotate(var(--spore-rotation));

    will-change:left,top,transform;
}

/*
 * 方向性高光縮小，仍保留自轉可視性。
 */
.spore-journey-particle::after{
    content:"";

    width:17%;
    height:9%;

    position:absolute;
    left:23%;
    top:20%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.02)
        );

    filter:blur(.8px);

    transform:rotate(-22deg);
}

.spore-journey-particle[data-tone="orange"]{
    --spore-rgb:244,185,66;
}

.spore-journey-particle[data-tone="blue"]{
    --spore-rgb:8,127,183;
}

.spore-journey-particle[data-tone="light-blue"]{
    --spore-rgb:18,166,216;
}

.spore-journey-particle[data-tone="deep-blue"]{
    --spore-rgb:14,51,108;
}

@media(max-width:768px){
    .spore-journey-zone-field{
        display:none!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .spore-journey-zone-field{
        display:none!important;
    }
}