/* --- HOME ABOUT ME - REFACTORED V2 --- */





.home_aboutme {
    background-color: var(--color-bg-black);
    color: var(--color-text-white);
    /* 1. Side padding set to 0. container-lock in global.css handles gutters */
    padding: clamp(60px, 12vw, 100px) 0; 
    position: relative;
    z-index: 20;
    overflow: hidden;
}

/* --- CLIENT MARQUEE --- */
.client-marquee {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.client-track {
    display: flex;
    gap: clamp(40px, 8vw, 100px); /* Tighter gap for mobile */
    will-change: transform;
    
    /* THE GPU FIX: Hardware Acceleration */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}

.client-set {
    display: flex;
    gap: 100px;
    align-items: center;
    flex-shrink: 0;
}

.client-logo {
    height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.4s ease;
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- THE GRID: Precision Layout --- */
.about-grid {
    display: grid;
    /* 2. Text gets 60% of width, Visuals get 40% */
    grid-template-columns: 1.2fr 0.8fr; 
    gap: clamp(40px, 8vw, 80px);
    align-items: center;
    margin-top: clamp(80px, 12vw, 140px);
}

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* --- LEFT COLUMN: Typography --- */
.about-text p {
    font-family: 'Albert Sans', sans-serif;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 300;
    line-height: 1.6;
    color: #777777;
    margin-bottom: 60px;
    max-width: 48ch; /* Prevents text from becoming too wide to read */
}

.highlight-hand {
    font-family: 'Caveat', cursive;
    color: #ee5ff8;
    font-weight: 700;
    font-size: 1.2em;
}


/* =========================================
   SIDEBAR INTERACTIONS AND HOW IT WILL AFFECT THE ABOUTME SECTION
     (HOW DOES THE SIDEBAR BEHAVE ON OPENING)
   ========================================= */

/* When sidebar is open, re-balance the grid columns */
body.sidebar-active .about-grid {
    grid-template-columns: 1.3fr 0.7fr !important; 
    gap: 20px !important;
}

body.sidebar-active .about-text p {
    max-width: 35ch !important; /* Narrower lines make a cleaner "block" shape */    text-align: left;
    line-height: 1.8;           /* Add breathing room between lines */
    text-align: justify;        /* Optional: creates perfectly straight edges on both sides */
}

/* FORCE the scale when the sidebar is open */
body.sidebar-active .about-visuals {
    transform: scale(0.80) !important; /* Reduced to 0.65 to see a clear change */
    margin-right: 40px !important;   /* Pulls it closer to the sidebar edge */
    transform-origin: right center !important;
}

/* --------------------------------------------

RIGHT COLUMN: Surgical Visuals 

--------------------------------------------- */
                                                            

.about-visuals {
    position: relative;
    /* 1. LOCK the stage dimensions to preserve the 'stitch' */
    width: 260px; 
    height: 500px; /* Increased height to create room for the midsection gap */
    margin: 100px auto; /* Centers the assembly in the right column */
    display: flex;
    justify-content: center;
    align-items: center;

    /* THE FIX: Prepare for scaling */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: right center; /* Scales toward the sidebar side */
}


/* 2. RESTORE original Silhouette Foundation */
.outline-figure {
    position: absolute;
    width: 100%;
    top: 1%; /* to make the brush visible */
    left: 31%; 
    max-width: 183px;
    z-index: 1;
    opacity: 0.8;
}

.top-group {
    position: absolute;
    top: -26%; /* Pinned under chin */
    left: 42%;
    transform: translateX(-50%);
    width: 195%; /* Exact surgical scale */
    z-index: 2;
}

.bottom-group {
    position: absolute;
    bottom: -8%; /* Pinned over legs */
    left: 42%;
    transform: translateX(-50%);
    width: 192%; 
    z-index: 2;
}

.top-photo, .bottom-photo {
    width: 100%;
    border: 3px solid #FFF;
    border-radius: 4px;
}

.speech-bubble-wrapper {
    position: absolute;
    top: 10%;
    left: 26%;
    width: 70%;
    max-width: 360px;
    z-index: 3;
}

.bubble-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* THE FIX: Nudge text UP and RIGHT to sit in the visual center */
    padding: 0 48% 2% 0; 
    box-sizing: border-box;

    /* Primary Heading Styling */
    font-family: 'Comic Roasting', cursive !important;
    color: #001C3E !important;
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap; /* Keeps "INTO THE WILD" on one line */
    transform: rotate(-1deg);
    z-index: 10;
}

/* Secondary Styling */

/* =========================================
   ELMENTS INTERACTIONS & ANIMATIONS
     (Desktop-First, with Mobile Overrides Below)
   ========================================= */


.about-text p {
    font-family: 'Albert Sans', sans-serif;
    font-size: clamp(18px, 1.5vw, 20px);
    font-weight: 300;
    line-height: 1.6;
    color: #777777;
    margin-bottom: 60px;
    max-width: 48ch; /* Prevents text from becoming too wide to read */
}



/* 1. Hide the elements we want to animate */
.sun, .speech-bubble-wrapper {
    opacity: 0;
    transform: scale(0) rotate(-45deg); /* Start small and tilted */
    will-change: transform, opacity;
}

/* 2. Keep the dog and portrait visible by default so the site feels light */
.outline-figure, .top-group, .bottom-group {
    opacity: 1;
}

.sun {
    /* Your existing positioning */
    cursor: pointer; /* Crucial for discoverability */
    transition: filter 0.3s ease; /* Optional: Make it glow slightly on hover */
}

.sun:hover {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 200, 0, 0.5));
}

/*========================================= */

.bubble-text span {
    display: block;
    font-family: 'Albert Sans', sans-serif !important; /* Force Albert Sans */
    font-size: 0.55em; 
    text-transform: none !important; /* Prevents uppercase */
    color: #FFFFFF;
    margin-top: 4px;
    opacity: 0.9;
}
.sun {
    position: absolute;
    top: 8%;
    right: 12%;
    width: 16%;
    /* 1. Ensure it sits above the marquee and photos */
    z-index: 100 !important; 
    cursor: pointer;
    /* 2. Optimization: ensure it handles clicks specifically */
    pointer-events: auto !important;
}

/* home-aboutme.css */

.dog-interaction-wrapper {
    position: absolute; /* Changed from relative */
    bottom: 12%;        /* Positioning it on the legs */
    left: 5%;
    width: 180px;        /* Fixed size prevents the 'Giant Dog' */
    height: auto;
    cursor: pointer;
    z-index: 10;
}

.dog-icon {
    width: 100%;
    height: auto;
    transition: opacity 0.02s ease-in-out; /* The 'Blink' speed */
}

/* 1. Position the 'Open Eyes' dog directly on top of the 'Closed' one */
.dog-open {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Invisible by default */
}

/* 2. ON HOVER: Show the open eyes, hide the closed eyes */
.dog-interaction-wrapper:hover .dog-open {
    opacity: 1;
    
}

.dog-interaction-wrapper:hover .dog-closed {
    opacity: 0;
}



/* Place this in home-aboutme.css */
.about-text-line {
    display: block;
    will-change: transform;
    transform: translateY(115%);
}


/* =========================================
   MOBILE RESPONSIVENESS 
   ========================================= */

@media (max-width: 768px) {

    .home_aboutme {
    padding: 60px 20px !important; /* Forces consistent side gutters on mobile */
}

    .about-text p {
    max-width: 100% !important; /* Removes the 48-character limit for mobile */
}

.about-grid {
    display: block !important; /* Stacks text and visuals simply to use 100% width */
    width: 100% !important;
}
    
    /* 1. TIGHTEN VELOCITY */
    .client-track {
        /* Dropping to 8s makes it feel 'active' on a narrow viewport */
        animation-duration: 8s !important; 
    }

    /* 2. MOBILE INTERACTION LOGIC */
    .client-logo {
        height: 48px !important;    /* Slightly larger for easier tapping */
        filter: grayscale(100%) !important; /* Default state: Premium Grayscale */
        opacity: 0.4 !important;    /* Subtle and performance-friendly */
        transition: filter 0.2s ease, opacity 0.2s ease; /* Fast feedback loop */
    }

    /* 3. THE "CLICK" EFFECT */
    /* On mobile, :active triggers when the user's finger is touching the logo */
    .client-logo:active {
        filter: grayscale(0%) !important; /* Turns colorful on click */
        opacity: 1 !important;            /* Becomes fully visible */
    }




    /* 1. SCALE DOWN THE ASSEMBLY STAGE */
    /* 1. THE STAGE: Ensure the container itself is centered */
    .about-visuals {
        width: 180px !important; /* Keep the surgical scale */
        height: 400px !important; /* Adjust height to control the overall 'spread' */
        margin: 40px auto !important; /* Centers the div in the column */
        position: relative;
        margin-top: 120px !important; /* Pushes the image group down from the CTA */
    }

    /* 2. THE PHOTOS: Switch from 42% to 50% for perfect centering */
    .top-group, .bottom-group {
        left: 50% !important; /* MATHEMATICAL CENTER */
        transform: translateX(-50%) !important;
        width: 185% !important; /* Scaled for mobile */
    }

    /* 3. THE GAP CONTROL: Use these values to close or open the gap */
    .top-group {
        /* Decrease this (e.g., -10%) to move the top photo DOWN */
        top: -12% !important; 
    }

    .bottom-group {
        /* Decrease this (e.g., -2%) to move the bottom photo UP */
        bottom: -4% !important; 
    }

    /* 4. THE SILHOUETTE: Must also be centered */
    .outline-figure {
        /* 1. THE NUDGE: 
           Change from 50% to 40% (or lower) to move it left.
           Every 1% is approximately 1.8px on your 180px mobile stage. */
        left: 75% !important; 

        /* 2. THE ANCHOR:
           Keep this to ensure the figure scales from its own center. */
        transform: translateX(-50%) !important;

        /* 3. VERTICAL POSITIONING:
           Keep it high enough to see the brush tip. */
        top: 5% !important;
        max-width: 140px !important;
    }

    /* 4. SHRINK THE SUPPORTING ELEMENTS */
    .sun {
        width: 20% !important;
        top: 5% !important;
    }

    .dog-interaction-wrapper {
    position: absolute; /* Changed from relative */
    bottom: 12%;        /* Positioning it on the legs */
    left: 5%;
    width: 140px;        /* Fixed size prevents the 'Giant Dog' */
    height: auto;
    cursor: pointer;
    z-index: 10;
}

    /* 1. FORCE THE WRAPPER SCALE */
    .speech-bubble-wrapper {
        /* We use a hard pixel width to win the battle against 'nowrap' */
        width: 140px !important; 
        top: 2% !important;      /* Pull it down to sit on the silhouette's shoulder */
        left: 20% !important;     /* Re-aligning to the head */
    }

    /* 2. SCALE THE BUBBLE IMAGE ITSELF */
    /* If your SVG is inside the wrapper, this ensures it fills the new 130px width */
    .speech-bubble-wrapper img, 
    .speech-bubble-wrapper svg {
        width: 100% !important;
        height: auto !important;
    }

    /* 3. OVERRIDE THE FONT CLAMP */
    .bubble-text {
    /* Reduce the 'blockage' from 45% to 30%. 
       This gives your text ~20px more room to breathe! */
    padding: 0 0% 5% 0 !important; 

    /* Force one line and ENSURE there is no 'normal' rule below this */
    white-space: nowrap !important; 
    
    /* 11px is the sweet spot to keep it inside the blue drawing boundaries */
    font-size: 12px !important; 
    
    line-height: 1 !important;
    text-transform: uppercase;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

    /* 4. SCALE THE SUBTEXT */
    .bubble-text span {
        display: block !important;
        font-size: 10px !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
    }
}