.author-panel-wrapper {
    perspective: 1200px;
}
.author-panel-wrapper:hover .author-panel {
    transition: transform 0s;
    animation: set backwards 0.2s;
    transform: rotate(calc(var(--x, 0) * (var(--rotation) * 1deg)))
    rotateY(calc(var(--x, 0) * (var(--rotation-y) * 1deg)))
    rotateX(calc(var(--y, 0) * (var(--rotation-x) * 1deg)));  
}

.author-panel {
    transform-style: preserve-3d;
    transition: transform 0.2s;
}
@keyframes set {
    0% {
        transform: rotate(0deg) rotateY(0deg) rotateX(0deg);
    }
} 

@keyframes set-translate {
    0% {
        translate: 0 0;
    }
}

:root{
    --base-color: #6b21a8;
	--shimmer-color: #ff5ac4;
	--shimmer-width: 25%;
	--duration: 2.2s;

    --c-glass: #bbbbbc;
    --c-light: #fff;
    --c-dark: #000;

    --c-content: #224;
    --c-action: #0052f5;

    --c-bg: #e8e8e9;

    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;

    --saturation: 150%;
}

/* 使用更大的背景尺寸并在末尾回环第一个颜色，保证四色平滑循环 */
.shimmer {
    font-weight: 800;
    letter-spacing: 0.03em;

    /* background: linear-gradient(
        90deg,
        var(--base-color) 0%,
        var(--shimmer-color) calc(50% + var(--shimmer-width) / 2),
        var(--base-color) 100%
    ); */

    background: linear-gradient(90deg, #ff207f 20%, #FF6F00 86%);

    /* background-size: 200% 100%; */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* animation: shimmer var(--duration) linear infinite; */

    /* text-shadow: 0 1px 0 rgba(0,0,0,0.3); */
    
    /* 使用描边加粗文字 */
    -webkit-text-stroke: 1px transparent;
    text-stroke: 1px transparent;
    background-origin: border-box;
    background-clip: text, border-box;
    -webkit-background-clip: text, border-box;
}

/* @keyframes shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.shimmer {
		color: var(--base-color);
		background: none;
		-webkit-text-fill-color: initial;
		text-shadow:
			0 0 0 rgba(0,0,0,0),
			0 0 20px rgba(255,90,180,0.06);
	}
} */

.frosted-glass{
    position: relative;
    background-color: 
 color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: inset 0 0 0 1px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -4px 1px -6px 
 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    transition: background-color 400ms 
cubic-bezier(1, 0, 0.4, 1), box-shadow 400ms 
cubic-bezier(1, 0, 0.4, 1);
    /* color: #ffffff; */
}
.frosted-glass:active{
    background-color: 
    color-mix(in srgb, var(--c-glass) 36%, transparent);
        box-shadow: inset 0 0 0 1px 
    color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 2px 1px 0px -1px 
    color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -1.5px -1px 0px -1px 
    color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -2px -6px 1px -5px 
    color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -1px 2px 3px -1px 
    color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px -4px 1px -2px 
    color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 3px 6px 0px 
    color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}


.handdrawn-arrow {
    width: 132px;
    height: 163px;
}

.arrow-reveal {
    clip-path: inset(0 0 0 100%);
    animation: revealArrow 2s ease-out forwards;
}

@keyframes revealArrow {
    to {
        clip-path: inset(0 0 0 0);
    }
}


.hero-glass-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

.hero-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border-radius: inherit;
    pointer-events: none;
}

.follow-box {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 90%,
        transparent 100%
    );
}

.follow-box::before,
.follow-box::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 1;
}

.follow-box::before {
    left: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.follow-box::after {
    right: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media screen and (max-width: 767px) {
    .follow-box::before,
    .follow-box::after {
        display: none;
    }
}

.typing-wrapper{
    /* display:inline-flex;align-items:center;gap:.25rem; */
    text-align: center;
}
.typed-cursor{display:inline-block;margin-left:.25rem;font-weight:700;animation:blink 1s steps(2,start) infinite;}
/* #typedText { white-space:pre; } */
@keyframes blink{50%{visibility:hidden}}