/* fx.css · page transitions (direction D). Pairs with fx.js.
   Cross-document view transitions: the nav stands still, the app mark + name morphs between its Apps card / "More apps"
   tile and the app page header, the old page falls away into the dot field, the new content rises in a short stagger.
   fx.js draws the field (fixed canvas behind everything) and its per-page mood; it also adds the view transition
   types "fx-back" (history back) and "fx-calm" (?fx=calm) when it is loaded in time. Reduced motion: no transition. */

@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

:root{--fx-e:cubic-bezier(.16,1,.3,1);--fx-s:cubic-bezier(.3,1.32,.42,1)}

/* the field canvas: fixed, behind all content, never takes input */
canvas.fxbg{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:-1;pointer-events:none;display:block}
canvas.fxwipe{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147483000;pointer-events:none;display:block}
html.fx-wipe-in::after{content:"";position:fixed;inset:0;background:#D71921;z-index:2147483001;pointer-events:none}
html.fx-wipe-in.fx-calm::after{background:var(--bg)}

/* ---- shared elements (static names: only a pair that exists on both pages morphs) ---- */
.top{view-transition-name:fx-top}
#lc-dotch .lname .logo,.app-track #app-dotch .aname,.tile.more[href$="dotch.html"] .icon{view-transition-name:fx-dotch}
#lc-dotwatt .lname .logo,.app-track #app-dotwatt .aname,.tile.more[href$="dotwatt.html"] .icon{view-transition-name:fx-dotwatt}
#lc-dotsetup .lname .logo,.app-track #app-dotsetup .aname,.tile.more[href$="dotsetup.html"] .icon{view-transition-name:fx-dotsetup}
#lc-dotype .lname .logo,.app-track #app-dotype .aname,.tile.more[href$="dotype.html"] .icon{view-transition-name:fx-dotype}
#lc-dotch .lname .logo,#lc-dotwatt .lname .logo,#lc-dotsetup .lname .logo,#lc-dotype .lname .logo,.app-track .aname,.tile.more .icon{view-transition-class:fx-mark}

/* nav: perfectly still (no crossfade, no morph) */
::view-transition-group(fx-top){animation:none}
::view-transition-old(fx-top){display:none}
::view-transition-new(fx-top){animation:none}

/* ---- the root: the old page drops back into depth and dissolves; the new one is live underneath (fx.js streams the
   field into its shape while the content rises). Origin = where the visitor clicked (set by fx.js on the new page). ---- */
::view-transition-old(root){animation:fx-out .46s cubic-bezier(.55,0,.25,1) both;transform-origin:var(--fx-ox,50%) var(--fx-oy,40%)}
::view-transition-new(root){animation:fx-in .3s linear both}
@keyframes fx-out{0%{opacity:1;transform:none}60%{opacity:.35}100%{opacity:0;transform:scale(.86) translateY(-2%)}}
@keyframes fx-out-back{0%{opacity:1;transform:none}60%{opacity:.35}100%{opacity:0;transform:scale(1.12)}}
@keyframes fx-in{from{opacity:.0}to{opacity:1}}
html:active-view-transition-type(fx-back)::view-transition-old(root){animation-name:fx-out-back}

/* unmatched marks (the other three Apps cards) leave / arrive with their page, not as loose floating pieces */
::view-transition-old(*.fx-mark):only-child{animation:fx-out .46s cubic-bezier(.55,0,.25,1) both}
::view-transition-new(*.fx-mark):only-child{animation:fx-rise-vt .6s var(--fx-e) .22s both}
@keyframes fx-rise-vt{from{opacity:0;transform:translateY(22px)}}

/* the morph itself: a spring that overshoots a touch; the card mark dissolves into the header (fx.js lets the
   field dots finish the mark in the slot) */
::view-transition-group(*.fx-mark){animation-duration:.78s;animation-timing-function:var(--fx-s)}
::view-transition-old(*.fx-mark){animation:fx-mk-out .42s ease-out both}
::view-transition-new(*.fx-mark){animation:fx-mk-in .5s ease-out .16s both}
::view-transition-image-pair(*.fx-mark){isolation:auto}
@keyframes fx-mk-out{to{opacity:0;filter:blur(3px)}}
@keyframes fx-mk-in{from{opacity:0}}

/* ---- content: short staggered rise (forward) / settle from above (back) while the transition runs ---- */
html:active-view-transition :is(.c0>*:not(.slot-word),.app-track .ctext>*:not(.aname),.app-track .cdemo,.page-head .wrap>*,.lineup .h2),
html.fx-enter :is(.c0>*:not(.slot-word),.app-track .ctext>*:not(.aname),.app-track .cdemo,.page-head .wrap>*,.lineup .h2){
 animation:fx-rise .74s var(--fx-e) both;animation-delay:calc(var(--fx-d,.2s) + var(--fx-k,0) * 55ms)}
html:active-view-transition-type(fx-back) :is(.c0>*:not(.slot-word),.app-track .ctext>*:not(.aname),.app-track .cdemo,.page-head .wrap>*,.lineup .h2),
html.fx-enter.fx-back :is(.c0>*:not(.slot-word),.app-track .ctext>*:not(.aname),.app-track .cdemo,.page-head .wrap>*,.lineup .h2){animation-name:fx-settle}
:is(.c0,.ctext,.page-head .wrap)>:nth-child(2){--fx-k:1}:is(.c0,.ctext,.page-head .wrap)>:nth-child(3){--fx-k:2}
:is(.c0,.ctext,.page-head .wrap)>:nth-child(4){--fx-k:3}:is(.c0,.ctext,.page-head .wrap)>:nth-child(5){--fx-k:4}
:is(.c0,.ctext,.page-head .wrap)>:nth-child(n+6){--fx-k:5}
.app-track .cdemo{--fx-k:4}
@keyframes fx-rise{from{opacity:0;translate:0 34px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes fx-settle{from{opacity:0;translate:0 -26px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}

/* ?fx=calm: the subtle version (plain crossfade, small rise, quick morph) */
html:active-view-transition-type(fx-calm)::view-transition-old(root){animation:fx-fade .24s ease-out both}
html:active-view-transition-type(fx-calm)::view-transition-new(root){animation:fx-in .24s ease-out both}
html:active-view-transition-type(fx-calm)::view-transition-group(*.fx-mark){animation-duration:.42s;animation-timing-function:var(--fx-e)}
html:active-view-transition-type(fx-calm) :is(.c0>*:not(.slot-word),.app-track .ctext>*:not(.aname),.app-track .cdemo,.page-head .wrap>*,.lineup .h2),
html.fx-enter.fx-calm :is(.c0>*:not(.slot-word),.app-track .ctext>*:not(.aname),.app-track .cdemo,.page-head .wrap>*,.lineup .h2){animation:fx-rise-s .45s var(--fx-e) both;animation-delay:calc(var(--fx-k,0) * 35ms)}
@keyframes fx-fade{to{opacity:0}}
@keyframes fx-rise-s{from{opacity:0;translate:0 10px}}

@media (prefers-reduced-motion:reduce){
 html.fx-enter *,html:active-view-transition *{animation:none!important}
 html.fx-wipe-in::after{display:none}
}