:root {
  --bg-color: #0a0a0a;       /* GF True Black */
  --text-color: #f4f4f4;     /* GF Off-White text */
  --accent-color: #ff4d00;   /* GF Signature Vermillion Orange */
  
  --font-primary: 'Inter', sans-serif; /* Massive Grotesk */
  --font-mono: 'Space Mono', monospace; /* Technical Labels */
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Typography Classes */
.mono-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #888;
}
.highlight-orange { color: var(--accent-color); }

.huge-heading {
    font-family: var(--font-primary);
    font-size: 11vw;
    font-weight: 900;
    line-height: 0.85; /* Extremely tight leading */
    letter-spacing: -4px;
    text-transform: uppercase;
}
.section-title {
    font-family: var(--font-primary);
    font-size: 8vw;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

/* Layout: GF Nav */
.gf-nav {
    position: fixed; top: 0; left: 0; width: 100vw;
    display: flex; justify-content: space-between; align-items: center;
    padding: 2rem 4rem; z-index: 100;
    mix-blend-mode: difference;
}
.nav-logo { font-weight: 900; font-size: 1.2rem; letter-spacing: -1px; }
.nav-item { cursor: pointer; color: #fff; transition: color 0.3s; }
.nav-item:hover { color: var(--accent-color); }

/* Layout: GF Hero */
.gf-hero {
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column;
    padding: 0 4rem;
    position: relative;
}
.hero-split {
    display: flex; flex: 1;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hero-left {
    flex: 6; /* 60% width */
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 15vh 0 5vh 0;
    border-right: 1px solid rgba(255,255,255,0.1);
    padding-right: 4rem;
}
.hero-subtext {
    max-width: 400px; font-size: 1.1rem; line-height: 1.5; color: #aaa;
}

.hero-right {
    flex: 4; /* 40% width */
    position: relative;
    background: #000; /* deep void for 3D */
    overflow: hidden;
}
/* IMPORTANT: WebGL container local constraint */
#webgl-container canvas {
    position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
}

.hero-footer {
    height: 60px;
    display: flex; justify-content: space-between; align-items: center;
}

/* Layout: Dedicated Video Showcase */
.gf-video-showcase {
    width: 100vw;
    background: var(--bg-color);
    padding: 0 4rem 10vh 4rem; /* flows cleanly out of hero */
    display: flex; flex-direction: column; gap: 1.5rem;
}
.video-container-massive {
    width: 100%; height: 80vh; overflow: hidden;
    background: #111;
}
.hero-auto-video {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(15%) contrast(1.1);
}
.video-caption {
    display: flex; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 2rem;
}

/* Magnetic Button */
.magnetic-btn {
    display: inline-flex; align-items: center; gap: 15px;
    margin-top: 2rem; padding: 1rem 2rem;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 50px;
    cursor: pointer; transition: border-color 0.3s;
}
.magnetic-btn:hover { border-color: var(--accent-color); }
.btn-text { font-family: var(--font-primary); font-weight: 600; font-size: 0.9rem; letter-spacing: -0.5px; }
.btn-dot { width: 8px; height: 8px; background: var(--accent-color); border-radius: 50%; }

/* Layout: Archive Split Screen */
.gf-archive {
    display: flex; width: 100vw;
    background-color: #e6e6e6; /* GF High Contrast Flip */
    color: #0a0a0a;
}
.gf-archive .mono-label { color: #555; } /* adjusting mono for light bg */

.archive-left {
    flex: 4; border-right: 1px solid rgba(0,0,0,0.1);
}
.sticky-wrapper {
    position: sticky; top: 0;
    height: 100vh;
    padding: 10vh 4rem;
    display: flex; flex-direction: column; justify-content: center;
}
.archive-desc { margin-top: 3rem; font-size: 1.1rem; line-height: 1.6; max-width: 350px; }

.archive-right {
    flex: 6;
    padding: 10vh 4rem 10vh 4rem;
    display: flex; flex-direction: column; gap: 15vh;
}

/* Work Items */
.work-item { width: 100%; display: flex; flex-direction: column; gap: 1rem;}
.work-img-wrapper {
    width: 100%; background: #ccc;
    overflow: hidden;
}
.work-img-wrapper img, .work-img-wrapper video {
    width: 100%; height: auto; display: block;
    transform: scale(1.01); transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.work-item:hover .work-img-wrapper img { transform: scale(1.05); }
.work-meta { display: flex; justify-content: space-between; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 0.5rem; }

/* Sub Grids */
.hardware-block { gap: 2rem; }
.mini-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.mini-grid img { width: 100%; height: auto; border: 1px solid rgba(0,0,0,0.1); }


/* Layout: Footer */
.gf-footer {
    padding: 15vh 4rem 4rem 4rem;
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--bg-color); min-height: 80vh;
}
.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; }

/* Video Hover Override Layer */
#magnetic-video-wrapper {
    position: fixed; top: 0; left: 0; width: 300px; height: 400px;
    z-index: 999; pointer-events: none; opacity: 0;
    transform: translate(-50%, -50%);
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
#magnetic-video { width: 100%; height: 100%; object-fit: cover; }


@media (max-width: 900px) {
  .hero-split, .gf-archive { flex-direction: column; }
  .hero-left, .hero-right, .archive-left, .archive-right { flex: none; width: 100%; border-right: none; padding: 2rem; }
  .hero-right { height: 50vh; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .huge-heading { font-size: 15vw; }
  .sticky-wrapper { position: static; height: auto; padding: 4rem 2rem; }
}