@import url("./colorpalette.css");

.about-page {
    background: color-mix(in srgb, var(--primary-color) 4%, var(--white-color));
    overflow-x: hidden;

    .about-skip-link {
        position: fixed;
        z-index: 1000;
        top: 8px;
        left: 8px;
        padding: 10px 16px;
        color: var(--white-color);
        background: var(--black-color);
        border-radius: 10px;
        transform: translateY(-150%);
        &:focus { transform: translateY(0); }
    }

    .about-navigation { position: absolute; inset: 0 0 auto; background: transparent; box-shadow: none; }

    .about-eyebrow {
        margin: 0 0 18px;
        color: var(--secondary-color);
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .21em;
        text-transform: uppercase;
    }

    .about-reveal {
        opacity: 0;
        transform: translateY(42px);
        transition: opacity 750ms ease, transform 750ms cubic-bezier(.2,.8,.2,1);
        &.is-visible { opacity: 1; transform: translateY(0); }
    }
}

.about-hero {
    min-height: 820px;
    padding: 190px max(6vw, 24px) 80px;
    position: relative;
    display: grid;
    align-items: center;
    color: var(--white-color);
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 96%, var(--black-color)) 0%, color-mix(in srgb, var(--primary-color) 74%, transparent) 42%, transparent 72%),
        linear-gradient(0deg, color-mix(in srgb, var(--black-color) 55%, transparent), transparent 50%),
        url("../Assets/about-hero.png");
    background-position: center;
    background-size: cover;
    overflow: hidden;
    isolation: isolate;

    &::after { position: absolute; content: ""; inset: auto 0 0; height: 130px; background: linear-gradient(transparent, color-mix(in srgb, var(--primary-color) 4%, var(--white-color))); z-index: -1; }

    .about-hero__content {
        width: min(720px, 57vw);
        position: relative;
        z-index: 2;
        animation: about-hero-arrive 900ms cubic-bezier(.2,.8,.2,1) both;

        .about-eyebrow {
            color: var(--fifth-color);
            span { width: 32px; height: 2px; margin-right: 11px; display: inline-block; vertical-align: middle; background: currentColor; }
        }

        h1 {
            margin: 0;
            font: clamp(3.2rem, 7vw, 7rem)/.93 "Archivo Black", sans-serif;
            letter-spacing: -.06em;
            text-shadow: 0 20px 55px color-mix(in srgb, var(--black-color) 35%, transparent);
            em { color: var(--fifth-color); font-style: normal; }
        }

        > p:not(.about-eyebrow) { max-width: 630px; margin: 28px 0 34px; color: color-mix(in srgb, var(--white-color) 83%, transparent); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.75; }
    }

    .about-hero__actions {
        display: flex;
        align-items: center;
        gap: 27px;
        flex-wrap: wrap;

        a { color: var(--white-color); font-weight: 800; text-decoration: none; }
        .about-primary-action { min-height: 54px; padding: 0 20px; display: inline-flex; align-items: center; gap: 14px; border-radius: 16px; color: var(--black-color); background: linear-gradient(135deg, var(--fifth-color), var(--secondary-color)); box-shadow: 0 14px 30px color-mix(in srgb, var(--black-color) 22%, transparent); transition: transform 200ms ease; &:hover { transform: translateY(-4px); } }
        .about-text-action { border-bottom: 1px solid color-mix(in srgb, var(--white-color) 45%, transparent); padding-bottom: 5px; }
    }

    .about-hero__light { position: absolute; z-index: 1; width: 38vw; height: 38vw; right: 3%; top: 18%; border: 1px solid color-mix(in srgb, var(--fifth-color) 30%, transparent); border-radius: 50%; box-shadow: 0 0 100px color-mix(in srgb, var(--fifth-color) 18%, transparent), inset 0 0 90px color-mix(in srgb, var(--fifth-color) 12%, transparent); animation: about-light-pulse 5s ease-in-out infinite; }

    .about-hero__orbit {
        width: 390px;
        height: 390px;
        position: absolute;
        right: 11%;
        top: 23%;
        z-index: 1;
        border: 1px solid color-mix(in srgb, var(--white-color) 17%, transparent);
        border-radius: 50%;
        animation: about-orbit 22s linear infinite;
        span { width: 7px; height: 7px; position: absolute; border-radius: 50%; background: var(--fifth-color); box-shadow: 0 0 14px var(--fifth-color); &:nth-child(1) { top: 4%; left: 31%; } &:nth-child(2) { right: -1%; top: 48%; } &:nth-child(3) { bottom: 10%; left: 18%; } }
    }

    .about-hero__side-note { position: absolute; right: 3vw; bottom: 75px; z-index: 2; margin: 0; color: var(--fifth-color); font-size: .7rem; font-weight: 800; letter-spacing: .23em; text-transform: uppercase; writing-mode: vertical-rl; }
}

.about-story {
    width: min(1180px, calc(100% - 40px));
    margin: 100px auto 125px;
    display: grid;
    grid-template-columns: 1fr 1fr .42fr;
    gap: clamp(35px, 6vw, 85px);
    align-items: center;

    .about-story__heading h2 { margin: 0; color: color-mix(in srgb, var(--primary-color) 58%, var(--black-color)); font: clamp(2.4rem, 4.7vw, 4.5rem)/1.02 "Archivo Black", sans-serif; letter-spacing: -.055em; }
    .about-story__copy { color: color-mix(in srgb, var(--black-color) 65%, transparent); font-size: 1.03rem; line-height: 1.85; .about-story__lead { color: var(--secondary-color); font-weight: 800; } }
    .about-story__seal { aspect-ratio: 1; display: grid; place-items: center; position: relative; color: var(--primary-color); animation: seal-float 4s ease-in-out infinite; svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 2; } span { position: absolute; width: 80px; color: var(--primary-color); font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; } }
}

.about-belief {
    min-height: 680px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: var(--white-color);
    background: color-mix(in srgb, var(--primary-color) 55%, var(--black-color));

    .about-belief__visual {
        min-height: 620px;
        padding: 60px;
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fifth-color) 25%, transparent), transparent 38%), linear-gradient(145deg, var(--fourth-color), var(--primary-color));
        > p { position: relative; z-index: 2; margin: 0; color: var(--white-color); font: clamp(2.2rem, 4vw, 4rem)/1.05 "Archivo Black", sans-serif; letter-spacing: -.045em; }
    }

    .about-belief__window {
        width: min(64%, 390px);
        aspect-ratio: .72;
        position: absolute;
        top: 9%;
        left: 50%;
        border: 2px solid color-mix(in srgb, var(--fifth-color) 50%, transparent);
        border-radius: 190px 190px 16px 16px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--fifth-color) 35%, transparent), transparent 65%);
        box-shadow: inset 0 0 90px color-mix(in srgb, var(--fifth-color) 18%, transparent), 0 0 70px color-mix(in srgb, var(--fifth-color) 14%, transparent);
        transform: translateX(-50%) perspective(700px) rotateY(-7deg);
        animation: window-breathe 5s ease-in-out infinite;
        .about-belief__cross { position: absolute; width: 12px; height: 48%; top: 22%; left: calc(50% - 6px); border-radius: 8px; background: var(--fifth-color); box-shadow: 0 0 30px var(--fifth-color); &::after { position: absolute; content: ""; width: 90px; height: 12px; left: -39px; top: 24%; border-radius: 8px; background: inherit; box-shadow: inherit; } }
    }

    .about-belief__content { padding: clamp(55px, 8vw, 110px); align-self: center; h2 { margin: 0 0 28px; font: clamp(2.1rem, 4vw, 3.8rem)/1.08 "Archivo Black", sans-serif; letter-spacing: -.045em; } > p { color: color-mix(in srgb, var(--white-color) 75%, transparent); line-height: 1.8; } blockquote { margin: 35px 0 0; padding-left: 25px; border-left: 3px solid var(--fifth-color); color: var(--fifth-color); font-family: Georgia, serif; font-size: 1.15rem; font-style: italic; line-height: 1.65; cite { display: block; margin-top: 10px; color: var(--white-color); font: .75rem "DM Sans", sans-serif; font-weight: 800; letter-spacing: .12em; } } }
}

.about-purpose, .about-values {
    width: min(1180px, calc(100% - 40px));
    margin: 120px auto;

    .about-purpose__heading, .about-values__heading { max-width: 780px; margin-bottom: 60px; h2 { margin: 0; color: color-mix(in srgb, var(--primary-color) 55%, var(--black-color)); font: clamp(2.4rem, 5vw, 4.7rem)/1 "Archivo Black", sans-serif; letter-spacing: -.055em; } }
}

.purpose-path {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    position: relative;
    &::before { position: absolute; content: ""; height: 2px; left: 8%; right: 8%; top: 62px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--third-color), var(--fourth-color)); opacity: .3; }

    .purpose-step {
        min-height: 360px;
        padding: 28px;
        position: relative;
        border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
        border-radius: 24px;
        background: var(--white-color);
        box-shadow: 0 22px 50px color-mix(in srgb, var(--primary-color) 9%, transparent);
        transition: transform 250ms ease, box-shadow 250ms ease;
        &:hover { transform: translateY(-9px) rotateX(2deg); box-shadow: 0 32px 65px color-mix(in srgb, var(--primary-color) 16%, transparent); }
        .purpose-step__number { color: var(--secondary-color); font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
        .purpose-step__icon { width: 66px; height: 66px; margin: 28px 0 45px; position: relative; z-index: 2; display: grid; place-items: center; border-radius: 20px; color: var(--white-color); background: linear-gradient(145deg, var(--primary-color), var(--fourth-color)); box-shadow: 0 14px 25px color-mix(in srgb, var(--primary-color) 22%, transparent); svg { width: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } }
        h3 { margin: 0 0 13px; color: var(--primary-color); font: 1.25rem "Archivo Black", sans-serif; }
        p { margin: 0; color: color-mix(in srgb, var(--black-color) 60%, transparent); line-height: 1.65; }
    }
}

.about-vision-banner {
    margin: 0 max(3vw, 18px);
    padding: clamp(65px, 9vw, 120px);
    position: relative;
    border-radius: 34px;
    color: var(--white-color);
    text-align: center;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fifth-color) 28%, transparent), transparent 38%), linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--fourth-color) 70%, var(--primary-color)));
    overflow: hidden;
    > *:not(.about-vision-banner__rings) { position: relative; z-index: 2; }
    .about-eyebrow { color: var(--fifth-color); }
    h2 { max-width: 1050px; margin: 0 auto 30px; font: clamp(2.3rem, 5vw, 5rem)/1.04 "Archivo Black", sans-serif; letter-spacing: -.055em; }
    > p:last-child { max-width: 760px; margin: 0 auto; color: color-mix(in srgb, var(--white-color) 75%, transparent); font-size: 1.08rem; line-height: 1.8; }
    .about-vision-banner__rings { position: absolute; inset: 0; span { position: absolute; left: 50%; top: 50%; border: 1px solid color-mix(in srgb, var(--white-color) 12%, transparent); border-radius: 50%; transform: translate(-50%, -50%); animation: vision-ring 5s ease-out infinite; &:nth-child(1) { width: 280px; height: 280px; } &:nth-child(2) { width: 520px; height: 520px; animation-delay: 1.4s; } &:nth-child(3) { width: 780px; height: 780px; animation-delay: 2.8s; } } }
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;

    .value-card {
        min-height: 270px;
        padding: 32px;
        position: relative;
        border-radius: 24px;
        background: var(--white-color);
        box-shadow: 0 20px 45px color-mix(in srgb, var(--primary-color) 9%, transparent);
        overflow: hidden;
        &::after { position: absolute; content: ""; width: 100px; height: 100px; top: -60px; right: -40px; border-radius: 50%; background: var(--card-color, var(--primary-color)); opacity: .28; }
        > span { color: var(--card-color, var(--primary-color)); font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
        h3 { margin: 62px 0 13px; color: color-mix(in srgb, var(--primary-color) 58%, var(--black-color)); font: 1.3rem "Archivo Black", sans-serif; }
        p { margin: 0; color: color-mix(in srgb, var(--black-color) 60%, transparent); line-height: 1.65; }
        &.value-card--orange { --card-color: var(--secondary-color); } &.value-card--violet { --card-color: var(--fourth-color); } &.value-card--green { --card-color: var(--third-color); } &.value-card--gold { --card-color: var(--fifth-color); } &.value-card--deep { --card-color: color-mix(in srgb, var(--primary-color) 65%, var(--black-color)); }
    }
}

.about-invitation {
    width: min(1040px, calc(100% - 40px));
    margin: 100px auto;
    padding: clamp(55px, 8vw, 95px);
    position: relative;
    border-radius: 34px;
    color: var(--white-color);
    text-align: center;
    background: color-mix(in srgb, var(--primary-color) 56%, var(--black-color));
    box-shadow: 0 30px 75px color-mix(in srgb, var(--primary-color) 18%, transparent);
    overflow: hidden;
    > *:not(.about-invitation__glow) { position: relative; z-index: 2; }
    .about-invitation__glow { position: absolute; width: 380px; height: 380px; top: -300px; left: calc(50% - 190px); border-radius: 50%; background: var(--fifth-color); box-shadow: 0 0 120px 75px color-mix(in srgb, var(--fifth-color) 30%, transparent); }
    .about-eyebrow { color: var(--fifth-color); }
    h2 { max-width: 850px; margin: 0 auto 25px; font: clamp(2.2rem, 4.7vw, 4.4rem)/1.05 "Archivo Black", sans-serif; letter-spacing: -.05em; }
    > p:not(.about-eyebrow) { max-width: 700px; margin: 0 auto; color: color-mix(in srgb, var(--white-color) 74%, transparent); line-height: 1.8; }
    .about-invitation__actions { margin-top: 35px; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; a { min-height: 52px; padding: 0 20px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid color-mix(in srgb, var(--white-color) 25%, transparent); border-radius: 15px; color: var(--white-color); font-weight: 800; text-decoration: none; &:first-child { border: 0; color: var(--black-color); background: linear-gradient(135deg, var(--fifth-color), var(--secondary-color)); } } }
}

@keyframes about-hero-arrive { from { opacity: 0; transform: translate3d(-35px, 25px, -70px); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes about-light-pulse { 50% { transform: scale(1.08); opacity: .68; } }
@keyframes about-orbit { to { transform: rotate(360deg); } }
@keyframes seal-float { 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes window-breathe { 50% { transform: translateX(-50%) perspective(700px) rotateY(7deg) scale(1.025); } }
@keyframes vision-ring { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); } 45% { opacity: .8; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); } }

@media (max-width: 950px) {
    .about-hero { min-height: 760px; background-position: 58% center; .about-hero__content { width: min(680px, 82vw); } }
    .about-story { grid-template-columns: 1fr 1fr; .about-story__seal { display: none; } }
    .about-belief { grid-template-columns: 1fr; .about-belief__visual { min-height: 520px; } }
    .purpose-path { grid-template-columns: 1fr 1fr; &::before { display: none; } }
    .value-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .about-hero { min-height: 720px; padding: 150px 20px 60px; background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 90%, var(--black-color)), color-mix(in srgb, var(--primary-color) 35%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--black-color) 58%, transparent), transparent), url("../Assets/about-hero.png"); background-position: 63% center; .about-hero__content { width: 100%; } .about-hero__orbit, .about-hero__side-note { display: none; } }
    .about-story { width: min(100% - 28px, 1180px); grid-template-columns: 1fr; }
    .about-belief { .about-belief__visual { min-height: 440px; padding: 30px; } .about-belief__content { padding: 55px 24px; } }
    .about-purpose, .about-values { width: min(100% - 28px, 1180px); margin: 90px auto; }
    .purpose-path, .value-grid { grid-template-columns: 1fr; }
    .purpose-path .purpose-step { min-height: 300px; }
    .about-vision-banner { margin: 0 12px; padding: 65px 22px; }
    .about-invitation { width: min(100% - 24px, 1040px); padding: 60px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .about-page *, .about-page *::before, .about-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .about-page .about-reveal { opacity: 1; transform: none; }
}