/* ==========================================================================
   blind digital — telas de acesso
   ========================================================================== */

body.is-auth { min-height: 100dvh; }

.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
}
@media (max-width: 880px) { .auth { grid-template-columns: 1fr; } }

.auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 72px);
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
}
.auth__logo { margin-bottom: clamp(32px, 5vw, 52px); }
.auth__logo img { height: 36px; width: auto; }

.auth__panel h1 { font-size: var(--t-xl); margin-bottom: 10px; }
.auth__lede { color: var(--ink-2); margin-bottom: 30px; }
.auth__panel form { margin-bottom: 24px; }

.auth__alt {
  display: flex;
  gap: 10px;
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.auth__alt a { color: var(--b1); }
.auth__alt a:hover { text-decoration: underline; }

/* --- lateral ------------------------------------------------------------ */
.auth__aside {
  position: relative;
  display: grid;
  place-content: center;
  gap: 34px;
  padding: 48px;
  background: var(--paper-2);
  border-left: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 880px) { .auth__aside { display: none; } }

.auth__aside::before {
  content: '';
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
          mask-image: radial-gradient(closest-side, #000, transparent);
}
.auth__mark { position: relative; width: min(260px, 40vw); margin-inline: auto; }
.auth__mark .arc { transform-box: fill-box; transform-origin: center; animation: floatArc 7s var(--ease) infinite; }
.auth__mark .arc[data-arc="2"] { animation-delay: .5s; }
.auth__mark .arc[data-arc="3"] { animation-delay: 1s; }
@keyframes floatArc {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px) scale(1.02); }
}

.auth__quote {
  position: relative;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.04em;
  max-width: 16ch;
  margin-inline: auto;
}
.auth__quote span { font-weight: 400; color: var(--ink-2); }