/*
 * FLOWAYZ — Signup Modal "Slippery Slide"
 * Animation premium (scale + translate + ease-out-premium)
 * Desktop: centered max-w-md. Mobile (< 640px): bottom-sheet.
 * Tokens: --ease-out-premium, --accent, --accent-20, --z-modal-*
 */

.signup-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1050);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.signup-modal[hidden],
.signup-modal.is-hidden { display: none; }

.signup-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: signup-backdrop-in 0.2s ease-out;
  z-index: 0;
}

@keyframes signup-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.signup-modal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: 20px;
  box-shadow: 0 32px 80px -16px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 1.75rem 1.5rem 1.5rem;
  animation: signup-shell-in 0.28s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1));
  transform-origin: center 40%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

@keyframes signup-shell-in {
  from { transform: translateY(16px) scale(0.96) rotate(-0.4deg); opacity: 0; }
  to   { transform: translateY(0)    scale(1)    rotate(0);       opacity: 1; }
}

@keyframes signup-shell-out {
  from { transform: translateY(0)  scale(1);    opacity: 1; }
  to   { transform: translateY(8px) scale(0.98); opacity: 0; }
}

.signup-modal.is-closing .signup-modal-shell { animation: signup-shell-out 0.18s ease-in forwards; }
.signup-modal.is-closing .signup-modal-backdrop { animation: signup-backdrop-in 0.18s ease-in reverse forwards; }

/* ---- Stagger entrance ---- */
.signup-modal-shell .stagger-0,
.signup-modal-shell .stagger-1,
.signup-modal-shell .stagger-2,
.signup-modal-shell .stagger-3,
.signup-modal-shell .stagger-4 {
  opacity: 0;
  transform: translateY(8px);
}

.signup-modal.is-open .stagger-0 { animation: signup-stagger 0.36s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)) 60ms  forwards; }
.signup-modal.is-open .stagger-1 { animation: signup-stagger 0.36s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)) 120ms forwards; }
.signup-modal.is-open .stagger-2 { animation: signup-stagger 0.36s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)) 180ms forwards; }
.signup-modal.is-open .stagger-3 { animation: signup-stagger 0.36s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)) 260ms forwards; }
.signup-modal.is-open .stagger-4 { animation: signup-stagger 0.36s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)) 340ms forwards; }

@keyframes signup-stagger {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ---- Header ---- */
.signup-modal-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.signup-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.signup-modal-badge--founder {
  background: linear-gradient(135deg, #FFD166 0%, #FF7B54 100%);
  color: #1A202C;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.4), 0 4px 12px -4px rgba(255, 123, 84, 0.4);
}

.signup-modal-badge--referral {
  background: var(--accent-10, hsla(14, 100%, 67%, 0.10));
  color: var(--accent, #FF7B54);
  border: 1px solid var(--accent-20, hsla(14, 100%, 67%, 0.20));
}

.signup-modal-badge--vertical {
  background: var(--bg-surface-hover, #F1F5F9);
  color: var(--text-secondary, #475569);
  border: 1px solid var(--border-default, #E2E8F0);
  font-weight: 600;
}

html.dark .signup-modal-badge--vertical {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  border-color: rgba(148, 163, 184, 0.18);
}

/* Sprint 5.1 (Steve Jobs Neat) : le titre modal passe en Fraunces display
   pour cohérence éditoriale avec le hero landing H1 (le user qui clique le
   CTA hero reconnaît la signature typographique dans le modal). Le subtitle
   reste en Inter pour la lisibilité. */
.signup-modal-title {
  font-family: var(--font-display);
  font-size: 1.875rem; /* 30 px — plus grand pour effet display */
  font-weight: 500;    /* sweet spot Fraunces pour 30 px */
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
  font-optical-sizing: auto;
}

.signup-modal-subtitle {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary, #4A5568);
  margin: 0 0 1.5rem;
}

.signup-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary, #A0AEC0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.signup-modal-close:hover {
  background: var(--bg-surface-hover, #F7FAFC);
  color: var(--text-primary);
}

/* ---- Form fields ---- */
.signup-modal-field {
  margin-bottom: 0.9rem;
}

.signup-modal-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text-primary);
}

.signup-modal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.signup-input {
  width: 100%;
  padding: 0.78rem 0.95rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border-default, #E2E8F0);
  border-radius: 12px;
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow 220ms var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 180ms ease,
              transform 180ms ease;
}

.signup-input::placeholder {
  color: var(--text-tertiary, #A0AEC0);
}

.signup-input:focus {
  border-color: var(--accent, #FF7B54);
  box-shadow: 0 0 0 4px var(--accent-20, hsla(14, 100%, 67%, 0.20)),
              0 0 24px -6px var(--accent-40, hsla(14, 100%, 67%, 0.40));
  transform: scale(1.005);
}

.signup-input[aria-invalid="true"] {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.signup-input.has-trailing { padding-right: 2.5rem; }

/* ---- Email sparkle validation ---- */
.signup-modal-sparkle {
  position: absolute;
  right: 0.75rem;
  width: 18px;
  height: 18px;
  color: var(--accent, #FF7B54);
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 300ms var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 300ms var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.signup-modal-input-wrap.is-valid .signup-modal-sparkle {
  opacity: 1;
  transform: scale(1);
}

/* ---- Password eye toggle ---- */
.signup-modal-eye {
  position: absolute;
  right: 0.5rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-tertiary, #A0AEC0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.signup-modal-eye:hover {
  background: var(--bg-surface-hover, #F7FAFC);
  color: var(--text-primary);
}

/* ---- Password strength ---- */
.signup-modal-strength {
  display: flex;
  gap: 4px;
  margin-top: 0.45rem;
}

.signup-modal-strength-bar {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--bg-surface-hover, #E2E8F0);
  overflow: hidden;
  position: relative;
  transition: background-color 280ms var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

.signup-modal-hint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-tertiary, #A0AEC0);
  min-height: 1.1em;
}

/* Shimmer sheen when strong — one-shot via class toggle */
.signup-modal-strength-bar--strong-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 100%);
  animation: strength-shimmer 0.9s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)) 1;
}

@keyframes strength-shimmer {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

/* ---- CTA ---- */
.signup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  background: var(--accent, #FF7B54);
  color: var(--accent-contrast, #1A202C);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 180ms var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 240ms ease,
              background-color 180ms ease;
  box-shadow: 0 10px 24px -10px rgba(255, 123, 84, 0.5);
}

.signup-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(255, 123, 84, 0.55);
  background: var(--accent-hover, #F5684B);
}

.signup-cta:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 16px -6px rgba(255, 123, 84, 0.4);
}

.signup-cta.is-loading {
  pointer-events: none;
  opacity: 0.9;
}

.signup-cta-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: signup-spin 0.7s linear infinite;
  display: none;
}

.signup-cta.is-loading .signup-cta-spinner { display: inline-block; }
.signup-cta.is-loading .signup-cta-label-default { display: none; }
.signup-cta-label-loading { display: none; }
.signup-cta.is-loading .signup-cta-label-loading { display: inline; }

@keyframes signup-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* ---- Turnstile container ---- */
.signup-modal-turnstile {
  display: flex;
  justify-content: center;
  margin-top: 0.9rem;
  min-height: 0;
}

.signup-modal-turnstile:empty { display: none; }

/* ---- Turnstile fallback (ad-blocker détecté) ---- */
.signup-modal-turnstile-fallback {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--color-amber-bg, rgba(234, 179, 8, 0.12));
  border: 1px solid var(--color-amber, #eab308);
  color: var(--text-primary);
  font-size: 0.78rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.signup-modal-turnstile-fallback[hidden] { display: none; }
.signup-modal-turnstile-fallback p { margin: 0; }
.signup-modal-turnstile-fallback code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.72rem;
  background: var(--bg-surface);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--border-default);
}
.signup-modal-turnstile-fallback-btn {
  align-self: flex-start;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.signup-modal-turnstile-fallback-btn:hover {
  background: var(--bg-surface-hover);
}
.signup-modal-turnstile-fallback-btn:active {
  transform: scale(0.97);
}

/* ---- Micro-copy ---- */
.signup-modal-microcopy {
  margin-top: 0.95rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-tertiary, #64748b);
  text-align: center;
}

.signup-modal-microcopy a {
  color: var(--text-secondary, #4A5568);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.signup-modal-microcopy strong {
  color: var(--text-secondary, #4A5568);
  font-weight: 600;
}

.signup-modal-footer {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-default, #E2E8F0);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary, #4A5568);
}

.signup-modal-footer a {
  color: var(--accent, #FF7B54);
  font-weight: 600;
  text-decoration: none;
}
.signup-modal-footer a:hover { text-decoration: underline; }

/* ---- Error banner inside modal ---- */
.signup-modal-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #b91c1c;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
  line-height: 1.45;
}

html.dark .signup-modal-error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ---- Mobile bottom-sheet ---- */
@media (max-width: 639px) {
  .signup-modal { align-items: flex-end; padding: 0; }
  .signup-modal-shell {
    max-width: 100%;
    width: 100%;
    border-radius: 24px 24px 0 0;
    max-height: 94vh;
    padding: 1.5rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
    animation: signup-sheet-up 0.32s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1));
    transform-origin: bottom center;
  }
  @keyframes signup-sheet-up {
    from { transform: translateY(100%); opacity: 0.9; }
    to   { transform: translateY(0);    opacity: 1;   }
  }
  .signup-modal.is-closing .signup-modal-shell {
    animation: signup-sheet-down 0.22s ease-in forwards;
  }
  @keyframes signup-sheet-down {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0.4; }
  }
  .signup-modal-shell::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: -0.25rem auto 0.75rem;
    border-radius: 999px;
    background: var(--border-default, #E2E8F0);
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .signup-modal-backdrop,
  .signup-modal-shell,
  .signup-modal-shell .stagger-0,
  .signup-modal-shell .stagger-1,
  .signup-modal-shell .stagger-2,
  .signup-modal-shell .stagger-3,
  .signup-modal-shell .stagger-4,
  .signup-modal-strength-bar--strong-sheen::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .signup-cta:hover { transform: none; }
  .signup-modal.is-closing .signup-modal-shell,
  .signup-modal.is-closing .signup-modal-backdrop {
    animation: none !important;
  }
}