/* ✨ lunglinh.css — Lớp hiệu ứng "lung linh" DÙNG CHUNG cho mọi trang EduMathEco. Chỉ trang trí (aurora, sao, hạt sáng, glow, ripple) — KHÔNG đụng layout/logic. Kích hoạt bởi /js/lunglinh.js (tự dời nền body lên để các lớp z-index:-1 hiện ra). */ /* ===== Lớp nền aurora + trường sao: nằm SAU toàn bộ nội dung ===== */ .ll-aurora, .ll-stars { position: fixed; inset: -15%; z-index: -1; pointer-events: none; } .ll-stars { inset: 0; } /* Aurora chuyển động dịu */ .ll-aurora { animation: llAuroraDrift 20s ease-in-out infinite; } @keyframes llAuroraDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2.5%, -2%) scale(1.1); } } /* Biến thể theo nền: html.ll-light (nền sáng) / html.ll-dark (nền tối) */ html.ll-light .ll-aurora { background: radial-gradient(circle at 18% 26%, rgba(0,176,155,0.20), transparent 42%), radial-gradient(circle at 82% 18%, rgba(150,201,61,0.18), transparent 44%), radial-gradient(circle at 70% 82%, rgba(33,150,243,0.15), transparent 46%), radial-gradient(circle at 30% 75%, rgba(155,89,182,0.12), transparent 42%); } html.ll-dark .ll-aurora { background: radial-gradient(circle at 20% 25%, rgba(0,201,173,0.24), transparent 40%), radial-gradient(circle at 80% 18%, rgba(33,150,243,0.20), transparent 42%), radial-gradient(circle at 65% 80%, rgba(150,201,61,0.16), transparent 44%), radial-gradient(circle at 28% 78%, rgba(155,89,182,0.18), transparent 42%); } /* Trường sao nhấp nháy (rõ trên nền tối, dịu trên nền sáng) */ .ll-stars { background-image: radial-gradient(2px 2px at 12% 22%, currentColor, transparent), radial-gradient(2px 2px at 28% 68%, currentColor, transparent), radial-gradient(1.5px 1.5px at 55% 35%, currentColor, transparent), radial-gradient(2px 2px at 78% 60%, currentColor, transparent), radial-gradient(1.5px 1.5px at 88% 25%, currentColor, transparent), radial-gradient(2px 2px at 40% 88%, currentColor, transparent), radial-gradient(1.5px 1.5px at 67% 15%, currentColor, transparent); animation: llStars 4.5s ease-in-out infinite; } html.ll-dark .ll-stars { color: rgba(255,255,255,0.85); } html.ll-light .ll-stars { color: rgba(0,176,155,0.5); } @keyframes llStars { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } /* ===== Hạt sáng lấp lánh ===== */ .ll-spark { position: fixed; z-index: -1; pointer-events: none; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(0,201,173,0.7) 60%, transparent 70%); box-shadow: 0 0 8px rgba(0,201,173,0.85); animation: llSpark 3s ease-in-out infinite; } @keyframes llSpark { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1.25); } } /* ===== Ô nhập liệu phát sáng khi focus ===== */ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(0,176,155,0.18), 0 0 18px rgba(0,176,155,0.25) !important; transition: box-shadow 0.25s ease; } /* ===== Nút thương hiệu: tia sáng quét ngang (JS gắn .ll-shine để giới hạn phạm vi) ===== */ .ll-shine { position: relative; overflow: hidden; } .ll-shine::after { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); pointer-events: none; animation: llShine 4.5s ease-in-out infinite; } @keyframes llShine { 0% { left: -130%; } 55% { left: 150%; } 100% { left: 150%; } } /* ===== Gợn sóng khi bấm nút ===== */ .ll-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); transform: scale(0); animation: llRippleAnim 0.55s ease-out; pointer-events: none; z-index: 5; } @keyframes llRippleAnim { to { transform: scale(2.8); opacity: 0; } } /* Tôn trọng người dùng tắt chuyển động */ @media (prefers-reduced-motion: reduce) { .ll-aurora, .ll-stars, .ll-spark, .ll-shine::after { animation: none !important; } }