/* =============================================================================
   Clinic Management System — authentication stylesheet (Tailwind v4)

   Loaded only by layouts/auth.blade.php. Deliberately a separate bundle from
   the dashboard: sign-in is the one screen every user waits on before they
   have anything, so it ships Tailwind + Alpine and nothing else — no charts,
   no data-grid, no module JS.
   ============================================================================= */

@import 'tailwindcss' source(none);

@source '../views/layouts/auth.blade.php';
@source '../views/components/auth';
@source '../views/components/dash/icon.blade.php';
@source '../../app/Modules/Auth/Resources/views/login.blade.php';
@source '../js/auth.js';

/* Dark mode is a class on <html>, written server-side from the same
   `clinic_theme` cookie the dashboard uses, so the choice survives sign-out
   and the first paint is never the wrong theme (the CSP forbids the usual
   inline pre-paint script). */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: Arial, Helvetica, sans-serif;

    --color-brand-50: #eef2ff;
    --color-brand-100: #e0e7ff;
    --color-brand-200: #c7d2fe;
    --color-brand-300: #a5b4fc;
    --color-brand-400: #818cf8;
    --color-brand-500: #6366f1;
    --color-brand-600: #4f46e5;
    --color-brand-700: #4338ca;
    --color-brand-800: #3730a3;
    --color-brand-900: #312e81;

    --animate-float-slow: float 18s ease-in-out infinite;
    --animate-rise: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;

    @keyframes float {
        0%,
        100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
        33% {
            transform: translate3d(2rem, -1.75rem, 0) scale(1.06);
        }
        66% {
            transform: translate3d(-1.5rem, 1.25rem, 0) scale(0.96);
        }
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(1.25rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
}

[x-cloak] {
    display: none !important;
}

@layer base {
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
}

/* Entrance stagger. Skipped entirely when the visitor asks for less motion —
   an animation nobody can switch off is an accessibility defect, not polish. */
@media (prefers-reduced-motion: no-preference) {
    [data-rise] > * {
        animation: var(--animate-rise);
    }

    [data-rise] > *:nth-child(2) {
        animation-delay: 80ms;
    }

    [data-rise] > *:nth-child(3) {
        animation-delay: 160ms;
    }

    [data-rise] > *:nth-child(4) {
        animation-delay: 240ms;
    }

    [data-rise] > *:nth-child(5) {
        animation-delay: 320ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-blob {
        animation: none !important;
    }
}

/* Floating background shapes. Pointer-events off so they can never swallow a
   click meant for the form underneath. */
@utility auth-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
    animation: var(--animate-float-slow);
}

/* Button ripple: the span is positioned and appended by Alpine on click. */
@utility auth-ripple {
    position: absolute;
    border-radius: 9999px;
    transform: scale(0);
    background-color: rgb(255 255 255 / 45%);
    animation: ripple 0.6s linear;
    pointer-events: none;
}