/* ==========================================================================
   Premium Login — Textile Shop Management System
   Custom layer on top of Tailwind: animations, glass, weave texture,
   validation states, ripple. No inline styles anywhere in the markup.
   ========================================================================== */

:root {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

/* ---------------------------------------------------------------- motion */

@keyframes login-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes login-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.anim-fade {
    animation: login-fade 0.6s ease-out both;
}

.anim-rise {
    animation: login-rise 0.7s cubic-bezier(0.22, 0.8, 0.32, 1) both;
}

.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
.anim-delay-4 { animation-delay: 0.32s; }
.anim-delay-5 { animation-delay: 0.4s; }

/* ------------------------------------------------------------ shop photo */

/* Indian cloth-shop interior — fabric bolts on shelves, rolls above —
   blurred just enough to stay unrecognizable as any specific store while
   the shelf structure keeps the "inside a shop" feel. */
.login-hero {
    background-color: #2B090E; /* fallback while the photo loads */
}

.login-hero-photo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("../images/login-bg-store.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(10px) brightness(0.82) saturate(1.08);
    transform: scale(1.08);
}

/* Gentle vignette + bottom fade for card focus and footer legibility */
.login-hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 130% 95% at 50% 42%, rgba(43, 9, 14, 0) 40%, rgba(43, 9, 14, 0.4) 100%),
        linear-gradient(180deg, rgba(43, 9, 14, 0.15) 0%, rgba(43, 9, 14, 0) 40%, rgba(20, 4, 7, 0.5) 100%);
}

html.dark .login-hero-photo {
    filter: blur(10px) brightness(0.5) saturate(0.95);
}

html.dark .login-hero-scrim {
    background:
        radial-gradient(ellipse 130% 95% at 50% 42%, rgba(26, 6, 10, 0.08) 35%, rgba(26, 6, 10, 0.6) 100%),
        linear-gradient(180deg, rgba(26, 6, 10, 0.3) 0%, rgba(26, 6, 10, 0.08) 40%, rgba(12, 3, 5, 0.68) 100%);
}

/* ------------------------------------------------------------ validation */

.field-invalid input {
    border-color: rgba(248, 113, 113, 0.75) !important;
}

.field-invalid input:focus {
    border-color: rgb(248, 113, 113) !important;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
}

.field-invalid label {
    color: rgba(239, 68, 68, 0.8) !important;
}

/* ---------------------------------------------------------------- ripple */

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.ripple-ink {
    position: absolute;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: login-ripple 0.6s ease-out forwards;
    pointer-events: none;
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .anim-fade,
    .anim-rise,
    .ripple-ink {
        animation: none !important;
    }
}