/* Add Focus button visuals and sheen animation */ .slot-add-focus { width: 20px; height: 20px; line-height: 18px; border-radius: 50%; border: 1px solid #4a9eff; background: rgba(74, 158, 255, 0.12); color: #64c8ff; font-size: 14px; text-align: center; cursor: pointer; transition: all 0.18s ease; box-shadow: 0 0 8px rgba(74, 158, 255, 0.18); padding: 0; flex-shrink: 0; position: relative; overflow: hidden; } /* pseudo-element for glint - constrained inside the circular button */ .slot-add-focus::before { content: ""; position: absolute; left: -80%; top: -10%; width: 260%; height: 140%; background: linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.35) 38%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.35) 62%, rgba(255,255,255,0.0) 100%); transform: rotate(-18deg); pointer-events: none; opacity: 0; border-radius: 50%; mix-blend-mode: screen; filter: blur(6px); } /* sheen + glint animation */ .slot-add-focus { animation: slot-add-focus-sheen 3.6s ease-in-out infinite; } .slot-add-focus::before { animation: slot-add-focus-glint 3.6s cubic-bezier(.2,.8,.2,1) infinite; } @keyframes slot-add-focus-sheen { 0% { box-shadow: 0 0 0px rgba(100,200,255,0); transform: translateY(0) scale(1); } 25% { box-shadow: 0 0 10px rgba(100,200,255,0.16), 0 0 4px rgba(180,220,255,0.06) inset; transform: translateY(-1px) scale(1.03); } 50% { box-shadow: 0 0 18px rgba(100,200,255,0.26), 0 0 6px rgba(180,220,255,0.08) inset; transform: translateY(0) scale(1); } 75% { box-shadow: 0 0 10px rgba(120,220,200,0.18), 0 0 4px rgba(220,180,255,0.06) inset; transform: translateY(-0.5px) scale(1.02); } 100% { box-shadow: 0 0 0px rgba(100,200,255,0); transform: translateY(0) scale(1); } } @keyframes slot-add-focus-glint { 0% { transform: translateX(-100%) rotate(-18deg); opacity: 0; } 35% { opacity: 0.9; transform: translateX(10%) rotate(-18deg); } 60% { opacity: 0.9; transform: translateX(40%) rotate(-18deg); } 100% { transform: translateX(120%) rotate(-18deg); opacity: 0; } } /* Header pulse/attention animation when wave overlay blocks start */ @keyframes header-pulse { 0% { box-shadow: 0 0 6px rgba(100,200,255,0.75), inset 0 0 6px rgba(100,200,255,0.75); border-color: rgba(100,200,255,0.75); background: rgba(10,12,20,0.18); } 25% { box-shadow: 0 0 18px rgba(100,200,255,0.75), 0 0 6px rgba(160,220,255,0.75) inset, 0 0 30px rgba(120,180,255,0.75); border-color: rgba(130,200,255,0.75); background: linear-gradient(90deg, rgba(10,14,24,0.20), rgba(18,22,36,0.14)); } 50% { box-shadow: 0 0 24px rgba(120,235,190,0.75), inset 0 0 12px rgba(120,235,190,0.75); border-color: rgba(120,235,190,0.75); background: linear-gradient(90deg, rgba(12,16,26,0.24), rgba(20,26,40,0.16)); } 75% { box-shadow: 0 0 18px rgba(255,200,120,0.75), inset 0 0 8px rgba(255,200,120,0.75); border-color: rgba(255,200,120,0.75); background: linear-gradient(90deg, rgba(12,14,24,0.18), rgba(26,16,36,0.12)); } 100% { box-shadow: 0 0 6px rgba(100,200,255,0.75), inset 0 0 6px rgba(100,200,255,0.75); border-color: rgba(100,200,255,0.75); background: rgba(10,12,20,0.18); } } /* Only apply the glow when both flags are present on */ .wave-overlay-focus-blocked.wave-overlay-panel-hover #equipped-spells .spell-slot-header { border-color: #64c8ff; animation: header-pulse 2.4s ease-in-out infinite; transition: box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease; z-index: 5; position: relative; }