/* YewHo interface motion - build 20260730 */
/* premium-motion : generative ambient (premium-motion 2.0, Phase 4)
Dependency-light backgrounds + scroll-velocity reactivity. Pair with ambient.js.
.md-mesh — animated multi-radial mesh gradient (pure CSS)
.md-dots — interactive dot grid that ripples toward the cursor (canvas)
.md-velocity — element skews slightly with scroll speed, settles at rest
All ambient motion is full-tier only; lite/off show a static gradient/grid.
============================================================ */
/* --- animated mesh gradient ------------------------------------------- */
.md-mesh{
position:relative; overflow:hidden; isolation:isolate;
background-color:#161f2c;
background-image:
radial-gradient(38% 45% at 18% 22%, rgba(200,16,46,.42), transparent 60%),
radial-gradient(40% 42% at 82% 26%, rgba(58,111,208,.34), transparent 62%),
radial-gradient(46% 50% at 30% 82%, rgba(31,169,113,.28), transparent 60%),
radial-gradient(42% 46% at 78% 80%, rgba(214,158,20,.26), transparent 62%);
background-size:180% 180%;
}
@media (prefers-reduced-motion: no-preference){
:root[data-motion="full"] .md-mesh{ animation: md-mesh 22s ease-in-out infinite alternate; }
@keyframes md-mesh{
0% { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; }
50% { background-position: 40% 30%, 60% 20%, 30% 70%, 70% 60%; }
100%{ background-position: 100% 100%,0% 100%,100% 0%, 0% 0%; }
}
}
/* --- interactive dot grid --------------------------------------------- */
.md-dots{ position:relative; }
.md-dots canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* --- scroll-velocity skew --------------------------------------------- */
.md-velocity{ transform: skewY(var(--vskew,0deg)); transition: transform .35s cubic-bezier(.22,.61,.2,1); will-change: transform; }
:root[data-motion="lite"] .md-velocity,:root[data-motion="off"] .md-velocity{ transform:none !important; }
/* premium-motion : anchor-positioned tethers (yewho-web-effects 2.4, Phase 10)
CSS Anchor Positioning lets one element be positioned RELATIVE TO ANOTHER without
the two being DOM siblings or hand-computed with JS — and `position-try` flips it
automatically when it would overflow the viewport. Perfect for tooltips, rich
dropdowns, "new" callouts and coach-marks that must stay glued to a trigger.
.md-anchor — the trigger; names an anchor (default --md-anc, override --anc)
.md-tether — the floating panel; pins under the anchor, centred, auto-flips up
if there's no room below. Combine with [popover] for top-layer +
light-dismiss for free. Tune: --anc (shared name), --gap (def 10px)
Progressive: whole block is @supports-guarded. Where anchor positioning is absent
the panel just needs your own fallback position (e.g. a wrapping `position:relative`
parent) — nothing here breaks, it simply doesn't tether.
============================================================ */
@supports (anchor-name: --a){
.md-anchor{ anchor-name: var(--anc, --md-anc); }
.md-tether{
position: absolute;
position-anchor: var(--anc, --md-anc);
/* default placement: below the trigger, horizontally centred on it */
top: calc(anchor(bottom) + var(--gap,10px));
justify-self: anchor-center;
/* flip above / to the side when it would leave the viewport */
position-try-order: most-height;
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
max-width: min(320px, 92vw);
/* entrance */
opacity: 1; translate: 0 0;
transition: opacity .22s var(--md-ease,cubic-bezier(.22,.61,.2,1)),
translate .22s var(--md-ease,cubic-bezier(.22,.61,.2,1)),
display .22s allow-discrete, overlay .22s allow-discrete;
}
/* when the tether is a popover, animate open/close via @starting-style */
@supports (transition-behavior: allow-discrete){
.md-tether:popover-open{ opacity:1; translate:0 0; }
.md-tether[popover]:not(:popover-open){ opacity:0; translate:0 -6px; }
@starting-style{ .md-tether:popover-open{ opacity:0; translate:0 -6px; } }
}
/* optional little arrow that also tracks the anchor's horizontal centre */
.md-tether.arrow::before{
content:""; position:absolute; top:-6px; left:50%; translate:-50% 0;
width:12px; height:12px; rotate:45deg; background:inherit;
border-left:inherit; border-top:inherit;
}
@media (prefers-reduced-motion: reduce){
.md-tether{ transition-duration: 1ms; translate: 0 0 !important; }
}
}
/* premium-motion : scroll-snap carousel (yewho-web-effects 2.3, Phase 9)
Pairs with carousel.js (builds dots/arrows, keeps them in sync, optional
autoplay). Scrolling itself is 100% native scroll-snap — momentum, touch and
trackpad feel come from the browser, not JS.
Markup:
Item width: default 100% (one per view). Set --car-w for peeking cards,
e.g. style="--car-w:72%".
============================================================ */
.md-carousel{ position:relative; }
.md-car-track{ display:flex; gap:var(--car-gap,18px);
overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none; -ms-overflow-style:none;
scroll-behavior:smooth; padding-bottom:2px; }
.md-car-track::-webkit-scrollbar{ display:none; }
@media (prefers-reduced-motion: reduce){ .md-car-track{ scroll-behavior:auto; } }
.md-car-item{ flex:0 0 var(--car-w,100%); min-width:0; scroll-snap-align:start; }
/* arrows */
.md-car-nav button{ position:absolute; top:50%; translate:0 -50%; z-index:2;
width:42px; height:42px; border-radius:50%; border:1px solid var(--line,#E7EAEE);
background:#fff; color:var(--ink,#111823); cursor:pointer;
display:grid; place-items:center; font-size:16px; line-height:1;
box-shadow:0 8px 22px rgba(17,24,35,.10);
transition:transform .2s var(--md-ease,cubic-bezier(.22,.61,.2,1)),
background .2s, color .2s, opacity .2s; }
.md-car-nav .car-prev{ left:-8px; } .md-car-nav .car-next{ right:-8px; }
.md-car-nav button:hover{ background:var(--red,#C8102E); color:#fff; transform:translateY(-1px); }
.md-car-nav button:disabled{ opacity:.35; pointer-events:none; }
.md-car-nav button:focus-visible{ outline:2px solid var(--red,#C8102E); outline-offset:2px; }
/* dots */
.md-car-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.md-car-dots button{ width:8px; height:8px; border-radius:999px; border:0; padding:0;
background:var(--line,#D8DDE3); cursor:pointer;
transition:width .3s var(--md-ease,cubic-bezier(.22,.61,.2,1)), background .3s; }
.md-car-dots button[aria-current="true"]{ width:24px; background:var(--red,#C8102E); }
.md-car-dots button:focus-visible{ outline:2px solid var(--red,#C8102E); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .md-car-dots button{ transition:none; } }
/* premium-motion : image cinema (premium-motion 2.0, Phase 3)
Pair with cinema.js (which adds .in on view for wipe/blur-up).
.md-wipe — clip-path reveal on view
.md-blurup — blurred → sharp on view (or on ![]()
load)
.md-kenburns — slow, subconscious zoom/drift (ambient; full tier)
.md-duo — duotone/greyscale → full colour on hover
Works on ![]()
, background boxes, or any block.
============================================================ */
.md-wipe{ clip-path: inset(0 100% 0 0); }
.md-wipe.in{ transition: clip-path .9s cubic-bezier(.22,.61,.2,1); clip-path: inset(0 0 0 0); }
.md-blurup{ filter: blur(16px); transform: scale(1.03); }
.md-blurup.in{ transition: filter .8s ease, transform .8s ease; filter: blur(0); transform: none; }
.md-duo{ filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
@media (hover:hover){ .md-duo:hover{ filter: grayscale(0) contrast(1); } }
.md-kenburns{ overflow:hidden; }
.md-kenburns > *{ transform-origin:center; }
@media (prefers-reduced-motion: no-preference){
:root[data-motion="full"] .md-kenburns > img,
:root[data-motion="full"] .md-kenburns > .kb{ animation: md-kb 20s ease-in-out infinite alternate; }
@keyframes md-kb{ from{ transform:scale(1) translate(0,0) } to{ transform:scale(1.12) translate(-2%,-2%) } }
}
[data-motion="off"] .md-wipe{ clip-path:none !important; }
[data-motion="off"] .md-blurup{ filter:none !important; transform:none !important; }
/* --- scroll-scrubbed image sequence (opt-in; needs frame images) --------
cinema.js paints the frame matching scroll progress onto a