/* ==========================================
   CAUSES SECTION
   Filename  : css/causes.css
   Depends on: global.css
   ==========================================
   From global.css — DO NOT redeclare here:
   ✓  font-family (DM Sans)
   ✓  --white, --accent-color
   ✓  CSS reset
   ========================================== */


/* =========================================
   CAUSES — SECTION
   ========================================= */

.causes {
    position: relative;
    width: 100%;
    /* body is full-width, no breakout needed */
    padding: 92px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background-color: #0F172A;
    mix-blend-mode: lighten;
    /* dark navy background */
}


/* =========================================
   CAUSES — OGL CANVAS ANIMATION BACKGROUND
   Same as ainnovations.php banner animation
   ========================================= */

#causes-animation-container {
    position: absolute;
    inset: 0;
    /* covers full section */
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

#causes-animation-container canvas {
    display: block;
    outline: none;
    width: 100vw !important;
    height: 100vh !important;
}


/* =========================================
   CAUSES — INNER WRAPPER
   Horizontally centered, flex row
   ========================================= */

.causes__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 48px;
    /*
     * The INNER is the animated element (equivalent to motion.span layout).
     * It grows/shrinks as the badge word changes. --causes-inner-width is set
     * by JS to heading_w + 55.84 + badge_word_w.
     * The L-bracket (::before) is absolutely positioned relative to this element
     * so it moves with the inner automatically.
     */
    width: var(--causes-inner-width, auto);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
   L-bracket: 102×111px
   Offset -32px on left and bottom so there is
   32px of clear space between each border line
   and the element's left / bottom edge.
*/
.causes__inner::before {
    content: '';
    position: absolute;
    left: -40px;
    bottom: -40px;
    width: 102px;
    min-height: 111px;
    border-left: 22px solid var(--white);
    border-bottom: 22px solid var(--white);
    pointer-events: none;
}


/* =========================================
   CAUSES — LEFT HALF (heading wrapper)
   ========================================= */

.causes__left {
    flex: 1;
    display: flex;
    align-items: center;
}


/* =========================================
   CAUSES — RIGHT HALF (badge wrapper)
   ========================================= */

.causes__right {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   CAUSES — HEADING
   ========================================= */

.causes__heading {
    font-size: 32px;
    font-weight: 700;
    /* override — global h2 is 600 */
    line-height: 32px;
    letter-spacing: -0.03em;
    /* color — inherited from body (#ffffff) */
}


/* =========================================
   CAUSES — LEGACY BADGE (Right sub-element)
   ========================================= */

.causes__badge {
    padding: 11px 19px;
    background: var(--accent-color);
    font-size: 32px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: -0.03em;
    color: var(--white);
    white-space: nowrap;
    display: flex;
    align-items: center;
    border-radius: 1px !important;
    justify-content: center;
    width: var(--causes-badge-width, auto);
    /* smooth width expansion — same spring easing as character animation */
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}



/*
 * .causes__inner--no-transition suppresses transitions on the inner itself
 * AND its animated children during initial load to prevent flash-from-zero.
 */
.causes__inner--no-transition,
.causes__inner--no-transition .causes__badge {
    transition: none;
}

/*
   .badge-text  — inline wrapper that clips the character slide animation
                  to the visible line-height area (35px)
   .badge-char  — each individual character; display:inline-block lets
                  transform:translateY work per-character
*/
.badge-text {
    display: inline-flex;
    overflow: hidden;
    /* clips chars entering/exiting above and below */
    line-height: 1.25;
    /* 40px at 32px font — gives 8px below baseline for descenders (g, y, p, j) */
}

.badge-char {
    display: inline-block;
    will-change: transform, opacity, filter;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.badge-char--incoming {
    transform: translateY(20px);
    opacity: 0;
    filter: blur(4px);
}

.badge-char--active {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

.badge-char--outgoing {
    transform: translateY(-20px);
    opacity: 0;
    filter: blur(4px);
}


/* =========================================
   CAUSES — RESPONSIVE
   ========================================= */

/* Mobile (< 768px) ------------------------ */
@media (max-width: 767px) {
    .causes {
        padding: 60px 20px;
    }

    .causes__inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        width: 100%;
        max-width: 100%;
    }

    .causes__inner::before {
        display: none;
        /* hide L-bracket decoration on mobile stacked layout */
    }

    .causes__left,
    .causes__right {
        width: 100%;
        justify-content: center;
    }

    .causes__heading {
        font-size: 24px;
        line-height: 30px;
        text-align: center;
    }

    .causes__badge {
        font-size: 22px;
        line-height: 26px;
        padding: 8px 14px;
    }
}

/* 576px - 767px (Small Tablet / Large Mobile) */
@media (min-width: 576px) and (max-width: 767px) {
    .causes__heading {
        font-size: 28px;
        line-height: 34px;
    }

    .causes__badge {
        font-size: 24px;
        line-height: 28px;
        padding: 9px 16px;
    }
}

/* 768px - 1023px (Tablet) ------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
    .causes {
        padding: 80px 24px;
    }

    .causes__heading {
        font-size: 28px;
        line-height: 34px;
    }

    .causes__badge {
        font-size: 26px;
        line-height: 30px;
        padding: 10px 16px;
    }

    .causes__inner::before {
        width: 80px;
        min-height: 88px;
        border-left-width: 16px;
        border-bottom-width: 16px;
        left: -24px;
        bottom: -24px;
    }
}