/* ---------------------------------------------------------------------------
   Glide -- the hover of every choosable surface of this site.
   Shared, like assets/js/mesh-field.js, because it is identical on all eight
   pages; linked AFTER the inline <style> of each page, which is what lets it
   outrank the hover rules written there without a heavier selector.

   What went wrong before, so it is not tried again. The version this replaces
   animated a radial gradient and a backdrop-filter through three discrete
   grades. Both of those are paint, not composite: every grade repainted the
   whole slab, and the grades were steps by design. On a page that also runs a
   WebGL lattice and nineteen previews that reads exactly as it was described --
   grainy, jerky. So nothing here paints per frame. Two properties move and both
   of them composite: transform and opacity. Nothing is stepped, nothing is an
   impulse, nothing waits its turn.

   What it is, now that the light is gone. A surface under the pointer rises a
   little and its fill brightens, and that is all: no glow, nothing luminous
   crossing the words. The travelling light that used to be here broke two of the
   owner's rules at once -- it passed over the ink while he was reading it, and it
   was painted with mix-blend-mode, which is not a compositor job: a blended layer
   forces the whole stack under it to be re-composited every frame, over a canvas
   that is already redrawing. That was the grain. Nothing has to complete:
   at every instant of a pass, however fast, the surface is already showing its
   answer at the place the pointer has reached. A transition interrupted halfway
   resumes from where it stands, which is why this is the mechanism that cannot
   stutter -- the one the earlier impulse was invented to replace and should not
   have been.

   assets/js/glide.js is idle while this file has no light to place; it is left
   in the page because the variant that replaces this one will want it.
   --------------------------------------------------------------------------- */

body[data-hover="glide"]{
  /* how far a surface rises. A 672px row grows 10px per side into its 24px
     gutter, a 200px tile 2px into a 16px gap: visible, never touching */
  --g-grow:1.03;
  --g-press:.994;
  /* in is long and soft, out is shorter and drier -- the rule the portrait and
     the quote card already follow. Neither is a spring: a curve that overshoots
     is a curve that can be caught mid-bounce, and being caught mid-move is the
     normal case here, not the exception */
  --g-in:.42s cubic-bezier(.16,.84,.3,1);
  --g-out:.3s cubic-bezier(.4,0,.2,1);
  --g-press-t:.1s;
}

/* ---- the geometry: every surface, one rule ------------------------------ */
body[data-hover="glide"] :is(.row,.back,.pdf,.feature .links a,.tile,.paper,
  .gallery li,.avatar-btn,.mv-zoom button,.ov-btn,.grp-close,.mv-parts button,
  .surf button,.shots button){
  position:relative;
  transform:none;                      /* the size lives on scale, so it composes */
  scale:1;
  transition:scale var(--g-out),
             background-color var(--g-out),color var(--g-out),
             border-color var(--g-out),
             -webkit-backdrop-filter var(--g-out),backdrop-filter var(--g-out);
}
body[data-hover="glide"] :is(.row,.back,.pdf,.feature .links a,.tile,.paper,
  .gallery li,.avatar-btn,.mv-zoom button,.ov-btn,.grp-close,.mv-parts button,
  .surf button,.shots button):is(:hover,:focus-visible){
  scale:var(--g-grow);
  z-index:1;
  transition:scale var(--g-in),
             background-color var(--g-in),color var(--g-in),
             border-color var(--g-in),
             -webkit-backdrop-filter var(--g-in),backdrop-filter var(--g-in);
}
body[data-hover="glide"] :is(.row,.back,.pdf,.feature .links a,.tile,.paper,
  .gallery li,.avatar-btn,.mv-zoom button,.ov-btn,.grp-close,.mv-parts button,
  .surf button,.shots button):active{
  scale:var(--g-press);
  transition:scale var(--g-press-t) cubic-bezier(.4,0,.2,1);
}


/* a tile is a dark box with a picture in it: its name strip is the light part,
   and it is where the disc has something to brighten */
body[data-hover="glide"] .tile-t{transition:background-color var(--g-out),color var(--g-out)}
body[data-hover="glide"] .tile:is(:hover,:focus-visible) .tile-t{
  transition:background-color var(--g-in),color var(--g-in);
}

/* ---- the mark in the margin of a row ------------------------------------ */
/* it grows on a transform and not on its box: a box resizing inside a surface
   whose fill is a backdrop-filter re-rasters that layer every frame */
body[data-hover="glide"]{--bar-w-hover:var(--bar-w,3px);--bar-h-hover:var(--bar-h,56%);
  --row-scale:1;--row-scale-press:1;--g-bar:1.34}
body[data-hover="glide"] .row::before{transition:transform var(--g-out)}
body[data-hover="glide"] .row:is(:hover,:focus-visible)::before{
  transform:translateY(-50%) scale(var(--g-bar));
  transition:transform var(--g-in);
}

/* ---- the edges ---------------------------------------------------------- */
/* a finger leaves :hover stuck on whatever it tapped, and a surface left risen
   with a light on it is unmistakable */
@media (hover:none){
  body[data-hover="glide"] :is(.row,.back,.pdf,.feature .links a,.tile,.paper,
    .gallery li,.avatar-btn,.mv-zoom button,.ov-btn,.grp-close,.mv-parts button,
    .surf button,.shots button):hover{scale:1}
  body[data-hover="glide"] .row:hover::before{transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){
  /* the states stay, the travel goes: the fill still says which surface is
     chosen, nothing moves and no light follows anything */
  body[data-hover="glide"] :is(.row,.back,.pdf,.feature .links a,.tile,.paper,
    .gallery li,.avatar-btn,.mv-zoom button,.ov-btn,.grp-close,.mv-parts button,
    .surf button,.shots button),
  body[data-hover="glide"] :is(.row,.back,.pdf,.feature .links a,.tile,.paper,
    .gallery li,.avatar-btn,.mv-zoom button,.ov-btn,.grp-close,.mv-parts button,
    .surf button,.shots button):is(:hover,:focus-visible,:active){
    scale:1 !important;
  }
  body[data-hover="glide"] .row:is(:hover,:focus-visible)::before{
    transform:translateY(-50%) scale(var(--g-bar)) !important;
  }
}