/* Beweging (november 2026): page transitions and small answers to what you do. Everything sits inside
   no-preference, so "beperkte beweging" gets a still site; browsers without View Transitions just load the page.
   Only transform and opacity move, so it stays smooth on a phone. See beweging.js and MOTION_HEAD in layout.ts. */
:root { --mv-ease: cubic-bezier(.2, .8, .2, 1); --mv-spring: cubic-bezier(.3, 1.5, .5, 1); }

/* grey placeholders while something loads, also when motion is off (then without the shine) */
.lc.lc-skel { display: grid; gap: var(--s-2); align-content: start; min-height: 96px; padding: var(--s-4); border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--surface); }
.lc-skel .sk { display: block; height: 12px; border-radius: 6px; background: var(--fill); }
.lc-skel .sk-1 { width: 36%; }
.lc-skel .sk-2 { width: 82%; height: 16px; }
.lc-skel .sk-3 { width: 58%; }

@media (prefers-reduced-motion: no-preference) {
  /* ── between pages: the header and bars stay, the page fades in, a lesson title travels along ── */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: kop; }
  .tabbar { view-transition-name: onderbalk; }
  [data-fb-bar] { view-transition-name: filters; }
  [data-rs-list] { view-transition-name: resultaten; }
  [data-rs-map] { view-transition-name: kaart; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: mv-fade .26s ease-out both; }
  ::view-transition-group(kop), ::view-transition-group(onderbalk), ::view-transition-group(filters), ::view-transition-group(kaart) { animation-duration: .3s; animation-timing-function: var(--mv-ease); }
  ::view-transition-group(resultaten) { animation-duration: .3s; animation-timing-function: var(--mv-ease); overflow: clip; }
  ::view-transition-old(resultaten), ::view-transition-new(resultaten) { height: 100%; object-fit: none; object-position: 50% 0; }
  ::view-transition-old(resultaten) { animation: mv-out .14s ease-in both; }
  ::view-transition-new(resultaten) { animation: mv-fade .28s .05s var(--mv-ease) both; }
  ::view-transition-group(mv-titel), ::view-transition-group(mv-foto) { animation-duration: .38s; animation-timing-function: var(--mv-ease); z-index: 5; }
  ::view-transition-old(mv-titel), ::view-transition-new(mv-titel) { width: auto; height: 100%; object-fit: contain; object-position: 0 50%; }
  ::view-transition-old(mv-foto), ::view-transition-new(mv-foto) { width: 100%; height: 100%; object-fit: cover; }
  ::view-transition-group(mv-foto) { border-radius: var(--r-l); overflow: clip; }

  @keyframes mv-fade { from { opacity: 0; } }
  @keyframes mv-out { to { opacity: 0; } }
  @keyframes mv-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes mv-rise-s { from { opacity: 0; transform: translateY(8px); } }
  @keyframes mv-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
  @keyframes mv-sheet { from { transform: translateY(100%); } }
  @keyframes mv-settle { from { transform: scale(1.06); } }
  @keyframes mv-pop { 40% { transform: scale(1.32); } }
  @keyframes mv-ring { from { opacity: .5; transform: scale(.5); } to { opacity: 0; transform: scale(1.7); } }
  @keyframes mv-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @keyframes mv-cell { from { opacity: 0; transform: scale(.7); } }

  /* ── arriving on a page: the hero comes up in order ── */
  html:not(.mv-keep) :is(.v-hero, .s-hero, .nh-hero, .page-head) h1 { animation: mv-rise .55s var(--mv-ease) backwards; }
  html:not(.mv-keep) :is(.v-hero, .s-hero, .nh-hero, .page-head) :is(.lead, .nh-lead, h1 + p) { animation: mv-rise .55s .07s var(--mv-ease) backwards; }
  html:not(.mv-keep) :is(.s-jump, .vc-find, .nh-near-p) { animation: mv-rise .55s .14s var(--mv-ease) backwards; }
  html:not(.mv-keep) .vc-hero-side { animation: mv-rise .6s .18s var(--mv-ease) backwards; }
  html:not(.mv-keep) :is(.s-hero-img, .ph-img, .hero-img) img { animation: mv-settle 1.1s var(--mv-ease) backwards; }
  html:not(.mv-keep) .ph-img, html:not(.mv-keep) .s-hero-img { overflow: hidden; }

  /* ── cards and lists come up one after the other ── */
  html:not(.mv-keep) :is(.nh-cities > li, .hr-shelf > li, .kinds > a, .hr-cats > a, [data-rs-list] > li.lc) { animation: mv-rise .48s var(--mv-ease) backwards; animation-delay: calc(var(--mv-n, 0) * 45ms); }
  :is(.nh-cities, .hr-shelf, .kinds, .hr-cats, [data-rs-list]) > :nth-child(2) { --mv-n: 1; }
  :is(.nh-cities, .hr-shelf, .kinds, .hr-cats, [data-rs-list]) > :nth-child(3) { --mv-n: 2; }
  :is(.nh-cities, .hr-shelf, .kinds, .hr-cats, [data-rs-list]) > :nth-child(4) { --mv-n: 3; }
  :is(.nh-cities, .hr-shelf, .kinds, .hr-cats, [data-rs-list]) > :nth-child(5) { --mv-n: 4; }
  :is(.nh-cities, .hr-shelf, .kinds, .hr-cats, [data-rs-list]) > :nth-child(6) { --mv-n: 5; }
  :is(.nh-cities, .hr-shelf, .kinds, .hr-cats, [data-rs-list]) > :nth-child(7) { --mv-n: 6; }
  :is(.nh-cities, .hr-shelf, .kinds, .hr-cats, [data-rs-list]) > :nth-child(n+8) { animation: none; }
  .mv-new > :is(.shelf, ul) > li { animation: mv-rise .42s var(--mv-ease) backwards; animation-delay: calc(var(--mv-n, 0) * 45ms); }

  /* lesson and club pages: the action card and the short facts */
  html:not(.mv-keep) .ac-card { animation: mv-rise .55s .1s var(--mv-ease) backwards; }
  html:not(.mv-keep) .lp-hl > li { animation: mv-rise-s .45s var(--mv-ease) backwards; }
  .lp-hl > li:nth-child(2) { animation-delay: 50ms; }
  .lp-hl > li:nth-child(3) { animation-delay: 100ms; }
  .lp-hl > li:nth-child(4) { animation-delay: 150ms; }
  .lp-hl > li:nth-child(5) { animation-delay: 200ms; }

  /* sections further down, as you reach them (beweging.js) */
  .mv-wait { opacity: 0; }
  .mv-in { animation: mv-rise .6s var(--mv-ease) backwards; }
  /* long lists: each row fades in as it comes into view, once. Short distance, a long soft ending (beweging.js). */
  .mv-row { opacity: 0; transform: translateY(16px); }
  .mv-row.mv-row-in { opacity: 1; transform: none; transition: opacity .64s cubic-bezier(.16, 1, .3, 1), transform .64s cubic-bezier(.16, 1, .3, 1); }

  .mv-in .mv-item { animation: mv-rise-s .45s var(--mv-ease) backwards; animation-delay: calc(var(--mv-i, 0) * 45ms); }
  .mv-in .wmap-cell.mv-item { animation-name: mv-cell; animation-duration: .32s; animation-delay: calc(var(--mv-i, 0) * 14ms); }

  /* ── answers to the pointer: nothing grows or lifts (Levi, 6 Nov 2026); a press answers briefly ── */
  :is(.chip, .btn, .hr-cat):active { transform: scale(.98); transition: transform .08s ease; }

  /* the heart and "Ik ga" answer once, with a small ring */
  .heart, .ikga-btn { position: relative; }
  .heart.is-pop svg, .ikga-btn.is-pop { animation: mv-pop .36s var(--mv-spring); }
  .heart.is-pop::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--accent-ink); pointer-events: none; animation: mv-ring .45s ease-out both; }

  /* ── search bar ── */
  .zb-pop li { animation: mv-rise-s .3s var(--mv-ease) backwards; }
  .zb-pop li:nth-child(2) { animation-delay: 25ms; }
  .zb-pop li:nth-child(3) { animation-delay: 50ms; }
  .zb-pop li:nth-child(4) { animation-delay: 75ms; }
  .zb-pop li:nth-child(5) { animation-delay: 100ms; }
  .zb-pop li:nth-child(n+6) { animation-delay: 125ms; }

  /* ── filters ── */
  .fb-dd[open] > :not(summary) { animation: mv-drop .2s var(--mv-ease); transform-origin: 0 0; }
  .chip { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s var(--mv-ease); }
  .fb-caret { transition: transform .22s var(--mv-spring); }
  .kind.is-on .kind-n { animation: mv-pop .34s var(--mv-spring); }
  @media (max-width: 743px) {
    .fb-dd[open] > :not(summary) { animation: mv-sheet .32s var(--mv-ease); }
    html.fb-sheet-open .fb-scrim { animation: mv-fade .22s ease-out; }
  }

  /* while something loads: a soft shine */
  .lc-skel .sk, .lp-map:not(.is-ready), .rs-map:has([data-rs-map-status]:not([hidden])) .rs-map-canvas {
    background: linear-gradient(100deg, var(--fill) 30%, var(--fill-strong) 50%, var(--fill) 70%) 0 0 / 300% 100%;
    animation: mv-shine 1.4s ease-in-out infinite;
  }

  /* the search screen (SSsearch in beweging.js): the green of the page heads, a big line, what is really happening, the city below */
  html.ss-waiting { overflow: hidden; }
  .ss-wait { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--pitch); color: var(--on-pitch); view-transition-name: zoekscherm; animation: mv-fade .22s ease-out; }
  .ss-wait.is-out { opacity: 0; transition: opacity .24s ease-in; }
  .ss-wait-in { position: relative; z-index: 1; width: 100%; padding-bottom: 170px; }
  .ss-wait-m { margin: 0 0 var(--s-3); color: var(--on-pitch-2); font-size: 1.1rem; font-weight: 600; animation: mv-rise .5s var(--mv-ease) backwards; }
  .ss-wait-t { max-width: 12em; margin: 0 0 var(--s-6); font: 800 clamp(2.75rem, 6vw, 5rem)/1.02 var(--display, var(--font)); text-transform: uppercase; animation: mv-rise .5s .04s var(--mv-ease) backwards; }
  .ss-wait-s { margin: calc(var(--s-5) * -1) 0 0; color: var(--on-pitch-2); font-size: 1.15rem; animation: mv-rise .5s .08s var(--mv-ease) backwards; }
  .sw-steps { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; font-size: 1.15rem; font-weight: 500; animation: mv-rise .5s .08s var(--mv-ease) backwards; }
  .sw-steps li { display: flex; align-items: center; gap: var(--s-3); color: var(--on-pitch-2); opacity: .55; transition: opacity .25s ease; font-variant-numeric: tabular-nums; }
  .sw-steps li::before { content: ""; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .28); border-radius: 50%; }
  .sw-steps li.is-bezig, .sw-steps li.is-klaar { color: var(--on-pitch); opacity: 1; }
  .sw-steps li.is-bezig::before { border-top-color: var(--ball); animation: ss-turn .8s linear infinite; }
  .sw-steps li.is-klaar::before { background: var(--ball); border-color: var(--ball); box-shadow: inset 0 0 0 4px var(--pitch); }
  .ss-wait .ss-wait-art { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; margin: 0; padding: 0; background: none; pointer-events: none; }
  .ss-wait .ss-wait-art .skyline { height: 100%; margin: 0; }
  .ss-wait-art > svg { display: block; width: 100%; height: 100%; }
  @keyframes ss-turn { to { transform: rotate(360deg); } }
  @media (max-width: 743px) { .ss-wait-in { padding-bottom: 120px; } .ss-wait .ss-wait-art { height: 110px; } .sw-steps, .ss-wait-s { font-size: 1.05rem; } }
  ::view-transition-group(zoekscherm) { animation-duration: .3s; }
  ::view-transition-old(zoekscherm) { animation: mv-out .3s ease-in both; }

  /* the home's drawing lives a little */
  .skyline .ill-flag { transform-box: fill-box; transform-origin: 0 50%; animation: mv-flag 2.6s ease-in-out infinite; }
  @keyframes mv-flag { 50% { transform: skewY(-9deg) scaleX(.88); } }
}

@media print { .mv-row, .mv-wait { opacity: 1 !important; transform: none !important; } }