/* Stunts for the eight industry websites (owner, 2026-10-27: "put more stunts, advanced ones"). Switched on by stunts.js, which adds the classes;
   nothing is hidden before it runs (the hidden states need <html class="sx">). Each site keeps its own colours: the stunts read currentColor and
   each site's own accent where it has one. Only translate / rotate / scale / opacity move (smooth on phones); none of it runs for people who ask
   their phone for less motion. */
/* the dealt cards start a little to the side: never a sideways scroll */
html.sx,.sx body{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){
  /* the big title: words flip up one by one */
  .sxWords .sxW{display:inline-block;white-space:pre}
  .sx .sxWords:not(.on) .sxW{opacity:0;translate:0 .6em;rotate:x -80deg}
  .sx .sxWords.on .sxW{animation:sxWord .85s cubic-bezier(.2,.9,.25,1.25) both;animation-delay:calc(var(--i) * 80ms + .15s)}
  @keyframes sxWord{from{opacity:0;translate:0 .6em;rotate:x -80deg}to{opacity:1;translate:0 0;rotate:x 0deg}}
  /* the rest of the first screen arrives after it */
  .sx .sxHeroUp:not(.on){opacity:0;translate:0 26px}
  .sx .sxHeroUp.on{animation:sxUp .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms + .5s)}
  /* section titles slam in */
  .sx .sxH:not(.on){opacity:0;scale:1.5;translate:0 -16px}
  .sx .sxH.on{animation:sxSlam .85s cubic-bezier(.2,.9,.25,1.2) both}
  @keyframes sxSlam{0%{opacity:0;scale:1.5;translate:0 -16px}60%{opacity:1;scale:.96}100%{opacity:1;scale:1;translate:0 0}}
  /* cards are dealt in, one after another, from alternating sides */
  .sx .sxCard:not(.on){opacity:0;translate:0 80px;rotate:x 30deg;scale:.9}
  .sx .sxCard.on{animation:sxDeal .9s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(var(--i,0) * 85ms)}
  .sx .sxCard.on:nth-child(even){animation-name:sxDeal2}
  @keyframes sxDeal{0%{opacity:0;translate:-30px 80px;rotate:-6deg;scale:.9}70%{opacity:1;translate:0 -8px;rotate:1deg}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
  @keyframes sxDeal2{0%{opacity:0;translate:30px 80px;rotate:6deg;scale:.9}70%{opacity:1;translate:0 -8px;rotate:-1deg}100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
  /* photos open like a curtain and settle from a slight zoom */
  .sx .sxPic:not(.on){clip-path:inset(0 0 100% 0);scale:1.12}
  .sx .sxPic.on{animation:sxWipe 1.2s cubic-bezier(.7,0,.2,1) both}
  @keyframes sxWipe{from{clip-path:inset(0 0 100% 0);scale:1.12}to{clip-path:inset(0 0 0 0);scale:1}}
  .sx .sxUp:not(.on){opacity:0;translate:0 36px}
  .sx .sxUp.on{animation:sxUp .8s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sxUp{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
  /* the first screen sinks away and its photo zooms as you scroll (browsers that can) */
  @supports (animation-timeline:scroll()){
    .sxHeroIn{animation:sxHeroOut linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .sxHeroBg{animation:sxHeroZoom linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    @keyframes sxHeroOut{to{translate:0 22vh;opacity:0;scale:.92}}
    @keyframes sxHeroZoom{to{scale:1.25;translate:0 12vh}}
  }
  /* buttons: a light sweeps across, and they lift */
  .sxBtn{position:relative;overflow:hidden;transition:translate .25s cubic-bezier(.34,1.8,.5,1)}
  .sxBtn::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);translate:-130% 0;animation:sxShine 4.5s ease-in-out 1.5s infinite;pointer-events:none}
  .sxBtn:hover{translate:0 -3px}
  @keyframes sxShine{0%,60%{translate:-130% 0}100%{translate:130% 0}}
  /* cards tilt toward the mouse with a shine (computers) */
  @media (hover:hover) and (pointer:fine){
    .sxTilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
    .sxTilt::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--go,0);transition:opacity .25s;background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.5),transparent 55%);z-index:3;mix-blend-mode:soft-light}
  }

  /* ---- each trade's own signature on its first screen (stunts.js adds .sxFx with the pieces) ---- */
  .sxFx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  .sxFx i{position:absolute;display:block}
  /* grill: embers rise from the fire and flicker out */
  .fx-grill i{bottom:-10px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#FFE29A,#FB923C 55%,transparent 70%);box-shadow:0 0 10px #FB923C;animation:fxEmber var(--d,5s) ease-in var(--w,0s) infinite}
  @keyframes fxEmber{0%{translate:0 0;opacity:0;scale:.6}10%{opacity:1}100%{translate:var(--x,20px) -95vh;opacity:0;scale:.2}}
  /* coffee: steam curls up */
  .fx-coffee i{bottom:8%;width:70px;height:150px;border-radius:50%;border-left:4px solid rgba(255,255,255,.35);filter:blur(3px);animation:fxSteam var(--d,6s) ease-in-out var(--w,0s) infinite}
  @keyframes fxSteam{0%{translate:0 0;opacity:0;scale:.7 .7}25%{opacity:.8}100%{translate:var(--x,20px) -60vh;opacity:0;scale:1.4 1.6;rotate:12deg}}
  /* market: fresh produce bounces through */
  .fx-market i{bottom:-60px;font-style:normal;font-size:var(--s,34px);animation:fxBounce var(--d,7s) cubic-bezier(.3,.6,.4,1) var(--w,0s) infinite}
  @keyframes fxBounce{0%{translate:0 0;rotate:0deg;opacity:0}10%{opacity:1}50%{translate:var(--x,40px) -55vh;rotate:180deg}100%{translate:calc(var(--x,40px) * 2) -105vh;rotate:360deg;opacity:0}}
  /* clinic: a heartbeat line draws across */
  .fx-clinic svg{position:absolute;left:0;right:0;bottom:12%;width:100%;height:90px;opacity:.55}
  .fx-clinic path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:fxBeat 3.2s linear infinite}
  @keyframes fxBeat{0%{stroke-dashoffset:1400;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  /* auto: speed lines streak past */
  .fx-auto i{left:-40%;height:2px;width:var(--w2,30%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:fxStreak var(--d,1.6s) linear var(--w,0s) infinite}
  @keyframes fxStreak{from{translate:0 0}to{translate:180vw 0}}
  /* cleaning: soap bubbles float up and a sparkle glints */
  .fx-cleaning i{bottom:-60px;width:var(--s,30px);height:var(--s,30px);border-radius:50%;border:2px solid rgba(255,255,255,.8);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(186,230,253,.15) 45%,transparent 70%);animation:fxBubble var(--d,8s) ease-in-out var(--w,0s) infinite}
  @keyframes fxBubble{0%{translate:0 0;opacity:0}10%{opacity:1}50%{translate:var(--x,30px) -50vh}100%{translate:0 -105vh;opacity:0;scale:1.2}}
  /* woodwork: sawdust drifts down through the light */
  .fx-woodwork i{top:-10px;width:var(--s,4px);height:var(--s,4px);border-radius:1px;background:#F5DEB3;opacity:.8;animation:fxDust var(--d,9s) linear var(--w,0s) infinite}
  @keyframes fxDust{0%{translate:0 0;rotate:0deg;opacity:0}10%{opacity:.85}100%{translate:var(--x,40px) 100vh;rotate:540deg;opacity:0}}
  /* tax: figures slide up like a ticker */
  .fx-tax i{bottom:-40px;font-style:normal;font-weight:800;font-size:var(--s,22px);color:currentColor;opacity:0;font-variant-numeric:tabular-nums;animation:fxFig var(--d,7s) linear var(--w,0s) infinite}
  @keyframes fxFig{0%{translate:0 0;opacity:0}15%{opacity:.35}85%{opacity:.35}100%{translate:0 -100vh;opacity:0}}
}

/* Touch targets (owner's phone test, 2026-11-03: 19 to 43 buttons under 44px on each site): on a phone every button, chip, link in the bars and field is at least 44px tall,
   and the short ones 44px wide. Rows of cells that share the width (a calendar of seven days) keep their width. `html body` puts these above each site's own rules. */
@media (max-width:900px){
  html body :is(button,.b,.chip,.add,.day,.opt,.k-tag,.ftB,.fl,.k-bar a,.ah a,.foot a,.k-nav a,.logo,.brand,summary,select,input[type=range],textarea,input:not([type=checkbox]):not([type=radio]):not([type=range])){min-height:44px}
  html body :is(.chip,.add,.opt,.k-tag,.ftB,.seg button,.langs button,.k-nav a){min-width:44px}
  html body :is(.k-bar a,.ah a,.foot a,.k-nav a,.logo,.brand){display:inline-flex;align-items:center}
  html body summary{display:flex}
  html body :is(input[type=checkbox],input[type=radio]){width:24px;height:24px}
}