/* Button press candles (see press.js). The layer is clipped to the button; the label steps aside meanwhile. */
:where(.btn, .button.primary, .button.secondary, .nf-button, .nav-cta) { position: relative; isolation: isolate; }
.pressing { color: transparent !important; text-shadow: none !important; }
.pressing > :not(.press-fx) { opacity: 0; }
.press-fx { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; animation: press-fade .95s linear forwards; }
.press-fx svg { display: block; width: 100%; height: 100%; animation: press-rise .95s cubic-bezier(.2, .7, .2, 1) forwards; }
.press-fx .pc { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: press-candle .28s cubic-bezier(.2, .7, .2, 1) forwards; }
.press-fx line { stroke: currentColor; stroke-width: 1.4; }
.press-fx .up rect { fill: currentColor; }
.press-fx .down rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
/* Dark buttons: gold candles. Gold buttons: ink candles and a light trend line. Site colours only. */
.press-fx .up { color: #e2c46c; }
.press-fx .down { color: #a9873a; }
.press-fx .pt { fill: none; stroke: #f3dc93; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: press-trend .42s .14s cubic-bezier(.2, .7, .2, 1) forwards; }
.press-fx.on-gold .up { color: #17130a; }
.press-fx.on-gold .down { color: #5c4715; }
.press-fx.on-gold .pt { stroke: #fffaf0; }
@keyframes press-fade { 0% { opacity: 0; } 5%, 65% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes press-rise { 0%, 65% { transform: none; } 100% { transform: translateY(-4px); } }
@keyframes press-candle { to { transform: scaleY(1); } }
@keyframes press-trend { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .press-fx { display: none; } .pressing { color: inherit !important; } .pressing > * { opacity: 1; } }