/* =========================================
   VISIONARY VOLUNTEER SECTION (CHAOS & BEAUTY)
   Concept: Exploded View, Neon Glow, Anti-Gravity
   ========================================= */

:root {
    --vv-bg-navy: #ffffff;
    /* Switched to White per request */
    --vv-text-main: #050533;
    /* Dark Navy for text on white */
    --vv-impact-blue: #4A90E2;
    /* The Engine */
    --vv-text-white: #050533;
    /* Renamed concept to main text color, effectively navy now */
    --vv-font-display: 'Playfair Display', serif;
    --vv-font-body: 'DM Sans', sans-serif;
    --vv-font-giant: 'Josefin Sans', sans-serif;
    /* Using a geometric font for the giant text */
}

/* --- 1. THE STAGE (Container) --- */
.visionary-volunteer-section {
    position: relative;
    width: 100%;
    min-height: 900px;
    background-color: var(--vv-bg-navy);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    z-index: 1;
}

/* --- 2. THE ENGINE (Impact Blue Glow) --- */
/* A soft, breathing neon center */
.vv-glow-engine {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    /* Darker blue for visibility on white */
    background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, transparent 70%);
    filter: blur(80px);
    z-index: 0;
    animation: enginePulse 8s ease-in-out infinite alternate;
}

@keyframes enginePulse {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.8);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* --- 3. DYNAMIC HEADLINE (The Giant Text) --- */
.vv-giant-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--vv-font-giant);
    font-size: clamp(10rem, 25vw, 30rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    /* Keep transparent fill */
    -webkit-text-stroke: 3px var(--vv-impact-blue);
    /* Blue Stroke */
    opacity: 0.15;
    /* Subtle background presence */
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
    animation: textFloat 20s ease-in-out infinite alternate;
}

@keyframes textFloat {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -55%) rotate(2deg);
    }
}

/* --- 4. EXPLODED GRID (Content Layout) --- */
.vv-container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 5fr 6fr;
    /* Text heavy left, Image right */
    gap: 60px;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
}

/* --- 5. TEXT CONTENT (Left) --- */
.vv-content-box {
    position: relative;
    /* Glassmorphism for readability */
    /* background: rgba(5, 5, 51, 0.3); */
    /* Optional: keeping it clean mainly */
}

.vv-subtitle {
    display: inline-block;
    color: var(--vv-impact-blue);
    font-family: var(--vv-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 60px;
}

.vv-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 2px;
    background: var(--vv-impact-blue);
    box-shadow: 0 0 10px var(--vv-impact-blue);
    /* Neon Line */
}

.vv-title {
    font-family: var(--vv-font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    color: var(--vv-text-white);
    /* Now Dark Navy */
    line-height: 1.05;
    margin-bottom: 40px;
    position: relative;
}

/* Highlight word */
.vv-title span {
    color: transparent;
    -webkit-text-stroke: 1px var(--vv-impact-blue);
    /* Blue stroke for highlight */
    font-style: italic;
}

.vv-text {
    font-family: var(--vv-font-body);
    font-size: 1.15rem;
    color: rgba(5, 5, 51, 0.8);
    /* Dark text */
    line-height: 1.8;
    margin-bottom: 50px;
    border-left: 1px solid rgba(5, 5, 51, 0.2);
    padding-left: 30px;
    /* backdrop-filter: blur(5px); */
}

/* --- CTA BUTTON (Neon) --- */
.vv-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 50px;
    font-family: var(--vv-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--vv-text-white);
    /* Dark Navy */
    background: transparent;
    border: 1px solid var(--vv-impact-blue);
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.1);
}

.vv-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--vv-impact-blue);
    transition: all 0.4s ease;
    z-index: -1;
}

.vv-btn:hover {
    color: white;
    box-shadow: 0 0 40px rgba(74, 144, 226, 0.4);
    border-color: transparent;
}

.vv-btn:hover::before {
    left: 0;
}

/* --- 6. CINEMATIC IMAGE (Right) --- */
.vv-image-wrapper {
    position: relative;
    height: 700px;
    perspective: 1000px;
}

.vv-image-mask {
    position: relative;
    width: 100%;
    height: 100%;
    /* Mask/Clip Path to create a window */
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
    overflow: hidden;
    /* Floating transformation */
    animation: imageFloat 8s ease-in-out infinite;
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.5);
}

.vv-image-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

/* Hover Effect */
.vv-image-wrapper:hover .vv-image-mask img {
    transform: scale(1.0);
}

/* Abstract Glitch/Shatter Elements (Floating Glass Shards) */
.vv-shard {
    position: absolute;
    background: rgba(74, 144, 226, 0.1);
    /* Blue tint for white bg */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 144, 226, 0.3);
    z-index: 12;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.vv-shard-1 {
    top: 10%;
    left: -50px;
    width: 150px;
    height: 250px;
    clip-path: polygon(0 0, 100% 20%, 80% 100%, 20% 80%);
    animation: shardFloat 10s ease-in-out infinite reverse;
}

.vv-shard-2 {
    bottom: 20%;
    right: -30px;
    width: 200px;
    height: 150px;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 80%);
    animation: shardFloat 12s ease-in-out infinite;
}

@keyframes imageFloat {

    0%,
    100% {
        transform: translateY(0) rotateX(0deg);
    }

    50% {
        transform: translateY(-30px) rotateX(2deg);
    }
}

@keyframes shardFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(20px, -40px) rotate(5deg);
    }
}


/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .visionary-volunteer-section {
        min-height: auto;
    }

    .vv-container {
        grid-template-columns: 1fr;
    }

    .vv-image-wrapper {
        height: 400px;
        order: -1;
        /* Image first? Or text first? Let's keep text first for readability or user pref. Standard is usually Image first on mobile if visual is key, but let's stick to text first for CTA access. w/e */
        margin-bottom: 50px;
    }

    .vv-giant-text {
        font-size: 20vw;
        /* Smaller on mobile */
    }

    .vv-title {
        font-size: 3rem;
    }
}