/* ==========================================================================
   晨星技術整合工作室 — 星空主題覆蓋
   以此檔覆蓋 styles.css 的山景背景與色調
   ========================================================================== */

:root {
    --star-deep: #020111;
    --star-navy: #050a24;
    --star-blue: #0a1440;
    --star-purple: #1a0f3d;
    --star-accent: #7c8dff;
    --star-gold: #ffd27a;
    --star-white: #ffffff;
}

/* ---------- 動畫 ---------- */
@keyframes twinkle {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.3; }
}
@keyframes twinkle-slow {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 0.2; }
}
@keyframes morning-star-glow {
    0%, 100% {
        box-shadow:
            0 0 8px 2px #fff,
            0 0 18px 4px rgba(255, 210, 122, 0.9),
            0 0 36px 10px rgba(124, 141, 255, 0.6),
            0 0 70px 20px rgba(124, 141, 255, 0.25);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 12px 3px #fff,
            0 0 28px 6px rgba(255, 210, 122, 1),
            0 0 55px 14px rgba(124, 141, 255, 0.75),
            0 0 95px 26px rgba(124, 141, 255, 0.35);
        transform: scale(1.15);
    }
}
@keyframes drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-100px); }
}

/* ---------- Masthead（首頁 Hero）---------- */
.masthead {
    background:
        radial-gradient(ellipse at 25% 20%, rgba(124, 141, 255, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 75%, rgba(180, 120, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 210, 122, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--star-deep) 0%, var(--star-navy) 40%, var(--star-blue) 75%, #000 100%) !important;
    position: relative;
    overflow: hidden;
}

/* 小星點層 (使用 SVG noise pattern) */
.masthead::before {
    content: '';
    position: absolute;
    inset: -10%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><g fill='white'><circle cx='27' cy='43' r='0.8' opacity='0.8'/><circle cx='89' cy='112' r='0.6' opacity='0.6'/><circle cx='155' cy='38' r='1' opacity='0.9'/><circle cx='203' cy='167' r='0.5' opacity='0.5'/><circle cx='275' cy='89' r='0.7' opacity='0.7'/><circle cx='321' cy='234' r='1.2' opacity='1'/><circle cx='389' cy='56' r='0.6' opacity='0.6'/><circle cx='445' cy='178' r='0.9' opacity='0.8'/><circle cx='502' cy='102' r='0.5' opacity='0.5'/><circle cx='563' cy='201' r='0.8' opacity='0.7'/><circle cx='38' cy='289' r='0.6' opacity='0.6'/><circle cx='112' cy='345' r='1' opacity='0.9'/><circle cx='178' cy='267' r='0.5' opacity='0.5'/><circle cx='245' cy='389' r='0.7' opacity='0.7'/><circle cx='298' cy='412' r='0.9' opacity='0.8'/><circle cx='367' cy='301' r='0.6' opacity='0.6'/><circle cx='423' cy='367' r='1.1' opacity='1'/><circle cx='489' cy='278' r='0.5' opacity='0.5'/><circle cx='534' cy='423' r='0.8' opacity='0.7'/><circle cx='578' cy='345' r='0.6' opacity='0.6'/><circle cx='67' cy='456' r='0.9' opacity='0.8'/><circle cx='134' cy='501' r='0.5' opacity='0.5'/><circle cx='189' cy='467' r='0.7' opacity='0.7'/><circle cx='256' cy='545' r='1' opacity='0.9'/><circle cx='312' cy='478' r='0.6' opacity='0.6'/><circle cx='378' cy='523' r='0.8' opacity='0.7'/><circle cx='434' cy='489' r='0.5' opacity='0.5'/><circle cx='498' cy='556' r='0.9' opacity='0.8'/><circle cx='556' cy='501' r='0.7' opacity='0.7'/><circle cx='15' cy='156' r='0.6' opacity='0.6'/><circle cx='71' cy='223' r='0.4' opacity='0.4'/><circle cx='143' cy='189' r='0.7' opacity='0.7'/><circle cx='211' cy='245' r='0.5' opacity='0.5'/><circle cx='267' cy='134' r='0.8' opacity='0.8'/><circle cx='334' cy='178' r='0.6' opacity='0.6'/><circle cx='401' cy='245' r='0.4' opacity='0.4'/><circle cx='467' cy='212' r='0.9' opacity='0.8'/><circle cx='523' cy='156' r='0.5' opacity='0.5'/><circle cx='589' cy='289' r='0.7' opacity='0.7'/></g></svg>");
    background-repeat: repeat;
    animation: twinkle 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* 較大的星點層（慢閃） */
.masthead > * { position: relative; z-index: 2; }

/* 晨星（主視覺的那顆特別亮的星）*/
.masthead .container::after {
    content: '';
    position: absolute;
    top: 18%;
    right: 12%;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: morning-star-glow 3.2s ease-in-out infinite;
    pointer-events: none;
}

/* ---------- About Section ---------- */
.about-section {
    background:
        radial-gradient(ellipse at 60% 0%, rgba(124, 141, 255, 0.15) 0%, transparent 50%),
        linear-gradient(to bottom, #000 0%, var(--star-deep) 40%, var(--star-navy) 100%) !important;
    position: relative;
    overflow: hidden;
}
.about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><g fill='white'><circle cx='45' cy='67' r='0.6' opacity='0.6'/><circle cx='123' cy='134' r='0.8' opacity='0.8'/><circle cx='201' cy='89' r='0.5' opacity='0.5'/><circle cx='278' cy='167' r='0.7' opacity='0.7'/><circle cx='356' cy='112' r='0.9' opacity='0.9'/><circle cx='423' cy='189' r='0.4' opacity='0.5'/><circle cx='89' cy='234' r='0.7' opacity='0.7'/><circle cx='167' cy='278' r='0.5' opacity='0.5'/><circle cx='245' cy='312' r='0.8' opacity='0.8'/><circle cx='334' cy='289' r='0.6' opacity='0.6'/><circle cx='412' cy='345' r='0.9' opacity='0.9'/><circle cx='67' cy='389' r='0.5' opacity='0.5'/><circle cx='178' cy='423' r='0.7' opacity='0.7'/><circle cx='289' cy='456' r='0.6' opacity='0.6'/><circle cx='378' cy='412' r='0.8' opacity='0.8'/><circle cx='445' cy='478' r='0.5' opacity='0.5'/></g></svg>");
    background-repeat: repeat;
    animation: twinkle-slow 5s ease-in-out infinite;
    pointer-events: none;
}
.about-section > * { position: relative; z-index: 2; }

/* 強調文字用晨星金色 */
.about-section strong { color: var(--star-gold) !important; }

/* ---------- Services Section（原 projects）---------- */
.projects-section {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(124, 141, 255, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--star-navy) 0%, var(--star-deep) 100%) !important;
    position: relative;
    overflow: hidden;
}
.projects-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><g fill='white'><circle cx='34' cy='56' r='0.6' opacity='0.5'/><circle cx='112' cy='123' r='0.8' opacity='0.7'/><circle cx='189' cy='78' r='0.5' opacity='0.4'/><circle cx='267' cy='156' r='0.7' opacity='0.6'/><circle cx='345' cy='101' r='0.9' opacity='0.8'/><circle cx='423' cy='178' r='0.4' opacity='0.4'/><circle cx='78' cy='223' r='0.7' opacity='0.6'/><circle cx='156' cy='267' r='0.5' opacity='0.4'/><circle cx='234' cy='301' r='0.8' opacity='0.7'/><circle cx='323' cy='278' r='0.6' opacity='0.5'/><circle cx='401' cy='334' r='0.9' opacity='0.8'/><circle cx='56' cy='378' r='0.5' opacity='0.4'/><circle cx='167' cy='412' r='0.7' opacity='0.6'/><circle cx='278' cy='445' r='0.6' opacity='0.5'/><circle cx='367' cy='401' r='0.8' opacity='0.7'/><circle cx='434' cy='467' r='0.5' opacity='0.4'/></g></svg>");
    background-repeat: repeat;
    animation: twinkle-slow 6s ease-in-out infinite;
    pointer-events: none;
}
.projects-section > * { position: relative; z-index: 2; }

/* 讓服務區塊的標題與說明文字變亮 */
.projects-section h2,
.projects-section h4,
.projects-section .featured-text h4 { color: #fff !important; }
.projects-section .text-black-50 { color: rgba(255, 255, 255, 0.65) !important; }

/* 服務卡片強調線改星空藍 */
@media (min-width: 992px) {
    .projects-section .featured-text {
        border-left-color: var(--star-accent) !important;
    }
}

/* 服務區塊裡原本黑色方塊 → 深紫藍漸層 */
.projects-section .bg-black {
    background: linear-gradient(135deg, var(--star-purple) 0%, var(--star-blue) 100%) !important;
    box-shadow: 0 0 40px rgba(124, 141, 255, 0.15);
}

/* ---------- Signup / Contact Form ---------- */
.signup-section {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(124, 141, 255, 0.2) 0%, transparent 55%),
        linear-gradient(to bottom, var(--star-deep) 0%, var(--star-blue) 50%, #000 100%) !important;
    position: relative;
    overflow: hidden;
}
.signup-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><g fill='white'><circle cx='56' cy='89' r='0.7' opacity='0.7'/><circle cx='145' cy='45' r='0.5' opacity='0.5'/><circle cx='234' cy='123' r='0.8' opacity='0.8'/><circle cx='312' cy='67' r='0.6' opacity='0.6'/><circle cx='389' cy='145' r='0.9' opacity='0.9'/><circle cx='445' cy='89' r='0.5' opacity='0.5'/><circle cx='89' cy='201' r='0.7' opacity='0.7'/><circle cx='178' cy='245' r='0.6' opacity='0.6'/><circle cx='267' cy='289' r='0.8' opacity='0.8'/><circle cx='345' cy='234' r='0.5' opacity='0.5'/><circle cx='423' cy='312' r='0.9' opacity='0.9'/><circle cx='45' cy='356' r='0.6' opacity='0.6'/><circle cx='156' cy='389' r='0.8' opacity='0.8'/><circle cx='245' cy='423' r='0.5' opacity='0.5'/><circle cx='334' cy='378' r='0.7' opacity='0.7'/><circle cx='412' cy='445' r='0.6' opacity='0.6'/></g></svg>");
    background-repeat: repeat;
    animation: twinkle 5s ease-in-out infinite;
    pointer-events: none;
}
.signup-section > * { position: relative; z-index: 2; }

/* ---------- Contact Info（黑底卡片區）---------- */
.contact-section {
    background: linear-gradient(to bottom, #000 0%, var(--star-deep) 100%) !important;
}
.contact-section .card {
    border-bottom-color: var(--star-accent) !important;
    background: rgba(255, 255, 255, 0.95);
}
.contact-section .card hr { border-color: var(--star-accent) !important; }
.contact-section .text-primary { color: var(--star-accent) !important; }

/* 社群 icon */
.social a {
    color: var(--star-accent) !important;
    transition: color 0.3s, text-shadow 0.3s;
}
.social a:hover {
    color: var(--star-gold) !important;
    text-shadow: 0 0 10px rgba(255, 210, 122, 0.8);
}

/* ---------- Footer ---------- */
.footer {
    background: #000 !important;
    border-top: 1px solid rgba(124, 141, 255, 0.2);
}

/* ---------- Nav 按鈕主色改為星空藍 ---------- */
.btn-primary {
    background-color: var(--star-accent) !important;
    border-color: var(--star-accent) !important;
    box-shadow: 0 0 20px rgba(124, 141, 255, 0.4);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--star-gold) !important;
    border-color: var(--star-gold) !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(255, 210, 122, 0.6);
}

/* Navbar 收合後背景 */
#mainNav.navbar-shrink {
    background-color: rgba(5, 10, 36, 0.92) !important;
    backdrop-filter: blur(8px);
}
#mainNav .navbar-brand,
#mainNav .nav-link { color: #fff !important; }
#mainNav .nav-link:hover { color: var(--star-gold) !important; }

/* 讓 ipad.png 圖片區變成一個星雲發光效果 */
.about-section img.img-fluid {
    filter: drop-shadow(0 0 40px rgba(124, 141, 255, 0.5));
    animation: float 6s ease-in-out infinite;
}

/* ============================================================
   動態強化：流星、霓光、浮動、滾動進場、計數器、時間軸、軌道
   ============================================================ */

/* ---------- 浮動動畫 ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0) translateX(0); }
    25%      { transform: translateY(-12px) translateX(6px); }
    75%      { transform: translateY(12px) translateX(-6px); }
}

/* ---------- 流星 ---------- */
@keyframes meteor {
    0% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 0;
    }
    5%, 15% { opacity: 1; }
    100% {
        transform: translate(-900px, 900px) rotate(-45deg);
        opacity: 0;
    }
}
.meteor {
    position: absolute;
    top: -50px;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, #fff, transparent);
    border-radius: 50%;
    box-shadow: 0 0 6px 1px #fff, 0 0 15px 2px rgba(124, 141, 255, 0.6);
    pointer-events: none;
    z-index: 1;
}
.meteor::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0deg);
    width: 120px;
    height: 1px;
    background: linear-gradient(to left, #fff, rgba(124, 141, 255, 0.6), transparent);
    border-radius: 50%;
}

/* ---------- 漸變光效標題 ---------- */
@keyframes shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.masthead h1 {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffd27a 25%,
        #7c8dff 50%,
        #ffd27a 75%,
        #ffffff 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: shimmer 6s linear infinite;
}

/* ---------- Hero 副標加光圈 ---------- */
.masthead h2 {
    text-shadow: 0 0 20px rgba(124, 141, 255, 0.5);
}

/* ---------- Hero 下方滾動提示箭頭 ---------- */
@keyframes bounce-down {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(12px); opacity: 1; }
}
.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    letter-spacing: 0.3rem;
    z-index: 3;
    animation: bounce-down 2s ease-in-out infinite;
    text-align: center;
    text-decoration: none;
}
.scroll-indicator:hover { color: #ffd27a; }
.scroll-indicator i { display: block; margin-top: 0.5rem; font-size: 1.2rem; }

/* ---------- 漂移星雲 (大型光團) ---------- */
@keyframes drift-x {
    0%   { transform: translateX(0)    translateY(0); }
    50%  { transform: translateX(60px) translateY(-30px); }
    100% { transform: translateX(0)    translateY(0); }
}
.nebula-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.nebula-orb.a {
    width: 300px; height: 300px;
    top: 10%; left: -80px;
    background: radial-gradient(circle, #7c8dff 0%, transparent 70%);
    animation: drift-x 18s ease-in-out infinite;
}
.nebula-orb.b {
    width: 400px; height: 400px;
    top: 50%; right: -120px;
    background: radial-gradient(circle, #b478ff 0%, transparent 70%);
    animation: drift-x 22s ease-in-out infinite reverse;
}
.nebula-orb.c {
    width: 250px; height: 250px;
    bottom: 10%; left: 30%;
    background: radial-gradient(circle, #ffd27a 0%, transparent 70%);
    opacity: 0.25;
    animation: drift-x 25s ease-in-out infinite;
}

/* ---------- 滾動進場動畫 ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal.left  { transform: translateX(-60px); }
.reveal.right { transform: translateX(60px); }
.reveal.left.visible,
.reveal.right.visible { transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.25s; }
.reveal-delay-3 { transition-delay: 0.4s; }
.reveal-delay-4 { transition-delay: 0.55s; }

/* ---------- 數字計數區 (Stats) ---------- */
.stats-section {
    position: relative;
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--star-navy) 0%, var(--star-blue) 100%);
    overflow: hidden;
    border-top: 1px solid rgba(124, 141, 255, 0.15);
    border-bottom: 1px solid rgba(124, 141, 255, 0.15);
}
.stats-section .stat-item {
    text-align: center;
    padding: 1.5rem;
    transition: transform 0.4s ease;
}
.stats-section .stat-item:hover {
    transform: translateY(-6px);
}
.stats-section .stat-number {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fff, #ffd27a, #7c8dff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    display: inline-block;
}
.stats-section .stat-suffix {
    color: #ffd27a;
    font-size: 2rem;
    font-weight: 900;
    margin-left: 0.25rem;
}
.stats-section .stat-label {
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.75rem;
    letter-spacing: 0.15rem;
    font-size: 0.9rem;
}
.stats-section .stat-icon {
    color: var(--star-accent);
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

/* ---------- 技術堆疊區 (Tech Stack) ---------- */
.tech-section {
    position: relative;
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--star-blue) 0%, var(--star-navy) 100%);
    overflow: hidden;
}
.tech-section h2 { color: #fff; }
.tech-section p.lead { color: rgba(255, 255, 255, 0.7); }

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.tech-item {
    background: rgba(124, 141, 255, 0.08);
    border: 1px solid rgba(124, 141, 255, 0.25);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(6px);
    cursor: default;
    animation: float-slow 5s ease-in-out infinite;
}
.tech-item:nth-child(2n)  { animation-delay: -1.5s; }
.tech-item:nth-child(3n)  { animation-delay: -3s; }
.tech-item:nth-child(4n)  { animation-delay: -4s; }
.tech-item:hover {
    transform: translateY(-8px) scale(1.05);
    background: rgba(124, 141, 255, 0.2);
    border-color: var(--star-gold);
    box-shadow: 0 10px 40px rgba(124, 141, 255, 0.35),
                0 0 20px rgba(255, 210, 122, 0.4);
}
.tech-item i {
    font-size: 2.5rem;
    color: var(--star-accent);
    margin-bottom: 0.75rem;
    transition: color 0.3s, transform 0.3s;
}
.tech-item:hover i {
    color: var(--star-gold);
    transform: scale(1.15) rotate(6deg);
}
.tech-item .tech-name {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
}

/* ---------- 開發流程時間軸 ---------- */
.process-section {
    position: relative;
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--star-navy) 0%, var(--star-deep) 100%);
    overflow: hidden;
}
.process-section h2 { color: #fff; }
.process-section p.lead { color: rgba(255, 255, 255, 0.7); }

.process-timeline {
    position: relative;
    max-width: 900px;
    margin: 4rem auto 0;
    padding: 2rem 0;
}
.process-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(124, 141, 255, 0.6),
        rgba(255, 210, 122, 0.6),
        transparent);
    transform: translateX(-50%);
}
.process-step {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}
.process-step:nth-child(odd)  { flex-direction: row; }
.process-step:nth-child(even) { flex-direction: row-reverse; }
.process-step .step-content {
    width: calc(50% - 3rem);
    background: rgba(124, 141, 255, 0.08);
    border: 1px solid rgba(124, 141, 255, 0.25);
    border-radius: 12px;
    padding: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.4s ease;
    backdrop-filter: blur(6px);
}
.process-step:hover .step-content {
    border-color: var(--star-gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(124, 141, 255, 0.3);
}
.process-step .step-content h4 { color: #fff; margin-bottom: 0.5rem; }
.process-step .step-content p  { margin-bottom: 0; font-size: 0.92rem; opacity: 0.8; }
.process-step .step-node {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--star-accent), var(--star-gold));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 0 0 6px rgba(124, 141, 255, 0.2),
                0 0 25px rgba(124, 141, 255, 0.6);
    z-index: 2;
    transition: transform 0.4s ease;
}
.process-step:hover .step-node {
    transform: translate(-50%, -50%) scale(1.15);
}
@media (max-width: 767px) {
    .process-timeline::before { left: 30px; }
    .process-step,
    .process-step:nth-child(even) { flex-direction: row; }
    .process-step .step-content {
        width: calc(100% - 80px);
        margin-left: 80px;
    }
    .process-step .step-node { left: 30px; }
}

/* ---------- 卡片 3D Tilt & Hover 光暈 ---------- */
.projects-section .featured-text,
.projects-section .project {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s;
}
.projects-section .row:hover .featured-text,
.projects-section .row:hover .project {
    transform: translateY(-6px);
}
.projects-section img {
    border-radius: 8px;
    transition: transform 0.5s, box-shadow 0.5s;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(10, 20, 64, 0.6), rgba(2, 1, 17, 0.9));
    padding: 1rem;
    border: 1px solid rgba(124, 141, 255, 0.15);
}
.projects-section .row:hover img {
    transform: scale(1.02);
    box-shadow: 0 15px 50px rgba(124, 141, 255, 0.4);
}

.contact-section .card {
    transition: transform 0.4s, box-shadow 0.4s;
}
.contact-section .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(124, 141, 255, 0.4);
}

/* ---------- 按鈕脈衝光 ---------- */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(124, 141, 255, 0.4); }
    50%      { box-shadow: 0 0 35px rgba(124, 141, 255, 0.8),
                           0 0 60px rgba(124, 141, 255, 0.3); }
}
.btn-primary {
    animation: pulse-glow 3s ease-in-out infinite;
    transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
}
.btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    animation: none;
}

/* ---------- 滑鼠跟隨光暈（JS 控制位置） ---------- */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 141, 255, 0.18) 0%, transparent 60%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9998;
    transition: opacity 0.3s;
    mix-blend-mode: screen;
    opacity: 0;
}
.cursor-glow.active { opacity: 1; }

/* ---------- Section 標題統一樣式 ---------- */
.section-heading {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}
.section-heading::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--star-accent), var(--star-gold), transparent);
    border-radius: 2px;
}

/* 減少動畫偏好尊重 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}