/*
 * HUMYN sign-in pages (login, forgot / reset password, register, verify, confirm).
 * The same for everyone, whatever theme they use inside the CRM.
 * Plain CSS (no build step); scoped to body.humyn-auth from layouts/guest.blade.php.
 */

body.humyn-auth {
    --ink: #0B0A12;
    --ink-2: #13111C;
    --ink-3: #1C1927;
    --ink-4: #272336;
    --on-ink: #F5F3F0;
    --on-ink-muted: #A7A1B2;
    --on-ink-faint: #6F6A7C;
    --line-ink: rgba(245, 243, 240, 0.10);
    --line-ink-strong: rgba(245, 243, 240, 0.18);
    --purple: #7835D5;
    --lilac: #C9B2F2;
    --energy: linear-gradient(90deg, #7835D5 0%, #D854FF 38%, #FF7A4A 72%, #FFE6A7 100%);
    --energy-text: linear-gradient(95deg, #FF8A52 0%, #F0679F 40%, #D854FF 70%, #B294E9 100%);

    background: var(--ink) !important;
    color: var(--on-ink) !important;
}

body.humyn-auth :is(h1, h2, h3, h4, h5, h6, span, p, a, button, input, select, textarea, div, label) {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* ── Form column ───────────────────────────────────────────────────────────── */

body.humyn-auth .auth-shell {
    background: var(--ink) !important;
}

body.humyn-auth .auth-form-panel {
    background: var(--ink-2) !important;
    border-color: var(--line-ink) !important;
    box-shadow: none !important;
}

body.humyn-auth .auth-form-panel :is(.text-\[\#1A1D23\], .text-\[\#2A3547\], .text-gray-900, .text-gray-800) {
    color: var(--on-ink) !important;
}

body.humyn-auth .auth-form-panel :is(.text-\[\#6B7280\], .text-gray-600, .text-gray-500) {
    color: var(--on-ink-muted) !important;
}

body.humyn-auth .auth-form-panel :is(.text-\[\#9CA3AF\], .text-gray-400) {
    color: var(--on-ink-faint) !important;
}

body.humyn-auth .auth-form-panel :is(.border-\[\#E8EAED\], .border-gray-100, .border-gray-200, .border-gray-300) {
    border-color: var(--line-ink) !important;
}

body.humyn-auth .auth-form-panel :is(a.text-\[\#4F46E5\], .text-\[\#4F46E5\], .text-indigo-600) {
    color: var(--lilac) !important;
}

body.humyn-auth .auth-form-panel :is(a.text-\[\#4F46E5\], a.hover\:text-gray-600, a):hover {
    color: var(--on-ink) !important;
}

body.humyn-auth .auth-form-panel :is([type='text'], [type='email'], [type='password'], textarea, select) {
    background: var(--ink-3) !important;
    border-color: var(--line-ink-strong) !important;
    color: var(--on-ink) !important;
    border-radius: 0.75rem !important;
}

body.humyn-auth .auth-form-panel :is([type='text'], [type='email'], [type='password'])::placeholder {
    color: var(--on-ink-faint) !important;
}

body.humyn-auth .auth-form-panel :is([type='text'], [type='email'], [type='password'], textarea, select):focus {
    border-color: var(--purple) !important;
    box-shadow: 0 0 0 3px rgba(120, 53, 213, 0.35) !important;
    outline: none !important;
}

body.humyn-auth .auth-form-panel :is([type='checkbox']) {
    background-color: var(--ink-3) !important;
    border-color: var(--line-ink-strong) !important;
    color: var(--purple) !important;
}

/* Fallback logo mark (no logo uploaded) */
body.humyn-auth .auth-form-panel .from-\[\#5D87FF\] {
    background-image: linear-gradient(135deg, #7835D5 0%, #D854FF 55%, #FF7A4A 100%) !important;
    box-shadow: 0 10px 30px -10px rgba(216, 84, 255, 0.6) !important;
}

/* Primary button: paper pill like the website's "Start a project" */
body.humyn-auth .auth-form-panel :is(button[type='submit'], .bg-\[\#4F46E5\], .bg-gray-800, .bg-black) {
    background: var(--on-ink) !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

body.humyn-auth .auth-form-panel :is(button[type='submit'], .bg-\[\#4F46E5\], .bg-gray-800, .bg-black):hover {
    background: var(--energy) !important;
    color: var(--ink) !important;
    box-shadow: 0 10px 30px -10px rgba(216, 84, 255, 0.6) !important;
}

body.humyn-auth .auth-form-panel :is(button[type='submit']):focus-visible {
    outline: 2px solid var(--lilac) !important;
    outline-offset: 3px;
}

/* Face login (passkey) button: outlined pill under the main one */
body.humyn-auth .auth-form-panel .passkey-button {
    background: transparent !important;
    border-color: var(--line-ink-strong) !important;
    color: var(--on-ink) !important;
    border-radius: 999px !important;
}

body.humyn-auth .auth-form-panel .passkey-button:hover {
    background: var(--ink-3) !important;
    border-color: var(--lilac) !important;
}

body.humyn-auth .auth-form-panel .passkey-button:focus-visible {
    outline: 2px solid var(--lilac) !important;
    outline-offset: 3px;
}

body.humyn-auth .auth-form-panel .text-rose-500 {
    color: #FF8A8A !important;
}

/* ── Brand panel (x-auth.humyn-panel) ──────────────────────────────────────── */

body.humyn-auth .humyn-panel {
    background: radial-gradient(90% 70% at 75% 30%, rgba(120, 53, 213, 0.25), transparent 70%), var(--ink);
    min-height: 100vh;
}

body.humyn-auth .humyn-lines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(245, 243, 240, 0.035) 0 1px, transparent 1px 96px);
    mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}

body.humyn-auth .humyn-orb {
    position: absolute;
    border-radius: 50%;
}

body.humyn-auth .humyn-orb-violet {
    width: 520px;
    height: 520px;
    top: 9%;
    right: -90px;
    background: radial-gradient(circle at 34% 32%, #C7A8F5 0%, #8F4FE6 26%, #6A2BC4 55%, #351673 85%);
    box-shadow: 0 0 120px 20px rgba(120, 53, 213, 0.45), inset -30px -40px 80px rgba(11, 10, 18, 0.45);
    animation: humyn-float 14s ease-in-out infinite;
}

body.humyn-auth .humyn-orb-sun {
    width: 230px;
    height: 230px;
    top: 7%;
    right: 300px;
    background: radial-gradient(circle at 40% 32%, #FFF1CF 0%, #FFE6A7 18%, #FF9A5C 52%, #C9502E 90%);
    box-shadow: 0 0 80px rgba(255, 122, 74, 0.35);
    mix-blend-mode: screen;
    opacity: 0.92;
    animation: humyn-float 11s ease-in-out infinite reverse;
}

body.humyn-auth .humyn-eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin-bottom: 1.25rem;
}

body.humyn-auth .humyn-headline {
    font-size: clamp(2.75rem, 4.6vw, 4.5rem);
    font-weight: 300 !important;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--on-ink);
}

body.humyn-auth .humyn-energy-text {
    background: var(--energy-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.humyn-auth .humyn-copy {
    margin-top: 1.5rem;
    max-width: 30rem;
    font-size: 14px;
    line-height: 1.65;
    color: var(--on-ink-muted);
}

body.humyn-auth .humyn-progress {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
}

body.humyn-auth .humyn-progress-bar {
    position: relative;
    width: 180px;
    height: 1px;
    background: var(--line-ink-strong);
}

body.humyn-auth .humyn-progress-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: var(--energy);
    transform-origin: left;
    animation: humyn-load 2.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes humyn-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-14px, 18px, 0); }
}

@keyframes humyn-load {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    body.humyn-auth .humyn-orb,
    body.humyn-auth .humyn-progress-bar > span {
        animation: none;
    }
}