---

<div class="modal" id="authModal">

  <div class="modal__overlay"></div>

  <div class="modal__window">

    <button class="modal__close">&times;</button>

    <div class="modal__left">
      <p class="section-label">Добро пожаловать</p>

      <h2>Вход в систему</h2>

      <p>
        Авторизуйтесь, чтобы приобрести билеты,
        сохранять избранные выставки и управлять посещениями.
      </p>
    </div>

    <div class="modal__right">

      <form class="auth-form">

        <div class="form-group">
          <label>Email</label>
          <input type="email" placeholder="example@mail.com">
        </div>

        <div class="form-group">
          <label>Пароль</label>
          <input type="password" placeholder="••••••••">
        </div>

        <button type="submit" class="btn auth-btn">
          Войти
        </button>

        <div class="auth-divider">
          <span>или</span>
        </div>

        <button type="button" class="google-btn">
          Войти через Google
        </button>

        <p class="auth-bottom">
          Нет аккаунта?
          <a href="#">Зарегистрироваться</a>
        </p>

      </form>

    </div>

  </div>
</div>

/* MODAL */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.modal__window {
  position: relative;
  z-index: 2;

  width: min(960px, calc(100% - 32px));
  min-height: 580px;

  display: grid;
  grid-template-columns: 1fr 1fr;

  overflow: hidden;
  border-radius: 12px;

  background:
    linear-gradient(135deg, rgba(20,88,255,0.15), rgba(131,56,236,0.12)),
    #0e1118;

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

  box-shadow:
    0 40px 100px rgba(0,0,0,0.55);
}

.modal__left {
  padding: 70px 60px;

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

  background:
    linear-gradient(
      180deg,
      rgba(58,134,255,0.15),
      rgba(0,0,0,0)
    );
}

.modal__left h2 {
  margin-bottom: 24px;

  font-family: Georgia, serif;
  font-size: 46px;
  font-weight: 400;
}

.modal__left p:not(.section-label) {
  max-width: 420px;

  color: var(--text-secondary);
  line-height: 1.7;
}

.modal__right {
  padding: 70px 60px;

  display: flex;
  align-items: center;
}

.auth-form {
  width: 100%;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;

  color: #d5d8e3;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  height: 58px;

  padding: 0 18px;

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

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;

  color: white;
  font-size: 15px;

  transition: 0.2s;
}

.form-group input:focus {
  outline: none;

  border-color: rgba(58,134,255,0.8);

  box-shadow:
    0 0 0 4px rgba(58,134,255,0.12);
}

.auth-btn {
  width: 100%;
  margin-top: 12px;
}

.auth-divider {
  position: relative;

  margin: 30px 0;

  text-align: center;
}

.auth-divider::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;

  width: 100%;
  height: 1px;

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

.auth-divider span {
  position: relative;

  padding: 0 16px;

  background: #0e1118;

  color: #7f8699;
  font-size: 14px;
}

.google-btn {
  width: 100%;
  height: 56px;

  background: transparent;

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;

  color: white;
  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  transition: 0.2s;
}

.google-btn:hover {
  background: rgba(255,255,255,0.04);
}

.auth-bottom {
  margin-top: 26px;

  color: #9aa2b5;
  text-align: center;
  font-size: 14px;
}

.auth-bottom a {
  color: var(--accent-blue);
  font-weight: 700;
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 18px;

  width: 42px;
  height: 42px;

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

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;

  color: white;
  font-size: 28px;

  cursor: pointer;

  z-index: 5;
}

body.modal-open {
  overflow: hidden;
}

/* MODAL ADAPTIVE */

@media (max-width: 820px) {
  .modal__window {
    grid-template-columns: 1fr;
  }

  .modal__left {
    padding: 50px 36px 20px;
  }

  .modal__right {
    padding: 20px 36px 50px;
  }
}

@media (max-width: 620px) {
  .modal__left h2 {
    font-size: 36px;
  }

  .modal__left,
  .modal__right {
    padding-left: 24px;
    padding-right: 24px;
  }
}

const modal = document.querySelector('#authModal');
const openModalBtn = document.querySelector('.open-modal');
const closeModalBtn = document.querySelector('.modal__close');
const modalOverlay = document.querySelector('.modal__overlay');

function openModal() {
  modal.classList.add('active');
  document.body.classList.add('modal-open');
}

function closeModal() {
  modal.classList.remove('active');
  document.body.classList.remove('modal-open');
}

openModalBtn?.addEventListener('click', openModal);

closeModalBtn?.addEventListener('click', closeModal);

modalOverlay?.addEventListener('click', closeModal);

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});