/* C shares B motion and geometry; only light colors change. */
body[data-design=a] :is([data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]){--card-glow-rgb:255,255,255;--card-rim-rgb:255,255,255;--card-sheen-rgb:245,245,245}
/* Pattern B: FxDesignSelect.tsx / flashy.css (web-demo E-118).
   Individual translate keeps the existing rotate transforms and ON-test WAAPI intact. */
.hero-card-rim,.hero-card-sheen,.hero-card-pedestal{display:none;pointer-events:none}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-edge-light{display:none}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-edge-light path{animation:none}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) :is(.hero-front,.hero-back){animation:hero-card-bob 3.2s ease-in-out infinite}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) :is(.hero-card-rim,.hero-card-sheen){display:block;position:absolute;inset:0;border-radius:inherit}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-rim{box-shadow:0 0 0 1.5px rgba(var(--card-rim-rgb,255,250,205),.75),0 0 16px 2px rgba(var(--card-glow-rgb,237,232,42),.5),0 0 44px 8px rgba(var(--card-glow-rgb,237,232,42),.18)}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-sheen{overflow:hidden}
.hero-card-sheen i{position:absolute;left:0;top:-25%;width:60%;height:150%;background:linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.42) 46%,rgba(var(--card-sheen-rgb,244,242,196),.3) 56%,rgba(255,255,255,0) 82%);transform:translateX(-130%) skewX(-14deg)}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-sheen i{animation:hero-card-sheen 3.4s cubic-bezier(.45,0,.25,1) infinite}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-pedestal{display:block;position:absolute;left:calc(50% + var(--info-offset,0px));bottom:-24px;transform:translateX(-50%);width:min(70%,260px);height:52px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--card-glow-rgb,237,232,42),.42),rgba(var(--card-glow-rgb,237,232,42),.1) 62%,rgba(var(--card-glow-rgb,237,232,42),0));z-index:0}
.hero-card-pedestal::before,.hero-card-pedestal::after{content:"";position:absolute;left:14%;top:24%;width:72%;height:52%;border-radius:50%;border:1.5px solid rgba(var(--card-glow-rgb,237,232,42),.8);opacity:0}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-pedestal::before,body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-pedestal::after{animation:hero-card-pulse 2.6s ease-out infinite}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-pedestal::after{animation-delay:1.3s}
@keyframes hero-card-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes hero-card-sheen{0%,45%{transform:translateX(-130%) skewX(-14deg)}100%{transform:translateX(240%) skewX(-14deg)}}
@keyframes hero-card-pulse{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.35);opacity:0}}
body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25])[data-visibility=hidden] :is(.hero-front,.hero-back,.hero-card-sheen i),body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25])[data-visibility=hidden] .hero-card-pedestal::before,body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25])[data-visibility=hidden] .hero-card-pedestal::after{animation-play-state:paused}
/* The pair only moves vertically. Keep the outer glow inside the phone's 16px gutter. */
@media(max-width:700px){body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-rim{box-shadow:0 0 0 1.5px rgba(var(--card-rim-rgb,255,250,205),.75),0 0 12px 1px rgba(var(--card-glow-rgb,237,232,42),.5),0 0 20px 1px rgba(var(--card-glow-rgb,237,232,42),.18)}}
@media(prefers-reduced-motion:reduce){
 body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) :is(.hero-front,.hero-back,.hero-card-sheen i){animation:none;translate:none}
 body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-sheen{display:none}
 body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-pedestal::before{animation:none;opacity:.5;transform:none}
 body[data-design=a] :is([data-card-visual=b],[data-card-visual=c],[data-card-visual=c50],[data-card-visual=c25]) .hero-card-pedestal::after{animation:none;opacity:0}
}

/* Only the separate rectangular rim layer changes opacity. Sheen/pedestal stay intact. */
body[data-design=a] [data-card-visual=c50] .hero-card-rim{opacity:.5}
body[data-design=a] [data-card-visual=c25] .hero-card-rim{opacity:.25}