/**
 * BioCloud Antigravity Visual & Interaction Effects
 * 3D 滚动穿插入场、磁力悬浮微倾斜、动态光晕与玻璃拟态层级
 */

/* ========================================
   1. Canvas 背景容器
   ======================================== */
.ag-canvas-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ag-canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto; /* 允许捕获鼠标移动 */
}

/* ========================================
   2. 3D 滚动穿插入场系统 (Scroll-Driven Reveal)
   ======================================== */
.ag-reveal {
    opacity: 0;
    will-change: transform, opacity;
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 向上 3D 翻转飞入 (默认) */
.ag-reveal-up {
    transform: perspective(1000px) translateY(42px) rotateX(5deg) scale(0.97);
    filter: blur(4px);
}

/* 从左侧 3D 穿插滑入 */
.ag-reveal-left {
    transform: perspective(1000px) translateX(-48px) rotateY(-6deg) scale(0.96);
    filter: blur(4px);
}

/* 从右侧 3D 穿插滑入 */
.ag-reveal-right {
    transform: perspective(1000px) translateX(48px) rotateY(6deg) scale(0.96);
    filter: blur(4px);
}

/* 缩放弹性飞入 */
.ag-reveal-zoom {
    transform: scale(0.92) translateY(24px);
    filter: blur(6px);
}

/* 激活入场状态 */
.ag-reveal.is-revealed,
.is-revealed .ag-reveal {
    opacity: 1;
    transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    filter: blur(0px);
}

/* 阶梯延迟系统 (Stagger Delays) */
.ag-stagger-1 { transition-delay: 0.06s; }
.ag-stagger-2 { transition-delay: 0.12s; }
.ag-stagger-3 { transition-delay: 0.18s; }
.ag-stagger-4 { transition-delay: 0.24s; }
.ag-stagger-5 { transition-delay: 0.30s; }
.ag-stagger-6 { transition-delay: 0.36s; }

/* ========================================
   3. 磁力 3D 卡片悬浮倾斜 (Magnetic 3D Tilt)
   ======================================== */
.ag-tilt-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
    will-change: transform;
}

.ag-tilt-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(59, 130, 246, 0.14),
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.ag-tilt-card:hover::after {
    opacity: 1;
}

.ag-tilt-card:hover {
    box-shadow:
        0 20px 35px -10px rgba(15, 23, 42, 0.12),
        0 0 25px 2px rgba(59, 130, 246, 0.12);
}

/* ========================================
   4. 光晕与高级玻璃质感
   ======================================== */
.ag-glow-accent {
    position: relative;
}

.ag-glow-accent::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(59, 130, 246, 0.05) 45%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    filter: blur(35px);
}

/* 浮动徽章微动效 */
.ag-float-pulse {
    animation: ag-gentle-float 5s ease-in-out infinite alternate;
}

@keyframes ag-gentle-float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    100% {
        transform: translateY(-8px) rotate(0.8deg);
    }
}