/* ==========================================================================
   Matchpage · logo-vorm (final) · drop-in for public/app/puzzel.css
   The exact icon (brand/svg …KQY3KF5F8BSWDV2WZWP.svg, viewBox 0 0 761.06 652.67), two paths .l / .r.
   EXACTLY two uses:
     1. .mp-hero-crop — the logo shape very large, cut off by the blue hero bar on Overzicht (decorative)
     2. .mp-loader    — the two pieces click together, only where something loads
   Decorative = aria-hidden="true". House blues only. prefers-reduced-motion: static.
   ========================================================================== */
:root { --pz-ratio: 761.06 / 652.67; --pz-dur: 320ms; --pz-spring: cubic-bezier(.34, 1.4, .64, 1); }
@supports (animation-timing-function: linear(0, 1)) {
  :root { --pz-spring: linear(0, .16 4.5%, .72 13%, .94 17%, 1.04 21%, 1.07 25%, 1.05 31%, 1.01 40%, .995 50%, 1); }
}

/* 1 · hero crop: <svg class="mp-hero-crop" aria-hidden="true" viewBox="0 0 761.06 652.67"><path class="l"/><path class="r"/></svg>
      as first child of the hero section (position:relative; overflow:hidden). Text stays on top. */
.mp-hero-crop { position: absolute; z-index: 0; pointer-events: none; right: -5%; top: 6%; height: 150%; width: auto; aspect-ratio: var(--pz-ratio); }
/* two-tone so the zig-zag seam reads: lighter left piece, stronger right piece (white tints on the blue bar) */
.mp-hero-crop .l { fill: #FFFFFF; opacity: .18; }
.mp-hero-crop .r { fill: #FFFFFF; opacity: .25; }
.mp-hero-crop ~ * { position: relative; z-index: 1; }
@media (max-width: 639px) { .mp-hero-crop { right: -18%; top: 71%; height: 95%; } .mp-hero-crop .l { opacity: .16; } .mp-hero-crop .r { opacity: .2; } }
/* on white backgrounds (website hero): house blues */
.mp-hero-crop--light .l { fill: #5890F8; opacity: .18; } .mp-hero-crop--light .r { fill: #2069F1; opacity: .18; }

/* 2 · loader: <div class="mp-loader" role="status"><svg class="mp-load" aria-hidden="true" viewBox=…><path class="l"/><path class="r"/></svg><span>… laden</span></div>
      Pieces start ~7 px apart (rendered), slide together in 320 ms (spring), short hold, slide apart, repeat while loading.
      NB: transforms on SVG paths are in viewBox units (761 wide), not screen px. With transform-box: fill-box a %
      is relative to each piece's own box: at the fixed 26 px height, 46% of the left piece (386 units) and 41% of the
      right piece (435 units) ≈ 177 units ≈ 7 px rendered. Change --pz-load-gap-* together with the height. */
.mp-loader { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; font-size: 13px; color: var(--fg-2, #5f5f5f); }
.mp-load { --pz-load-gap-l: -46%; --pz-load-gap-r: 41%; height: 26px; width: auto; aspect-ratio: var(--pz-ratio); flex: none; overflow: visible; }
.mp-load .l { fill: #5890F8; } .mp-load .r { fill: #2069F1; }
.mp-load .l, .mp-load .r { transform-box: fill-box; transform-origin: 50% 50%; }
.mp-load .l { animation: pz-load-l 1.1s infinite; } .mp-load .r { animation: pz-load-r 1.1s infinite; }
/* 0 → 29% (320 ms): snap together · 29–64%: hold · 64–100%: drift apart */
@keyframes pz-load-l { 0% { transform: translateX(var(--pz-load-gap-l)); animation-timing-function: var(--pz-spring); } 29%, 64% { transform: translateX(0); animation-timing-function: ease-in-out; } 100% { transform: translateX(var(--pz-load-gap-l)); } }
@keyframes pz-load-r { 0% { transform: translateX(var(--pz-load-gap-r)); animation-timing-function: var(--pz-spring); } 29%, 64% { transform: translateX(0); animation-timing-function: ease-in-out; } 100% { transform: translateX(var(--pz-load-gap-r)); } }

/* remove the old generic puzzle art */
.hero-match .hm-puz, .puzzle-empty .puz { display: none; }

@media (prefers-reduced-motion: reduce) { .mp-load .l, .mp-load .r { animation: none !important; transform: none !important; } }

/* v4 · mobile contrast: on <640px the bar ends in a darker house blue so all white text (incl. over the crop) is ≥ 4.5:1 */
@media (max-width: 639px) {
  .hero-match, .bg-match:has(> .mp-hero-crop) { background: linear-gradient(120deg, #1A5AD4 0%, #1550C8 100%); }
  .mp-hero-crop .l { opacity: .14; } .mp-hero-crop .r { opacity: .18; }
  /* white-tint chips/pills in the bar a touch less light (approved design: /15 and /20) */
  .hm-chip, .bg-match:has(> .mp-hero-crop) .bg-white\/15 { background: rgba(255,255,255,.11); }
  .hm-concept, .bg-match:has(> .mp-hero-crop) .bg-white\/20 { background: rgba(255,255,255,.14); }
}