/* =========================================================
   TRYHARD — JOIN THE TEAM / CINEMATIC FINAL FRAME
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.join-section.join-final {
  position: relative;

  min-height: 680px;

  padding:
    32px
    clamp(22px, 4vw, 72px)
    55px;

  box-sizing: border-box;

  overflow: hidden;

  background-color: #020202;

  color: #f5f5f2;

  isolation: isolate;
}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.join-final-red-light {
  position: absolute;

  width: 720px;
  height: 480px;

  right: 2%;
  bottom: -160px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,23,23,.15) 0%,
      rgba(255,23,23,.055) 34%,
      transparent 70%
    );

  filter: blur(38px);

  pointer-events: none;

  z-index: 0;
}


.join-final-grid {
  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: .035;

  background-image:
    linear-gradient(
      rgba(255,255,255,.2) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.2) 1px,
      transparent 1px
    );

  background-size:
    100px 100px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 30%,
      black 75%,
      transparent
    );
}


/* =========================================================
   TOP
   ========================================================= */

.join-final-top {
  position: relative;

  z-index: 5;

  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-bottom: 22px;

  border-bottom:
    1px solid rgba(255,255,255,.16);
}


.join-final-index {
  display: flex;
  align-items: center;

  gap: 22px;
}


.join-final-number {
  font-family: Inter, sans-serif;

  font-size: 10px;
  font-weight: 900;

  color: #ff1717;

  letter-spacing: .05em;
}


.join-final-label {
  font-family: Inter, sans-serif;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .04em;

  color: #fff;
}


.join-final-location {
  font-family: Inter, sans-serif;

  font-size: 6px;
  font-weight: 700;

  line-height: 1.5;

  letter-spacing: .08em;

  text-align: right;

  color: rgba(255,255,255,.32);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.join-final-layout {
  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    minmax(420px, .92fr)
    minmax(480px, 1.08fr);

  gap:
    clamp(60px, 8vw, 150px);

  align-items: center;

  min-height: 540px;
}


/* =========================================================
   LEFT COPY
   ========================================================= */

.join-final-copy {
  align-self: center;

  padding-top: 24px;
}


.join-final-copy h2 {
  margin: 0;

  font-family: Anton, sans-serif;

  font-size:
    clamp(98px, 9vw, 170px);

  font-weight: 400;

  line-height: .72;

  letter-spacing: -.035em;

  text-transform: uppercase;

  color: #f4f4f1;
}


.join-final-copy h2 span {
  color: #ff1717;
}


.join-final-copy-bottom {
  width: min(420px, 100%);

  margin-top: 46px;
}


.join-final-copy-line {
  display: block;

  width: 100%;
  height: 1px;

  margin-bottom: 20px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.32),
      rgba(255,255,255,.05)
    );
}


.join-final-copy-bottom p {
  margin: 0;

  font-family: Inter, sans-serif;

  font-size: 9px;
  font-weight: 500;

  line-height: 1.55;

  color: rgba(255,255,255,.72);
}


/* =========================================================
   RIGHT STAGE
   ========================================================= */

.join-final-stage {
  position: relative;

  min-height: 470px;

  display: flex;
  align-items: center;
  justify-content: center;

  perspective: 1500px;

  transform-style: preserve-3d;
}


/* =========================================================
   GHOST LOGO
   ========================================================= */

.join-final-ghost {
  position: absolute;

  width:
    clamp(330px, 31vw, 560px);

  right: 2%;
  top: 4%;

  opacity: .035;

  pointer-events: none;

  transform:
    translateZ(-100px)
    rotate(-4deg);
}


.join-final-ghost img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
   FLOOR LIGHT
   ========================================================= */

.join-final-floor-light {
  position: absolute;

  width: 68%;
  height: 90px;

  bottom: 40px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,23,23,.28),
      rgba(255,23,23,.06) 42%,
      transparent 72%
    );

  filter: blur(25px);

  transform:
    rotateX(76deg)
    translateZ(-40px);

  pointer-events: none;
}


/* =========================================================
   3D CARD
   ========================================================= */

.join-final-card {
  position: relative;

  z-index: 5;

  width:
    min(520px, 92%);

  min-height: 315px;

  display: flex;
  flex-direction: column;

  padding:
    26px
    28px
    24px;

  box-sizing: border-box;

  text-decoration: none;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #171719 0%,
      #09090b 46%,
      #030303 100%
    );

  border:
    1px solid rgba(255,255,255,.18);

  box-shadow:
    0 40px 90px rgba(0,0,0,.72),
    13px 13px 0 rgba(76,0,5,.92),
    17px 20px 45px rgba(255,23,23,.09),
    inset 0 1px rgba(255,255,255,.09);

  transform:
    rotateY(-7deg)
    rotateX(2deg)
    translate3d(0,0,22px);

  transform-style: preserve-3d;

  transition:
    transform .9s cubic-bezier(.16,1,.3,1),
    border-color .9s cubic-bezier(.16,1,.3,1),
    box-shadow .9s cubic-bezier(.16,1,.3,1);

  animation:
    joinCardFloat
    8s
    cubic-bezier(.16,1,.3,1)
    infinite;
}


/* RED PHYSICAL SIDE */

.join-final-card-edge {
  position: absolute;

  top: 12px;
  right: -9px;
  bottom: -8px;

  width: 9px;

  background:
    linear-gradient(
      to bottom,
      #ff1717,
      #940008 40%,
      #370003
    );

  transform:
    rotateY(35deg);

  transform-origin: left center;

  pointer-events: none;

  box-shadow:
    5px 0 16px rgba(255,23,23,.12);
}


/* WHITE TOP HIGHLIGHT */

.join-final-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 7%;
  right: 7%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.6),
      transparent
    );

  opacity: .5;
}


/* RED BOTTOM DETAIL */

.join-final-card::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 34%;
  height: 2px;

  background: #ff1717;

  box-shadow:
    0 0 18px rgba(255,23,23,.4);

  transition:
    width .9s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   CARD TOP
   ========================================================= */

.join-final-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 19px;

  border-bottom:
    1px solid rgba(255,255,255,.11);

  font-family: Inter, sans-serif;

  font-size: 6px;
  font-weight: 800;

  letter-spacing: .16em;

  color: rgba(255,255,255,.34);
}


/* =========================================================
   CARD MAIN
   ========================================================= */

.join-final-card-main {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    30px 0 26px;
}


.join-final-card-kicker {
  margin-bottom: 13px;

  font-family: Inter, sans-serif;

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .18em;

  color: #ff1717;
}


.join-final-card-main strong {
  font-family: Anton, sans-serif;

  font-size:
    clamp(44px, 4vw, 70px);

  font-weight: 400;

  line-height: .84;

  letter-spacing: -.025em;

  color: #f6f6f3;
}


.join-final-card-main strong span {
  color: #ff1717;
}


/* =========================================================
   META
   ========================================================= */

.join-final-card-meta {
  display: flex;

  gap: 22px;

  padding-bottom: 18px;

  font-family: Inter, sans-serif;

  font-size: 6px;
  font-weight: 800;

  letter-spacing: .14em;

  color: rgba(255,255,255,.34);
}


.join-final-card-meta span {
  position: relative;
}


.join-final-card-meta span:not(:last-child)::after {
  content: "/";

  position: absolute;

  right: -13px;

  color: rgba(255,23,23,.75);
}


/* =========================================================
   CTA FOOTER
   ========================================================= */

.join-final-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: 17px;

  border-top:
    1px solid rgba(255,255,255,.14);

  font-family: Inter, sans-serif;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .03em;
}


.join-final-arrow {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  background: #ff1717;

  color: #fff;

  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    background .7s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .join-final-card:hover {
    transform:
      rotateY(-3deg)
      rotateX(1deg)
      translate3d(-5px,-5px,42px);

    border-color:
      rgba(255,23,23,.7);

    box-shadow:
      0 48px 100px rgba(0,0,0,.8),
      10px 12px 0 rgba(110,0,7,.95),
      18px 22px 55px rgba(255,23,23,.15),
      inset 0 1px rgba(255,255,255,.12);

    animation-play-state: paused;
  }


  .join-final-card:hover::after {
    width: 100%;
  }


  .join-final-card:hover
  .join-final-arrow {
    transform:
      translate3d(3px,-3px,0);

    background: #fff;

    color: #050505;
  }

}


/* =========================================================
   FLOAT
   ========================================================= */

@keyframes joinCardFloat {

  0%,
  100% {
    transform:
      rotateY(-7deg)
      rotateX(2deg)
      translate3d(0,0,22px);
  }

  50% {
    transform:
      rotateY(-6deg)
      rotateX(1.5deg)
      translate3d(0,-6px,28px);
  }

}


/* =========================================================
   TECH META
   ========================================================= */

.join-final-stage-meta {
  position: absolute;

  left: 8%;
  right: 8%;
  bottom: 3px;

  display: flex;
  justify-content: space-between;

  font-family: Inter, sans-serif;

  font-size: 6px;
  font-weight: 800;

  letter-spacing: .15em;

  color: rgba(255,255,255,.18);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .join-section.join-final {
    min-height: auto;

    padding-bottom: 70px;
  }


  .join-final-layout {
    grid-template-columns:
      minmax(330px, .8fr)
      minmax(400px, 1fr);

    gap: 40px;
  }


  .join-final-copy h2 {
    font-size:
      clamp(82px, 10vw, 125px);
  }


  .join-final-card {
    width: 95%;
  }

}


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

@media (max-width: 760px) {

  .join-section.join-final {
    padding:
      25px
      18px
      62px;

    min-height: auto;
  }


  .join-final-top {
    padding-bottom: 17px;
  }


  .join-final-index {
    gap: 12px;
  }


  .join-final-location {
    font-size: 5px;
  }


  .join-final-layout {
    display: block;

    min-height: 0;
  }


  .join-final-copy {
    padding-top: 42px;
  }


  .join-final-copy h2 {
    font-size:
      clamp(72px, 23vw, 112px);

    line-height: .73;
  }


  .join-final-copy-bottom {
    margin-top: 32px;

    width: 100%;
  }


  .join-final-copy-bottom p {
    font-size: 8px;

    max-width: 320px;
  }


  .join-final-stage {
    min-height: 430px;

    margin-top: 35px;
  }


  .join-final-ghost {
    width: 75%;

    right: 5%;
  }


  .join-final-card {
    width: 94%;

    min-height: 300px;

    padding:
      22px
      20px
      20px;

    transform:
      rotateY(-3deg)
      rotateX(1deg);

    animation: none;
  }


  .join-final-card-main strong {
    font-size:
      clamp(45px, 14vw, 64px);
  }


  .join-final-card-meta {
    gap: 17px;

    font-size: 5px;
  }


  .join-final-card-meta span:not(:last-child)::after {
    right: -10px;
  }


  .join-final-stage-meta {
    left: 5%;
    right: 5%;

    font-size: 5px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .join-final-card {
    animation: none;
  }

}