/* =============================================================================
   FG ABOUT PAGE — The "Heritage & Horizon" Scroll Journey
   All values via variables.css — zero hardcoded colours.
   ============================================================================= */

/* ── Page Base ── */
.fg-about-page {
    background: var(--fg_canvas);
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   SECTION 1 — CINEMATIC HERO
═══════════════════════════════════════════ */
.fg-about-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fg-about-hero__image-wrap {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.fg-about-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transform: scale(1.12);
    will-change: transform;
}

.fg-about-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(24, 16, 20, 0.15) 0%,
        rgba(24, 16, 20, 0.60) 100%
    );
    z-index: 1;
}

.fg-about-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--fg_space_6);
}

.fg-about-hero__eyebrow {
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    font-weight: var(--fg_weight_medium);
    letter-spacing: var(--fg_tracking_widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 var(--fg_space_5) 0;
    opacity: 0; /* GSAP */
    transform: translateY(10px);
}

.fg-about-hero__headline {
    margin: 0;
    padding: 0;
}

.fg-about-hero__line {
    display: block;
    font-family: var(--fg_font_display);
    font-size: clamp(2.8rem, 6vw, var(--fg_display_md));
    font-weight: var(--fg_weight_light);
    line-height: var(--fg_leading_tight);
    color: var(--fg_text_inverse);
    letter-spacing: -0.02em;
    overflow: hidden;
    clip-path: inset(0 0 100% 0); /* GSAP reveals upward */
}

.fg-about-hero__line--italic {
    font-style: italic;
    color: var(--fg_accent_blush);
}

/* Scroll cue */
.fg-about-hero__scroll-cue {
    position: absolute;
    bottom: var(--fg_space_10);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fg_space_2);
    opacity: 0; /* GSAP */
    z-index: 2;
}

.fg-about-hero__scroll-line {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6));
    animation: fg-scroll-pulse 2s ease-in-out infinite;
}

@keyframes fg-scroll-pulse {
    0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
    50%       { opacity: 1;   transform: scaleY(1); }
}

.fg-about-hero__scroll-label {
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_2xs);
    letter-spacing: var(--fg_tracking_widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════
   SECTION 2 — NARRATIVE (Scroll Journey)
═══════════════════════════════════════════ */
.fg-about-narrative {
    position: relative;
    /* Height is programmatically set by GSAP to accommodate pinned scroll */
}

/* Morphing colour canvas — absolutely behind everything */
.fg-about-narrative__canvas {
    position: absolute;
    inset: 0;
    background: var(--fg_surface_soft);
    z-index: 0;
    will-change: background-color;
}

.fg-about-narrative__scroller {
    position: relative;
    z-index: 1;
}

/* Individual chapters */
.fg-about-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--fg_space_16);
    min-height: 100vh;
    padding: var(--fg_space_20) var(--fg_container_padding_desktop);
    max-width: var(--fg_container_wide);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Image cluster — polaroid stack */
.fg-about-chapter__image-cluster {
    position: relative;
    height: 520px;
}

.fg-about-chapter__image-cluster--right {
    order: 2;
}

/* Polaroid frames */
.fg-about-polaroid {
    position: absolute;
    margin: 0;
    padding: 0;
    border-radius: var(--fg_radius_lg);
    overflow: hidden;
    box-shadow: var(--fg_shadow_lg);
    background: var(--fg_surface);
    will-change: transform, opacity;
}

.fg-about-polaroid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--fg_radius_lg);
}

/* Polaroid A — tall, main, slight tilt left */
.fg-about-polaroid--a {
    width: 260px;
    height: 360px;
    top: 40px;
    left: 0;
    transform: rotate(-3deg) translateY(40px);
    opacity: 0;
    z-index: 2;
}

/* Polaroid B — smaller, offset behind, tilt right */
.fg-about-polaroid--b {
    width: 200px;
    height: 270px;
    top: 160px;
    left: 180px;
    transform: rotate(4deg) translateY(60px);
    opacity: 0;
    z-index: 1;
}

/* Polaroid C — right cluster, main */
.fg-about-polaroid--c {
    width: 260px;
    height: 360px;
    top: 40px;
    right: 20px;
    transform: rotate(3deg) translateY(40px);
    opacity: 0;
    z-index: 2;
}

/* Polaroid D — right cluster, accent */
.fg-about-polaroid--d {
    width: 200px;
    height: 270px;
    top: 170px;
    right: 210px;
    transform: rotate(-4deg) translateY(60px);
    opacity: 0;
    z-index: 1;
}

/* Chapter text */
.fg-about-chapter__text {
    padding: var(--fg_space_6);
    opacity: 0;
    transform: translateY(32px);
    will-change: transform, opacity;
}

.fg-about-chapter__text--right {
    order: 1;
}

.fg-about-chapter__label {
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    font-weight: var(--fg_weight_medium);
    letter-spacing: var(--fg_tracking_widest);
    text-transform: uppercase;
    color: var(--fg_brand);
    margin: 0 0 var(--fg_space_4) 0;
}

.fg-about-chapter__heading {
    font-family: var(--fg_font_display);
    font-size: clamp(2rem, 3.5vw, var(--fg_display_sm));
    font-weight: var(--fg_weight_light);
    color: var(--fg_text_heading);
    line-height: var(--fg_leading_tight);
    letter-spacing: -0.02em;
    margin: 0 0 var(--fg_space_6) 0;
}

.fg-about-chapter__body {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_lg);
    color: var(--fg_text_secondary);
    line-height: var(--fg_leading_relaxed);
    margin: 0;
    max-width: 440px;
}

/* ═══════════════════════════════════════════
   SECTION 3 — UAE ROOTS
═══════════════════════════════════════════ */
.fg-about-uae {
    position: relative;
    height: 80vh;
    min-height: 480px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fg-about-uae__image-wrap {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.fg-about-uae__image {
    width: 100%;
    height: 120%; /* Extra for parallax */
    object-fit: cover;
    object-position: center 60%;
    display: block;
    transform: translateY(-10%); /* GSAP parallax start */
    will-change: transform;
}

.fg-about-uae__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(24, 16, 20, 0.80) 0%,
        rgba(24, 16, 20, 0.40) 50%,
        rgba(24, 16, 20, 0.10) 100%
    );
    z-index: 1;
}

.fg-about-uae__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--fg_space_6);
    max-width: var(--fg_container_narrow);
    margin: 0 auto;
}

.fg-about-uae__eyebrow {
    font-family: var(--fg_font_ui);
    font-size: var(--fg_text_xs);
    letter-spacing: var(--fg_tracking_widest);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 var(--fg_space_4) 0;
    opacity: 0;
    transform: translateY(12px);
}

.fg-about-uae__tagline {
    font-family: var(--fg_font_display);
    font-size: clamp(2.2rem, 5vw, var(--fg_display_sm));
    font-weight: var(--fg_weight_light);
    color: var(--fg_text_inverse);
    line-height: var(--fg_leading_tight);
    letter-spacing: -0.02em;
    margin: 0 0 var(--fg_space_6) 0;
    opacity: 0;
    transform: translateY(20px);
}

.fg-about-uae__body {
    font-family: var(--fg_font_body);
    font-size: var(--fg_text_md);
    color: rgba(255, 255, 255, 0.70);
    line-height: var(--fg_leading_relaxed);
    margin: 0;
    opacity: 0;
    transform: translateY(16px);
}

/* ═══════════════════════════════════════════
   SECTION 4 — THE CLIMAX
═══════════════════════════════════════════ */
.fg-about-climax {
    background: var(--fg_canvas);
    padding: var(--fg_section_space_xl) var(--fg_container_padding_desktop);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.fg-about-climax__inner {
    max-width: var(--fg_container_narrow);
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fg_space_12);
}

.fg-about-climax__quote {
    margin: 0;
    padding: 0;
}

.fg-about-climax__line {
    display: block;
    font-family: var(--fg_font_display);
    font-size: clamp(1.8rem, 4vw, var(--fg_display_sm));
    font-weight: var(--fg_weight_light);
    color: var(--fg_text_heading);
    line-height: var(--fg_leading_snug);
    letter-spacing: -0.015em;
    overflow: hidden;
    clip-path: inset(0 0 100% 0); /* GSAP */
}

.fg-about-climax__line--italic {
    font-style: italic;
    color: var(--fg_brand);
}

.fg-about-climax__cta {
    opacity: 0;
    transform: translateY(16px);
}

.fg-about-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fg_button_gap);
    height: var(--fg_button_height_lg);
    padding: 0 var(--fg_button_padding_x_lg);
    background: var(--fg_button_primary_bg);
    color: var(--fg_button_primary_text);
    border: none;
    border-radius: var(--fg_button_radius);
    font-family: var(--fg_font_ui);
    font-size: var(--fg_button_font_size);
    font-weight: var(--fg_button_font_weight);
    letter-spacing: var(--fg_button_letter_spacing);
    text-decoration: none;
    box-shadow: var(--fg_shadow_brand);
    transition:
        background var(--fg_transition_base),
        transform var(--fg_transition_base),
        box-shadow var(--fg_transition_base);
}

.fg-about-cta-btn:hover {
    background: var(--fg_button_primary_hover_bg);
    transform: translateY(-3px);
    box-shadow: var(--fg_shadow_lg);
}

.fg-about-cta-btn:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .fg-about-chapter {
        grid-template-columns: 1fr;
        gap: var(--fg_space_10);
        min-height: auto;
        padding: var(--fg_section_space_lg) var(--fg_container_padding_tablet);
    }

    .fg-about-chapter__image-cluster {
        height: 340px;
    }

    .fg-about-chapter__image-cluster--right,
    .fg-about-chapter__text--right {
        order: unset;
    }

    .fg-about-polaroid--a { width: 190px; height: 260px; }
    .fg-about-polaroid--b { width: 150px; height: 200px; left: 150px; top: 110px; }
    .fg-about-polaroid--c { width: 190px; height: 260px; }
    .fg-about-polaroid--d { width: 150px; height: 200px; right: 155px; top: 120px; }

    .fg-about-chapter__body {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .fg-about-hero__line {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .fg-about-chapter {
        padding: var(--fg_section_space_md) var(--fg_container_padding_mobile);
    }

    .fg-about-climax {
        padding: var(--fg_section_space_lg) var(--fg_container_padding_mobile);
    }

    .fg-about-climax__line {
        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }

    .fg-about-uae {
        height: 60vh;
    }
}