/* Auth screens: compact desktop card, animated modal frame and small interaction details.
   Loaded after modal-border.css so the card can tune the shared frame. */

/* Ambient glow behind the card. */
.auth-workspace { position: relative; isolation: isolate; }
.auth-workspace::before,
.auth-workspace::after {
  content: '';
  position: fixed;
  z-index: -1;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  pointer-events: none;
  animation: auth-aurora 18s ease-in-out infinite alternate;
}
.auth-workspace::before { left: -12vmax; top: -10vmax; background: radial-gradient(circle, #8a4dff55, transparent 66%); }
.auth-workspace::after { right: -14vmax; bottom: -16vmax; background: radial-gradient(circle, #4f6bff40, transparent 66%); animation-duration: 22s; animation-direction: alternate-reverse; }
:root[data-theme=light] .auth-workspace::before,
:root[data-theme=light] .auth-workspace::after { opacity: .32; }

/* The card wears the same rotating border as every modal. */
.auth-layout.gp-modal-panel {
  --gp-modal-surface: var(--surface);
  --gp-modal-entrance: auth-card-in .75s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) both;
}
.auth-swap .auth-layout.gp-modal-panel { --gp-modal-entrance: none; }

/* Showcase: sparks, chip hover and a soft seam with the form. */
.auth-showcase { box-shadow: inset -1px 0 #ffffff12; }
.auth-showcase > .scene-fx { z-index: 1; }
.auth-showcase-copy { z-index: 2; }
.auth-showcase-benefits span { transition: transform .25s var(--soft-ease), background-color .25s, border-color .25s; }
.auth-showcase-benefits span:hover { transform: translateY(-2px); background: #2a1650b3; border-color: #d3a9ff80; }

/* Form details. */
.auth-kicker {
  padding: 5px 10px 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
}
.auth-kicker .icon { width: 14px; height: 14px; animation: auth-twinkle 3.2s ease-in-out infinite; }
.auth-form-head h2 {
  background: linear-gradient(100deg, var(--text) 0 40%, var(--accent) 50%, var(--text) 60% 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: auth-sheen 7s ease-in-out infinite;
}
.auth-field label { transition: color .2s ease; }
.auth-field:focus-within label { color: var(--accent); }
.auth-field input { transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease; }
.auth-field input:hover:not(:focus) { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.auth-field input:focus { background: var(--surface); }
.auth-password-toggle { font-size: 10.5px; padding: 5px 8px; transition: background-color .2s, color .2s; }
.auth-submit .icon { transition: transform .25s var(--soft-ease); }
.auth-submit:hover .icon { transform: translateX(4px); }
.auth-secondary:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.auth-guest-link .icon { transition: transform .25s var(--soft-ease); }
.auth-guest-link:hover .icon { transform: translateX(3px); }
.auth-message:not([hidden]) { animation: auth-shake .42s ease both; }
.auth-message.success:not([hidden]) { animation: auth-pop .45s var(--ease-back, ease) both; }
.auth-demo-disclaimer { border-top: 0; padding-top: 0; }

/* Compact desktop sizing; phone and landscape layouts keep the rules in auth.css. */
@media (min-width: 781px) and (min-height: 501px) {
  .auth-workspace { max-width: 1100px; padding: 94px 24px 12px; }
  .auth-layout { grid-template-columns: minmax(0, .9fr) minmax(400px, 1fr); min-height: min(580px, calc(100dvh - 150px)); }
  .auth-showcase { min-height: 500px; }
  .auth-showcase-copy { padding: clamp(24px, 3vw, 40px); }
  .auth-showcase-kicker { font-size: 10px; margin-bottom: 12px; }
  .auth-showcase h1 { font-size: clamp(30px, 2.9vw, 42px); letter-spacing: -1.3px; max-width: 460px; }
  .auth-showcase p { font-size: 13px; max-width: 400px; margin-top: 12px; }
  .auth-showcase-benefits { margin-top: 18px; gap: 8px; }
  .auth-form-panel { padding: 30px clamp(24px, 3.2vw, 48px); }
  .auth-form-inner { max-width: 380px; }
  .auth-form-head h2 { font-size: clamp(25px, 2.2vw, 31px); letter-spacing: -.9px; margin: 12px 0 6px; }
  .auth-form-head h2 br { display: none; }
  .auth-form-head p { font-size: 12.5px; }
  .auth-form { margin-top: 20px; }
  .auth-field { margin-bottom: 13px; }
  .auth-field label { font-size: 11.5px; margin-bottom: 6px; }
  .auth-field input { height: 42px; font-size: 13px; padding: 9px 12px; }
  .auth-password-wrap input { padding-right: 72px; }
  .auth-field-hint { margin: -6px 0 11px; }
  .auth-form-options { margin-bottom: 14px; }
  .auth-submit { min-height: 44px; font-size: 13px; margin-top: 12px; }
  .auth-separator { margin: 14px 0; }
  .auth-social { margin-top: 14px; }
  .auth-social .auth-separator { margin-bottom: 10px; }
  .auth-google { min-height: 42px; font-size: 12.5px; }
  .auth-google-note { margin-top: 6px; }
  .auth-secondary { min-height: 42px; font-size: 12.5px; }
  .auth-guest-link { margin-top: 14px; }
  .auth-recovery-account { margin-top: 18px; }
  .auth-legal-links { margin-top: 14px; padding-top: 12px; }
  .auth-demo-disclaimer { margin-top: 10px; }
  .auth-bottom { padding: 14px 3px; }

  /* Sign-up: both password fields share a row. */
  #signup-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  #signup-form > * { grid-column: 1 / -1; }
  #signup-form > .auth-field:has(#signup-password),
  #signup-form > .auth-field:has(#signup-confirm) { grid-column: auto; }
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(6px); }
}
@keyframes auth-aurora {
  to { transform: translate(8vmax, 6vmax) scale(1.15); }
}
@keyframes auth-sheen {
  0%, 55% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@keyframes auth-twinkle {
  50% { transform: rotate(18deg) scale(1.18); }
}
@keyframes auth-shake {
  0% { opacity: 0; transform: translateY(-6px); }
  30% { opacity: 1; transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  100% { transform: none; }
}
@keyframes auth-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
}

/* Shorter laptop screens: tighten the form rhythm a little more. */
@media (min-width: 781px) and (min-height: 501px) and (max-height: 820px) {
  .auth-workspace { padding-top: 86px; }
  .auth-form-panel { padding-block: 24px; }
  .auth-form { margin-top: 16px; }
  .auth-field { margin-bottom: 11px; }
  .auth-field input { height: 40px; }
  .auth-submit { min-height: 42px; }
  .auth-separator { margin: 12px 0; }
  .auth-bottom { padding-block: 10px; }
}