/* Sign-in page: the drawing panel on the left, the form on the right. Below
   820px the drawing becomes a band across the top with the form card resting
   over its lower edge.

   The drawing sits on the same paper as the sign-up panel: cream with rust
   in Machine Shop, slate with light blue in Clean Lab. Its loops (driving,
   the lift's scoring cycle, the drifting parts) run on the Full tier only,
   like the site's other decorative motion; the dimensions draw in once on
   every tier. Nothing moves under reduced motion. */

.auth--login {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
  width: 100%;
  min-height: calc(100dvh - 5.5rem);
  align-items: stretch;
  background: var(--bg);
}

.auth--login .auth__form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  grid-column: 2;
  grid-row: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
}

.auth--login .auth__panel {
  position: relative;
  display: flex;
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.5rem);
  color: var(--paper-ink);
  background: var(--paper);
}

/* The drafting grid, on its own layer so the drift is a composited
   transform and not a repaint of the whole panel. */
.auth--login .auth__panel::before {
  content: "";
  position: absolute;
  inset: 0 -22px 0 0;
  background: var(--nb-grid);
  pointer-events: none;
}

.auth-scene__caption {
  position: relative;
  max-width: 22ch;
  margin: 0;
  color: var(--paper-ink);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.1;
}

.auth-scene {
  position: relative;
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
  color: var(--paper-ink);
  fill: var(--paper);
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-scene text {
  fill: var(--paper-dim);
  stroke: none;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}

.auth-scene__fine { stroke-width: 1.25; }
.auth-scene__parts { color: var(--paper-dim); opacity: .7; }
.auth-scene__teeth { stroke-width: 7; stroke-dasharray: 5 4.2; }
.auth-scene__box { fill: none; stroke: var(--paper-dim); stroke-width: 1.25; stroke-dasharray: 6 6; }
.auth-scene__dim { fill: none; stroke: var(--note); stroke-width: 1.25; }
.auth-scene__dims text { fill: var(--note); }
.auth-scene__track { stroke-width: 1.5; stroke-dasharray: 18 14; }
.auth-scene__ball { fill: var(--note); stroke: none; }
.auth-scene__led { fill: var(--note); stroke: none; }
.auth-scene__jaw { fill: none; stroke-width: 3; }
.auth-scene__title { stroke-width: 1.25; }
.auth-scene__title rect { fill: none; }
.auth-scene__title text { font-size: 8.5px; }
.auth-scene__title .auth-scene__title-name { fill: var(--paper-ink); font-weight: 800; }

/* Rotating parts turn about their own centre; the jaws hinge on their pin. */
.auth-scene__wheel,
.auth-scene__roller,
.auth-scene__spin { transform-box: fill-box; transform-origin: center; }
.auth-scene__jaw { transform-box: view-box; }
.auth-scene__jaw--top { transform-origin: 474px 114px; }
.auth-scene__jaw--bottom { transform-origin: 474px 120px; }
.auth-scene__float { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .auth-scene__dim {
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    animation: auth-scene-draw 1.1s var(--ease-out) .25s forwards;
  }
  .auth-scene__dims text {
    opacity: 0;
    animation: auth-scene-fade .5s var(--ease) 1.1s forwards;
  }

  /* Driving right: the ground and grid run left, the wheels and the track
     move at the same surface speed (2 * pi * 34 / 3s = 32 / .45s). */
  :root[data-perf="high"] .auth--login .auth__panel::before { animation: auth-scene-grid 1.4s linear infinite; }
  :root[data-perf="high"] .auth-scene__track { animation: auth-scene-track .45s linear infinite; }
  :root[data-perf="high"] .auth-scene__wheel { animation: auth-scene-turn 3s linear infinite; }
  :root[data-perf="high"] .auth-scene__roller { animation: auth-scene-turn .9s linear infinite reverse; }
  :root[data-perf="high"] .auth-scene__body { animation: auth-scene-bob .5s ease-in-out infinite alternate; }
  :root[data-perf="high"] .auth-scene__led { animation: auth-scene-blink 1.6s steps(1) infinite; }

  /* The scoring cycle: lift up, open the claw, the ball leaves, lift down,
     pick up the next one. All four share one 6.5s clock. */
  :root[data-perf="high"] .auth-scene__lift { animation: auth-scene-lift 6.5s infinite; }
  :root[data-perf="high"] .auth-scene__jaw--top { animation: auth-scene-jaw-top 6.5s infinite; }
  :root[data-perf="high"] .auth-scene__jaw--bottom { animation: auth-scene-jaw-bottom 6.5s infinite; }
  :root[data-perf="high"] .auth-scene__ball { animation: auth-scene-score 6.5s infinite; }

  :root[data-perf="high"] .auth-scene__spin { animation: auth-scene-turn 22s linear infinite; }
  :root[data-perf="high"] .auth-scene__float--a { animation: auth-scene-drift 8s ease-in-out infinite alternate; }
  :root[data-perf="high"] .auth-scene__float--b { animation: auth-scene-drift 9.5s ease-in-out -3s infinite alternate; }
  :root[data-perf="high"] .auth-scene__float--c { animation: auth-scene-drift 7s ease-in-out -5s infinite alternate; }
  :root[data-perf="high"] .auth-scene__float--d { animation: auth-scene-drift 10.5s ease-in-out -1s infinite alternate; }
}

@keyframes auth-scene-draw { to { stroke-dashoffset: 0; } }
@keyframes auth-scene-fade { to { opacity: 1; } }
@keyframes auth-scene-grid { to { transform: translateX(-22px); } }
@keyframes auth-scene-track { to { stroke-dashoffset: 32; } }
@keyframes auth-scene-turn { to { transform: rotate(360deg); } }
@keyframes auth-scene-bob { to { transform: translateY(1.5px); } }
@keyframes auth-scene-blink { 50% { opacity: .2; } }
@keyframes auth-scene-drift {
  from { transform: translateY(-6px) rotate(-4deg); }
  to   { transform: translateY(7px) rotate(5deg); }
}
@keyframes auth-scene-lift {
  0%, 12%  { transform: translateY(0); animation-timing-function: var(--ease); }
  44%, 62% { transform: translateY(-84px); animation-timing-function: var(--ease); }
  90%, 100% { transform: translateY(0); }
}
@keyframes auth-scene-jaw-top {
  0%, 46%, 64%, 100% { transform: rotate(0); }
  50%, 60% { transform: rotate(-18deg); }
}
@keyframes auth-scene-jaw-bottom {
  0%, 46%, 64%, 100% { transform: rotate(0); }
  50%, 60% { transform: rotate(18deg); }
}
@keyframes auth-scene-score {
  0%, 47% { transform: translate(0, 0); opacity: 1; animation-timing-function: var(--ease-out); }
  58% { transform: translate(46px, -34px); opacity: 0; }
  88% { transform: translate(0, 0); opacity: 0; }
  94%, 100% { transform: translate(0, 0); opacity: 1; }
}

@media (max-width: 820px) {
  .auth--login {
    grid-template-columns: 1fr;
    align-items: start;
    padding-bottom: 2.5rem;
    background: var(--bg-sunk);
  }
  .auth--login .auth__panel {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    padding: 1.25rem 1rem 4.5rem;
  }
  .auth-scene__caption { display: none; }
  .auth-scene { max-width: 460px; }
  .auth--login .auth__form {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    width: calc(100% - 2rem);
    max-width: 480px;
    margin: -3.5rem auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    box-shadow: var(--shadow-2);
  }
}