/* ══════════════════════════════════════════════════════════════ Auth Page — Special Effects (Orbit Ring, Phone Animation) ══════════════════════════════════════════════════════════════ */ /* ── Left panel glow overlay (::after) ───────────────────── */ /* Conic gradient ellipse ở bottom-right */ /* Selector này được bật khi có class .auth-page */ body.auth-page .left::after { content: ""; position: absolute; pointer-events: none; z-index: 0; width: 980px; height: 520px; right: -460px; bottom: -116px; border-radius: 50%; background: radial-gradient( ellipse at center, transparent 45%, rgba(73, 161, 255, 0.2) 46%, transparent 47.5%, transparent 55%, rgba(77, 190, 255, 0.26) 56%, transparent 57.5%, transparent 66%, rgba(93, 224, 255, 0.44) 67%, transparent 68.4% ), conic-gradient( from 208deg at 50% 50%, transparent 0deg, transparent 24deg, rgba(98, 227, 255, 0.82) 29deg, rgba(17, 132, 255, 0.46) 34deg, transparent 43deg, transparent 360deg ); filter: drop-shadow(0 0 16px rgba(77, 210, 255, 0.34)) drop-shadow(0 0 34px rgba(7, 93, 255, 0.26)); transform: rotate(-13deg); opacity: 0.92; } /* ── Orbit ring ───────────────────────────────────────────── */ .left-bg-orbit { position: absolute; right: -18%; bottom: -28%; width: 105%; height: 60%; border-radius: 50%; border-top: 2px solid rgba(111, 221, 255, 0.62); border-left: 1px solid rgba(53, 139, 255, 0.34); transform: rotate(-17deg); filter: drop-shadow(0 0 12px rgba(65, 210, 255, 0.42)); pointer-events: none; z-index: 0; } .left-bg-orbit::before, .left-bg-orbit::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .left-bg-orbit::before { inset: 34px 28px -30px 36px; border-top: 2px solid rgba(75, 155, 255, 0.42); border-left: 1px solid rgba(94, 211, 255, 0.2); } .left-bg-orbit::after { inset: 72px 64px -62px 82px; border-top-color: rgba(118, 238, 255, 0.7); filter: drop-shadow(0 0 18px rgba(108, 232, 255, 0.5)); } /* ── Phone icon animation ─────────────────────────────────── */ .hl-phone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; background: linear-gradient(135deg, #23a5ff 0%, #084cff 100%); border-radius: 0.26em; font-size: 0.56em; color: #fff; flex-shrink: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25); animation: ring 4.5s ease-in-out 2s infinite; transform-origin: center; } /* Sóng tròn xung quanh phone icon */ .hl-phone::before, .hl-phone::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); pointer-events: none; } .hl-phone::before { inset: -18%; border-color: rgba(255, 255, 255, 0.3); animation: pulse 2.6s ease-out infinite; } .hl-phone::after { inset: -36%; border-color: rgba(255, 255, 255, 0.18); animation: pulse 2.6s ease-out 0.8s infinite; } @keyframes pulse { 0% { opacity: 0.9; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.25); } } @keyframes ring { 0%, 44%, 100% { transform: rotate(0deg); } 49% { transform: rotate(-18deg); } 56% { transform: rotate(14deg); } 62% { transform: rotate(-9deg); } 68% { transform: rotate(5deg); } 74% { transform: rotate(0deg); } }