/* Shared V8 finish for signup, login, and email confirmation. */
:root {
  --auth-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes auth-detail-arrive {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auth-brand-signal {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}

@keyframes auth-icon-arrive {
  from { opacity: 0; transform: scale(0.88) rotate(-10deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.brand-mark path:last-child {
  stroke-dasharray: 40;
  animation: auth-brand-signal 1200ms 220ms var(--auth-ease) both;
}

.intro { animation: none; }
.intro .eyebrow,
.intro h1,
.intro p {
  animation: auth-detail-arrive 660ms var(--auth-ease) both;
}
.intro h1 { animation-delay: 90ms; }
.intro p { animation-delay: 190ms; }

.intro p {
  font-size: 14px;
  line-height: 1.7;
}

.panel {
  animation: arrive 660ms 80ms var(--auth-ease) both;
  -webkit-backdrop-filter: blur(8px) saturate(135%);
  backdrop-filter: blur(8px) saturate(135%);
}
.sheen:after {
  animation-duration: 1150ms;
  animation-delay: 240ms;
}

.panel .field,
.panel .terms,
.panel .submit,
.panel .primary,
.panel .icon-ring,
.panel .step-label,
.panel h2,
.panel .description {
  animation: auth-detail-arrive 580ms var(--auth-ease) both;
}
.panel .field { animation-delay: 170ms; }
.panel .field:nth-of-type(3) { animation-delay: 225ms; }
.panel .field:nth-of-type(4) { animation-delay: 280ms; }
.panel .field:nth-of-type(5) { animation-delay: 335ms; }
.panel .terms { animation-delay: 390ms; }
.panel .submit { animation-delay: 450ms; }
.panel .icon-ring {
  animation: auth-icon-arrive 700ms 180ms var(--auth-ease) both;
}
.panel .step-label { animation-delay: 245ms; }
.panel h2 { animation-delay: 300ms; }
.panel .description { animation-delay: 365ms; }
.panel .primary { animation-delay: 440ms; }
.state-icon:not([hidden]) {
  animation: auth-icon-arrive 540ms var(--auth-ease) both;
}

.field label { font-size: 13px; }
.description { font-size: 14px; }
.support { font-size: 13px; }
.help,
.preview,
.status,
.action-status { line-height: 1.6; }

input[type="text"],
input[type="email"],
input[type="password"] {
  transition:
    border-color 260ms ease-out,
    box-shadow 260ms ease-out;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible {
  border-color: #ad8a50;
  box-shadow:
    inset 0 1px 1px #fff,
    0 0 0 3px #92734230,
    0 5px 13px #735e3718;
}

.submit,
.primary {
  position: relative;
  overflow: hidden;
  transition:
    transform 360ms var(--auth-ease),
    box-shadow 360ms ease-out;
}
.submit:before,
.primary:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, #ffffff52, transparent 45%, #27170c1c);
  pointer-events: none;
}
.submit svg,
.primary svg {
  transition: transform 360ms var(--auth-ease);
}
.submit:active,
.primary:active {
  transform: scale(0.975);
  transition-duration: 100ms;
}
.toggle,
.state-list button,
.back,
.text-button {
  transition:
    transform 300ms var(--auth-ease),
    color 300ms ease-out,
    background-color 300ms ease-out;
}
.toggle:active,
.state-list button:active { transform: scale(0.96); }
.status:not([hidden]),
.action-status:not([hidden]),
.flow-next:not([hidden]),
.verify-link:not([hidden]) {
  animation: auth-detail-arrive 480ms var(--auth-ease) both;
}

@media (hover: hover) and (pointer: fine) {
  .submit:hover,
  .primary:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 #ffffff80,
      0 9px 20px #74603e30;
  }
  .submit:hover svg,
  .primary:hover svg { transform: translate(2px, -2px); }
  .toggle:hover,
  .state-list button:hover { background-color: #ffffff60; }
  .back:hover,
  .text-button:hover { color: #5f4727; }
}

@media (max-width: 600px) {
  .eyebrow { font-size: 10px; }
  .intro p,
  .description { font-size: 14px; }
  .field label { font-size: 13px; }
  .step-label { font-size: 10px; }
  .state-list button { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* Keep auth forms out of view until the current session is known. */
.auth-entry-status {
  display: none;
  position: fixed;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 36px);
  padding: 16px 22px;
  border: 1px solid #ffffffd9;
  border-radius: 999px;
  background: linear-gradient(135deg, #fffaf0e8, #eadcc2d9);
  -webkit-backdrop-filter: blur(8px) saturate(135%);
  backdrop-filter: blur(8px) saturate(135%);
  box-shadow: 0 18px 48px #6f55352e, inset 0 1px 0 #fff;
  color: #59482e;
  font: 500 13px "DM Sans", sans-serif;
  white-space: nowrap;
}
html.auth-entry-checking .auth-entry-status { display: inline-flex; }
html.auth-entry-checking main { visibility: hidden; }
html.auth-entry-checking main * { animation-play-state: paused; }

.auth-entry-pulse {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #927342;
  box-shadow: 0 0 0 5px #92734222;
  animation: auth-entry-pulse 1.3s ease-in-out infinite;
}
@keyframes auth-entry-pulse {
  50% { opacity: 0.55; box-shadow: 0 0 0 9px #92734212; }
}