/* Fondo animado premium para login de joyería. Recomendado para web porque pesa casi nada y se ve nítido en cualquier resolución. Uso rápido en Thymeleaf/login: */ body.login-page { min-height: 100vh; background: radial-gradient(circle at 72% 42%, rgba(24, 57, 102, 0.72), transparent 34%), radial-gradient(circle at 18% 84%, rgba(180, 139, 44, 0.26), transparent 30%), linear-gradient(135deg, #050610 0%, #101936 52%, #010104 100%); background-size: 140% 140%, 130% 130%, 100% 100%; animation: luxuryDrift 12s ease-in-out infinite alternate; overflow: hidden; position: relative; } body.login-page::before { content: ""; position: fixed; inset: -25%; pointer-events: none; background: repeating-linear-gradient(112deg, transparent 0 72px, rgba(214, 168, 58, .08) 73px, transparent 76px), radial-gradient(circle, rgba(255,236,161,.38) 0 1px, transparent 2px); background-size: auto, 92px 92px; animation: goldParticles 18s linear infinite; opacity: .72; } body.login-page::after { content: "Golden Joyería · La Fina Joyería"; position: fixed; left: clamp(28px, 6vw, 120px); bottom: clamp(42px, 8vh, 95px); color: rgba(255, 246, 221, .13); font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 6vw, 118px); letter-spacing: .035em; white-space: nowrap; text-shadow: 0 0 26px rgba(214, 168, 58, .20); pointer-events: none; } @keyframes luxuryDrift { from { background-position: 0% 48%, 18% 100%, center; } to { background-position: 100% 52%, 0% 80%, center; } } @keyframes goldParticles { from { transform: translate3d(-2%, 2%, 0) rotate(0deg); } to { transform: translate3d(2%, -2%, 0) rotate(2deg); } }