/* Hero demo card styles — from includes/hero_demo_card.cfm (home hero + login) */
@keyframes lxRipple{0%{transform:scale(.5);opacity:.34}100%{transform:scale(1.8);opacity:0}}
@keyframes lxPulseScale{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes lxRingWiggle{0%,75%,100%{transform:rotate(0)}15%{transform:rotate(-15deg)}30%{transform:rotate(13deg)}45%{transform:rotate(-11deg)}60%{transform:rotate(8deg)}}
@keyframes lxEq{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@keyframes lxSoftIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* --- Shimmer wipe POC (faithful port of shimmer.html): sweeps the answer row currently being read. --- */
@keyframes lxWipe{0%{-webkit-mask-position:200% center;mask-position:200% center}100%{-webkit-mask-position:0% center;mask-position:0% center}}
.lx-shimmer{position:absolute;inset:-40px;border-radius:inherit;mix-blend-mode:plus-lighter;pointer-events:none;opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 88%,transparent 90%);mask-image:linear-gradient(90deg,transparent 20%,#000 88%,transparent 90%);-webkit-mask-size:200% 200%;mask-size:200% 200%;-webkit-mask-position:center;mask-position:center}
.lx-shimmer::before,.lx-shimmer::after{content:"";position:absolute;inset:40px;border-radius:inherit}
.lx-shimmer::before{box-shadow:0 0 3px 2px rgba(255,255,255,.9),0 0 8px 5px var(--lx-accent,#8D75E6),0 0 18px 9px var(--lx-accent,#8D75E6);z-index:-1}
.lx-shimmer::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 0 4px 1px var(--lx-accent,#8D75E6),inset 0 0 11px 2px var(--lx-accent,#8D75E6);z-index:2}
.lx-shimmer.on{opacity:1}
/* --- Circling border comet: travels the outline on the result reveal (green=correct, red=incorrect). --- */
@property --lx-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lxSpin{to{--lx-angle:360deg}}
.lx-ring{position:absolute;inset:0;border-radius:inherit;padding:2.5px;pointer-events:none;opacity:0;transition:opacity .2s ease;
  background:conic-gradient(from var(--lx-angle),transparent 0deg,var(--lx-ring) 34deg,#fff 52deg,var(--lx-ring) 70deg,transparent 104deg,transparent 180deg,var(--lx-ring) 214deg,#fff 232deg,var(--lx-ring) 250deg,transparent 284deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:drop-shadow(0 0 4px var(--lx-ring));animation:lxSpin 2.4s linear infinite}
.lx-ring.on{opacity:1}
.lx-ring.correct{--lx-ring:#4ADE80}
.lx-ring.wrong{--lx-ring:#F87171}
#lxHeroGlow{display:none;}
@media(max-width:520px){#lxHeroCard{width:92vw !important;max-width:525px;height:540px !important;}}