/* --- HERO SYSTEM: Centralized Design Settings --- */

/* 1. Global Page Foundation */
/* Removed hardcoded background override to allow global styles.css inheritance */

/* 2. Stacking Context & Layout Fixes */
.page-hero {
    position: relative;
    z-index: 1;
    /* Ensures text is always on top */
    border-bottom: 1px solid #0d0d0d !important;
}

.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.page-hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: contrast(1.05) !important;
}

.page-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* גירדיאנט תחתון (מ-blog3) */
        linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.9) 100%),
        /* גרדיאנט צדדים חדש */
        linear-gradient(to right, rgba(4, 4, 4, 1) 0%, rgba(4, 4, 4, 0.7) 30%, rgba(4, 4, 4, 0) 65%, rgba(4, 4, 4, 1) 100%) !important;
    z-index: 1;
}

/* 3. Typography & Colors */
.hero-text {
    color: #A0A8B5 !important;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .hero-text {
        color: #e8e8e8 !important;
        /* Brighter for mobile readability */
    }
}

/* 4. The Spotlight Blur Overlay (The "Flashlight" Effect) */
.hero-spotlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Behind text, inside container */
    pointer-events: none;
    backdrop-filter: blur(45px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(45px) saturate(140%) !important;

    /* Primary Spotlight Mask: Elliptical radial fade */
    mask-image: radial-gradient(ellipse at 15% 85%, black 0%, rgba(0, 0, 0, 0.4) 15%, transparent 20%);
    -webkit-mask-image: radial-gradient(ellipse at 15% 60%, black 0%, rgba(0, 0, 0, 0.4) 15%, transparent 20%);
}

@media (max-width: 768px) {
    .hero-spotlight-layer {
        backdrop-filter: blur(25px) !important;
        mask-image: radial-gradient(circle at 50% 40%, black 0%, rgba(0, 0, 0, 0.6) 30%, transparent 70%) !important;
        -webkit-mask-image: radial-gradient(circle at 50% 40%, black 0%, rgba(0, 0, 0, 0.6) 30%, transparent 70%) !important;
    }
}

/* 5. Frosted Glass Actions (Emergency Button) */
.hero-actions .btn-outline {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.hero-actions .btn-outline:hover {
    background: rgba(240, 180, 41, 0.1) !important;
    border-color: #f0b429 !important;
    color: #f0b429 !important;
    box-shadow: 0 0 20px rgba(240, 180, 41, 0.2) !important;
}

/* 6. Status Pulse Indicators (Centralized Smart Version) */
:root {
    --pulse-color: #22c55e;
    /* Default Site Green */
    --pulse-shadow-rgba: 34, 197, 94;
    /* Default Green RGBA components */
}

/* Agnostic .pulse definition: works in any container (.hero-badge, .hero-badge-pill, etc.).
   Subtle variant — static glow + opacity/scale fade. The legacy --pulse-shadow-rgba
   variable is no longer required; the glow now derives from --pulse-color directly. */
.pulse {
    width: 6px;
    height: 6px;
    background: var(--pulse-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--pulse-color);
    animation: pulse-master 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes pulse-master {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}