/**
 * Login Page CSS - "Warm Glass" Design
 * Glassmorphism com cores OrangeCrush
 * Used in: registration/login.html
 */

/* Variaveis de cores baseadas no tema OrangeCrush */
:root {
    --login-primary: oklch(70% 0.213 47.604);
    --login-primary-light: oklch(70% 0.213 47.604 / 20%);
    --login-secondary: oklch(86% 0.005 56.366);
    --login-accent: oklch(68% 0.169 237.323);
    --login-accent-light: oklch(68% 0.169 237.323 / 15%);
    --login-base-100: oklch(98% 0 0);
    --login-base-300: oklch(92% 0 0);
}

/* Background com gradiente quente e fonte Outfit */
body {
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(
        135deg,
        oklch(70% 0.18 47) 0%,
        oklch(62% 0.19 48) 50%,
        oklch(55% 0.20 50) 100%
    );
    min-height: 100vh;
    min-height: 100dvh;
}

/* Container principal da pagina */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

/* Formas flutuantes do fundo - mais visiveis */
.floating-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: oklch(100% 0 0 / 25%);
    top: -150px;
    left: -100px;
    animation: float-1 8s ease-in-out infinite;
}

.shape-2 {
    width: 350px;
    height: 350px;
    background: oklch(55% 0.25 50 / 40%);
    bottom: -100px;
    right: -100px;
    animation: float-2 10s ease-in-out infinite;
}

.shape-3 {
    width: 250px;
    height: 250px;
    background: oklch(80% 0.15 60 / 30%);
    top: 50%;
    left: -80px;
    animation: float-3 12s ease-in-out infinite;
}

.shape-4 {
    width: 200px;
    height: 200px;
    background: oklch(100% 0 0 / 20%);
    top: 10%;
    right: 10%;
    animation: float-4 9s ease-in-out infinite;
}

@keyframes float-1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, 40px) scale(1.1);
    }
}

@keyframes float-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-40px, -30px) scale(1.15);
    }
}

@keyframes float-3 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(50px, -20px) scale(1.08);
    }
}

@keyframes float-4 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-20px, 35px) scale(1.12);
    }
}

/* Card de login - Glassmorphism com destaque */
.glass-card {
    background: oklch(100% 0 0 / 85%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid oklch(100% 0 0 / 60%);
    border-radius: 1.5rem;
    padding: 2.5rem;
    width: 100%;
    max-width: 26rem;
    position: relative;
    z-index: 10;
    box-shadow:
        0 8px 32px oklch(0% 0 0 / 20%),
        0 0 0 1px oklch(100% 0 0 / 30%) inset,
        0 0 80px -20px oklch(70% 0.213 47.604 / 30%);
}

/* Logo */
.logo-image {
    width: 8rem;
    height: auto;
    transition: transform 0.3s ease;
}

.logo-image:hover {
    transform: scale(1.05);
}

/* Wrapper para input com icone */
.input-wrapper {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: oklch(50% 0 0 / 60%);
    font-size: 0.875rem;
    z-index: 1;
    pointer-events: none;
    transition: color 0.2s ease;
}

/* Inputs */
.input-wrapper .input {
    transition: all 0.2s ease;
}

.input-wrapper .input:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px var(--login-primary-light);
}

.input-wrapper:focus-within .input-icon {
    color: var(--login-primary);
}

/* Botao de login */
.login-btn {
    transition: all 0.2s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px oklch(70% 0.213 47.604 / 40%);
}

.login-btn:active {
    transform: translateY(0);
}

/* Responsividade Mobile */
@media (max-width: 639px) {
    .login-page {
        padding: 0;
        align-items: stretch;
    }

    .glass-card {
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        padding: 2rem 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: none;
        border: none;
        background: oklch(100% 0 0 / 92%);
    }

    .floating-shapes {
        opacity: 0.5;
    }

    .shape {
        filter: blur(60px);
    }

    .shape-1 {
        width: 250px;
        height: 250px;
        top: -80px;
        left: -80px;
    }

    .shape-2 {
        width: 200px;
        height: 200px;
        bottom: -50px;
        right: -50px;
    }

    .shape-3,
    .shape-4 {
        display: none;
    }

    .logo-image {
        width: 6rem;
    }
}

/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
    .glass-card {
        padding: 2.5rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .glass-card {
        padding: 3rem;
    }

    .logo-image {
        width: 10rem;
    }
}

/* Animacao de link */
.link-primary {
    position: relative;
    text-decoration: none;
}

.link-primary::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--login-primary);
    transition: width 0.2s ease;
}

.link-primary:hover::after {
    width: 100%;
}

/* Checkbox customizado */
.checkbox-primary:checked {
    background-color: var(--login-primary);
    border-color: var(--login-primary);
}

/* Alert de erro */
.alert-error {
    background: oklch(71.76% 0.221 22.18 / 10%);
    border: 1px solid oklch(71.76% 0.221 22.18 / 30%);
}

/* Focus visible para acessibilidade */
.input:focus-visible,
.btn:focus-visible,
.checkbox:focus-visible,
.link-primary:focus-visible {
    outline: 2px solid var(--login-primary);
    outline-offset: 2px;
}

/* Reducao de movimento para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .shape {
        animation: none;
    }

    .login-btn:hover {
        transform: none;
    }

    .logo-image:hover {
        transform: none;
    }
}