/**
 * Bright Infosystem Website
 *
 * @file page-header.css
 * @description Styles for the reusable page header component.
 * @version 1.7 (Grid Fade Effect Update)
 */

.page-header {
    position: relative;
    padding: 180px 20px 80px 20px;
    background-color: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.page-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
        rgba(218, 33, 220, 0.07) 0%,
        rgba(16, 151, 210, 0.05) 30%,
        transparent 60%
    );
}

.page-header-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 25px 25px;
    /* Updated mask to fade from all sides, including the bottom */
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-header-container {
    max-width: 1100px;
    margin: 0 auto;
}

.page-header h1 {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 20px 0;
}
.page-header h1 .gradient-text {
    background: linear-gradient(to right, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* --- Breadcrumbs --- */
.breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}
.breadcrumbs a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}
.breadcrumbs a:hover {
    color: var(--accent-color);
}
.breadcrumbs span {
    color: var(--dark-divider-color);
}
.breadcrumbs span.active {
    color: var(--text-color);
    font-weight: 400;
}

/* --- Animated Shapes --- */
.page-header-shape {
    position: absolute;
    opacity: 0.3;
    z-index: 1;
    animation: rotate-shape 40s linear infinite;
    will-change: transform; /* Performance optimization to prevent jitter */
}
.shape-1 {
    top: 50%;
    left: 5%;
    width: 100px;
    transform: translateY(-50%);
}
.shape-2 {
    top: 50%;
    right: 5%;
    width: 80px;
    animation-direction: reverse;
    transform: translateY(-50%);
}

@keyframes rotate-shape {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* --- Fade-in Animation --- */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.page-header h1.is-visible {
    transition-delay: 0.2s;
}
.breadcrumbs.is-visible {
    transition-delay: 0.4s;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .page-header {
        padding: 120px 20px 60px 20px;
    }
    .page-header h1 {
        font-size: 36px;
    }
    .page-header-shape {
        opacity: 0.2;
    }
    .shape-1 { width: 60px; }
    .shape-2 { width: 50px; }
}