/* ============================================
   LunarStar Premium Decoration System
   替代所有 border，四角装饰 + 渐变线 + 辉光
   ============================================ */

/* 1. 四角装饰框架（替代 border） */
.decor-frame {
    position: relative;
}
.decor-frame::before,
.decor-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.decor-frame::before {
    left: 18px;
    top: 18px;
    width: 26px;
    height: 26px;
    border-left: 1px solid rgba(214, 178, 86, 0.7);
    border-top: 1px solid rgba(214, 178, 86, 0.7);
    border-radius: 2px;
}
.decor-frame::after {
    right: 18px;
    bottom: 18px;
    width: 26px;
    height: 26px;
    border-right: 1px solid rgba(214, 178, 86, 0.7);
    border-bottom: 1px solid rgba(214, 178, 86, 0.7);
    border-radius: 2px;
}

/* 2. 标题装饰线 ◇—— Title ——◇ */
.section-title-decorated {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    position: relative;
}
.section-title-decorated::before,
.section-title-decorated::after {
    content: "";
    flex: 0 1 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 178, 86, 0.75), transparent);
}
.section-title-decorated .title-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    opacity: 0.8;
}

/* 3. Premium Button 四角装饰 */
.btn-premium {
    position: relative;
    overflow: visible;
}
.btn-premium .corner {
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: #D6B256;
    pointer-events: none;
    z-index: 1;
}
.btn-premium .corner-tl {
    left: 4px;
    top: 4px;
    border-left: 1px solid;
    border-top: 1px solid;
    border-radius: 1px;
}
.btn-premium .corner-tr {
    right: 4px;
    top: 4px;
    border-right: 1px solid;
    border-top: 1px solid;
    border-radius: 1px;
}
.btn-premium .corner-bl {
    left: 4px;
    bottom: 4px;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-radius: 1px;
}
.btn-premium .corner-br {
    right: 4px;
    bottom: 4px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-radius: 1px;
}

/* 4. Card 顶部渐变细线 */
.ls-card-top-line {
    position: relative;
}
.ls-card-top-line::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 178, 86, 0.6), transparent);
    z-index: 2;
    pointer-events: none;
}

/* 5. Card 底部柔和辉光 */
.ls-card-glow {
    position: relative;
}
.ls-card-glow::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 1px;
    background: rgba(214, 178, 86, 0.25);
    filter: blur(10px);
    opacity: 0.45;
    z-index: 2;
    pointer-events: none;
}

/* 6. Apple 式进入动画 */
@keyframes ls-enter {
    from {
        opacity: 0;
        filter: blur(18px);
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}
.animate-enter {
    animation: ls-enter 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* 7. 全局 Decoration Layer */
.page-decoration {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.deco-planet {
    position: absolute;
    border-radius: 50%;
}
.planet-left {
    width: 420px;
    height: 420px;
    left: -180px;
    top: 15%;
    background: radial-gradient(circle at 40% 40%, rgba(79, 45, 145, 0.08), transparent 70%);
}
.planet-right {
    width: 320px;
    height: 320px;
    right: -120px;
    bottom: 25%;
    background: radial-gradient(circle at 60% 60%, rgba(214, 178, 86, 0.06), transparent 70%);
}
.star-layer {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 40% 20%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 55% 55%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 70% 30%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 85% 45%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 15% 75%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 60% 80%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 90% 70%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 35% 90%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(1.5px 1.5px at 75% 10%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(255, 255, 255, 0.3), transparent);
}
.noise-layer {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* ── Mobile: reduce decorative layers that may overlay Canvas ── */
@media (max-width: 768px) {
  .star-layer {
    opacity: 0.35;
  }
}