/* === GLOBAL TEXT SELECTION === */
::selection {
    background-color: #4945D1; /* Theme purple */
    color: #ffffff;;
}
/* === SCROLL BEHAVIOUR - GLOBAL GLIDEING ON SAME PAGE === */
html {
    scroll-behavior: smooth; /* This enables the "glide" for all internal links */
}


/* --- UNIVERSAL CONTAINER LOCK --- */
.container-lock {
    width: 100%;
    margin: 0 auto;
    
    /* 1. Fluid Width: Scales from 1200px to 1440px */
    max-width: clamp(320px, 95vw, 1440px); 
    
    /* 2. Fluid Side Padding: Keeps content off the edges on mobile */
    padding-left: clamp(24px, 5vw, 50px);
    padding-right: clamp(24px, 5vw, 50px);
}

/* --- GLOBAL RESPONSIVE UTILITY --- */
.flex-stack {
    display: flex;
    flex-direction: row; /* Default for desktop */
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .flex-stack {
        flex-direction: column; /* AUTOMATIC STACKING on mobile */
        align-items: flex-start;
        gap: 32px;
    }
}

/* --- PREVENT HORIZONTAL OVERFLOW --- */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Kills native window scroll so the div can take over */
    height: 100% !important; /* Forces the browser window to stay put */
}

#main-content {
    height: 100vh;
    overflow-y: auto; /* This allows the div to actually hold the scroll */
}

img, svg {
    max-width: 100%; /* Ensures 'ic_footer-creative' never grows bigger than the screen */
    height: auto;
}

/* ==========================================================================
   SPACING BETWEEN SECTONS & "SEE ALL" CTA
   ========================================================================== */

:root {
    /* The "Golden Gap" - syncs all CTA/Section margins */
    --section-spacing-cta: clamp(60px, 6vw, 120px);
    
    /* Brand Colors from your home-blogs.css */
    --color-bg-black: #000;
    --color-text-white: #FFF;
}


/* ==========================================================================
   @font-face: Local font files (assets/fonts/)
   Each rule tells the browser: "When you see this font-family name in CSS,
   load the .woff2 file from this path." The font-family name in your CSS
   must match the name declared here. Paths are relative to this file
   (css/global.css): ../ goes up to the project root, then into assets/fonts/.
   Filenames with spaces must be wrapped in quotes in the url().
   ========================================================================== */

/* --- Goblin One: hero STRATEGIST & MEETS (local file, no Google Fonts) --- */
@font-face {
    font-family: 'Goblin One';
    src: url('../assets/fonts/GoblinOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Gotham Ultra: display / heading (e.g. [ about me ] section title) --- */
@font-face {
    font-family: 'Gotham Ultra';
    src: url('../assets/fonts/Gotham-Ultra.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- Glory: hero "STRATEGIST" and other display use --- */
@font-face {
    font-family: 'Glory';
    src: url('../assets/fonts/Glory-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- Geist Mono: nav links, hero "MEETS", hero footer, language bar h/i --- */
/* Multiple weights: same font-family, browser picks by font-weight in CSS. */
@font-face {
    font-family: 'Geist Mono';
    src: url('../assets/fonts/GeistMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('../assets/fonts/GeistMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --- Zeyada: hero "STORYTELLING" script style --- */
@font-face {
    font-family: 'Zeyada';
    src: url('../assets/fonts/Zeyada-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- Josefin Slab: language bar "oi" --- */
@font-face {
    font-family: 'Josefin Slab';
    src: url('../assets/fonts/JosefinSlab-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Inconsolata: language bar "hola" and "你好" --- */
@font-face {
    font-family: 'Inconsolata';
    src: url('../assets/fonts/Inconsolata-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- Albert Sans: Thin (100) --- */
@font-face {
    font-family: 'Albert Sans';
    src: url('../assets/fonts/AlbertSans-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* --- Albert Sans: ExtraLight (200) --- */
@font-face {
    font-family: 'Albert Sans';
    src: url('../assets/fonts/AlbertSans-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* --- Albert Sans: Light (300) --- */
@font-face {
    font-family: 'Albert Sans';
    src: url('../assets/fonts/AlbertSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* --- Albert Sans: Regular (400) --- */
@font-face {
    font-family: 'Albert Sans';
    src: url('../assets/fonts/AlbertSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Albert Sans: Medium (500) --- */
@font-face {
    font-family: 'Albert Sans';
    src: url('../assets/fonts/AlbertSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- Albert Sans: SemiBold (600) --- */
@font-face {
    font-family: 'Albert Sans';
    src: url('../assets/fonts/AlbertSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --- Albert Sans: Bold (700) --- */
@font-face {
    font-family: 'Albert Sans';
    src: url('../assets/fonts/AlbertSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- JungleFeverNF: speech bubble main text ("INTO THE WILD") --- */
@font-face {
    font-family: 'Comic Roasting';
    src: url('../assets/fonts/JungleFeverNF.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- Hiragino Kaku Gothic Std: language bar Tamil "வணக்கம்" (weight 800) --- */
/* Exact filename in folder: "Hiragino Kaku Gothic Std.woff2" – spaces and dot; path in quotes. */
@font-face {
    font-family: 'Hiragino Kaku Gothic Std';
    src: url('../assets/fonts/Hiragino Kaku Gothic Std.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- Block Craft: Pixel font for dates --- */
@font-face {
    font-family: 'Block Craft';
    src: url('../assets/fonts/BlockCraft.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* caveat: Hand-drawn font used for tool annotations */
@font-face {
    font-family: 'Caveat';
    src: url('../assets/fonts/Caveat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Grey note: Local font registration for high-fidelity typography */
@font-face {
    font-family: 'Nunito Sans';
    src: url('../assets/fonts/NunitoSans-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

/* --- CORMORANT GARAMOND FONT FAMILY --- */

/* Regular - Weight 400 */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/CormorantGaramond-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium - Weight 500 */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/CormorantGaramond-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* SemiBold - Weight 600 */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold - Weight 700 */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/CormorantGaramond-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Mynerve: Handwriting font for bulletin annotations --- */
@font-face {
    font-family: 'Mynerve';
    src: url('../assets/fonts/Mynerve-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   SMOOTH SCROLL (Entire wesbite smooth scroll, powered by Lenis.js)
   ========================================= */

html {
    /* FORCE native smooth scroll OFF. Lenis handles this now. */
    scroll-behavior: auto !important;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  /* Disable the browser's default smooth scroll so Lenis can take over */
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}



:root {
    /* Existing Brand Colors */
    --color-bg-black: #070707;
    --color-text-white: #ffffff;
    --color-neon-pink: #C100CF;
    --color-neon-blue: #0051FF;
    --color-neon-green: #39FF14;
    
    /* Existing Typography */
    --font-code: 'Space Mono', monospace;
    --font-heavy: 'Goblin One', display;
    --font-hand: 'Zeyada', cursive;

    /* LAYOUT DEFAULTS - Keep it at 1 fold for now */
    --hero-height: 100vh; /* LAYOUT DEFAULTS */
    --header-height: 90px; /* ADD THIS LINE: Set your desired taller height here */
}

/* Reset styles that apply to ALL folds */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg-black);
    color: var(--color-text-white);
    overflow-x: hidden;
}

/* === GLOBAL COMPONENTS === */

/* Hide default cursor across the site */
html, body {
    cursor: none !important;
}

a, button, .project-card {
    cursor: none !important;
}


/* --- UNIVERSAL SECTION TITLE --- */

.section-title {
    font-family: 'Gotham Ultra', sans-serif;
    /* Use clamp for responsive sizing: 20px on mobile to 24px on desktop */
    font-size: clamp(20px, 2vw, 24px); 
    font-style: italic;
    font-weight: 900; /* Gotham Ultra is a heavy weight */
    color: #FFFFFF;
    text-transform: lowercase; /* Matches your design */
    margin-bottom: clamp(32px, 5vw, 48px);
    display: flex;
    align-items: center;
    gap: 12px; /* Space between brackets and text */
}

.section-title .bracket {
    color: #4945D1; /* Your signature blue */
    font-style: italic;
    /* Ensure brackets don't shrink on smaller screens */
    flex-shrink: 0;
}


/* The Main Cursor Dot */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none; /* Let clicks pass through to buttons */
    z-index: 9999;
    mix-blend-mode: difference; /* Inverts over white/black text */
    /* Ensure the dot starts centered on its own anchor point */
    transform: translate(-50%, -50%); /* Crucial for centering */
}

/* The Cursor Ring/Circle */
.cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    display: flex; /* Centers the "Copy" text */
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

/* New: text style for inside the ring */
.cursor-text {
    font-family: 'Albert Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    opacity: 0; /* Hidden by default */
    pointer-events: none;
}

/* Global Tooltip Styling (Figma Node: image_9bd158.png) */
.cursor-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none !important; /* Never block the mouse */
    z-index: 999999 !important;      /* Sit above EVERYTHING */
    display: inline-flex;
    align-items: center;
    padding: 16px 24px; /* Slightly tighter for a cleaner look */
    border-radius: 100px;
    
    /* FIGMA REFERENCE: Glass & Gradient */
    background: linear-gradient(89deg, rgba(19, 196, 255, 0.10) 38.05%, rgba(104, 49, 255, 0.10) 107.58%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* For Safari support */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    font-family: 'Albert Sans', sans-serif;
    font-size: 14px; /* Matches the refined scale */
    font-weight: 500;
    color: white;
    
    /* INITIAL STATE HANDLED BY GSAP */
    visibility: hidden;
}

/* =========================================
   LOADING (Entire wesbite LOADING CSS)
   ========================================= */

/* 2. The Full-Screen Container */
#loader {
    position: fixed;
    inset: 0;
    background-color: #0a0a0c;
    z-index: 10000;
    transition: opacity 0.8s ease, visibility 0.8s;
    /* Remove flex centering if it was there before */
    display: block; 
}

/* 3. The Content Wrapper */
.loader-content {
    display: flex;
    align-items: center;
    gap: 40px; /* Space between number and logo */
}

/* 4. The "Block Craft" Number */
#loader-number {
    position: absolute;
    bottom: 40px; /* Adjust margin as needed */
    left: 40px;   /* Adjust margin as needed */
    font-family: 'Block Craft', sans-serif;
    font-size: 120px;
    color: #fff;
    line-height: 1;
}

/* 5. The Logo Interaction */
#loader-logo {
    position: absolute;
    bottom: 50px; /* Adjust margin as needed */
    right: 40px;  /* Adjust margin as needed */
    width: 80px;
    /* We will control opacity via JS now, so remove the .faded class from CSS if you want it dynamic */
    opacity: 0.1; 
    transition: opacity 0.3s ease;
}

#loader-logo.faded {
    opacity: 0.1; /* Start very dim as requested */
}

#loader-logo.complete {
    opacity: 1; /* Solid white on 100% */
}

/* 6. Hiding the Loader */
#loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* This hides the Nav, Hero, and everything else at once */
#main-content {
    opacity: 0;
    visibility: hidden; /* This ensures the nav links aren't clickable while loading */
    transition: opacity 1s ease-in, visibility 1s;
}

/* This is triggered by your JS module when the count hits 100 */
#main-content.visible {
    opacity: 1;
    visibility: visible;
}

/* Prevent scrolling while loading */
body.no-scroll {
    overflow: hidden;
}



/* CTA Button - Pill shape, gap for arrow, hover tilt */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 40px;
    border-radius: 100px;
    font-family: 'Albert Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-outline::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 20px;
    background: url('../assets/images/aboutme/ic_buttonarrow.svg') no-repeat center;
    background-size: contain;
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: rgb(255, 255, 255);
    transform: rotate(2deg);
}

.btn-outline:hover::after {
    width: 20px;
    opacity: 1;
}


/* Experience Section Styles (Figma Node: frame_9c8b1e.png) */

/* --- Experience Items --- */
.experience-item {
    padding-bottom: 32px; /* Standard spacing for items with borders */
    padding-top: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* UNIVERSAL FIX: Removes border and bottom padding from the last job (Decathlon) */
.experience-item:last-of-type {
    border-bottom: none;
    padding-bottom: 0; 
}

.experience-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.experience-header .company {
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
}

.experience-header .role {
    font-family: 'Geist Mono', monospace;
    font-size: 16px;
    font-weight: 400;
    color: #727373;
}

.experience-description {
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.6;
    margin-top: 16px;
}

.experience-meta {
    font-family: 'Geist Mono', monospace;
    font-size: 14px;
    font-weight: 400;
    color: #727373;
    margin-top: 16px;
}

/* CTA Spacing: Sits exactly 64px below the last meta description */
.experience-cta {
    margin-top: 64px; 
    padding-bottom: 100px; /* Optional: adds room at the very bottom of the section */
}


/* =========================================
    SCROLL BAR (Entire wesbite STYLING OF scroll)
   ========================================= */

/* CHANGE: Target #main-content specifically */
#main-content::-webkit-scrollbar {
    width: 4px; /* Keeping your preferred width */
}

#main-content::-webkit-scrollbar-track {
    background: transparent; /* Keeping your transparent track */
}

#main-content::-webkit-scrollbar-thumb {
    background: #242424; /* Keeping your dark grey color */
    border-radius: 10px;
}

/* To HIDE the scrollbar globally but still allow scrolling: */
body {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

body::-webkit-scrollbar {
    display: none; 
}