/*
 * 首頁 Hero 背景動畫「社群匯聚」（主站專用）
 * 搭配 public/js/hero-social-hub.js；由 resources/views/welcome.blade.php 引入，子站不載入。
 * 結構：.hero-hub > canvas.hero-hub-bg（網格＋星點，靜態、只做 transform 視差）
 *                 > canvas.hero-hub-fg（軌道、平台圖示、數據流、核心，rAF 繪製）
 *                 > .hero-hub-veil（文字後方柔和遮罩，確保可讀性）
 * JS 未啟動前（或 JS 失敗）只顯示 CSS 漸層底色，不影響 LCP、不造成 CLS。
 */

.hero-hub {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 50% at 50% 46%, rgba(14, 165, 233, 0.10) 0%, rgba(14, 165, 233, 0) 70%),
        radial-gradient(ellipse 40% 38% at 78% 72%, rgba(236, 72, 153, 0.09) 0%, rgba(236, 72, 153, 0) 70%),
        radial-gradient(ellipse 40% 38% at 18% 24%, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0) 70%),
        linear-gradient(180deg, #f8fbff 0%, #f2f7fc 55%, #fbf3f8 100%);
}

.hero-hub canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-hub-fg {
    width: 100%;
    height: 100%;
}

.hero-hub-bg {
    will-change: transform;
}

.hero-hub.is-ready canvas {
    opacity: 1;
}

/* 核心光暈（天藍在左、桃粉在右，位置由 JS 依光環大小設定 CSS 變數）；呼吸動畫只動 opacity，交給合成器 */
.hero-hub-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    --hub-glow-a: 0.12;
}
.hero-hub.is-ready .hero-hub-glow {
    opacity: 1;
}
.hero-hub-glow::before,
.hero-hub-glow::after {
    content: '';
    position: absolute;
    top: var(--hub-gy, 45%);
    width: var(--hub-gw, 0);
    height: var(--hub-gh, 0);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: hubBreathe 4.8s ease-in-out infinite;
    will-change: opacity;
}
.hero-hub-glow::before {
    left: var(--hub-gx1, 40%);
    background: radial-gradient(closest-side, rgba(14, 165, 233, var(--hub-glow-a)) 0%, rgba(14, 165, 233, calc(var(--hub-glow-a) * 0.45)) 40%, rgba(14, 165, 233, 0) 100%);
}
.hero-hub-glow::after {
    left: var(--hub-gx2, 60%);
    background: radial-gradient(closest-side, rgba(236, 72, 153, var(--hub-glow-a)) 0%, rgba(236, 72, 153, calc(var(--hub-glow-a) * 0.45)) 40%, rgba(236, 72, 153, 0) 100%);
    animation-delay: -2.4s;
}
html.dark .hero-hub-glow {
    --hub-glow-a: 0.23;
}
@media (max-width: 767px) {
    .hero-hub-glow { --hub-glow-a: 0.085; }
    html.dark .hero-hub-glow { --hub-glow-a: 0.16; }
}
@keyframes hubBreathe {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* 文字後方柔和遮罩：中心較實、向外漸淡 */
.hero-hub-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 38% 34% at 50% var(--hub-veil-y, 46%),
        rgba(248, 251, 255, 0.82) 0%,
        rgba(248, 251, 255, 0.62) 45%,
        rgba(248, 251, 255, 0) 100%);
}

/* ---------- 深色模式 ---------- */
html.dark .hero-hub {
    background:
        radial-gradient(ellipse 50% 46% at 50% 46%, rgba(14, 165, 233, 0.13) 0%, rgba(14, 165, 233, 0) 70%),
        radial-gradient(ellipse 42% 40% at 80% 74%, rgba(236, 72, 153, 0.13) 0%, rgba(236, 72, 153, 0) 70%),
        radial-gradient(ellipse 40% 38% at 16% 22%, rgba(14, 165, 233, 0.10) 0%, rgba(14, 165, 233, 0) 70%),
        linear-gradient(180deg, #080d1a 0%, #0b1222 55%, #100f1f 100%);
}

html.dark .hero-hub-veil {
    background: radial-gradient(ellipse 38% 34% at 50% var(--hub-veil-y, 46%),
        rgba(8, 13, 26, 0.70) 0%,
        rgba(8, 13, 26, 0.50) 45%,
        rgba(8, 13, 26, 0) 100%);
}

/* 手機：文字佔滿寬度，遮罩放大 */
@media (max-width: 767px) {
    .hero-hub-veil {
        background: radial-gradient(ellipse 70% 42% at 50% var(--hub-veil-y, 46%),
            rgba(248, 251, 255, 0.80) 0%,
            rgba(248, 251, 255, 0.55) 55%,
            rgba(248, 251, 255, 0) 100%);
    }
    html.dark .hero-hub-veil {
        background: radial-gradient(ellipse 70% 42% at 50% var(--hub-veil-y, 46%),
            rgba(8, 13, 26, 0.68) 0%,
            rgba(8, 13, 26, 0.46) 55%,
            rgba(8, 13, 26, 0) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-hub canvas,
    .hero-hub-glow {
        transition: none;
    }
    .hero-hub-glow::before,
    .hero-hub-glow::after {
        animation: none;
        opacity: 0.9;
    }
}

/* 原 hero 的藍／粉模糊光球：深色模式下與深藍底混成偏紫，主站改淡一點 */
html.dark .hero-hub ~ .pointer-events-none > div {
    opacity: 0.45;
}