/* Animated color showcase for /news articles (news_color_showcase.py).
   Loaded only on article pages that contain a .brm-color-showcase marker. */
.brmcs{--c:#888;position:relative;margin:24px 0;border-radius:18px;overflow:hidden;background:#0d0f14;color:#fff;
  isolation:isolate;-webkit-tap-highlight-color:transparent;touch-action:pan-y;user-select:none}
.brmcs::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#151821 0%,#07080b 100%)}
/* colored glow behind the bike follows the active color */
.brmcs::after{content:"";position:absolute;left:5%;right:5%;top:12%;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--c),transparent);opacity:.45;filter:blur(18px);transition:background .9s ease}
.brmcs-stage{position:relative;aspect-ratio:4/3;width:100%}
.brmcs-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden}
.brmcs-slide.is-active{opacity:1;visibility:visible;z-index:1}
.brmcs-bike{position:absolute;left:6%;top:16%;width:88%;height:56%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.55))}
/* Paint sweep: the incoming color is revealed by a diagonal blade */
.brmcs-slide.is-in{visibility:visible;opacity:1;z-index:2;animation:brmcs-wipe .95s cubic-bezier(.7,0,.2,1) both}
.brmcs-slide.is-out{visibility:visible;opacity:1;z-index:1}
@keyframes brmcs-wipe{
  from{clip-path:polygon(-40% 0,-40% 0,-80% 100%,-80% 100%)}
  to{clip-path:polygon(-40% 0,140% 0,100% 100%,-80% 100%)}}
.brmcs-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:22%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 0%,var(--c) 40%,#fff 50%,var(--c) 60%,transparent 100%);
  transform:translateX(-120%) skewX(-21deg);mix-blend-mode:screen;filter:blur(2px)}
.brmcs.is-sweeping .brmcs-sweep{animation:brmcs-blade .95s cubic-bezier(.7,0,.2,1) both}
@keyframes brmcs-blade{0%{opacity:0;transform:translateX(-120%) skewX(-21deg)}
  15%{opacity:.95}85%{opacity:.85}100%{opacity:0;transform:translateX(560%) skewX(-21deg)}}

/* Name morph */
.brmcs-meta{position:absolute;left:16px;right:16px;top:14px;z-index:4;text-align:left;pointer-events:none}
.brmcs-kicker{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.brmcs-name{display:block;font-size:22px;font-weight:800;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.6);
  transition:opacity .35s ease,filter .35s ease,letter-spacing .45s ease,transform .45s ease}
.brmcs-name.is-morph{opacity:0;filter:blur(6px);letter-spacing:.35em;transform:translateY(6px)}

/* Swatches: active one stretches into a pill */
.brmcs-dots{position:absolute;left:12px;bottom:14px;z-index:4;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 70px)}
.brmcs-dot{width:28px;height:28px;border-radius:14px;border:2px solid rgba(255,255,255,.55);background:var(--c);padding:0;
  cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);transition:width .45s cubic-bezier(.7,0,.2,1),border-color .3s}
.brmcs-dot.is-active{width:52px;border-color:#fff}
.brmcs-dot:focus-visible,.brmcs-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.brmcs-toggle{position:absolute;right:12px;bottom:14px;z-index:4;width:36px;height:36px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35)}
.brmcs-toggle::before,.brmcs-toggle::after{content:"";position:absolute;top:11px;width:4px;height:14px;background:#fff;border-radius:1px}
.brmcs-toggle::before{left:12px}.brmcs-toggle::after{right:12px}
.brmcs-toggle[aria-pressed="true"]::before{left:14px;width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;border-radius:0}
.brmcs-toggle[aria-pressed="true"]::after{display:none}
.brmcs:not(.is-ready) .brmcs-toggle{display:none}
.brmcs-progress{position:absolute;left:0;top:0;height:3px;z-index:4;background:var(--c);width:0}
.brmcs.is-ready:not(.is-paused) .brmcs-progress{animation:brmcs-progress var(--brmcs-ms,4200ms) linear both}
@keyframes brmcs-progress{to{width:100%}}

@media (min-width:768px){.brmcs-name{font-size:28px}.brmcs-stage{aspect-ratio:16/10}}

/* Reduced motion: plain crossfade, no blade, no morph, no autoplay progress */
@media (prefers-reduced-motion:reduce){
  .brmcs::before,.brmcs-name,.brmcs-dot{transition:none}
  .brmcs-slide.is-in{animation:brmcs-fade .3s linear both}
  .brmcs.is-sweeping .brmcs-sweep,.brmcs-progress{animation:none!important;display:none}
  .brmcs-name.is-morph{filter:none;letter-spacing:normal;transform:none}
}
@keyframes brmcs-fade{from{opacity:0}to{opacity:1}}

/* Variant-first layout. These scoped rules also override article-wide img rules. */
.brmcs-family{margin:24px 0}
.brmcs-family-title{font-weight:700;font-size:17px;margin-bottom:12px}
.brmcs-variant-label{display:block;font-weight:600;margin-bottom:6px}
.brmcs-variant-select{display:block;width:100%;min-height:48px;padding:10px 36px 10px 12px;
  border:1px solid #747b89;border-radius:10px;background:#fff;color:#182237;font:inherit}
.brmcs-panel[hidden]{display:none!important}
.brmcs-family .brmcs{margin:12px 0 0}
.brmcs .brmcs-meta{position:relative;inset:auto;padding:18px 18px 0;min-height:76px;box-sizing:border-box}
.brmcs .brmcs-kicker{line-height:1.5;letter-spacing:.06em}
.brmcs .brmcs-name{margin-top:4px}
.brmcs .brmcs-stage{aspect-ratio:4/3;overflow:hidden}
.brmcs .brmcs-slide{margin:0!important;padding:0;inset:0}
.brmcs .brmcs-bike{display:block;position:absolute;left:5%;top:5%;width:90%!important;height:90%!important;
  max-width:90%;max-height:90%;margin:0!important;padding:0;object-fit:contain;object-position:center center;
  border-radius:0;filter:drop-shadow(0 8px 8px rgba(0,0,0,.3))}
.brmcs .brmcs-stage::after{display:none}
.brmcs .brmcs-controls{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 18px}
.brmcs .brmcs-dots{position:static;max-width:none;flex:1;gap:8px}
.brmcs .brmcs-dot{width:36px;height:36px;border-radius:18px;min-width:36px;flex-shrink:0}
.brmcs .brmcs-dot.is-active{width:52px}
.brmcs .brmcs-toggle{position:relative;right:auto;bottom:auto;flex:0 0 40px;width:40px;height:40px}
.brmcs .brmcs-toggle[hidden]{display:none!important}
.brmcs .brmcs-toggle::before,.brmcs .brmcs-toggle::after{top:13px}
.brmcs-variant-select:focus-visible{outline:3px solid #4169e1;outline-offset:2px}
@media(min-width:768px){.brmcs .brmcs-stage{aspect-ratio:16/10}}