/* ============================================================
   轩澜·昂游万界之旅 — 星门跃迁入站动画（首页专属）
   粒子汇聚 → 坐标锁定 → 虫洞构筑 → 能量爆发跃迁
   ============================================================ */

/* ---------- 全息加载舱（星空概念升级版） ---------- */
#quantum-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 5, 12, 0.65);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.1s, transform 1.1s, backdrop-filter 1.1s;
    overflow: hidden;
}

/* 离场空间坍缩感 */
#quantum-loader.portal-terminated {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.06);
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
}

/* 离场瞬间的跃迁白闪 */
#quantum-loader::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(120, 220, 255, 0.5) 40%, transparent 72%);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
}
#quantum-loader.portal-terminated::after {
    animation: portalFlash 0.85s ease-out forwards;
}

@keyframes portalFlash {
    0% { opacity: 0; }
    25% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- 背景层 ---------- */
.loader-bg-grid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background-image:
        linear-gradient(rgba(0, 180, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 255, 0.2) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(800px) rotateX(75deg);
    transform-origin: bottom center;
    animation: gridTechMove 3s linear infinite;
    z-index: 0;
    mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    pointer-events: none;
}

.loader-core-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.16) 0%, rgba(148, 0, 255, 0.09) 42%, transparent 70%);
    filter: blur(22px);
    animation: corePulse 3.6s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

/* ---------- 粒子层（Canvas） ---------- */
#loader-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ---------- 星门舞台 ---------- */
.stargate {
    position: relative;
    width: 360px;
    height: 360px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.85);
    animation: gateDeploy 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gateDeploy {
    0% { transform: scale(0.35); opacity: 0; filter: blur(14px); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* 跃迁爆发：星门放大消散 */
#quantum-loader.gate-burst .stargate {
    animation: gateJump 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes gateJump {
    0% { transform: scale(1); opacity: 1; filter: blur(0); }
    100% { transform: scale(1.55); opacity: 0; filter: blur(10px); }
}

/* 倾斜轨道环：虚线椭圆，增强星系纵深感 */
.gate-orbit {
    position: absolute;
    width: 330px;
    height: 210px;
    border: 1px dashed rgba(0, 180, 255, 0.28);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(0, 180, 255, 0.1);
    animation: ringSpin 14s linear infinite;
    pointer-events: none;
}

/* 外能量环：分段流光 */
.gate-ring {
    position: absolute;
    border-radius: 50%;
}

.ring-outer {
    width: 300px;
    height: 300px;
    border: 1px solid rgba(0, 180, 255, 0.12);
    box-shadow: 0 0 45px rgba(0, 180, 255, 0.18), inset 0 0 45px rgba(0, 180, 255, 0.08);
    animation: ringSpin 6s linear infinite;
}

/* 分段高能流光弧 */
.ring-outer::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(0, 204, 255, 0.9) 18deg, transparent 38deg,
        transparent 78deg, rgba(148, 0, 255, 0.8) 98deg, transparent 118deg,
        transparent 158deg, rgba(0, 204, 255, 0.7) 178deg, transparent 198deg,
        transparent 238deg, rgba(148, 0, 255, 0.8) 258deg, transparent 278deg,
        transparent 318deg, rgba(0, 204, 255, 0.9) 340deg, transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 4px), #000 calc(100% - 2px), transparent calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 4px), #000 calc(100% - 2px), transparent calc(100% - 1px));
    animation: ringSpin 6s linear infinite;
}

/* 雷达扫描亮弧：快速扫过外环（与流光层相对旋转） */
.ring-outer::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 255, 255, 0.95) 16deg, transparent 34deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 4px), #000 calc(100% - 2px), transparent calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 4px), #000 calc(100% - 2px), transparent calc(100% - 1px));
    animation: ringSpin 2.4s linear infinite;
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(0, 204, 255, 0.9));
}

/* 内环：逆向旋转 */
.ring-inner {
    width: 188px;
    height: 188px;
    border: 1px solid rgba(0, 180, 255, 0.22);
    box-shadow: 0 0 28px rgba(0, 204, 255, 0.22), inset 0 0 28px rgba(0, 204, 255, 0.16);
    animation: ringSpin 3.2s linear infinite reverse;
}

/* 内环呼吸流光 */
.ring-inner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        transparent 0deg, rgba(255, 255, 255, 0.55) 30deg, transparent 60deg,
        transparent 140deg, rgba(0, 204, 255, 0.75) 170deg, transparent 200deg,
        transparent 300deg, rgba(148, 0, 255, 0.6) 330deg, transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px), #000 calc(100% - 1.5px), transparent calc(100% - 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px), #000 calc(100% - 1.5px), transparent calc(100% - 0.5px));
    animation: ringSpin 3.2s linear infinite reverse;
}

/* 9 个坐标锁定符号 */
.gate-symbols {
    position: absolute;
    width: 100%;
    height: 100%;
}

.gate-symbol {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(calc(var(--i) * 40deg)) translateX(150px);
    opacity: 0.35;
    transition: opacity 0.3s;
}

.gate-symbol i {
    display: block;
    width: 6px;
    height: 6px;
    margin: -3px;
    border-radius: 50%;
    background: rgba(0, 204, 255, 0.35);
    box-shadow: 0 0 6px rgba(0, 204, 255, 0.4);
}

/* 锁定：逐个点亮放大 */
#quantum-loader.gate-locked .gate-symbol {
    animation: symbolLock 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i) * 0.09s);
}

@keyframes symbolLock {
    0% { opacity: 0.2; }
    60% { opacity: 1; }
    100% { opacity: 1; }
}

#quantum-loader.gate-locked .gate-symbol i {
    background: #8df4ff;
    box-shadow: 0 0 16px #0cf, 0 0 34px rgba(0, 204, 255, 0.65);
    transition: background 0.3s, box-shadow 0.3s;
}

/* 虫洞旋涡（吸入阶段） */
.gate-vortex {
    position: absolute;
    width: 150px;
    height: 150px;
    opacity: 0;
    transform: scale(0.15);
    pointer-events: none;
}

/* 旋涡流光：伪元素独立旋转，避免与缩放动画冲突 */
.gate-vortex::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(0, 204, 255, 0.22), rgba(148, 0, 255, 0.2),
        rgba(0, 204, 255, 0.22), rgba(148, 0, 255, 0.2),
        rgba(0, 204, 255, 0.22)
    );
    filter: blur(7px);
    animation: vortexSpin 0.85s linear infinite;
}

#quantum-loader.gate-absorb .gate-vortex {
    opacity: 1;
    animation: vortexGrow 1.2s ease-out forwards;
}

@keyframes vortexSpin {
    to { transform: rotate(360deg); }
}

@keyframes vortexGrow {
    0% { transform: scale(0.15); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

/* 核心高能奇点 */
.gate-core {
    font-size: 2.6rem;
    color: #fff;
    text-shadow: 0 0 25px #0cf, 0 0 55px rgba(148, 0, 255, 0.85);
    animation: singularityPulse 2s infinite ease-in-out;
    z-index: 3;
}

#quantum-loader.gate-absorb .gate-core {
    animation-duration: 0.7s;
}

/* 扫描线 */
.scanline {
    position: absolute;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 204, 255, 0.8), transparent);
    opacity: 0.5;
    z-index: 3;
    animation: scanSweep 2.4s linear infinite;
}

@keyframes scanSweep {
    0% { top: 16%; opacity: 0; }
    8% { opacity: 0.8; }
    92% { opacity: 0.8; }
    100% { top: 84%; opacity: 0; }
}

/* ---------- HUD 四角定位框 ---------- */
.hud-corner {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 204, 255, 0.45);
    opacity: 0.75;
    z-index: 5;
    pointer-events: none;
    animation: hudBreathe 3s ease-in-out infinite alternate;
}
.hud-tl { top: 26px; left: 26px; border-right: none; border-bottom: none; }
.hud-tr { top: 26px; right: 26px; border-left: none; border-bottom: none; }
.hud-bl { bottom: 26px; left: 26px; border-right: none; border-top: none; }
.hud-br { bottom: 26px; right: 26px; border-left: none; border-top: none; }

@keyframes hudBreathe {
    0% { opacity: 0.35; }
    100% { opacity: 0.9; }
}

/* ---------- 状态 HUD 区 ---------- */
.loader-hud {
    position: relative;
    z-index: 4;
    margin-top: 2.9rem;
    text-align: center;
    min-height: 132px;
}

.loader-text {
    font-size: 1.05rem;
    letter-spacing: 4px;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(0, 180, 255, 0.85);
    font-weight: 500;
    margin-bottom: 0.4rem;
    transition: all 0.4s ease;
    position: relative;
    display: inline-block;
}

.loader-sub-text {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #b8cfff;
    opacity: 0.8;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    transition: all 0.4s ease;
    display: inline-block;
}

/* ---------- 文本 Glitch 故障特效（阶段切换时） ---------- */
.loader-text.glitching,
.loader-sub-text.glitching {
    animation: textGlitch 0.6s steps(1) 1;
}

@keyframes textGlitch {
    0%   { transform: translate(0, 0) skewX(0);      clip-path: inset(0 0 0 0);      text-shadow: 0 0 8px #0cf; }
    12%  { transform: translate(-3px, 1px) skewX(7deg);  clip-path: inset(12% 0 55% 0); text-shadow: 2px 0 #0cf, -2px 0 #f0f; }
    26%  { transform: translate(3px, -1px) skewX(-6deg); clip-path: inset(55% 0 8% 0);  text-shadow: -2px 0 #0cf, 2px 0 #f0f; }
    40%  { transform: translate(-2px, 0) skewX(4deg);  clip-path: inset(30% 0 30% 0); text-shadow: 2px 0 #f0f, -2px 0 #0cf; }
    55%  { transform: translate(2px, 1px) skewX(-4deg); clip-path: inset(70% 0 5% 0);  text-shadow: -2px 0 #0cf, 2px 0 #f0f; }
    70%  { transform: translate(-1px, 0) skewX(3deg);  clip-path: inset(8% 0 72% 0);  text-shadow: 2px 0 #0cf, -2px 0 #f0f; }
    85%  { transform: translate(1px, -1px) skewX(-2deg); clip-path: inset(45% 0 40% 0); text-shadow: -2px 0 #0cf, 2px 0 #f0f; }
    100% { transform: translate(0, 0) skewX(0);      clip-path: inset(0 0 0 0);      text-shadow: 0 0 8px #0cf; }
}

/* 环形进度 */
.ring-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    margin: 1.4rem auto 0;
}

/* 外圈 HUD 旋转刻度 */
.ring-wrap::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        rgba(0, 204, 255, 0.55) 0deg 1.4deg,
        transparent 1.4deg 9deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px));
    opacity: 0.5;
    animation: ringSpin 14s linear infinite;
    pointer-events: none;
}

/* READY 完成态：刻度加速 */
#quantum-loader.gate-ready .ring-wrap::before {
    animation-duration: 3.5s;
    opacity: 0.9;
}

.ring-progress {
    width: 74px;
    height: 74px;
    transform: rotate(-90deg);
}

.ring-progress circle {
    fill: none;
    stroke-width: 3;
}

.ring-progress .track {
    stroke: rgba(255, 255, 255, 0.07);
}

.ring-progress .bar {
    stroke: url(#progressGrad);
    stroke-linecap: round;
    stroke-dasharray: 207.35;
    stroke-dashoffset: 207.35;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.19, 1, 0.22, 1);
    filter: drop-shadow(0 0 6px rgba(0, 204, 255, 0.85));
}

.ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-family: 'Courier New', Courier, monospace;
    color: #dff4ff;
    text-shadow: 0 0 8px rgba(0, 204, 255, 0.8);
}

/* ---------- READY 完成态（100% 跃迁就绪） ---------- */
#quantum-loader.gate-ready .ring-progress .bar {
    filter: drop-shadow(0 0 12px rgba(120, 255, 220, 0.95));
}

#quantum-loader.gate-ready .ring-pct {
    color: #bfffe8;
    text-shadow: 0 0 14px rgba(120, 255, 220, 0.95);
    animation: readyBlink 0.55s ease-in-out 3;
}

#quantum-loader.gate-ready .loader-sub-text {
    color: #bfffe8;
    text-shadow: 0 0 10px rgba(120, 255, 220, 0.6);
}

#quantum-loader.gate-ready .loader-text {
    text-shadow: 0 0 18px rgba(0, 204, 255, 0.95), 0 0 40px rgba(120, 255, 220, 0.35);
}

#quantum-loader.gate-ready .gate-core {
    color: #eafff6;
    text-shadow: 0 0 25px #7dffd9, 0 0 60px rgba(120, 255, 220, 0.8);
}

@keyframes readyBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ---------- 关键帧 ---------- */
@keyframes ringSpin {
    to { transform: rotate(360deg); }
}

@keyframes singularityPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.7; filter: drop-shadow(0 0 12px #0cf); }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 30px #94f); }
}

@keyframes gridTechMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 60px; }
}

@keyframes corePulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}