.chrome-glow-card {  --glow-blue: var(--chrome-blue); --glow-purple: var(--chrome-purple);  --inner-glow-size: 200px; --border-glow-size: 165px; --outer-glow-size: 180px; --glow-border: 2px; --glow-radius: 36px;  --mouse-x: -999px; --mouse-y: -999px; position: relative; isolation: isolate;  background-image: radial-gradient( circle var(--inner-glow-size) at var(--mouse-x) var(--mouse-y), rgba(22, 87, 206, 0.045) 0%, rgba(138, 55, 218, 0.025) 30%, transparent 65% ); border: 1px solid rgba(22, 87, 206, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; }  .chrome-glow-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle var(--outer-glow-size) at var(--mouse-x) var(--mouse-y), rgba(22, 87, 206, 0.18) 0%, rgba(138, 55, 218, 0.12) 30%, transparent 65% ); filter: blur(20px); opacity: 0; pointer-events: none; z-index: -1; transition: opacity 0.2s ease; } .chrome-glow-card:hover::before { opacity: 0.35; }  .chrome-glow-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: var(--glow-border); pointer-events: none; z-index: 10; background: radial-gradient( circle var(--border-glow-size) at var(--mouse-x) var(--mouse-y), rgba(22, 87, 206, 1) 0%, rgba(138, 55, 218, 0.9) 25%, rgba(138, 55, 218, 0.4) 45%, transparent 65% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.15s ease; } .chrome-glow-card:hover::after { opacity: 1; }  .chrome-glow-card:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(22, 87, 206, 0.05); }  @media (hover: none) { .chrome-glow-card::before, .chrome-glow-card::after { display: none; } .chrome-glow-card { background-image: none; } }