/* Login-only headlines occupy their own space between the brand and form. */
.token-auth .token-auth-content {
  grid-template-areas: "brand headline form";
  grid-template-columns: minmax(220px, 1fr) minmax(320px, .85fr) minmax(360px, 448px);
  column-gap: clamp(32px, 3.5vw, 64px);
  width: min(100%, 1680px);
  margin-inline: auto;
}
.token-auth .token-auth-header { padding-block: 15px; }
.token-auth .token-auth-footer { padding-block: 14px; }
.token-auth .token-auth-content { padding-block: 8px 16px; }
.token-auth .login-panel { gap: 12px; padding: 28px 32px; }
.token-auth .login-panel .token-auth-intro p { margin-top: 8px; }
.token-auth .login-panel .token-auth-local { padding-top: 12px; }
.token-auth .login-panel h1 { font-family: 'Bahnschrift', 'Segoe UI', sans-serif; }
.token-auth .login-panel:has(input[name="confirm"]) { gap: 10px; padding-block: 24px; }
:root body .token-auth .login-panel .wallet-field-shell { margin-top: 7px; }
:root body .token-auth .login-panel:has(input[name="confirm"]) .wallet-field-input { min-height: 50px; padding-block: 11px; }
:root body .token-auth .login-panel:has(input[name="confirm"]) .button[type="submit"] { min-height: 46px; padding-block: 11px; }
.token-auth .token-auth-hero-brand { grid-area: brand; }
.token-auth .login-panel { grid-area: form; }
.token-auth-headlines {
  grid-area: headline;
  width: 100%;
  min-width: 0;
  align-self: center;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(18px, 1.42vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.035em;
  text-align: left;
  text-shadow: 0 2px 18px #061832b3;
}
.token-auth-headline-stage {
  display: grid;
  align-items: center;
  min-height: 7.2em;
}
.token-auth-headline-pair {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  animation: auth-headline-cycle 48s cubic-bezier(.22, 1, .36, 1) infinite both;
  animation-delay: var(--headline-delay);
}
.token-auth-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.token-auth-headline-icon {
  display: block;
  width: 2.6em;
  height: 2.6em;
  flex: 0 0 2.6em;
  color: var(--accent, #0092F5);
}
.token-auth-icon-gradient {
  animation: auth-icon-gradient-flow 3s linear infinite;
}
/* One complete repeated tile moves right, matching the button hover flow. */
@keyframes auth-icon-gradient-flow {
  from { transform: translateX(0); }
  to { transform: translateX(48px); }
}
@media (prefers-reduced-motion: reduce) {
  .token-auth-icon-gradient { animation-duration: 6s; }
}
.token-auth-headline-title {
  position: relative;
  display: grid;
  min-width: 0;
  line-height: 1.3;
  text-align: left;
}
.token-auth-headline-line {
  display: block;
  white-space: nowrap;
}
/* A single diagonal light pass stays inside the title's letters, not its box. */
.token-auth-headline-beam {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  pointer-events: none;
  user-select: none;
}
.token-auth-headline-beam-line {
  display: block;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--accent, #0092F5) 70%, transparent) 46%, color-mix(in srgb, var(--accent, #0092F5) 25%, #fff) 49%, #fff 50%, color-mix(in srgb, var(--accent, #0092F5) 25%, #fff) 51%, color-mix(in srgb, var(--accent, #0092F5) 70%, transparent) 54%, transparent 58%);
  background-size: 250% 200%;
  background-position: 100% var(--beam-y);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent, #0092F5) 50%, #fff));
  opacity: 0;
  animation: auth-headline-beam-cycle 48s linear infinite both;
  animation-delay: var(--headline-delay);
}
/* One pass at 1.4–3.1s of each six-second appearance, hidden at all other times. */
@keyframes auth-headline-beam-cycle {
  0%, 2.9167% { opacity: 0; background-position: 100% var(--beam-y); }
  3.125% { opacity: 1; background-position: 100% var(--beam-y); }
  6.25% { opacity: 1; background-position: 0% var(--beam-y); }
  6.4583%, 100% { opacity: 0; background-position: 0% var(--beam-y); }
}
.token-auth-headline-subtitle {
  margin: 16px 0 0;
  max-width: 36em;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(14px, .88vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .005em;
  text-wrap: pretty;
  animation: auth-headline-subtitle-cycle 48s cubic-bezier(.22, 1, .36, 1) infinite both;
  animation-delay: var(--headline-delay);
}
/* Six-second slots: a crisp upward reveal, staggered subtitle, then a clear gap. */
@keyframes auth-headline-cycle {
  0% { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 100% 0); }
  1.46%, 10.2% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
  11.4%, 100% { opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 0 0); }
}
@keyframes auth-headline-subtitle-cycle {
  0%, .75% { opacity: 0; transform: translateY(12px); }
  2.5%, 10% { opacity: 1; transform: translateY(0); }
  11.15%, 100% { opacity: 0; transform: translateY(-6px); }
}
.token-auth[data-motion="paused"] .token-auth-headline-pair,
.token-auth[data-motion="paused"] .token-auth-headline-subtitle,
.token-auth[data-motion="paused"] .token-auth-icon-gradient,
.token-auth[data-motion="paused"] .token-auth-headline-beam-line {
  animation-play-state: paused;
}
.token-auth-headline-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* At narrower widths the headline goes above BOTH columns, never under the logo. */
@media (max-width: 1200px) {
  .token-auth .token-auth-content {
    grid-template-areas: "headline headline" "brand form";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 12px;
  }
  .token-auth-headlines {
    max-width: 760px;
    font-size: clamp(24px, 3vw, 32px);
    text-align: center;
  }
  .token-auth-headline-stage { min-height: 3.4em; }
  .token-auth-headline { justify-content: center; }
  .token-auth-headline-subtitle { max-width: 54em; margin: 9px auto 0; font-size: 14px; line-height: 1.45; }
}
@media (max-width: 800px) {
  .token-auth .token-auth-content {
    grid-template-areas: "headline" "brand" "form";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  .token-auth-headlines { max-width: 480px; font-size: clamp(16px, 4.8vw, 28px); }
  .token-auth-headline-stage { min-height: 6.2em; }
}
@media (max-height: 850px) and (min-width: 801px) {
  .token-auth .token-auth-header { padding-block: 10px; }
  .token-auth .token-auth-footer { padding-block: 9px; }
  .token-auth .token-auth-content { padding-block: 2px 8px; }
  .token-auth .login-panel { padding-block: 22px; gap: 10px; }
  .token-auth-headlines { font-size: clamp(18px, 1.42vw, 24px); }
  .token-auth .login-panel h1 { font-size: 30px; line-height: 1.2; }
  .token-auth .token-auth-intro { margin-bottom: 0; }
}