/* Wide pill actions, separate colour and staggered character layers.
   A CXPAPER interpretation of Carvico's double-label interaction. */
.atelier-site .btn{
 --label-base:#0f284c;--label-face:#a5eb5b;--label-ink:#f5f3ed;--label-line:#0f284c;
 --action-hover-ink:#0f284c;--action-hover-line:#a5eb5b;
}
.atelier-site .btn.outline{
 --label-base:transparent;--label-face:#0f284c;--label-ink:#0f284c;--label-line:#0f284c;
 --action-hover-ink:#fff;--action-hover-line:#0f284c;
}
.atelier-site :is(.hero,.inner-hero,.oem-download,.paper-cta) .btn,
.atelier-site .site-header .nav-quote{
 --label-base:#a5eb5b;--label-face:#f5f3ed;--label-ink:#0f284c;--label-line:#a5eb5b;
 --action-hover-ink:#0f284c;--action-hover-line:#f5f3ed;
}
.atelier-site :is(.hero,.inner-hero,.oem-download) .btn.outline{
 --label-base:transparent;--label-face:#a5eb5b;--label-ink:#f5f3ed;--label-line:#f5f3ed;
 --action-hover-ink:#0f284c;--action-hover-line:#a5eb5b;
}
body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]{
 position:relative;isolation:isolate;overflow:hidden;border-radius:100px;
 min-height:52px;padding:15px 28px;
 background:var(--label-base);color:var(--label-ink);border:1px solid var(--label-line);
 box-shadow:none;transform:none;gap:0;justify-content:center;
 transition:color 250ms ease,border-color 250ms ease,transform 150ms ease;
}
body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]::before{
 content:'';display:block;position:absolute;inset:0;z-index:-1;border:0;border-radius:inherit;
 background:var(--label-face);box-shadow:none;clip-path:none;opacity:1;
 transform:translateY(102%);transition:transform 520ms cubic-bezier(.22,1,.36,1);
}
body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]::after{content:none;display:none}
body.atelier-site .rolling-action>.action-label-window{
 display:block;position:relative;overflow:hidden;line-height:inherit;
 max-width:100%;pointer-events:none;transform:none;
}
body.atelier-site .action-label-accessible{
 position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;border:0;
}
body.atelier-site .rolling-action .action-label-track{display:block;position:relative;transform:none}
body.atelier-site .rolling-action .action-label-primary,
body.atelier-site .rolling-action .action-label-copy{display:block;font:inherit;line-height:inherit;white-space:nowrap}
body.atelier-site .rolling-action .action-label-copy{position:absolute;inset:0;pointer-events:none;user-select:none}
body.atelier-site .rolling-action .action-character{
 display:inline-block;white-space:pre;transform:translateY(0);
 transition:transform 420ms cubic-bezier(.22,1,.36,1);transition-delay:0ms;
}
body.atelier-site .rolling-action .action-label-copy .action-character{transform:translateY(115%)}
body.atelier-site a.rolling-action:not(.btn){
 position:relative;text-decoration:none;border-bottom:0;padding-bottom:5px;
 transition:color 220ms ease;
}
body.atelier-site a.rolling-action:not(.btn)::before{content:none;display:none}
body.atelier-site a.rolling-action:not(.btn)::after{
 content:'';display:block;position:absolute;inset:auto 0 0;height:1px;background:currentColor;
 transform:scaleX(1);transform-origin:left;opacity:1;
}
@media(hover:hover) and (pointer:fine){
 body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]:hover:not(:disabled):not([aria-disabled=true]){
  color:var(--action-hover-ink);border-color:var(--action-hover-line);transform:none;box-shadow:none;
 }
 body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]:hover:not(:disabled):not([aria-disabled=true])::before{transform:translateY(0)}
 body.atelier-site .rolling-action:hover:not(:disabled):not([aria-disabled=true]):not(:focus-visible) .action-character{
  transform:translateY(-115%);transition-duration:620ms;transition-delay:var(--character-delay);
 }
 body.atelier-site .rolling-action:hover:not(:disabled):not([aria-disabled=true]):not(:focus-visible) .action-label-copy .action-character{
  transform:translateY(0);transition-delay:calc(var(--character-delay) + 60ms);
 }
 body.atelier-site a.rolling-action:not(.btn):hover::after{animation:action-line 600ms cubic-bezier(.22,1,.36,1)}
}
@keyframes action-line{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]:focus-visible:not(:disabled):not([aria-disabled=true]){
 background:var(--label-face);color:var(--action-hover-ink);border-color:var(--action-hover-line);
 outline:2px solid currentColor;outline-offset:5px;transition:none;
}
body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]:active:not(:disabled):not([aria-disabled=true]){transform:scale(.97)}
body.atelier-site .rolling-action:focus-visible .action-character{transform:none;transition:none}
body.atelier-site .rolling-action:focus-visible .action-label-copy{visibility:hidden}
@media(hover:none),(pointer:coarse){
 body.atelier-site .rolling-action .action-character{transform:none!important;transition:none}
 body.atelier-site .rolling-action .action-label-copy{display:none}
 body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]:active{background:var(--label-face);color:var(--action-hover-ink)}
}
@media(prefers-reduced-motion:reduce){
 body.atelier-site .rolling-action,body.atelier-site .rolling-action .action-character{transition:none!important;transform:none!important}
 body.atelier-site .rolling-action .action-label-copy{display:none}
 body.atelier-site .rolling-action::after{animation:none!important}
 body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]::before{transition:none}
}
@media(max-width:760px){body.atelier-site :is(main,.site-header,.footer,dialog) .btn[class]{min-height:48px;padding:13px 23px}}