@font-face {
  font-family: 'Stretch Pro';
  src:
    url('/fonts/StretchProRegular.woff2') format('woff2'),
    url('/fonts/StretchProRegular.woff') format('woff');

  font-weight: normal;
  font-style: normal;
}
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    :root{
      --bg:#0a0a0a;
      --card:#151515;
      --border:rgba(255,255,255,0.08);
      --text:#ffffff;
      --muted:rgba(255,255,255,0.6);
      --pill:#161616;
      --active:#ffffff;
      --activeText:#000000;
      --transition:cubic-bezier(.77,0,.18,1);
    }

    body{
      background:var(--bg);
      color:var(--text);
      font-family:Inter,sans-serif;
      overflow:hidden;
      height:100vh;
    }

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

    /* NAV */

    .top-nav{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:60px;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:100;
      backdrop-filter:blur(20px);
      background:rgba(10,10,10,0.75);
      border-bottom:1px solid var(--border);
    }

    .logo{
      font-size:14px;
      letter-spacing:8px;
      text-transform:uppercase;
      font-weight:600;
    }

    /* CONTENT */

    .content-wrapper{
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
    }

    .tab-content{
      position:absolute;
      inset:0;
      opacity:0;
      pointer-events:none;
      transition:opacity 0.6s var(--transition);
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:24px;
      padding-top:60px;
      padding-bottom:0px;
    }

    .tab-content.active{
      opacity:1;
      pointer-events:auto;
    }

    .tab-content h1{
      font-size:clamp(52px,10vw,140px);
      text-transform:uppercase;
      letter-spacing:-5px;
    }

    .tab-content p{
      color:var(--muted);
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:3px;
    }

    /* TEMP BACKGROUNDS */

    .apparel{
      background:#111111;
    }

    .logos{
      background:#171717;
    }

    .website{
      background:#1e1e1e;
    }

    /* BUTTON */

    .view-more{
      padding:16px 28px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.05);
      color:white;
      font-size:13px;
      letter-spacing:2px;
      text-transform:uppercase;
      transition:0.4s ease;
      cursor:pointer;
    }

    .view-more:hover{
      background:white;
      color:black;
    }

    /* BOTTOM NAV */

    .bottom-nav{
      position:fixed;
      bottom:30px;
      left:50%;
      transform:translateX(-50%);
      z-index:100;
    }

    .pill-nav{
      position:relative;
      display:flex;
      background:var(--pill);
      border-radius:999px;
      padding:8px;
      border:1px solid var(--border);
      overflow:hidden;
      backdrop-filter:blur(20px);
    }

    .pill-indicator{
      position:absolute;
      top:8px;
      left:8px;
      width:120px;
      height:calc(100% - 16px);
      background:white;
      border-radius:999px;
      transition:transform 0.45s var(--transition);
    }

    .pill-btn{
      position:relative;
      width:120px;
      height:52px;
      border:none;
      background:transparent;
      color:white;
      z-index:2;
      cursor:pointer;
      font-size:13px;
      letter-spacing:1px;
      transition:0.4s ease;
      text-transform: uppercase;
    }

    .pill-btn.active{
      color:black;
    }

    /* TRANSITION OVERLAY */

    .transition-overlay{
      position:fixed;
      inset:0;
      background:white;
      transform:scaleY(0);
      transform-origin:bottom;
      z-index:999;
      pointer-events:none;
    }

    .transition-overlay.active{
      animation:pageTransition 1s var(--transition) forwards;
    }

    @keyframes pageTransition{

      0%{
        transform:scaleY(0);
        transform-origin:bottom;
      }

      50%{
        transform:scaleY(1);
        transform-origin:bottom;
      }

      51%{
        transform-origin:top;
      }

      100%{
        transform:scaleY(0);
        transform-origin:top;
      }

    }
    /* ========================================= */
/* UPDATED TAB CONTENT */
/* ========================================= */

.tab-content{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.6s cubic-bezier(.77,0,.18,1);
  overflow:hidden;
}

.tab-content.active{
  opacity:1;
  pointer-events:auto;
}

/* ========================================= */
/* SPLIT LAYOUT */
/* ========================================= */

.hero-split{
  position:relative;
  width:100%;
  height:100vh;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  overflow:hidden;
}

/* ========================================= */
/* VIDEO */
/* ========================================= */

.hero-video-wrap{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* RIGHT EDGE BLUR */

.video-fade{
  position:absolute;
  top:0;
  right:-2px;
  width:240px;
  height:100%;

  pointer-events:none;

  background:linear-gradient(
    to right,
    rgba(10,10,10,0) 0%,
    rgba(10,10,10,0.15) 20%,
    rgba(10,10,10,0.45) 45%,
    rgba(10,10,10,0.75) 70%,
    rgba(10,10,10,1) 100%
  );
}
/* ========================================= */
/* CONTENT SIDE */
/* ========================================= */

.hero-content{
  position:relative;
  z-index:2;

  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  padding:8vw;

  background:#0a0a0a;
}

.hero-content p{
  color:rgba(255,255,255,0.55);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:3px;
  margin-bottom:18px;
}

.hero-content h1{
  font-size:clamp(58px,8vw,140px);
  line-height:0.9;
  letter-spacing:-5px;
  text-transform:uppercase;
  margin-bottom:36px;
}

/* ========================================= */
/* BUTTON */
/* ========================================= */

.view-more{
  padding:16px 28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);
  color:white;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:0.4s ease;
  cursor:pointer;
}

.view-more:hover{
  background:white;
  color:black;
}

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

@media(max-width:992px){

  .hero-split{
    display:block;
  }

  .hero-video-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .hero-video{
    width:100%;
    height:100%;
  }

  .video-fade{
    width:100%;
    height:100%;

    background:linear-gradient(
      to top,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.45) 35%,
      rgba(0,0,0,0) 75%
    );

    backdrop-filter:none;
  }

  .hero-content{
    position:absolute;
    right:0;
    top:0;

    width:100%;
    height:auto;

    padding:40px 30px 130px;

    background:none;

    justify-content:flex-end;
    align-items:flex-end;

    text-align:right;
  }

  .hero-content h1{
    font-size:clamp(58px,14vw,110px);
    margin-bottom:24px;
  }

  .hero-content p{
    margin-bottom:12px;
  }

}