/* ============================================================
   SoftwareDevCo — Start a Project Modal
   ============================================================ */


/* Prevent background scrolling while the modal is open */

body.project-modal-open {
  overflow: hidden;
}


/* ============================================================
   MODAL CONTAINER
   ============================================================ */

.project-modal {
  position: fixed;
  inset: 0;

  z-index: 8000;

  display: grid;
  place-items: center;

  padding:
    clamp(
      12px,
      2.5vh,
      28px
    );

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.45s ease,
    visibility 0.45s;
}


.project-modal.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


/* ============================================================
   BACKDROP
   ============================================================ */

.project-modal-backdrop {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(20, 20, 20, 0.9),
      rgba(0, 0, 0, 0.97) 72%
    );

  cursor: default;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/* ============================================================
   PANEL
   ============================================================ */

.project-modal-panel {
  position: relative;

  z-index: 1;

  width:
    min(
      1120px,
      calc(100vw - 56px)
    );

  max-height:
    calc(100vh - 56px);

  max-height:
    calc(100dvh - 56px);

  overflow-y: auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(255, 255, 255, 0.35)
    transparent;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    ),
    #070707;

  box-shadow:
    0 40px 120px
    rgba(0, 0, 0, 0.72);

  opacity: 0;

  transform:
    translateY(34px)
    scale(0.985);

  transition:
    opacity 0.5s ease,
    transform 0.65s
    cubic-bezier(0.16, 1, 0.3, 1);
}


.project-modal-panel::-webkit-scrollbar {
  width: 6px;
}


.project-modal-panel::-webkit-scrollbar-track {
  background:
    transparent;
}


.project-modal-panel::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.28);
}


.project-modal.is-open
.project-modal-panel {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* Subtle engineering grid inside the popup */

.project-modal-panel::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.12;

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

  background-size:
    25%
    50%;

  -webkit-mask-image:
    radial-gradient(
      ellipse at 50% 35%,
      black 20%,
      transparent 85%
    );

  mask-image:
    radial-gradient(
      ellipse at 50% 35%,
      black 20%,
      transparent 85%
    );
}


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

.project-modal-close {
  position: absolute;

  top:
    clamp(
      18px,
      2.5vh,
      26px
    );

  right:
    clamp(
      18px,
      2.5vh,
      26px
    );

  z-index: 4;

  width: 48px;
  height: 48px;

  border:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.025);

  cursor: pointer;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


.project-modal-close:hover {
  border-color:
    rgba(255, 255, 255, 0.42);

  background:
    rgba(255, 255, 255, 0.07);

  transform:
    rotate(4deg);
}


.project-modal-close span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 1px;

  background:
    #ffffff;
}


.project-modal-close span:first-child {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.project-modal-close span:last-child {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


/* ============================================================
   CONTENT
   ============================================================ */

.project-modal-content {
  position: relative;

  z-index: 2;

  padding:
    clamp(
      64px,
      8vh,
      82px
    )
    clamp(
      28px,
      5vw,
      72px
    )
    clamp(
      34px,
      5vh,
      54px
    );

  text-align: center;
}


.project-modal-eyebrow {
  margin-bottom:
    clamp(
      14px,
      2.2vh,
      24px
    );

  color:
    rgba(255, 255, 255, 0.42);

  font-family:
    "JetBrains Mono",
    "Courier New",
    monospace;

  font-size: 10px;
  letter-spacing: 4px;

  text-transform: uppercase;
}


.project-modal-title {
  max-width: 800px;

  margin: 0 auto;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  font-size:
    clamp(
      46px,
      min(7vw, 9vh),
      94px
    );

  font-weight: 600;

  line-height: 0.98;
  letter-spacing: -0.045em;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #c5c8cd 58%,
      #767a81 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;
}


.project-modal-description {
  max-width: 610px;

  margin:
    clamp(
      18px,
      3vh,
      30px
    )
    auto
    0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size:
    clamp(
      14px,
      1.4vw,
      17px
    );

  line-height: 1.65;
}


/* ============================================================
   OPTIONS
   ============================================================ */

.project-modal-options {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;

  margin-top:
    clamp(
      30px,
      5vh,
      52px
    );

  text-align: left;
}


.project-option {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  grid-template-rows:
    auto
    1fr;

  column-gap: 22px;

  row-gap:
    clamp(
      20px,
      3.5vh,
      34px
    );

  min-height:
    clamp(
      210px,
      27vh,
      290px
    );

  padding:
    clamp(
      22px,
      2.5vw,
      28px
    );

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  background:
    rgba(255, 255, 255, 0.025);

  color: #ffffff;

  text-decoration: none;

  transition:
    transform 0.4s
    cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.35s ease,
    background 0.35s ease;
}


.project-option::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.09),
      transparent 48%
    );

  transition:
    opacity 0.35s ease;
}


.project-option:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(255, 255, 255, 0.34);

  background:
    rgba(255, 255, 255, 0.055);
}


.project-option:hover::before {
  opacity: 1;
}


/* ============================================================
   OPTION ICON
   ============================================================ */

.project-option-icon {
  position: relative;

  z-index: 1;

  grid-column: 3;
  grid-row: 1;

  display: grid;
  place-items: center;

  width:
    clamp(
      42px,
      4vw,
      48px
    );

  height:
    clamp(
      42px,
      4vw,
      48px
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-radius:
    50%;
}


.project-option-icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   OPTION CONTENT
   ============================================================ */

.project-option-content {
  position: relative;

  z-index: 1;

  grid-column:
    1 / 3;

  grid-row: 2;

  align-self: end;

  display: flex;
  flex-direction: column;

  max-width: 350px;
}


.project-option-title {
  font-size:
    clamp(
      26px,
      2.4vw,
      32px
    );

  font-weight: 500;

  line-height: 1.05;
  letter-spacing: -0.03em;
}


.project-option-description {
  margin-top: 12px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size:
    clamp(
      12px,
      1.1vw,
      14px
    );

  line-height: 1.6;
}


/* ============================================================
   OPTION ARROW
   ============================================================ */

.project-option-arrow {
  position: relative;

  z-index: 1;

  grid-column: 3;
  grid-row: 2;

  align-self: end;
  justify-self: end;

  transition:
    transform 0.3s ease;
}


.project-option-arrow .arrow-icon {
  width: 24px;
  height: 24px;
}


.project-option:hover
.project-option-arrow {
  transform:
    translate(4px, -4px);
}


/* ============================================================
   DIRECT EMAIL
   ============================================================ */

.project-modal-email {
  display: flex;

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

  gap:
    12px
    22px;

  margin-top:
    clamp(
      22px,
      3.5vh,
      34px
    );

  color:
    rgba(255, 255, 255, 0.36);

  font-family:
    "JetBrains Mono",
    "Courier New",
    monospace;

  font-size: 10px;
  letter-spacing: 1.6px;

  text-transform: uppercase;
}


.project-modal-email a {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color:
    rgba(255, 255, 255, 0.72);

  text-decoration: none;

  transition:
    color 0.3s ease;
}


.project-modal-email a:hover {
  color:
    #ffffff;
}


.project-modal-email .arrow-icon {
  width: 15px;
  height: 15px;
}


/* ============================================================
   SHORTER DESKTOP AND LAPTOP SCREENS
   ============================================================ */

@media
  (min-width: 761px)
  and
  (max-height: 900px) {

  .project-modal {
    padding: 14px;
  }


  .project-modal-panel {
    width:
      min(
        1080px,
        calc(100vw - 32px)
      );

    max-height:
      calc(100dvh - 28px);
  }


  .project-modal-content {
    padding:
      54px
      48px
      30px;
  }


  .project-modal-close {
    top: 16px;
    right: 16px;

    width: 42px;
    height: 42px;
  }


  .project-modal-eyebrow {
    margin-bottom: 10px;
  }


  .project-modal-title {
    font-size:
      clamp(
        44px,
        7.5vh,
        68px
      );
  }


  .project-modal-description {
    max-width: 680px;

    margin-top: 14px;

    font-size: 14px;
    line-height: 1.55;
  }


  .project-modal-options {
    margin-top: 24px;
  }


  .project-option {
    min-height: 190px;

    padding: 22px;

    row-gap: 18px;
  }


  .project-option-icon {
    width: 42px;
    height: 42px;
  }


  .project-option-title {
    font-size: 26px;
  }


  .project-option-description {
    margin-top: 8px;

    font-size: 12px;
  }


  .project-modal-email {
    margin-top: 20px;
  }
}


/* ============================================================
   VERY SHORT DESKTOP SCREENS
   ============================================================ */

@media
  (min-width: 761px)
  and
  (max-height: 720px) {

  .project-modal-content {
    padding:
      42px
      42px
      22px;
  }


  .project-modal-eyebrow {
    display: none;
  }


  .project-modal-title {
    font-size:
      clamp(
        40px,
        7vh,
        54px
      );
  }


  .project-modal-description {
    margin-top: 10px;

    font-size: 13px;
  }


  .project-modal-options {
    margin-top: 18px;
  }


  .project-option {
    min-height: 160px;

    padding: 18px;
  }


  .project-option-title {
    font-size: 23px;
  }


  .project-option-description {
    font-size: 11px;
  }


  .project-modal-email {
    margin-top: 15px;

    font-size: 9px;
  }
}


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

@media (max-width: 760px) {

  .project-modal {
    align-items: stretch;

    padding:
      max(
        10px,
        env(safe-area-inset-top)
      )
      10px
      max(
        10px,
        env(safe-area-inset-bottom)
      );
  }


  .project-modal-panel {
    width: 100%;
    max-height: 100%;

    overflow-y: auto;

    -webkit-overflow-scrolling:
      touch;
  }


  .project-modal-close {
    top: 16px;
    right: 16px;

    width: 42px;
    height: 42px;
  }


  .project-modal-content {
    padding:
      76px
      18px
      28px;
  }


  .project-modal-eyebrow {
    margin-bottom: 12px;

    font-size: 8px;
    letter-spacing: 3px;
  }


  .project-modal-title {
    max-width: 330px;

    font-size:
      clamp(
        39px,
        11vw,
        50px
      );

    line-height: 1;
  }


  .project-modal-description {
    max-width: 340px;

    margin-top: 18px;

    font-size: 14px;
    line-height: 1.55;
  }


  .project-modal-options {
    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 28px;
  }


  .project-option {
    min-height: 180px;

    padding: 22px;

    row-gap: 14px;
  }


  .project-option-icon {
    width: 44px;
    height: 44px;
  }


  .project-option-title {
    font-size: 28px;
  }


  .project-option-description {
    max-width: 250px;

    margin-top: 8px;

    font-size: 13px;
  }


  .project-option-arrow .arrow-icon {
    width: 22px;
    height: 22px;
  }


  .project-modal-email {
    flex-direction: column;

    gap: 10px;

    margin-top: 24px;
    padding-bottom: 2px;

    font-size: 8px;
    letter-spacing: 1.3px;
  }


  .project-modal-email a {
    font-size: 9px;
  }
}


/* ============================================================
   SMALL MOBILE HEIGHT
   ============================================================ */

@media
  (max-width: 760px)
  and
  (max-height: 700px) {

  .project-modal-content {
    padding:
      62px
      16px
      22px;
  }


  .project-modal-eyebrow {
    display: none;
  }


  .project-modal-title {
    font-size:
      clamp(
        36px,
        9vw,
        44px
      );
  }


  .project-modal-description {
    margin-top: 12px;

    font-size: 12px;
  }


  .project-modal-options {
    margin-top: 18px;
  }


  .project-option {
    min-height: 148px;

    padding: 18px;
  }


  .project-option-title {
    font-size: 24px;
  }


  .project-option-description {
    font-size: 11px;
  }


  .project-modal-email {
    margin-top: 16px;
  }
}


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

@media
  (max-width: 900px)
  and
  (max-height: 500px)
  and
  (orientation: landscape) {

  .project-modal-content {
    padding:
      54px
      24px
      18px;
  }


  .project-modal-eyebrow,
  .project-modal-description,
  .project-modal-email {
    display: none;
  }


  .project-modal-title {
    font-size: 38px;
  }


  .project-modal-options {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    margin-top: 16px;
  }


  .project-option {
    min-height: 130px;

    padding: 16px;
  }


  .project-option-title {
    font-size: 22px;
  }


  .project-option-description {
    font-size: 10px;
  }
}


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

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

  .project-modal,
  .project-modal-panel,
  .project-modal-close,
  .project-option,
  .project-option::before,
  .project-option-arrow {
    transition: none;
  }
}