/*! bernard motion library stylesheet v1 (PRD 218), motion.v1.css, for motion.v1.js.
 * Library version 1. Written by bernard; it holds no third-party code, so it carries no
 * third-party notice (an effect adapted from a public pen adds its full MIT notice here).
 * Every rule names an effect or a class the library sets. Colours come from four settings
 * a site sets once: --bm-accent, --bm-accent-2, --bm-line, --bm-surface. A colour setting
 * is only ever used as a colour (never as a whole background, mask, content or cursor
 * value). Nothing here hides content. */
[data-b-motion]{--bm-a:var(--bm-accent,#1c5e53);--bm-a2:var(--bm-accent-2,#b98a2f);--bm-l:var(--bm-line,#d8cbaf);--bm-s:var(--bm-surface,#fff)}

/* typewriter: the caret is part of the effect, so it pauses with it */
[data-b-motion="typewriter"].bm-live::after{content:"";display:inline-block;width:2px;height:1em;background-color:var(--bm-a);vertical-align:-3px;margin-left:2px;animation:bm-blink 1s steps(1) infinite}
[data-b-motion="typewriter"].bm-paused::after{animation-play-state:paused}
@keyframes bm-blink{50%{opacity:0}}

/* shimmer */
[data-b-motion="shimmer"].bm-live{background:linear-gradient(100deg,currentColor 0%,currentColor 40%,var(--bm-a2) 50%,currentColor 60%,currentColor 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bm-shim 3.6s linear infinite}
@keyframes bm-shim{from{background-position:100% 0}to{background-position:-150% 0}}
[data-b-motion="shimmer"].bm-paused{animation-play-state:paused}

/* rotating: the script sets min-width to the longest word */
[data-b-motion="rotating"]{display:inline-block;color:var(--bm-a);text-align:left;text-decoration:underline;text-decoration-color:var(--bm-a2);text-decoration-thickness:2px;text-underline-offset:.15em}

/* highlighter */
[data-b-motion="highlighter"]{background:linear-gradient(transparent 58%,var(--bm-a2) 58%,var(--bm-a2) 92%,transparent 92%) no-repeat 0 0/100% 100%;color:inherit;padding:0 2px}

/* signature */
[data-b-motion="signature"] svg{max-width:100%;height:auto;overflow:visible}
[data-b-motion="signature"] path{fill:none;stroke:var(--bm-a);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* shine */
[data-b-motion="shine"]{position:relative;overflow:hidden}
[data-b-motion="shine"]::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none}
[data-b-motion="shine"]:hover::after,[data-b-motion="shine"]:focus-visible::after,[data-b-motion="shine"].bm-go::after{animation:bm-sweep .8s ease-out}
@keyframes bm-sweep{from{left:-60%}to{left:120%}}

/* pulse */
[data-b-motion="pulse"].bm-pulse{animation:bm-ring 2.4s ease-out 3}
@keyframes bm-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bm-a) 50%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* tilt */
[data-b-motion="tilt"]{transition:transform .15s ease-out}

/* underline */
[data-b-motion="underline"] a{position:relative;text-decoration:none}
[data-b-motion="underline"] a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background-color:var(--bm-a);transform:scaleX(0);transform-origin:left;transition:transform .35s ease-out}
[data-b-motion="underline"] a:hover::after,[data-b-motion="underline"] a:focus-visible::after{transform:scaleX(1)}

/* flip */
[data-b-motion="flip"]{perspective:800px;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
[data-b-motion="flip"] .bm-inner{position:relative;display:block;width:100%;height:100%;transition:transform .6s ease;transform-style:preserve-3d}
[data-b-motion="flip"].bm-flipped .bm-inner{transform:rotateY(180deg)}
[data-b-motion="flip"] .bm-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px;text-align:center}
[data-b-motion="flip"] .bm-front{background-color:var(--bm-s);border:1px solid var(--bm-l)}
[data-b-motion="flip"] .bm-back{background-color:var(--bm-a);color:#fff;transform:rotateY(180deg)}

/* marquee: wraps as a still row until the script runs */
[data-b-motion="marquee"]{overflow:hidden}
[data-b-motion="marquee"] .bm-track{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
[data-b-motion="marquee"].bm-live .bm-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:bm-mq 26s linear infinite}
[data-b-motion="marquee"]:hover .bm-track,[data-b-motion="marquee"].bm-paused .bm-track{animation-play-state:paused}
[data-b-motion="marquee"] .bm-track>*{white-space:nowrap}
[data-b-motion="marquee"] .bm-dup{display:none}
[data-b-motion="marquee"].bm-live .bm-dup{display:inline}
@keyframes bm-mq{to{transform:translateX(-50%)}}

/* before-after */
[data-b-motion="before-after"]{position:relative;overflow:hidden;user-select:none}
[data-b-motion="before-after"] .bm-before,[data-b-motion="before-after"] .bm-after{position:absolute;inset:0;background-size:cover;background-position:center}
[data-b-motion="before-after"] .bm-after{clip-path:inset(0 0 0 50%)}
[data-b-motion="before-after"] .bm-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
[data-b-motion="before-after"] .bm-lab{position:absolute;top:6px;font-size:11px;background:rgba(255,255,255,.9);padding:1px 5px}
[data-b-motion="before-after"] input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* parallax */
[data-b-motion="parallax"]{position:relative;overflow:hidden}
[data-b-motion="parallax"] .bm-para-bg{position:absolute;left:0;right:0;top:-30px;bottom:-30px;background-size:cover;background-position:center}
[data-b-motion="parallax"] .bm-para-fg{position:absolute;left:0;right:0;bottom:0;padding:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4);margin:0}

/* kenburns */
[data-b-motion="kenburns"]{position:relative;overflow:hidden}
[data-b-motion="kenburns"] .bm-kb{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:60% 60%}
[data-b-motion="kenburns"].bm-live .bm-kb{animation:bm-kb 14s ease-in-out infinite alternate}
[data-b-motion="kenburns"].bm-paused .bm-kb{animation-play-state:paused}
@keyframes bm-kb{from{transform:scale(1)}to{transform:scale(1.1) translate(-2%,-1%)}}

/* progress */
[data-b-motion="progress"] .bm-bar{height:10px;background-color:var(--bm-l)}
[data-b-motion="progress"] .bm-fill{height:100%;background-color:var(--bm-a)}
[data-b-motion="progress"] .bm-ring{transform:rotate(-90deg)}
[data-b-motion="progress"] .bm-ring circle{fill:none;stroke-width:8}

/* countdown */
[data-b-motion="countdown"] .bm-cd{display:flex;gap:8px;flex-wrap:wrap}
[data-b-motion="countdown"] .bm-cd>*{background-color:var(--bm-s);border:1px solid var(--bm-l);min-width:56px;padding:6px 4px;text-align:center}
/* Each number keeps its width whatever the font, so nothing moves when "--" becomes digits:
   two digits, and four for days (any date up to 27 years away). */
[data-b-motion="countdown"] [data-b-motion-unit]{display:block;min-width:2ch;font-size:1.4em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bm-a)}
[data-b-motion="countdown"] [data-b-motion-unit="d"]{min-width:4ch}

/* sticky-story */
[data-b-motion="sticky-story"]{overflow-y:auto;display:grid;grid-template-columns:90px 1fr;gap:0 12px;padding-right:12px;background-color:var(--bm-s);border:1px solid var(--bm-l)}
[data-b-motion="sticky-story"] .bm-fig{position:sticky;top:0;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;color:#fff;background-color:var(--bm-a);transition:background .5s ease;height:100%;max-height:100%}
[data-b-motion="sticky-story"] [data-b-motion-step-label]{min-height:120px;opacity:.45;transition:opacity .3s}
[data-b-motion="sticky-story"] .bm-on{opacity:1}

/* reading-progress */
[data-b-motion="reading-progress"] .bm-rbar{position:sticky;top:0;height:5px;background-color:var(--bm-l);z-index:1}
[data-b-motion="reading-progress"] .bm-rbar>div{height:100%;width:0;background-color:var(--bm-a)}

@media (prefers-reduced-motion: reduce){
  [data-b-motion],[data-b-motion] *,[data-b-motion]::before,[data-b-motion]::after,[data-b-motion] *::before,[data-b-motion] *::after{animation:none!important;transition:none!important}
  [data-b-motion="typewriter"].bm-live::after{display:none}
  [data-b-motion="shimmer"].bm-live{background:none;-webkit-text-fill-color:currentColor}
  [data-b-motion="marquee"].bm-live .bm-track{flex-wrap:wrap;justify-content:center;width:auto}
  [data-b-motion="marquee"].bm-live .bm-dup{display:none}
}
