/* edge-glow.css - Styles for edge glow effect during scrolling */

/* Edge glow containers */
.edge-glow-top,
.edge-glow-bottom {
    position: fixed;
    left: 0;
    width: 100%;
    height: 16px; /* Tăng độ dày của dải sáng */
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease; /* Giảm thời gian chuyển đổi để hiển thị nhanh hơn */
}

.edge-glow-top {
    top: 0;
    background: linear-gradient(to bottom, rgba(var(--accent-color-rgb), 0.95), rgba(var(--accent-color-rgb), 0));
    transform-origin: top;
    box-shadow: 0 0 25px rgba(var(--accent-color-rgb), 0.7); /* Đổ bóng rõ hơn */
}

.edge-glow-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(var(--accent-color-rgb), 0.95), rgba(var(--accent-color-rgb), 0));
    transform-origin: bottom;
    box-shadow: 0 0 25px rgba(var(--accent-color-rgb), 0.7); /* Đổ bóng rõ hơn */
}

/* Active state - when user reached the edge */
.edge-glow-top.active,
.edge-glow-bottom.active {
    opacity: 1;
    animation: pulseGlow 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Animation for the edge glow */
@keyframes pulseGlow {
    0% { opacity: 0; height: 5px; }
    15% { opacity: 1; height: 18px; } /* Nhanh hơn, cao hơn */
    50% { opacity: 1; height: 16px; }
    100% { opacity: 0; height: 5px; }
}

/* Chapter transition animation */
.page-transition {
    position: relative;
    overflow: hidden;
    pointer-events: none; /* Ngăn tương tác trong quá trình chuyển trang */
}

/* Loại bỏ scroll transitions */