/* MyKualo 2026 motion (task 14272, Jo 30 Oct: "go with your ideas"). Transform and opacity only, so nothing moves
   the layout; all of it is off for people whose device asks for reduced motion, and the hover parts are only for a
   pointer that can hover. Not linked on the order form (header.tpl), which stays still. */

:root { --mk-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

@keyframes mkFade { from { opacity: 0; } }
@keyframes mkRise { from { opacity: 0; transform: translateY(6px); } }
@keyframes mkPopUp { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
@keyframes mkPopDown { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes mkFly { from { opacity: 0; transform: translateX(-6px); } }
@keyframes mkPulse { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
@keyframes mkShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes mkTurn { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } }

@media (prefers-reduced-motion: no-preference) {

  /* Between pages: the content crossfades while the menu and the top bar stay where they are, and the highlight on
     the current section slides to the new one. Browsers without cross-page view transitions just change page. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--mk-ease); }
  ::view-transition-group(mk-nav-on) { animation-duration: 240ms; animation-timing-function: var(--mk-ease); }
  .mk-side { view-transition-name: mk-side; }
  .mk-bar { view-transition-name: mk-bar; }
  html.mk-in .mk-topm { view-transition-name: mk-topm; }
  html.mk-in .mk-nav > li > a.on { view-transition-name: mk-nav-on; }

  /* The theme button: the new icon turns in (mk-frame.js sets mk-turn for the moment of the change) */
  html.mk-turn .mk-theme-b .mk-ti, html.mk-turn .mk-menu-theme .mk-ti { animation: mkTurn 320ms var(--mk-ease); }

  /* Folding and opening the rail: the labels fade back rather than cut in */
  html.mk-folding .mk-nav .mk-l, html.mk-folding .mk-me-t, html.mk-folding .mk-side-h img, html.mk-folding .mk-order .mk-l { animation: mkFade 220ms var(--mk-ease); }

  /* Menus open from their button */
  .mk-menu.open { animation: mkPopUp 140ms var(--mk-ease); transform-origin: bottom left; }
  html.mk-on .open > .dropdown-menu { animation: mkPopDown 140ms var(--mk-ease); transform-origin: top right; }
  html.mk-on .dropup.open > .dropdown-menu { animation-name: mkPopUp; transform-origin: bottom right; }
  @media (min-width: 980px) {
    html.mk-folded .mk-grp:hover > .mk-subs, html.mk-folded .mk-grp:focus-within > .mk-subs, html.mk-folded .mk-grp.is-fly > .mk-subs { animation: mkFly 140ms var(--mk-ease); }
  }

  /* Buttons press in */
  .mk-btn, html.mk-on .btn, .mk-order, .mk-theme-b, .mk-me-b { transition: background-color 140ms, border-color 140ms, color 140ms, box-shadow 160ms, transform 100ms var(--mk-ease); }
  .mk-btn:active, html.mk-on .btn:active, .mk-order:active, .mk-theme-b:active { transform: scale(0.97); }

  /* Rows and menu links ease their tint */
  html.mk-on a.mk-row, html.mk-on .mk-nav a, html.mk-on .mk-menu a, html.mk-on table.table > tbody > tr > td { transition: background-color 140ms, color 140ms; }

  /* The one thing that wants action: its dot pulses three times, then rests */
  .mk-needs .mk-dot { position: relative; }
  .mk-needs .mk-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--mk-accent); animation: mkPulse 1.6s ease-out 400ms 3 backwards; }

  /* Home: the cards arrive in turn, all in place within a third of a second */
  .mk-home > *, .mk-home-main > *, .mk-home-side > * { animation: mkRise 260ms var(--mk-ease) backwards; }
  .mk-home > .mk-home-grid { animation: none; }
  .mk-home > :nth-child(2) { animation-delay: 30ms; }
  .mk-home > :nth-child(3) { animation-delay: 60ms; }
  .mk-home > :nth-child(4) { animation-delay: 90ms; }
  .mk-home-main > :nth-child(1), .mk-home-side > :nth-child(1) { animation-delay: 100ms; }
  .mk-home-main > :nth-child(2), .mk-home-side > :nth-child(2) { animation-delay: 150ms; }
  .mk-home-side > :nth-child(3) { animation-delay: 200ms; }

  /* The blog card shimmers in its held space until the post arrives */
  .mk-blog:not(.is-in) .mk-blog-img, .mk-blog:not(.is-in) .mk-blog-h { background: linear-gradient(90deg, var(--mk-surface-2) 25%, var(--mk-surface) 50%, var(--mk-surface-2) 75%); background-size: 200% 100%; animation: mkShimmer 1.4s linear infinite; }
  .mk-blog.is-in .mk-blog-t { animation: mkFade 200ms var(--mk-ease); }
  .mk-blog-img { overflow: hidden; }
  .mk-blog-img img { transition: transform 600ms var(--mk-ease); }

  /* Only cards that are one link lift */
  .mk-blog, html.mk-on a.mk-tile { transition: transform 180ms var(--mk-ease), box-shadow 180ms var(--mk-ease), border-color 140ms; }

  @media (hover: hover) {
    .mk-btn.pri:hover, html.mk-on a.mk-btn.pri:hover { box-shadow: var(--mk-shadow); }
    .mk-blog:hover, html.mk-on a.mk-tile:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-2); }
    a.mk-blog-a:hover .mk-blog-img img { transform: scale(1.04); }

    /* A row that is a link shows an arrow on hover */
    html.mk-on a.mk-row::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: -2px; border-top: 2px solid var(--mk-text-2); border-right: 2px solid var(--mk-text-2); opacity: 0; transform: translateX(-4px) rotate(45deg); transition: opacity 140ms, transform 160ms var(--mk-ease); }
    html.mk-on a.mk-row:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); }
  }
}