/* Authentication layout, in the colors of usetix.io: the threshold between the landing page and the app. */

.auth-split {
  --auth-canvas: light-dark(var(--paper), #101413);
  --auth-panel: var(--color-panel);
  --auth-ink: light-dark(var(--ink), var(--paper));
  --auth-ink-subtle: light-dark(#57606a, #a3aaa6);
  --auth-ink-hover: light-dark(#2c3134, #e4e2d9);
  --auth-line: color-mix(in srgb, var(--auth-ink) 15%, transparent);
  --auth-line-strong: color-mix(in srgb, var(--auth-ink) 30%, transparent);
  --auth-field: light-dark(white, color-mix(in srgb, var(--paper) 5%, #101413));

  /* The app's controls, dressed in those colors */
  --color-bg: var(--auth-canvas);
  --color-text: var(--auth-ink);
  --color-text-subtle: var(--auth-ink-subtle);
  --color-text-reversed: var(--auth-canvas);
  --color-primary: var(--auth-ink);
  --color-link: var(--auth-ink);
  --color-selected-dark: var(--auth-ink);
  --btn-background: transparent;
  --btn-border-color: var(--auth-line);
  --btn-hover-color: color-mix(in srgb, var(--auth-ink) 5%, transparent);
  --input-background: var(--auth-field);
  --input-border-color: var(--auth-line);
  --input-box-shadow: none;
  --input-radius: var(--size-3);
  --input-padding: 0 var(--size-4);
  --input-font-size: var(--text-base);

  block-size: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  font-family: "Geist", system-ui, sans-serif;
  overflow: hidden;
}

@media (width >= 48rem) {
  .auth-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
}

/* Brand panel: an inset card above the form on phones, the left half on larger screens */

.auth-split__brand {
  background-color: var(--auth-panel);
  border-radius: var(--size-6);
  color: var(--auth-ink);
  display: grid;
  margin: var(--size-3) var(--size-3) 0;
  overflow: hidden;
  padding: var(--size-6);
  place-items: center;
}

.auth-split__brand-content {
  inline-size: 100%;
  max-inline-size: 28rem;
}

.auth-split__wordmark {
  block-size: var(--size-14);
  color: inherit;
  contain: layout paint;
  display: block;
  inline-size: 100%;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

/* Dotted like the particles, which only run on larger screens */
.auth-split__wordmark-text {
  -webkit-text-fill-color: transparent;
  background: radial-gradient(circle, currentColor 1.3px, transparent 1.5px) center / 3px 3px;
  background-clip: text;
  display: grid;
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  inset: 0;
  letter-spacing: -0.03em;
  line-height: 1;
  place-items: center;
  position: absolute;
  transition: opacity var(--time-200) var(--ease-out-3);
}

.auth-split__wordmark-canvas {
  block-size: 100%;
  display: none;
  inline-size: 100%;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--time-200) var(--ease-out-3);
}

.auth-split__tagline {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-block-start: var(--size-2);
  text-align: center;
  text-wrap: balance;
}

.auth-split__intro {
  color: var(--auth-ink-subtle);
  display: none;
  font-family: var(--font-monospace-code);
  font-size: var(--text-sm);
  line-height: 1.4;
  margin-block-start: var(--size-3);
  text-align: center;
  text-wrap: balance;
}

@media (width >= 48rem) {
  .auth-split__brand {
    border-radius: var(--size-8);
    grid-template-rows: 1fr auto;
    margin: var(--size-3);
    padding: var(--size-16) var(--size-12);
  }

  .auth-split__wordmark {
    block-size: clamp(7rem, 18vh, 10rem);
  }

  .auth-split__wordmark-canvas {
    display: block;
  }

  .auth-split__wordmark.is-particles .auth-split__wordmark-text {
    opacity: 0;
  }

  .auth-split__wordmark.is-particles .auth-split__wordmark-canvas {
    cursor: crosshair;
    opacity: 1;
    pointer-events: auto;
  }

  .auth-split__tagline {
    font-size: var(--text-2xl);
    margin-block-start: var(--size-4);
  }

  .auth-split__intro {
    display: block;
  }
}

/* The landing page's feature cards, fanned out and peeking over the panel's bottom edge.
   Short screens leave them out, so the form stays in view. */
.auth-split__cards {
  display: none;
  justify-content: center;
}

@media (width < 48rem) and (height >= 40rem) {
  .auth-split__brand {
    padding-block-end: 0;
  }

  .auth-split__cards {
    display: flex;
    margin-block-end: calc(-1 * var(--size-16));
    padding-block-start: var(--size-6);
  }
}

@media (width >= 64rem) and (height >= 42rem) {
  .auth-split__brand {
    padding-block-end: 0;
  }

  .auth-split__cards {
    display: flex;
    margin-block-end: calc(-1 * var(--size-6));
    padding-block-start: var(--size-12);
  }
}

.auth-split__card {
  --card-accent: var(--petrol-soft);
  --card-ink: var(--ink);

  aspect-ratio: 2 / 3;
  background-color: var(--card-accent);
  border-radius: var(--size-4);
  box-shadow: 0 20px 60px light-dark(rgb(0 0 0 / .15), rgb(0 0 0 / .45));
  color: var(--card-ink);
  flex: none;
  inline-size: 8rem;
  isolation: isolate;
  overflow: hidden;
  padding: var(--size-3);
  position: relative;
  rotate: var(--tilt);
  transition:
    rotate 340ms cubic-bezier(.16, 1, .3, 1),
    translate 340ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 340ms cubic-bezier(.16, 1, .3, 1);

  &::after {
    background: linear-gradient(var(--card-accent) 0%, var(--card-accent) 26%, transparent 65%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
  }

  &[data-theme="tickets"] { --tilt: -6deg; --photo-position: 50% 78%; translate: 0 8%; }
  &[data-theme="seating"] { --card-accent: light-dark(var(--forest), #2b3734); --card-ink: var(--paper); --tilt: 2deg; --photo-position: 50% 68%; z-index: 1; }
  &[data-theme="entry"] { --card-accent: var(--petrol); --card-ink: var(--paper); --tilt: 7deg; --photo-position: 50% 38%; translate: 0 11%; }

  & + & {
    margin-inline-start: calc(-1 * var(--size-4));
  }
}

@media (width >= 48rem) {
  .auth-split__card {
    border-radius: var(--size-6);
    inline-size: clamp(11rem, 14vw, 14rem);
    padding: var(--size-5);

    & + & {
      margin-inline-start: calc(-1 * var(--size-6));
    }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .auth-split__card:hover {
    box-shadow: 0 32px 100px light-dark(rgb(0 0 0 / .3), rgb(0 0 0 / .6));
    rotate: calc(var(--tilt) * .6);
    translate: 0 calc(-1 * var(--size-3));
    z-index: 2;
  }
}

.auth-split__card-photo {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  object-position: var(--photo-position);
  position: absolute;
  z-index: -1;
}

.auth-split__card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  letter-spacing: -0.04em;
  line-height: 1.06;
}

/* Small cards carry their title only */
.auth-split__card-claim {
  display: none;
  font-size: .8125rem;
  font-weight: var(--font-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-block-start: var(--size-1_5);
}

@media (width >= 48rem) {
  .auth-split__card-title { font-size: var(--text-lg); }
  .auth-split__card-claim { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-split__wordmark.is-particles .auth-split__wordmark-canvas {
    cursor: default;
  }
}

/* Form panel */

.auth-split__main {
  min-block-size: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  overflow-y: auto;
  padding: var(--size-8) var(--size-6);
  background-color: var(--auth-canvas);
}

@media (width >= 48rem) {
  .auth-split__main {
    align-items: safe center;
  }
}

.auth-split__form {
  inline-size: 100%;
  max-inline-size: var(--max-i-md);
}

.auth-split__form > h1,
.auth-split__header > h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

@media (width >= 48rem) {
  .auth-split__form > h1,
  .auth-split__header > h1 {
    font-size: var(--text-4xl);
  }
}

.auth-split__header {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-block-end: var(--size-4);

  > h1 { font-weight: var(--font-bold); }
  > p { color: var(--auth-ink-subtle); text-wrap: pretty; }
}

/* "or" between the sign-in code and a passkey */
.auth-split__divider {
  align-items: center;
  color: var(--auth-ink-subtle);
  display: flex;
  font-family: var(--font-monospace-code);
  font-size: var(--text-xs);
  gap: var(--size-3);

  &::before,
  &::after {
    border-block-start: 1px solid var(--auth-line);
    content: "";
    flex: 1;
  }
}

.auth-split__footer {
  border-block-start: 1px solid var(--auth-line);
  color: var(--auth-ink-subtle);
  font-size: var(--text-sm);
  margin-block-start: var(--size-4);
  padding-block-start: var(--size-6);
}

.auth-split .text-link {
  text-decoration-color: var(--auth-line-strong);
  text-underline-offset: .2em;

  &:hover { text-decoration-color: currentColor; }
}

/* Controls: taller, rounder and outlined, focused in ink instead of browser blue */

.auth-split .input:not([type="checkbox"], [type="radio"], [type="range"]) {
  min-block-size: var(--size-12);
  transition: border-color 120ms, box-shadow 120ms;

  &:focus-visible {
    border-color: var(--auth-ink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-ink) 10%, transparent);
    outline: none;
  }
}

.auth-split .input[type="checkbox"] {
  appearance: none;
  background-color: var(--auth-field);
  block-size: var(--size-5);
  border: 1.5px solid var(--auth-line-strong);
  border-radius: var(--size-1_5);
  cursor: pointer;
  display: inline-grid;
  flex: none;
  inline-size: var(--size-5);
  margin: 0;
  place-content: center;
  transition: background-color 120ms, border-color 120ms;

  &::before {
    background-color: var(--auth-canvas);
    block-size: .65rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    content: "";
    inline-size: .65rem;
    scale: 0;
    transition: scale 120ms var(--ease-out-3);
  }

  &:checked {
    background-color: var(--auth-ink);
    border-color: var(--auth-ink);
  }

  &:checked::before { scale: 1; }
  &:user-invalid { border-color: var(--color-text-negative); }
  &:focus-visible { outline: 2px solid var(--auth-ink); outline-offset: 2px; }
}

.auth-split .btn {
  &:focus-visible { outline-offset: 2px; }
}

.auth-split .btn--lg {
  --btn-font-size: var(--text-base);
  --btn-padding: 0 var(--size-5);
  --btn-radius: var(--size-3);

  min-block-size: var(--size-12);
}

.auth-split .btn--primary {
  --btn-hover-color: var(--auth-ink-hover);
}