/* ==========================================
   功能区域公共样式 - tutorial-section.css
   可在多个页面中重复使用的功能区域样式
   ========================================== */

.function-section {
    position: relative;
    z-index: 10;
    margin-top: -140px;
    margin-bottom: 2rem;
}

.function-container {
    position: relative;
    background: var(--bg-primary-alpha-60);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    box-shadow: var(--shadow-glass);
    padding: 1.5rem;
    overflow: hidden;
}

/* 扫光效果 */
.function-container::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 150%;
    height: 200%;
    background: var(--shine-gradient-white);
    mix-blend-mode: overlay;
    animation: shine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    transform: rotate(25deg);
}

@keyframes shine {
    from {
        transform: translateX(-100%) rotate(25deg);
    }
    to {
        transform: translateX(100%) rotate(25deg);
    }
} 

/* 移动端适配 */
@media (max-width: 767px) {
    .function-section {
        margin-top: -100px;
    }
}