/* =========================================================
   LIFE MEDIA — CONTACT
   Cinematic closing section
   ========================================================= */

.contact-section{
  position:relative;
  min-height:800px;
  padding:125px 6% 38px;
  background:
    radial-gradient(circle at 18% 42%,rgba(255,8,125,.075),transparent 32%),
    radial-gradient(circle at 86% 60%,rgba(0,210,255,.06),transparent 30%),
    #050609;
  overflow:hidden;
}

.contact-section::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,8,125,.45),
    rgba(255,255,255,.12),
    rgba(0,210,255,.45),
    transparent
  );
}

.contact-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(70px);
}

.contact-glow-pink{
  width:430px;
  height:430px;
  left:-180px;
  top:20%;
  background:rgba(255,8,125,.075);
}

.contact-glow-cyan{
  width:420px;
  height:420px;
  right:-170px;
  bottom:12%;
  background:rgba(0,210,255,.055);
}

.contact-inner{
  position:relative;
  z-index:2;
  max-width:1480px;
  min-height:650px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:110px;
  align-items:center;
  direction:ltr;
}


/* =========================================================
   INTRO
   ========================================================= */

.contact-intro{
  direction:rtl;
  text-align:right;
  max-width:680px;

  opacity:0;
  transform:translateY(34px);

  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.2,.7,.2,1);
}

.contact-section.is-visible .contact-intro{
  opacity:1;
  transform:translateY(0);
}

.contact-eyebrow{
  position:relative;
  display:inline-block;
  padding-left:50px;
  margin-bottom:25px;

  color:rgba(255,255,255,.48);
  font-size:13px;
  font-weight:800;
  letter-spacing:.24em;
  direction:ltr;
}

.contact-eyebrow::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:35px;
  height:2px;
  transform:translateY(-50%);

  background:#ff087d;
  box-shadow:0 0 14px rgba(255,8,125,.55);
}

.contact-intro h2{
  margin:0;
  color:#fff;

  font-size:clamp(58px,6.6vw,98px);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.055em;
}

.contact-intro h2 span{
  display:block;
  margin-top:16px;
  color:#ff087d;
}

.contact-intro p{
  max-width:560px;
  margin:34px 0 0;

  color:rgba(255,255,255,.43);
  font-size:15px;
  line-height:1.95;
}

.contact-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;

  margin-top:38px;

  direction:ltr;
}

.contact-meta a{
  color:rgba(255,255,255,.68);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.04em;

  transition:
    color .3s ease,
    text-shadow .3s ease;
}

.contact-meta a:hover{
  color:#fff;
  text-shadow:0 0 15px rgba(255,8,125,.4);
}

.contact-meta span{
  color:rgba(255,255,255,.18);
}


/* =========================================================
   FORM
   ========================================================= */

.contact-form-wrap{
  position:relative;
  direction:rtl;

  opacity:0;
  transform:translateY(38px);

  transition:
    opacity .9s ease .15s,
    transform 1s cubic-bezier(.2,.7,.2,1) .15s;
}

.contact-section.is-visible .contact-form-wrap{
  opacity:1;
  transform:translateY(0);
}

.contact-form{
  position:relative;
  padding:30px 0 0;
}

.contact-form-line{
  position:absolute;
  right:0;
  top:0;
  width:100%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,8,125,.7),
      rgba(255,255,255,.14),
      rgba(0,210,255,.45)
    );

  background-size:200% 100%;

  animation:contactLine 7s linear infinite;
}

@keyframes contactLine{
  from{background-position:100% 0}
  to{background-position:-100% 0}
}

.contact-field{
  position:relative;
  margin-bottom:25px;
}

.contact-field label{
  display:block;
  margin-bottom:9px;

  color:rgba(255,255,255,.38);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;

  transition:color .3s ease;
}

.contact-field:focus-within label{
  color:#ff087d;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%;
  box-sizing:border-box;

  padding:12px 0;

  border:0;
  border-bottom:1px solid rgba(255,255,255,.13);
  outline:none;

  background:transparent;

  color:#fff;
  font-family:inherit;
  font-size:14px;

  border-radius:0;

  transition:
    border-color .35s ease,
    box-shadow .35s ease;
}

.contact-field textarea{
  min-height:92px;
  resize:vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color:rgba(255,255,255,.2);
}

.contact-field select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  color:rgba(255,255,255,.58);
}

.contact-field select option{
  background:#090a0e;
  color:#fff;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  border-bottom-color:#ff087d;
  box-shadow:0 4px 18px -14px rgba(255,8,125,.7);
}


/* =========================================================
   SUBMIT
   ========================================================= */

.contact-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-width: 190px;
    height: 64px;
    padding: 6px 7px 6px 24px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;

    background: rgba(255,255,255,.035);
    color: #fff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
    overflow: hidden;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.contact-submit i {
    position: relative;
    z-index: 2;

    width: 50px;
    height: 50px;

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

    border-radius: 50%;

    background: #fff;
    color: #111;

    font-size: 23px;
    font-style: normal;
    line-height: 1;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        background .35s ease,
        color .35s ease;
}

.contact-submit::before {
    content: "";
    position: absolute;
    z-index: 0;

    width: 90px;
    height: 90px;

    right: -20px;
    top: 50%;
    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,0,150,.75) 0%,
            rgba(0,220,255,.45) 35%,
            transparent 70%
        );

    filter: blur(18px);

    opacity: .35;

    transition:
        transform .5s ease,
        opacity .4s ease;
}

.contact-submit span {
    position: relative;
    z-index: 2;
    white-space: nowrap;

    transition: transform .35s ease;
}

.contact-submit:hover {
    transform: translateY(-3px);

    border-color: rgba(255,255,255,.55);

    background: rgba(255,255,255,.08);

    box-shadow:
        0 10px 35px rgba(0,0,0,.25),
        0 0 30px rgba(255,0,150,.12),
        0 0 45px rgba(0,220,255,.08);
}

.contact-submit:hover i {
    transform: rotate(45deg) scale(1.08);

    background: #fff;
    color: #000;
}

.contact-submit:hover::before {
    opacity: .8;
    transform: translateY(-50%) scale(1.7);
}

.contact-submit:hover span {
    transform: translateX(-3px);
}

.contact-submit::after {
    content: "";
    position: absolute;
    z-index: 1;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition: left .7s ease;
}

.contact-submit:hover::after {
    left: 130%;
}

.contact-submit:hover i{
  transform:rotate(-45deg);
  background:#ff087d;
  border-color:#ff087d;
  box-shadow:
    0 0 22px rgba(255,8,125,.25),
    0 0 45px rgba(255,8,125,.08);
}

.contact-status{
  min-height:20px;
  margin-top:17px;
  color:rgba(255,255,255,.45);
  font-size:12px;
}


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

.contact-footer{
  position:absolute;
  left:6%;
  right:6%;
  bottom:28px;

  padding-top:18px;

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

  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;

  color:rgba(255,255,255,.25);

  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;

  direction:ltr;
}

.contact-footer-brand{
  color:rgba(255,255,255,.55);
}

.contact-footer-copy{
  text-align:center;
}

.contact-footer-year{
  text-align:right;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  .contact-section{
    min-height:auto;
    padding:100px 7% 120px;
  }

  .contact-inner{
    grid-template-columns:1fr;
    gap:70px;
    min-height:auto;
  }

  .contact-intro{
    max-width:760px;
  }

  .contact-intro h2{
    font-size:clamp(55px,9vw,85px);
  }

  .contact-form-wrap{
    max-width:720px;
    width:100%;
  }

  .contact-footer{
    bottom:25px;
  }
}


@media(max-width:600px){

  .contact-section{
    padding:75px 6% 115px;
  }

  .contact-intro h2{
    font-size:clamp(45px,13vw,68px);
  }

  .contact-intro p{
    font-size:14px;
  }

  .contact-meta{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }

  .contact-meta span{
    display:none;
  }

  .contact-footer{
    left:6%;
    right:6%;
    grid-template-columns:1fr 1fr;
  }

  .contact-footer-copy{
    display:none;
  }

  .contact-footer-year{
    text-align:right;
  }
}


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

  .contact-form-line{
    animation:none;
  }

  .contact-intro,
  .contact-form-wrap,
  .contact-submit i,
  .contact-field label,
  .contact-field input,
  .contact-field select,
  .contact-field textarea{
    transition:none;
  }
}