:root {
    --logo-size: clamp(120px, min(32vh, 32vw), 300px);
    --grid-line-color: rgba(255, 255, 255, 0.45);
    
    /* Global Padding settings */
    --padding-x: clamp(20px, 4vw, 60px);
    --padding-y: clamp(20px, 4vh, 60px);
    --quote-padding: 30px;
    --nav-buffer: 80px;

    --font-mono: 'Source Code Pro', monospace;
    --font-display: 'Dela Gothic One', display;
    
    --text-color: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.8);
}

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

body {
    background-color: #000;
    color: var(--text-color);
    font-family: var(--font-mono);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    font-size: 14px;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Background */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Base Grid Layout */
.grid-container {
    display: grid;
    height: 100vh;
    width: 100vw;
    /* Shifting vertical lines further to the left */
    grid-template-columns: minmax(120px, 0.4fr) var(--logo-size) 1fr;
    /* 1.2fr top row, locked center row, 1.4fr bottom row */
    grid-template-rows: 1fr var(--logo-size) 1.2fr;
    grid-template-areas: 
        "tl tc tr"
        "cl cc cr"
        "bl bc br";
    position: relative;
}

/* --- GRID OVERLAY LINES --- */
.grid-line {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}
.grid-line.h-line {
    left: 0;
    width: 100vw;
    height: 1.5px;
    background-image: repeating-linear-gradient(
        to right, 
        var(--grid-line-color) 0, 
        var(--grid-line-color) 4px, 
        transparent 4px, 
        transparent 8px
    );
}
.grid-line.v-line {
    top: 0;
    height: 100vh;
    width: 1.5px;
    background-image: repeating-linear-gradient(
        to bottom, 
        var(--grid-line-color) 0, 
        var(--grid-line-color) 4px, 
        transparent 4px, 
        transparent 8px
    );
}

/* Bind lines perfectly to the CSS grid track boundaries */
.top-line { grid-row: 2 / 3; align-self: start; }
.bot-line { grid-row: 3 / 4; align-self: start; }
.left-line { grid-column: 2 / 3; justify-self: start; }
.right-line { grid-column: 3 / 4; justify-self: start; }


/* --- AREA ASSIGNMENTS --- */
.area-tl { grid-area: tl; padding: var(--padding-y) 0 0 var(--padding-x); }
.area-tc { grid-area: tc; }
.area-tr { 
    grid-area: tr; 
    padding: var(--padding-y) var(--padding-x) 0 0;
    display: flex;
    justify-content: flex-end;
}

.area-cl { grid-area: cl; }
.area-cc { 
    grid-area: cc; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.area-cr { 
    grid-area: cr; 
    padding-left: var(--quote-padding);
    padding-right: calc(var(--padding-x) + var(--nav-buffer));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.area-bl { 
    grid-area: bl; 
    padding: 0 var(--quote-padding) var(--padding-y) 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.area-bc { grid-area: bc; }
.area-br { 
    grid-area: br; 
    padding: var(--quote-padding) calc(var(--padding-x) + var(--nav-buffer)) var(--padding-y) var(--quote-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cell {
    position: relative;
}


/* --- COMPONENTS --- */

/* Pill Badge */
.pill-badge {
    display: inline-block;
    border: 1.5px solid #000;
    color: #000;
    border-radius: 999px;
    padding: 5px 18px;
    font-weight: 500;
    font-size: 13px;
    background: transparent;
    letter-spacing: 0.1em;
}

/* Top Links (LOGOS / WEB) */
.nav-links.horizontal a {
    color: #000;
    margin-left: 2rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Center Logo Box */
.logo-box {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border-radius: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

/* Shared base for both logo images */
.logo-box img {
    position: absolute;
    width: 70%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform, opacity;
}

/* Default logo — visible at rest */
.logo-default {
    opacity: 1;
    transform: rotate(0deg);
}

/* Hover logo — hidden at rest */
.logo-hover {
    opacity: 0;
    transform: rotate(-90deg);
}

/* --- HOVER STATE --- */
/* Default fades out + rotates clockwise 90° */
.logo-box:hover .logo-default {
    opacity: 0;
    transform: rotate(90deg);
}

/* Hover image fades in + rotates to 0° (from -45°, i.e. clockwise 45°) */
.logo-box:hover .logo-hover {
    opacity: 1;
    transform: rotate(0deg);
}

/* Quote Layout */
.main-quote-container {
    max-width: 600px;
}
.main-quote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 2.3rem);
    line-height: 1.2;
    margin-bottom: 0.7rem;
    letter-spacing: 0em;
}
.subtitle {
    font-weight: 700;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    letter-spacing: 0.05em;
}

/* --- Magnetic Letter Repulsion --- */
.main-quote-container {
    overflow: visible;
    perspective: 900px; /* Enables subtle 3D tilt without harsh perspective distortion */
    transform-style: preserve-3d;
}
.main-quote,
.subtitle {
    overflow: visible;
    transform-style: preserve-3d;
}
.magnetic-letter {
    display: inline-block;
    vertical-align: baseline;
    font: inherit;
    line-height: inherit;
    transition: none !important; /* JS owns motion; avoid CSS transitions competing */
    will-change: transform, opacity; /* GPU compositing for 60fps */
}

/* Vertical Nav (ABOUT / HIRE US) */
.nav-links.vertical {
    position: absolute;
    right: var(--padding-x);
    font-size: 11px;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.1em;
    writing-mode: horizontal-tb; /* It remains horizontal text */
}
.about-link {
    /* Below top dashed line */
    top: calc(var(--padding-y) * 1); 
}
.hire-link {
    /* Above bottom dashed line */
    bottom: calc(var(--padding-y) * 1);
}

/* Description Text */
.description {
    line-height: 1.6;
    font-size: clamp(10px, 1.1vw, 13px);
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: 0.04em;
    max-width: 480px;
    overflow: visible; /* prevent clipped displaced letters */
    perspective: 850px; /* enables subtle rotateX/rotateY depth */
    transform-style: preserve-3d;
}

/* Bottom Left Logo */
.hrz-logo {
    width: 80px;
    height: auto;
    opacity: 0.8;
    margin-bottom: -5px; /* fine tune relative baseline */
}

/* Footer Section */
.footer-links {
    display: flex;
    align-items: center;
    gap: 15%; /* Spacing */
    font-size: 11px;
    color: #000;
}
.footer-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.footer-label {
    opacity: 0.6;
}
.footer-value {
    color: #000;
    font-weight: 500;
}


/* Responsive constraints */
@media screen and (max-width: 640px) {
    body {
        overflow-y: auto;
        height: auto;
    }
    .grid-container {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 20px;
        gap: 40px;
    }
    .grid-line {
        display: none;
    }
    .background-image {
        height: 100vh;
        position: fixed;
    }
    .nav-links.vertical {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
    }
    .center-right {
        padding-left: 0;
    }
    .bottom-right {
        padding: 0;
    }
    .main-quote-container {
        margin-bottom: 20px;
    }
    .logo-box {
        aspect-ratio: 1;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    .footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-top: 40px;
    }
    .top-right {
        justify-content: flex-start;
        padding-top: 20px;
    }
    .nav-links.horizontal a {
        margin-left: 0;
        margin-right: 2rem;
    }
}

@media screen and (max-width: 768px) {
    /* Mobile-only safety */
    *, *::before, *::after {
        box-sizing: border-box;
    }
    body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }

    /* Ensure dashed grid overlay remains visible */
    .grid-line {
        display: block !important;
    }

    /* Layout container: stack content, but keep overlay positioning working */
    .grid-container {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100vw;
        padding: 0;
        gap: 0;
        position: relative;
        overflow-x: hidden;
        padding-top: 52px; /* top nav bar height */
        align-items: flex-start;
    }

    /* Remove empty spacer cells */
    .area-tc,
    .area-cl,
    .area-bc {
        display: none;
    }

    /* --- Section 1 — Top Navigation Bar --- */
    .area-tl {
        position: absolute;
        top: 14px;
        left: 20px;
        padding: 0;
        z-index: 30;
    }
    .area-tl .logo-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .pill-badge {
        padding: 6px 14px;
        border-radius: 999px;
        border: 1.5px solid rgba(255, 255, 255, 1);
        background: transparent;
        letter-spacing: 0.1em;
        font-size: 12px;
        font-weight: 500;
        color: #000;
        margin-left: 0;
    }

    .area-tr {
        position: absolute;
        top: 14px;
        right: 20px;
        padding: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .nav-links.horizontal {
        display: flex;
        gap: 22px;
        align-items: center;
        justify-content: flex-end;
    }
    .nav-links.horizontal a {
        margin-left: 0;
        margin-right: 0;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-decoration: none;
    }

    /* --- Section 2 — Hero / Logo Block --- */
    .area-cc {
        margin: 0;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding: 24px 20px;
        border: 1px dashed rgba(255, 255, 255, 0.3);
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 2;
    }
    .logo-box {
        width: 130px;
        height: 130px;
        border-radius: 28px;
        aspect-ratio: 1;
        margin: 0;
        max-width: none;
    }
    .logo-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 28px;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Pull vertical labels up into the dashed hero box */
    .area-cr {
        margin-top: -178px; /* logo (130) + padding (24*2) */
        position: relative;
        z-index: 3;
    }
    .nav-links.vertical {
        position: absolute;
        right: 20px; /* align to inner right edge */
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.15em;
        color: #fff;
        text-transform: uppercase;
        display: block;
        opacity: 1;
        visibility: visible;

        /* Ensure clean vertical label rendering (no horizontal “glitch” transforms). */
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        transform-origin: center center;
    }
    .about-link {
        top: 20%;
        right: 0;
        z-index: 10;
    }
    .hire-link {
        top: 72%;
        right: 0;
        z-index: 10;
    }

    /* --- Section 3 — Main Quote & Subtitle --- */
    .area-cr {
        /* Desktop aligns this area to the right; override to left. */
        padding-left: 0;
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .main-quote-container {
        margin-top: 178px; /* match tighter dashed hero height */
        padding: 32px 20px 0 20px;
        max-width: none;
        width: auto; /* avoid premature wrapping from forced width constraints */
    }
    .main-quote {
        font-size: clamp(20px, 6.0vw, 20px); /* smaller mobile headline */
        line-height: 1.1;
        margin-bottom: 10px;
        text-align: left;
        letter-spacing: 0;
        white-space: normal;

        /* Wrapping controls to avoid mid-character breaks */
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    .subtitle {
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0.05em;
        font-weight: 700;
        text-align: left;
    }

    /* --- Section 4 — Body Paragraph --- */
    .area-br {
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;   /* desktop uses right-aligned flex */
        justify-content: flex-start;
    }
    .description {
        padding: 24px 20px;
        max-width: none;
        text-transform: uppercase;
        font-size: 11px;
        line-height: 1.8;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.85);
    }

    /* --- Section 5 — Footer --- */
    /* The “YANE ENTERPRISES” lockup is not part of the mobile flow in the Figma reference. */
    .area-bl {
        display: none;
    }

    .footer-links {
        padding: 32px 20px 32px; /* ensure second row values never clip */
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
        align-items: start;
        font-size: 10px;
        line-height: 1.6;
    }
    .footer-block {
        gap: 4px;
    }
    .footer-label {
        opacity: 0.6;
        font-weight: 400;
    }
    .footer-value {
        color: #000;
        font-weight: 400;
    }
}