/* ===============================
            旋轉圓圈 - 暗黑科技風格
   =============================== */

.circle {
    position: absolute;
    width: 15%;
    margin: auto;
    transform: rotate(100deg);
    animation: circle-animate 20s linear infinite;
    filter: drop-shadow(0 0 15px rgba(0, 217, 255, 0.6));
    transition: all 0.5s ease;
}

/* 🔥 暗黑科技旋轉動畫 */
@keyframes circle-animate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 圓圈位置 右 */
.rightCircle {
    position: absolute;
    top: 20px;
    right: 5%;
}

/* 圓圈位置 左 */
.leftCircle {
    position: absolute;
    top: 20px;
    left: 5%;
}

.circle svg {
    display: block;
    overflow: visible;
    transition: all 0.5s ease;
    position: relative;
}

/* 🔥 圓圈路徑：霓虹邊框 */
.circle path {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 0.3;
    stroke-dasharray: 2, 3;
    opacity: 0.6;
    filter: drop-shadow(0 0 8px var(--cyan));
    animation: dash-flow 8s linear infinite;
    transition: all 0.5s ease;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -20;
    }
}

/* 🔥 文字樣式：科技霓虹效果 */
.circle text {
    fill: rgba(230, 241, 255, 0.7);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.circle a {
    fill: rgba(230, 241, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 🔥 高亮項目：發光效果 */
.circle .highlight {
    font-weight: 700;
    fill: var(--white);
    filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 12px rgba(0, 217, 255, 0.8));
    animation: text-glow 2s ease-in-out infinite;
}

@keyframes text-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 12px rgba(0, 217, 255, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 12px var(--cyan)) drop-shadow(0 0 20px rgba(0, 217, 255, 1));
    }
}

/* 🔥 懸停效果：增強發光 */
.circle a:hover {
    fill: var(--white);
    filter: drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 0 15px rgba(0, 217, 255, 0.9)) drop-shadow(0 0 20px rgba(100, 147, 250, 0.6));
    font-weight: 600;
}

/* 🔥 圓圈容器：增加旋轉軌道效果 */
.circle::before {
    content: '';
    position: absolute;
    inset: -15%;
    border: 1px solid rgba(0, 217, 255, 0.15);
    border-radius: 50%;
    animation: orbit-ring 15s linear infinite reverse;
    transition: all 0.5s ease;
}

.circle::after {
    content: '';
    position: absolute;
    inset: -25%;
    border: 1px dashed rgba(100, 147, 250, 0.1);
    border-radius: 50%;
    animation: orbit-ring 20s linear infinite;
    transition: all 0.5s ease;
}

@keyframes orbit-ring {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 🔥🔥🔥 懸停時整個圓圈的動畫效果 🔥🔥🔥 */

/* 1. 整體圓圈放大與發光 */
.circle:hover {
    filter: drop-shadow(0 0 30px rgba(0, 217, 255, 1)) drop-shadow(0 0 50px rgba(100, 147, 250, 0.8));
    transform: scale(1.15) rotate(105deg);
    animation-play-state: paused;
}

/* 2. SVG 整體旋轉 */
.circle:hover svg {
    transform: rotate(15deg) scale(1.05);
}

/* 3. 內圈路徑變化 */
.circle:hover path {
    stroke-width: 0.5;
    opacity: 1;
    stroke: var(--white);
    stroke-dasharray: 4, 2;
    animation: dash-flow-fast 2s linear infinite;
    filter: drop-shadow(0 0 15px var(--cyan)) drop-shadow(0 0 20px rgba(0, 217, 255, 1));
}

@keyframes dash-flow-fast {
    to {
        stroke-dashoffset: -40;
    }
}

/* 4. 外圈軌道加速旋轉 */
.circle:hover::before {
    border-width: 2px;
    border-color: rgba(0, 217, 255, 0.4);
    inset: -20%;
    animation: orbit-ring-fast 3s linear infinite reverse;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

.circle:hover::after {
    border-width: 2px;
    border-color: rgba(100, 147, 250, 0.3);
    inset: -30%;
    animation: orbit-ring-fast 4s linear infinite;
    box-shadow: 0 0 25px rgba(100, 147, 250, 0.4);
}

@keyframes orbit-ring-fast {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 5. 數據點加速脈衝 */
.circle:hover .data-dot {
    width: 6px;
    height: 6px;
    animation: data-point-fast 1s ease-in-out infinite;
    box-shadow:
        0 0 15px var(--cyan),
        0 0 30px rgba(0, 217, 255, 0.8),
        0 0 40px rgba(0, 217, 255, 0.6);
}

@keyframes data-point-fast {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(2);
    }
}

/* 6. 文字全部發光 */
.circle:hover text {
    fill: rgba(230, 241, 255, 1);
    filter: drop-shadow(0 0 5px var(--cyan));
}

.circle:hover a {
    fill: var(--white);
    font-weight: 600;
}

/* 7. 背景光暈擴散 */
.circle:hover svg::before {
    opacity: 1;
    transform: scale(1.5);
}

/* 🔥 圓圈進場動畫 - 科技感增強 */
.about-circle-animation {
    animation: circle-tech-enter 2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-circle-none {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes circle-tech-enter {
    0% {
        transform: rotate(0deg) scale(0.3);
        opacity: 0;
        filter: drop-shadow(0 0 30px var(--cyan));
    }

    40% {
        opacity: 0.5;
        filter: drop-shadow(0 0 40px var(--cyan));
    }

    70% {
        transform: rotate(720deg) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: rotate(820deg) scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 15px rgba(0, 217, 255, 0.6));
    }
}

/* 991px 以下隱藏旋轉圓圈 */
@media screen and (max-width: 991px) {

    .circle,
    .rightCircle,
    .leftCircle {
        display: none !important;
    }
}