/* ==========================================================================
   Core Values page  —  /css/CoreValues.css   (single file: styles + animations)
   Site tokens: navy #005B96, brand red #C8102E, white cards, Bootstrap 5.
   Hero keeps the warm lumber/walnut theme distinct from the site navy.

   Layout story:
   - Hero 
   - Heritage stat strip (navy) with count-up numbers
   - Mission | Vision split band (white | navy) for contrast
   - Core values on a vertical red "chalk line" spine with diamond
     number markers echoing the Huskey diamond logo
   - Navy CTA

   Animations are CSS-only except the stat count-up (small vanilla JS in the
   view). Below-fold reveals use animation-timeline: view() — Chrome/Edge 115+
   and newer Safari; other browsers get a normal static page.
   ========================================================================== */

.core-values-view {
    --cv-navy: #005B96;
    --cv-navy-dark: #003A63;
    --cv-red: #C8102E;
    --cv-red-dark: #9c0c24;
    --cv-ink: #1a1a1a;
    --cv-muted: #6c757d;
    /* lumber palette for the hero */
    --cv-walnut-deep: #2e1f14;
    --cv-walnut: #4a3220;
    --cv-cream: #f3e9dc;
    overflow-x: hidden; /* the spine markers sit close to the edge on tablet */
}

.cv-hero {
    position: relative;
    min-height: 440px;
    padding: 4.5rem 1rem 0rem;
    overflow: hidden;
    /* gentle truss-pitch cut along the bottom edge */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75rem), 0 100%);
}

.cv-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    z-index: 0;
    filter: brightness(.50);
}

.cv-hero .container {
    position: relative;
    z-index: 1;
}

.cv-hero-title {
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    letter-spacing: 0.06em;
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 24px rgba(0, 0, 0, 0.45);
    animation: cvRise 0.7s ease-out 0.3s backwards;
}

    /* short red rule under the title, echoing the eyebrow rules below */
    .cv-hero-title::after {
        content: "";
        display: block;
        width: 88px;
        height: 4px;
        background: var(--cv-red);
        margin: 1rem auto 0;
        border-radius: 2px;
    }

.cv-hero-sub {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    font-size: 1.15rem;
    max-width: 640px;
    animation: cvRise 0.6s ease-out 0.45s backwards;
}

/* bouncing scroll cue so the hero doesn't read as the whole page */
.cv-scroll-cue {
    margin-top: 1.75rem;
    color: rgba(243, 233, 220, 0.75);
    font-size: 1.4rem;
    line-height: 1;
    animation: cvBounce 1.8s ease-in-out 1.4s infinite;
}

/* ==========================================================================
   HERITAGE STRIP — navy band with count-up stats
   ========================================================================== */
.cv-heritage {
    background: linear-gradient(135deg, var(--cv-navy) 0%, var(--cv-navy-dark) 100%);
    padding: 2rem 0 1.75rem;
    color: #fff;
}

.cv-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cv-stat-number {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums; /* stops the count-up from jittering */
}

    .cv-stat-number .bi {
        font-size: 0.85em;
        color: var(--cv-cream);
    }

.cv-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bcd9ec;
}

/* ==========================================================================
   MISSION | VISION — split contrast band
   ========================================================================== */
.cv-split {
    display: flex;
    flex-wrap: wrap;
}

.cv-split-half {
    flex: 1 1 50%;
    min-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
}

.cv-split-mission {
    background: #fff;
}

.cv-split-vision {
    background: radial-gradient(1200px 400px at 10% -10%, color-mix(in srgb, #005B96 10%, transparent) 0%, transparent 70%), linear-gradient(180deg, #0a0f1a 0%, #39424e 80%);
}

.cv-split-inner {
    max-width: 480px;
}

.cv-eyebrow {
    display: inline-block;
    color: var(--cv-red);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.35em;
    margin-bottom: 0.75rem;
    position: relative;
    padding-bottom: 0.6rem;
}

    /* short red rule under M I S S I O N / V I S I O N */
    .cv-eyebrow::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 56px;
        height: 3px;
        background: var(--cv-red);
        transform: translateX(-50%);
    }

.cv-eyebrow--light {
    color: var(--cv-cream);
}

    .cv-eyebrow--light::after {
        background: var(--cv-cream);
    }

.cv-statement-text {
    color: var(--cv-navy);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}

.cv-statement-text--light {
    color: #fff;
}

.cv-statement-note {
    font-style: italic;
    font-size: 1rem;
    color: var(--cv-muted);
}

.cv-statement-note--light {
    color: #bcd9ec;
}

/* ==========================================================================
   CORE VALUES — image feature rows. Each value is one card: photo on one
   side (alternating), content on the other, with a rotated red diamond
   number badge echoing the Huskey diamond logo.
   ========================================================================== */
.cv-values {
    padding: 3rem 0 3.5rem;
    background: #f8f9fa;
}

.cv-values-title {
    color: var(--cv-navy);
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.cv-values-intro {
    max-width: 560px;
    margin-bottom: 0;
}

.cv-vrow {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.35rem 1rem rgba(0, 59, 99, 0.08);
    margin: 0 auto 2rem;
    max-width: 1040px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .cv-vrow:last-child {
        margin-bottom: 0;
    }

    .cv-vrow:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.9rem 1.8rem rgba(0, 59, 99, 0.14);
    }

.cv-vrow--flip {
    flex-direction: row-reverse;
}

.cv-vrow-media {
    position: relative;
    flex: 0 0 42%;
    min-height: 300px;
    overflow: hidden;
}

    .cv-vrow-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

.cv-vrow:hover .cv-vrow-media img {
    transform: scale(1.05);
}

/* diamond number badge */
.cv-vrow-num {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    width: 52px;
    height: 52px;
    background: var(--cv-red);
    transform: rotate(45deg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

    .cv-vrow-num span {
        transform: rotate(-45deg); /* keep the digit upright */
        color: #fff;
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1;
    }

.cv-vrow-body {
    flex: 1 1 auto;
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cv-value-title {
    color: var(--cv-navy);
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
}

    .cv-value-title .bi {
        color: var(--cv-red);
    }

.cv-value-text {
    color: var(--cv-ink);
    margin-bottom: 0.9rem;
    line-height: 1.65;
}

.cv-value-quote {
    margin: 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--cv-red);
    background: #f0f6fa;
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--cv-navy);
    font-style: italic;
    font-weight: 600;
    font-size: 1.02rem;
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.cv-cta {
    background: linear-gradient(135deg, var(--cv-navy) 0%, var(--cv-navy-dark) 100%);
    padding: 3.5rem 1rem;
}

.cv-cta-sub {
    color: #d1ecf1;
    max-width: 620px;
    font-size: 1.1rem;
}

.cv-btn-outline {
    color: #fff;
    border: 2px solid #fff;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}

    .cv-btn-outline:hover,
    .cv-btn-outline:focus {
        background: #fff;
        color: var(--cv-navy);
    }

    .cv-btn-outline:focus-visible {
        outline: 3px solid var(--cv-cream);
        outline-offset: 2px;
    }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes cvStamp {
    0% {
        opacity: 0;
        transform: rotate(-8deg) scale(1.6);
    }

    100% {
        opacity: 1;
        transform: rotate(-2deg) scale(1);
    }
}

@keyframes cvDraw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.28;
    }
}

@keyframes cvRise {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes cvSlideLeft {
    0% {
        opacity: 0;
        transform: translateX(-32px);
    }

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

@keyframes cvSlideRight {
    0% {
        opacity: 0;
        transform: translateX(32px);
    }

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

@keyframes cvBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}

/* Eyebrow letters spread outward from tight to their final wide tracking */
@keyframes cvTrackOut {
    0% {
        opacity: 0;
        letter-spacing: 0.05em;
    }

    100% {
        opacity: 1;
        letter-spacing: 0.35em;
    }
}

/* The short red rule under the eyebrow draws from the center outward */
@keyframes cvRuleGrow {
    0% {
        width: 0;
    }

    100% {
        width: 56px;
    }
}

/* ---------- Load sequence: hero -> heritage -> split band ----------
   These are visible (or nearly visible) at page load, so they animate once
   on load, continuing the hero's timing.                                  */

.cv-heritage .cv-stat {
    animation: cvRise 0.6s ease-out 0.5s backwards;
}

.cv-split-mission .cv-eyebrow {
    animation: cvTrackOut 0.8s ease-out 0.65s backwards;
}

    .cv-split-mission .cv-eyebrow::after {
        animation: cvRuleGrow 0.6s ease-out 0.65s backwards;
    }

.cv-split-mission .cv-statement-text,
.cv-split-mission .cv-statement-note {
    animation: cvRise 0.7s ease-out 0.65s backwards;
}

.cv-split-vision .cv-eyebrow {
    animation: cvTrackOut 0.8s ease-out 0.8s backwards;
}

    .cv-split-vision .cv-eyebrow::after {
        animation: cvRuleGrow 0.6s ease-out 0.8s backwards;
    }

.cv-split-vision .cv-statement-text,
.cv-split-vision .cv-statement-note {
    animation: cvRise 0.7s ease-out 0.8s backwards;
}

/* ---------- Scroll reveals (browsers with scroll-driven animation support) ----------
   Only for content genuinely below the fold — spine cards and CTA.        */
@supports (animation-timeline: view()) {
    .cv-cta h3,
    .cv-cta-sub,
    .cv-cta .d-flex {
        animation: cvRise 1s ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }
    /* left-image rows slide from the left, flipped rows from the right */
    .cv-vrow {
        animation: cvSlideLeft 1s ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }

    .cv-vrow--flip {
        animation-name: cvSlideRight;
    }
}

/* ---------- JS reveal fallback (browsers without animation-timeline) ----------
   CoreValues.js adds .cv-js-reveal to the page root ONLY when the native
   scroll-driven animations above are unsupported AND motion is allowed,
   then toggles .cv-inview per element as it scrolls into view. Elements
   are never hidden unless the JS actually ran and will reveal them.       */
.cv-js-reveal .cv-vrow,
.cv-js-reveal .cv-cta h3,
.cv-js-reveal .cv-cta-sub,
.cv-js-reveal .cv-cta .d-flex {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.cv-js-reveal .cv-vrow {
    transform: translateX(-32px);
}

    .cv-js-reveal .cv-vrow.cv-vrow--flip {
        transform: translateX(32px);
    }

.cv-js-reveal .cv-inview {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet & phone: collapse the spine to a single left rail */
@media (max-width: 767.98px) {
    .cv-vrow,
    .cv-vrow--flip {
        flex-direction: column;
    }

    .cv-vrow-media {
        flex-basis: auto;
        min-height: 220px;
    }

    .cv-vrow-body {
        padding: 1.5rem 1.25rem;
    }

    /* single column = everything slides in from the same side */
    @supports (animation-timeline: view()) {
        .cv-vrow--flip {
            animation-name: cvSlideLeft;
        }
    }

    .cv-split-half {
        flex-basis: 100%;
        padding: 2.5rem 1.25rem;
    }

    .cv-hero {
        min-height: 340px;
        padding: 3rem 1rem 4rem;
    }
}

/* ==========================================================================
   REDUCED MOTION — static page, everything visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cv-vrow,
    .cv-vrow-media img,
    .cv-btn-outline {
        transition: none;
    }

        .cv-vrow:hover {
            transform: none;
        }

            .cv-vrow:hover .cv-vrow-media img {
                transform: none;
            }

    /* if the JS fallback class somehow got applied, force everything visible */
    .cv-js-reveal .cv-vrow,
    .cv-js-reveal .cv-cta h3,
    .cv-js-reveal .cv-cta-sub,
    .cv-js-reveal .cv-cta .d-flex {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cv-hero-title,
    .cv-hero-sub,
    .cv-scroll-cue,
    .cv-hero-drawing,
    .cv-heritage .cv-stat,
    .cv-eyebrow,
    .cv-eyebrow::after,
    .cv-statement-text,
    .cv-statement-note,
    .cv-values-title,
    .cv-vrow,
    .cv-vrow--flip,
    .cv-cta h3,
    .cv-cta-sub,
    .cv-cta .d-flex {
        animation: none;
    }
}