/* =========================================================================
   特效层（effects.css）—— 第四轮
   金光彩蛋：抽到含"金"字的名字时，屏幕顶部斜洒 2~3 道金色光束，
   淡入 → 轻微摆动呼吸 → 约 2.5 秒后淡出。
   纯 CSS 渐变 + blur 柔化 + transform/opacity 动画（GPU 合成，零依赖），
   覆盖层 pointer-events:none，不挡任何操作。
   深浅主题通用：不用 mix-blend-mode（screen 在浅色底会失效），普通透明度叠加。
   ========================================================================= */

/* ---- 覆盖层：默认隐藏，.show 触发整个生命周期动画 ---- */
.gold-light-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;              /* 盖过名字(6)但纯视觉层，可穿透点击 */
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}
.gold-light-overlay.show {
    visibility: visible;
    animation: goldLightLife 2.5s ease-in-out forwards;
}
/* 生命周期：快速淡入 → 保持 → 尾段渐隐（总时长约 2.5 秒） */
@keyframes goldLightLife {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    72%  { opacity: 0.92; }
    100% { opacity: 0; }
}

/* ---- 顶部光源：光束发源处的亮斑（舞台追光的"灯"） ---- */
.gold-light-source {
    position: absolute;
    top: -14vh;
    left: 12vw;
    width: 76vw;
    height: 32vh;
    background: radial-gradient(ellipse at center,
        rgba(255, 232, 150, 0.5) 0%,
        rgba(255, 215, 100, 0.22) 45%,
        rgba(255, 215, 100, 0) 72%);
    filter: blur(28px);
}
.gold-light-overlay.show .gold-light-source {
    animation: goldSourceBreath 2.5s ease-in-out;
}
@keyframes goldSourceBreath {
    0%   { transform: scale(0.85); opacity: 0.4; }
    30%  { transform: scale(1.05); opacity: 1; }
    75%  { transform: scale(1);    opacity: 0.9; }
    100% { transform: scale(0.95); opacity: 0; }
}

/* ---- 光束本体：顶部悬垂的斜向金色渐变长条，blur 柔化成体积光 ---- */
.gold-beam {
    position: absolute;
    top: -32%;
    height: 172%;
    filter: blur(26px);
    transform-origin: top center; /* 摆动时以顶端为轴，像光束在轻微晃动 */
}

/* 光束一：左侧主光束（最宽最亮） */
.gold-beam-1 {
    left: 4vw;
    width: 17vw;
    background: linear-gradient(to bottom,
        rgba(255, 228, 120, 0) 0%,
        rgba(255, 218, 90, 0.5) 26%,
        rgba(255, 205, 70, 0.3) 58%,
        rgba(255, 218, 90, 0) 100%);
}
/* 光束二：中间细亮芯（穿透感） */
.gold-beam-2 {
    left: 33vw;
    width: 9vw;
    background: linear-gradient(to bottom,
        rgba(255, 236, 160, 0) 0%,
        rgba(255, 230, 130, 0.55) 30%,
        rgba(255, 215, 90, 0.3) 60%,
        rgba(255, 230, 130, 0) 100%);
}
/* 光束三：右侧宽柔光（铺开氛围，照亮约半个屏） */
.gold-beam-3 {
    left: 55vw;
    width: 22vw;
    background: linear-gradient(to bottom,
        rgba(255, 225, 120, 0) 0%,
        rgba(255, 215, 95, 0.36) 30%,
        rgba(255, 200, 70, 0.2) 62%,
        rgba(255, 215, 95, 0) 100%);
}

/* ---- 摆动动画（方案C·错峰波浪）：三束光各自左右来回摆动，负 delay 错开相位 → 波浪扫过 ----
   仅在 .show 期间播放；keyframes 内含各自基础旋转角。 */
.gold-light-overlay.show .gold-beam-1 {
    animation: goldSway1 2.5s ease-in-out;
}
.gold-light-overlay.show .gold-beam-2 {
    animation: goldSway2 2.5s ease-in-out -0.35s; /* 负 delay：立即开播且相位错开 */
}
.gold-light-overlay.show .gold-beam-3 {
    animation: goldSway3 2.5s ease-in-out -0.7s;
}
@keyframes goldSway1 {
    0%, 100% { transform: rotate(16deg)  translateX(0); }
    25%      { transform: rotate(20deg)  translateX(2.2vw); }
    50%      { transform: rotate(13deg)  translateX(-2.4vw); }
    75%      { transform: rotate(18deg)  translateX(1.8vw); }
}
@keyframes goldSway2 {
    0%, 100% { transform: rotate(21deg) translateX(0); }
    25%      { transform: rotate(17deg) translateX(-2vw); }
    50%      { transform: rotate(24deg) translateX(1.8vw); }
    75%      { transform: rotate(19deg) translateX(-1.4vw); }
}
@keyframes goldSway3 {
    0%, 100% { transform: rotate(13deg)   translateX(0); }
    25%      { transform: rotate(17deg)   translateX(2.6vw); }
    50%      { transform: rotate(10deg)   translateX(-2.2vw); }
    75%      { transform: rotate(15.5deg) translateX(1.6vw); }
}

/* ---- 无障碍：用户偏好减少动效时，只保留极简淡入淡出，不做摆动 ---- */
@media (prefers-reduced-motion: reduce) {
    .gold-light-overlay.show,
    .gold-light-overlay.show .gold-light-source,
    .gold-light-overlay.show .gold-beam-1,
    .gold-light-overlay.show .gold-beam-2,
    .gold-light-overlay.show .gold-beam-3 {
        animation: none;
    }
    .gold-light-overlay.show {
        transition: opacity 0.3s ease;
        opacity: 0.85;
    }
}