/* =============================================================================
   COMPONENTS.CSS — Reusable UI Components
   Language Switcher, Animations, Scroll FX, Shared Utilities
   All colors reference semantic tokens from base.css exclusively.
   ============================================================================= */


/* =============================================================================
   SECTION 1: LANGUAGE SWITCHER
   ============================================================================= */

.lang-switcher-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-subtle);
    border: 1px solid var(--border);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.lang-btn {
    background: none;
    border: none;
    color: var(--text-base);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-base), color var(--transition-base);
    padding: 2px 0;
    line-height: 1;
}

.lang-btn:hover {
    opacity: 1;
    color: var(--brand);
}

.lang-btn.active {
    opacity: 1;
    color: var(--brand);
    /* font-weight stays at 500 — prevents any layout shift on click */
    text-decoration: underline;
    text-underline-offset: 4px;
}

.lang-separator {
    color: var(--border-strong);
    font-size: 0.75rem;
    user-select: none;
}

/* --- Mobile: only the vertical spacing needs a breakpoint-specific value --- */
@media (max-width: 768px) {
    .lang-switcher {
        margin-top: 1rem;
    }
}


/* =============================================================================
   SECTION 2: SCROLL-TRIGGERED ANIMATIONS
   
   Strategy: Elements start invisible. JS adds .visible or .active
   class via IntersectionObserver. CSS handles the transition.
   ============================================================================= */

/* --- General fade-in (one-shot, unobserve after trigger) --- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Image slide animations --- */
.vision-image {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.vision-image.active {
    opacity: 1;
    transform: translateX(0);
}

.mission-image {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mission-image.active {
    opacity: 1;
    transform: translateX(0);
}

/* LTR: mirror slide directions */
html[dir="ltr"] .vision-image  { transform: translateX(20px); }
html[dir="ltr"] .mission-image { transform: translateX(-20px); }

html[dir="ltr"] .vision-image.active,
html[dir="ltr"] .mission-image.active {
    transform: translateX(0);
}

/* --- Purpose section scale-in --- */
.purpose-image {
    opacity: 0;
}

.purpose-image.active {
    animation: scale-in 0.5s ease-out forwards;
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- Story image --- */
.story-image {
    opacity: 0;
}

.story-image.active {
    animation: scale-in 0.5s ease-out forwards;
}

/* --- Impact stat cards --- */
.stat-one  { opacity: 0; }
.stat-two  { opacity: 0; }
.stat-three { opacity: 0; }

.stat-one.active {
    animation: slide-from-right 1.2s ease-out forwards;
}
.stat-two.active {
    animation: slide-from-top 1.2s ease-out forwards;
}
.stat-three.active {
    animation: slide-from-left 1.2s ease-out forwards;
}

@keyframes slide-from-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-from-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-from-top {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* LTR: mirror stat animations */
html[dir="ltr"] .stat-one.active   { animation-name: slide-from-left; }
html[dir="ltr"] .stat-three.active { animation-name: slide-from-right; }

/* --- Team member cards --- */
.team-member-card {
    opacity: 0;
    transform: translateY(20px);
}

.team-member-card.active {
    animation: fade-up 0.5s ease-out forwards;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Partner license items --- */
.lic-one,
.lic-two,
.lic-three {
    opacity: 0;
}

.lic-one.active,
.lic-two.active,
.lic-three.active {
    animation: slide-from-right 1s ease-out forwards;
}

/* LTR: mirror partner animations */
html[dir="ltr"] .lic-one.active,
html[dir="ltr"] .lic-two.active,
html[dir="ltr"] .lic-three.active {
    animation-name: slide-from-left;
}

/* Desktop vertical animations for partners */
@media (min-width: 928px) {
    @keyframes slide-from-top-delayed {
        from { opacity: 0; transform: translateY(-24px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .lic-one.active  { animation: slide-from-top-delayed 1s ease-out forwards; }
    .lic-two.active  { animation: slide-from-top-delayed 2s ease-out forwards; }
    .lic-three.active { animation: slide-from-top-delayed 3s ease-out forwards; }
}

/* --- List-partners-content (contains lic items) --- */
.list-partners-content {
    opacity: 0;
    transform: translateY(16px);
}

.list-partners-content.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


/* =============================================================================
   SECTION 3: REDUCED MOTION PREFERENCE
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .vision-image,
    .mission-image,
    .purpose-image,
    .story-image,
    .team-member-card,
    .stat-one,
    .stat-two,
    .stat-three,
    .lic-one,
    .lic-two,
    .lic-three,
    .list-partners-content {
        transition: none;
        animation: none;
        opacity: 1;
        transform: none;
    }

    .fade-in.visible,
    .vision-image.active,
    .mission-image.active,
    .purpose-image.active,
    .story-image.active,
    .team-member-card.active,
    .stat-one.active,
    .stat-two.active,
    .stat-three.active,
    .lic-one.active,
    .lic-two.active,
    .lic-three.active,
    .list-partners-content.active {
        opacity: 1;
        transform: none;
        animation: none;
    }
}


/* =============================================================================
   SECTION 4: SHARED CARD COMPONENT
   Used across team, contact, and partner sections.
   ============================================================================= */

.card {
    background-color: var(--surface-card);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition:
        transform       var(--transition-base),
        box-shadow      var(--transition-base),
        background-color var(--transition-base),
        border-color    var(--transition-base);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}


/* =============================================================================
   SECTION 5: BADGE / TAG UTILITY
   ============================================================================= */

.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    background-color: var(--brand);
    color: var(--text-on-brand);
}

.badge--alt {
    background-color: var(--brand-alt);
    color: var(--permanent-dark);
}

/* =============================================================================
   SECTION 1B: THEME SWITCHER — Twin of .lang-switcher
   
   Design contract (unified with Language Switcher):
   • Container:  var(--surface-subtle) fill, 1px var(--border) stroke.
                 No glass/blur effects — identical to .lang-switcher on all
                 screen sizes.
   • Inactive:   var(--text-base) at opacity 0.7 — same as .lang-btn.
   • Active/Hover: color → var(--brand) (blue). No gold. No fill change.
   • Separator:  var(--border-strong) — same as .lang-separator.
   • No layout shift: font-weight is locked at 500 for all states.
   ============================================================================= */

.theme-switcher-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Outer container: twin of .lang-switcher --- */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-subtle);
    border: 1px solid var(--border);
    transition: background-color var(--transition-base),
                border-color     var(--transition-base);
}

/* --- Segment button: twin of .lang-btn --- */
.theme-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--text-base);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.7;
    padding: 2px 0;
    line-height: 1;
    white-space: nowrap;
    transition: opacity var(--transition-base),
                color   var(--transition-base);
}

.theme-btn i {
    font-size: 0.78rem;
    line-height: 1;
}

/* --- Hover --- */
.theme-btn:hover {
    opacity: 1;
    color: var(--brand);
}

/* --- Active: color only, font-weight stays at 500 to prevent any shift --- */
.theme-btn.active {
    opacity: 1;
    color: var(--brand);
    cursor: default;
    pointer-events: none;
}

/* --- Separator: twin of .lang-separator --- */
.theme-separator {
    color: var(--border-strong);
    font-size: 0.75rem;
    user-select: none;
}

/* --- Focus visible (keyboard navigation) --- */
.theme-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* =============================================================================
   THEME SWITCHER — Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .lang-switcher,
    .lang-btn,
    .theme-switcher,
    .theme-btn {
        transition: none;
    }
}