/* EGATO page v44 layer (2026-10-26/27). Loaded after v43.css; belt-v44.css carries the close-up belt and reader.

   The motion pass of DESIGN.md: calm reveals, bars that draw themselves, spotlights that switch on, the top bar that
   folds on scroll, gliding accordions, smooth jumps and the cat's leap (cat-v44.js). Everything animates transform or
   opacity only (the accordion body animates its grid rows), and nothing moves under prefers-reduced-motion. */

/* Smooth travel on the jump row and the section links, so a tap shows the page moving. */
html{scroll-behavior:smooth}

/* Calm reveals: a block fades in once with an 8 px rise as it enters the lower screen. motion-v44.js adds the classes,
   so nothing is hidden without the script, and blocks on screen at load (was-in) never animate. */
.js-motion .rv:not(.is-in){opacity:0}
.js-motion .rv.is-in:not(.was-in){animation:v44-in 380ms var(--ease-out) both}
@keyframes v44-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Ride-time and cost bars draw themselves from the left when their card comes into view, one after another. */
.js-motion .compare-card.bars-armed .compare-bar{transform:scaleX(0);transform-origin:left center}
.js-motion .compare-card.bars-drawn .compare-bar{transform:scaleX(1);transition:transform 600ms var(--ease-out)}
.js-motion .compare-card.bars-drawn li:nth-child(2) .compare-bar{transition-delay:90ms}
.js-motion .compare-card.bars-drawn li:nth-child(3) .compare-bar{transition-delay:180ms}

/* Spotlights: four lighting steps of the same photo, stacked. The three darker overlays fade out one by one when the
   photo comes into view. Without the script, or when the photo is already on screen at load, only the lit photo
   shows. The v42 edge fade moves from the images to the stack, so the layers blend without a brighter rim. */
.sizes-photo .sizes-stack{position:relative;display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect}
.sizes-photo .sizes-stack img{-webkit-mask-image:none;mask-image:none}
.sizes-photo .sizes-step{display:none}   /* beats v42's .sizes-photo img{display:block} */
.sizes-photo.spot-armed .sizes-step{display:block;position:absolute;inset:0;width:100%;height:auto;opacity:1;transition:opacity 500ms var(--ease-out)}
.sizes-photo.spot-1 .sizes-step[data-step="0"],.sizes-photo.spot-2 .sizes-step[data-step="1"],.sizes-photo.spot-3 .sizes-step[data-step="2"]{opacity:0}

/* The top bar folds on scroll (computers): the wordmark starts 1.2x over the hero and settles to its size over the
   first 180 px of scroll while a hairline fades in under the bar. --fold follows the scroll (motion-v44.js). */
@media(min-width:860px){
  .site-header.fold-ready{--fold:0;box-shadow:0 1px 0 rgba(255,255,255,calc(.07 * var(--fold)))}
  .site-header.fold-ready .brand img{transform:scale(calc(1.2 - .2 * var(--fold)));transform-origin:50% 50%;will-change:transform}
}

/* Accordions glide: the body's rows go from 0 to 1 over 200 ms; motion-v44.js wraps the content and delays the close
   until the glide is done. Items open at load start at full height (no-anim). */
.js-acc .acc>.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--ease-out)}
.js-acc .acc.is-open>.acc-body{grid-template-rows:1fr}
.js-acc .acc.no-anim>.acc-body{transition:none}
.js-acc .acc>.acc-body>.acc-inner{overflow:hidden;min-height:0}

/* The ring of light that answers the cat's lightning on the bottom Contact EGATO button: no wide outer glow there,
   it spread over the text under the button and read as a shadow (Deividas, 00:55). The top button keeps cat.css. */
#contact .egato-zap{box-shadow:0 0 0 2px #c9ffdd,0 0 10px 2px #48bb7ab3}

/* The cat's leap between its spots: a fixed layer that flies over the page and the top bar (cat-v44.js). */
.egato-leap{position:fixed;left:0;top:0;z-index:21;pointer-events:none;transform-origin:0 0;will-change:transform;display:block}
.egato-leap[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-acc .acc>.acc-body{transition:none}
}