/* ========================================
   Rose Two Loader - 金色曲线加载动画
   严格公式: r(t) = (8.0 + 0.45s)(1.00 + 0.17s) cos(2t)
   ======================================== */

/* ── Loader 阶段 ── */
.rose-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0a0a0a; /* 和主页 --black 一致 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.rose-overlay.active {
    opacity: 1;
}

.rose-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* SVG 容器 - 居中显示 */
.rose-overlay .rose-svg {
    width: 20vmin;
    height: 20vmin;
    max-width: 140px;
    max-height: 140px;
}

/* ── 背景毛玻璃阶段 ── */
.rose-bg-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400vmin;
    height: 400vmin;
    max-width: 2800px;
    max-height: 2800px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    animation: roseBgFadeIn 1.5s ease-out forwards;
}

@keyframes roseBgFadeIn {
    to {
        opacity: 1;
    }
}

/* 毛玻璃层 */
.rose-glass-layer {
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.3); /* 半透明 */
    backdrop-filter: blur(16px) brightness(1.2);
    -webkit-backdrop-filter: blur(16px) brightness(1.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rose-glass-layer .rose-svg {
    width: 90%;
    height: 90%;
}

/* ── 页面状态控制 ── */
body.rose-loading {
    overflow: hidden;
}

body.rose-loaded .hero-section,
body.rose-loaded .navbar {
    animation: mainContentFadeIn 1s ease-out forwards;
}

@keyframes mainContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── 响应式 ── */
@media (max-width: 768px) {
    .rose-overlay .rose-svg {
        width: 25vmin;
        height: 25vmin;
    }
    
    .rose-bg-container {
        width: 400vmin;
        height: 400vmin;
    }
}

@media (max-width: 480px) {
    .rose-overlay .rose-svg {
        width: 30vmin;
        height: 30vmin;
    }
    
    .rose-bg-container {
        width: 400vmin;
        height: 400vmin;
    }
}