/* Easter Egg Effects */

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes broken-glass {
    0% { transform: scale(1); filter: none; }
    5% { transform: scale(1.02); } /* Impact shock */
    100% { transform: scale(1); filter: sepia(0.2) blur(0.5px); }
}

@keyframes stone-throw {
    0% {
        transform: translate3d(60vw, -60vh, 1000px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(720deg) scale(1);
        opacity: 1;
    }
}

.easter-egg-stone {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 100000;
    font-size: 80px;
    line-height: 100px;
    text-align: center;
    pointer-events: none;
    animation: stone-throw 0.6s ease-in forwards;
    filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.5));
}

.easter-egg--shake .site-wrapper,
.easter-egg--shake .group-chat,
.easter-egg--shake .group-chat__trigger {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.easter-egg--broken {
    position: relative;
    overflow-x: hidden;
}

.easter-egg--broken .site-wrapper,
.easter-egg--broken .group-chat,
.easter-egg--broken .group-chat__trigger {
    /* 保持轻微的模糊和变色,模拟透过脏/碎玻璃看 */
    filter: sepia(0.1) contrast(1.1);
    transition: filter 0.2s;
}

.easter-egg--broken::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
    
    /* 玻璃裂纹 SVG */
    background-image: 
        radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 25%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='0.3' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg stroke='rgba(255, 255, 255, 0.7)' stroke-width='0.4' stroke-linecap='round' filter='url(%23glow)'%3E%3Cpath d='M50 50 L10 5'/%3E%3Cpath d='M50 50 L90 10'/%3E%3Cpath d='M50 50 L95 60'/%3E%3Cpath d='M50 50 L60 95'/%3E%3Cpath d='M50 50 L15 85'/%3E%3Cpath d='M50 50 L5 40'/%3E%3Cpath d='M30 25 L40 15'/%3E%3Cpath d='M70 20 L80 35'/%3E%3Cpath d='M65 85 L80 75'/%3E%3Cpath d='M20 60 L30 75'/%3E%3Cpath d='M40 40 L60 30' stroke-opacity='0.5'/%3E%3Cpath d='M45 55 L35 65' stroke-opacity='0.5'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='15' fill='url(%23center-crack)' opacity='0.3'/%3E%3Cdefs%3E%3CradialGradient id='center-crack'%3E%3Cstop offset='0%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='transparent'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    
    /* 混合模式让裂纹更自然地叠加 */
    mix-blend-mode: screen; 
}

.easter-egg--broken::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 边缘暗角,增加氛围 */
    box-shadow: inset 0 0 150px rgba(0,0,0,0.4);
    z-index: 99998;
    pointer-events: none;
    /* 整体轻微模糊,模拟玻璃介质 */
    backdrop-filter: blur(0.5px);
}
评论加载中...