/* =========================================================
   PORTFOLIO CONNECTION MODAL
========================================================= */


button {
  font: inherit;
}


body.modal-open {
  overflow: hidden;
}


.connect-trigger {
  cursor: pointer;
}



/* =========================================================
   OVERLAY
========================================================= */

.connect-overlay {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: grid;

  place-items: center;

  padding: 22px;


  background:

    rgba(
      0,
      4,
      9,
      .72
    );


  backdrop-filter:
    blur(18px);


  opacity: 0;

  visibility: hidden;


  transition:

    opacity .3s ease,
    visibility .3s ease;

}



.connect-overlay.active {

  opacity: 1;

  visibility: visible;

}



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

.connect-modal {

  width:
    min(
      520px,
      100%
    );


  position:
    relative;


  overflow:
    hidden;


  padding:
    38px;


  border:

    1px solid
    rgba(
      190,
      225,
      255,
      .2
    );


  border-radius:
    26px;


  background:

    radial-gradient(
      circle at 50% -15%,
      rgba(
        113,
        183,
        255,
        .22
      ),
      transparent 42%
    ),

    linear-gradient(
      145deg,
      rgba(
        10,
        18,
        29,
        .96
      ),
      rgba(
        3,
        8,
        14,
        .94
      )
    );


  box-shadow:

    0 28px 100px
    rgba(
      0,
      0,
      0,
      .55
    ),

    0 0 65px
    rgba(
      90,
      155,
      255,
      .1
    ),

    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      .08
    );


  transform:

    translateY(18px)
    scale(.985);


  transition:
    transform .32s ease;

}



.connect-overlay.active
.connect-modal {

  transform:

    translateY(0)
    scale(1);

}



/* =========================================================
   ROTATING SPACE GLOW
========================================================= */

.connect-modal::before {

  content: "";

  position:
    absolute;

  inset:
    -50%;

  pointer-events:
    none;


  background:

    conic-gradient(

      from 0deg,

      transparent,

      rgba(
        145,
        207,
        255,
        .08
      ),

      transparent 30%

    );


  animation:

    connectGlow
    10s
    linear
    infinite;

}


@keyframes connectGlow {

  to {

    transform:
      rotate(360deg);

  }

}



.connect-modal > * {

  position:
    relative;

  z-index:
    1;

}



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

.connect-close {

  position:
    absolute;

  top:
    17px;

  right:
    19px;


  z-index:
    3;


  width:
    36px;

  height:
    36px;


  border:

    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );


  border-radius:
    50%;


  background:

    rgba(
      255,
      255,
      255,
      .04
    );


  color:
    white;


  cursor:
    pointer;


  font-size:
    22px;

}



/* =========================================================
   STAR
========================================================= */

.connect-star {

  margin-bottom:
    10px;


  font-size:
    28px;


  color:
    #dceeff;


  text-shadow:

    0 0 15px
    rgba(
      187,
      224,
      255,
      .95
    ),

    0 0 40px
    rgba(
      91,
      163,
      255,
      .55
    );

}



/* =========================================================
   TITLE
========================================================= */

.connect-modal h2 {

  margin:
    0;


  font-size:

    clamp(
      38px,
      7vw,
      62px
    );


  line-height:
    1;


  letter-spacing:
    -.055em;


  font-weight:
    450;

}



.connect-subtitle {

  margin:

    14px
    0
    28px;


  color:
    #9daab7;


  line-height:
    1.6;

}



/* =========================================================
   LABEL
========================================================= */

.connect-label {

  display:
    block;


  margin:

    16px
    0
    8px;


  color:
    #9eacb9;


  font-size:
    11px;


  letter-spacing:
    .16em;


  text-transform:
    uppercase;

}



/* =========================================================
   INPUT
========================================================= */

.connect-input {

  width:
    100%;


  box-sizing:
    border-box;


  height:
    50px;


  padding:

    0
    15px;


  border:

    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );


  border-radius:
    13px;


  outline:
    none;


  color:
    white;


  background:

    rgba(
      255,
      255,
      255,
      .045
    );


  transition:

    border-color .2s,
    box-shadow .2s,
    background .2s;

}



.connect-input:focus {

  border-color:

    rgba(
      157,
      210,
      255,
      .55
    );


  background:

    rgba(
      255,
      255,
      255,
      .06
    );


  box-shadow:

    0 0 0 4px
    rgba(
      95,
      165,
      255,
      .07
    ),

    0 0 25px
    rgba(
      95,
      165,
      255,
      .08
    );

}



.connect-input[readonly] {

  opacity:
    .72;

}



/* =========================================================
   EMAIL ROW
========================================================= */

.connect-email-row {

  display:
    grid;


  grid-template-columns:

    1fr
    auto;


  gap:
    9px;

}



/* =========================================================
   BUTTONS
========================================================= */

.connect-small-button,
.connect-verify-button {

  border:
    0;


  border-radius:
    13px;


  cursor:
    pointer;


  font-weight:
    700;


  transition:

    transform .2s,
    opacity .2s,
    box-shadow .2s;

}



.connect-small-button {

  padding:

    0
    18px;


  background:
    #eef7ff;


  color:
    #02070c;

}



.connect-verify-button {

  width:
    100%;


  min-height:
    52px;


  margin-top:
    13px;


  background:

    linear-gradient(
      90deg,
      #eef8ff,
      #b9ddff
    );


  color:
    #02070c;

}



.connect-small-button:hover:not(:disabled),
.connect-verify-button:hover:not(:disabled) {

  transform:
    translateY(-2px);


  box-shadow:

    0 9px 26px
    rgba(
      147,
      204,
      255,
      .18
    );

}



.connect-small-button:disabled,
.connect-verify-button:disabled {

  cursor:
    not-allowed;


  opacity:
    .55;

}



/* =========================================================
   TURNSTILE
========================================================= */

.turnstile-wrap {

  margin-top:
    16px;


  min-height:
    65px;

}



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

.otp-step {

  display:
    grid;


  grid-template-rows:
    0fr;


  opacity:
    0;


  visibility:
    hidden;


  overflow:
    hidden;


  max-height:
    0;


  transition:

    opacity .35s ease,
    max-height .45s ease,
    visibility .35s ease;

}



.otp-step.visible {

  grid-template-rows:
    1fr;


  opacity:
    1;


  visibility:
    visible;


  max-height:
    350px;

}



/* =========================================================
   OTP INPUT
========================================================= */

.otp-input {

  text-align:
    center;


  font-size:
    22px;


  font-weight:
    700;


  letter-spacing:
    .35em;

}



/* =========================================================
   STATUS MESSAGE
========================================================= */

.connect-status {

  min-height:
    22px;


  margin:

    18px
    0
    0;


  font-size:
    13px;


  line-height:
    1.5;

}



.connect-status.success {

  color:
    #91f0b6;

}



.connect-status.error {

  color:
    #ff9c9c;

}



/* =========================================================
   SUCCESS
========================================================= */

#connectForm.verified {

  opacity:
    .45;


  pointer-events:
    none;


  filter:
    blur(.5px);

}



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

@media
(max-width: 600px) {


  .connect-modal {

    padding:

      30px
      20px
      24px;

  }


  .connect-email-row {

    grid-template-columns:
      1fr;

  }


  .connect-small-button {

    min-height:
      46px;

  }

}