/* Local Fonts */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Afacad';
    src: url('fonts/Afacad-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Afacad';
    src: url('fonts/Afacad-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-color: #f3f3f3;
    --white: #ffffff;
    --black: #000000;
    --text-main: #000000;
    --text-light: #ededed;
    --font-sans: 'Montserrat', sans-serif;
    --font-display: 'Afacad', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: normal;
    overflow-x: hidden;
}

.main-wrapper {
    width: 100%;
    margin: 0 auto;
}

/* 1. PC Header (Hero) */
.pc-header {
    width: 100vw;
    min-height: 56.25vw;
    /* Full height ratio 1125 / 2000 */
    position: relative;
    overflow: hidden;
    background: transparent;
}

.hero-bg {
    position: relative;
    width: 100%;
    margin-top: 0;
    /* Show full sky */
    left: 0;
}

.hero-bg img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 11vw;
    right: 5vw;
    text-align: right;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2vw;
}

.logo-top img {
    height: 3.5vw;
    /* 32.4px */
}

.main-title {
    width: 32.85vw;
    /* 657px */
}

.main-title img {
    width: 100%;
    display: block;
}

/* 2. Profiles - Overlapping ground */
.profiles-section {
    background: transparent;
    /* Show car reflection */
    margin-top: -16vw;
    /* Distance from 1125px base up to 670px top */
    position: relative;
    z-index: 10;
    padding-bottom: 2vw;
}

.profiles-container {
    width: 67.22vw;
    margin-left: 16.237vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6vw;
}

.profile-card {
    width: 16.5vw;
    /* 330px */
    margin: 0 auto;
}

.card-img {
    width: 100%;
    margin-bottom: 2vw;
}

.card-img img {
    width: 100%;
    display: block;
    aspect-ratio: 1320/1596;
    object-fit: cover;
}

.card-meta .name {
    font-size: 0.962vw;
    /* 19.25px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.019vw;
    margin-bottom: 0.2vw;
}

.card-meta .role {
    font-size: 0.818vw;
    /* 16.37px */
    line-height: 1.4;
    letter-spacing: -0.03vw;
    color: #000;
}

/* 3. Intro Text */
.intro-section {
    background: transparent;
    padding: 4vw 0 8vw 0;
    position: relative;
    z-index: 15;
    /* Ensure it stays above transparency floor */
}

.intro-grid {
    width: 67.22vw;
    margin-left: 16.237vw;
    display: grid;
    grid-template-columns: 30vw 1fr;
    /* Exact matching your request */
    gap: 6.5vw;
}

.display-title {
    font-family: var(--font-display);
    font-size: 2.844vw;
    /* 56.88px */
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.11vw;
    text-transform: uppercase;
}

.body-text {
    font-size: 1vw;
    /* 22px */
    line-height: 1.5;
    letter-spacing: -0.044vw;
    text-align: justify;
}

/* 4. Thien Vu Section */
.thienvu-section {
    background: var(--bg-color);
}

.thienvu-bg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--black);
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.thienvu-left-black {
    padding: 2vw 10vw 4vw 6vw;
    color: var(--text-light);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Changed from space-between for stagger flow */
}

.desc-white {
    font-size: 1vw;
    line-height: 1.5;
    text-align: justify;
    letter-spacing: -0.044vw;
    color: #EDEDED;
    margin-bottom: 1vw;
}

.magazine-meta,
.magazine-meta-white {
    font-size: 0.6vw;
    display: flex;
    justify-content: space-between;
    width: 9.3vw;
    letter-spacing: 0.06vw;
    margin: 2vw 0;
    /* Increased from 1.5vw */
    opacity: 0.5;
    /* Unified opacity for all meta info */
}

.logo-bottom-group {
    margin-top: auto;
    padding-top: 4vw;
}

.logo-bottom-group img {
    height: 1.5vw;
}

.white-logo-filter {
    filter: invert(1) brightness(2);
    /* Make the black logo white for black background */
}

.thienvu-right-img {
    height: 100%;
    position: relative;
    z-index: 5;
    overflow: visible;
    background-color: #000;
    /* Ensure overlay part is visible */
}

.thienvu-right-img img {
    position: absolute;
    /* Revert to absolute to fill height properly */
    top: 0;
    right: 0;
    width: 105.7%;
    /* (1000 + 57) / 1000 */
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
}

/* 5. Editorial Splits (Aluc / Phong Dinh) */
.editorial-split {
    background: var(--white);
    padding: 0;
}

.split-row {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.split-row.reverse .col-img {
    grid-column: 2;
}

.split-row.reverse .col-content {
    grid-column: 1;
}

.col-img {
    height: 100%;
    background-color: #000;
}

.col-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.col-content {
    background: var(--black);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6vw 6vw;
}

.col-content.light {
    background: var(--white);
    color: var(--text-main);
}

.display-title-huge {
    font-family: var(--font-display);
    font-size: 4vw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.16vw;
    margin-bottom: 2vw;
}

.quote-box {
    margin-top: 3vw;
    font-family: var(--font-display);
    font-size: 2.5vw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.1vw;
}


/* 7. Conclusion Final */
.conclusion-final {
    background: var(--bg-color);
    padding: 0;
}

.concl-row {
    width: 88vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 15.5vw 31.7vw 32.3vw;
    gap: 4.47vw;
    padding: 8vw 0 2vw 0;
    /* Reduced padding-bottom */
}

.c-col-small {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.car-bottom-small,
.logo-small {
    width: 100%;
    height: auto;
    display: block;
}

.concl-text {
    font-size: 1vw;
    line-height: 1.5;
    text-align: justify;
    letter-spacing: -0.044vw;
    color: #000;
    /* Standard black for white background */
}

.car-side-view {
    width: 100%;
    display: flex;
    justify-content: center;
}

.car-side-view img {
    width: 50vw;
}

.full-banner {
    position: relative;
    width: 100%;
}

.banner-img img {
    width: 100%;
    display: block;
}

.banner-overlay {
    position: absolute;
    top: 5vw;
    left: 8.4vw;
    width: 82.2vw;
}

.overlay-grid {
    display: grid;
    grid-template-columns: 36vw 1fr;
    gap: 16vw;
    align-items: flex-start;
}

.overlay-img img {
    width: 28vw;
    display: block;
}

.concl-text p,
.overlay-text p {
    margin-bottom: 1vw;
}

.overlay-text {
    font-size: 1vw;
    line-height: 1.5;
    letter-spacing: -0.044vw;
    text-align: justify;
    color: #EDEDED;
    /* Light color for black overlay */
}

@media (max-width: 1024px) {
    .profiles-container {
        grid-template-columns: 1fr 1fr;
        width: 90vw;
    }

    .profile-card {
        width: 40vw;
    }

    .intro-grid,
    .thienvu-bg,
    .split-row,
    .concl-row,
    .overlay-grid {
        grid-template-columns: 1fr;
        padding: 5vw 5wv;
    }

    .overlay-text {
        font-size: 3vw;
    }
}

/* 9. Animations - Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger>* {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.reveal-stagger.active>* {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reveal-stagger.active>*:nth-child(1) { transition-delay: 0.5s; }
.reveal-stagger.active>*:nth-child(2) { transition-delay: 0.8s; }
.reveal-stagger.active>*:nth-child(3) { transition-delay: 1.1s; }
.reveal-stagger.active>*:nth-child(4) { transition-delay: 1.4s; }
.reveal-stagger.active>*:nth-child(5) { transition-delay: 1.7s; }
.reveal-stagger.active>*:nth-child(6) { transition-delay: 2.0s; }
.reveal-stagger.active>*:nth-child(7) { transition-delay: 2.3s; }
.reveal-stagger.active>*:nth-child(8) { transition-delay: 2.6s; }
.reveal-stagger.active>*:nth-child(9) { transition-delay: 2.9s; }
.reveal-stagger.active>*:nth-child(10) { transition-delay: 3.2s; }

/* 10. Left Slide Animations */
.reveal-left-stagger>* {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal-left-stagger.active>* {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Specific staggered delays for Hero elements */
.reveal-left-stagger.active>*:nth-child(1) {
    transition-delay: 0.2s;
}

.reveal-left-stagger.active>*:nth-child(2) {
    transition-delay: 0.4s;
}

.reveal-left-stagger.active>*:nth-child(3) {
    transition-delay: 0.6s;
}

/* 11. Profile Sequence Animation */
.reveal-middle {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.reveal-middle.active {
    opacity: 1;
}

/* Specific inner sequence for cards */
.profile-card .card-img {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-middle.active .profile-card .card-img {
    opacity: 1;
    transform: translateY(0);
}

.profile-card .card-meta {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.6s ease-out;
}

.reveal-middle.active .profile-card .card-meta {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays: Image then Text */
.reveal-middle.active .profile-card:nth-child(1) .card-img {
    transition-delay: 0.1s;
}

.reveal-middle.active .profile-card:nth-child(2) .card-img {
    transition-delay: 0.3s;
}

.reveal-middle.active .profile-card:nth-child(3) .card-img {
    transition-delay: 0.5s;
}

.reveal-middle.active .profile-card:nth-child(4) .card-img {
    transition-delay: 0.7s;
}

/* Further delay the text for each card staggered too - now even later after images */
.reveal-middle.active .profile-card:nth-child(1) .card-meta { transition-delay: 0.8s; }
.reveal-middle.active .profile-card:nth-child(2) .card-meta { transition-delay: 1.0s; }
.reveal-middle.active .profile-card:nth-child(3) .card-meta { transition-delay: 1.2s; }
.reveal-middle.active .profile-card:nth-child(4) .card-meta { transition-delay: 1.4s; }

/* 12. Individual Slide Animations */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}