/* ═══════════════════════════════════════════════════════════════════════════
   Holdwise — holdwise-motion.css        [ULTIEM 4 — 2026-08-17]

   De stille kracht. Een gedeelde bewegingslaag over de hele site: alles
   voelbaar, bijna niets zichtbaar. Timing 220–320ms op een zachte ease-out
   (cubic-bezier(0.22, 1, 0.36, 1)) — het Hermes-register: de deur valt zacht
   in het slot. Puur CSS op bestaande klassen, dus nul risico voor de layout;
   de reveals hieronder activeren alleen op elementen die er expliciet om
   vragen (.hw-reveal), aangestuurd door holdwise-motion.js.

   Wie beweging uitzet in het besturingssysteem, krijgt rust: het
   prefers-reduced-motion-blok onderaan zet alles stil.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --hw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hw-snel: 220ms;
  --hw-kalm: 320ms;
  --hw-schaduw-rust: 0 1px 2px rgba(13, 27, 62, 0.05);
  --hw-schaduw-lift: 0 14px 34px -14px rgba(13, 27, 62, 0.22);
  --hw-goud-traag: 620ms; /* [ULTIEM 5] het tempo waarop goud verschijnt: rustig, bijna plechtig */
}

/* ── 1. Navigatie: gouden onderlijn tekent van links in ─────────────────── */
.nav-desk a:not(.cta) {
  position: relative;
}
.nav-desk a:not(.cta)::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background: var(--gold, #C9A84C);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hw-kalm) var(--hw-ease);
}
.nav-desk a:not(.cta):hover::before {
  transform: scaleX(1);
}

/* ── 2. Kaarten: 4px lift, verdiepende schaduw, hairline warmt naar goud ── */
.cr-card,
.widget,
.how-step,
.kb-card,
.hw-kaart {
  transition:
    transform var(--hw-kalm) var(--hw-ease),
    box-shadow var(--hw-kalm) var(--hw-ease),
    border-color var(--hw-goud-traag) var(--hw-ease);
  will-change: transform;
}
.cr-card:hover,
.how-step:hover,
.kb-card:hover,
.hw-kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--hw-schaduw-lift);
  border-color: var(--gold, #C9A84C);
}

/* ── 2b. Goudkader: de gouden lijn tekent zich over de bovenrand ──────────
   [ULTIEM 6] Een taal voor alle blokken: de signatuur van de pijlerblokken
   op de homepage, nu overal. Bij aanraken tekent een gouden lijn zich
   vloeiend van links naar rechts over de bovenrand van de kaart, terwijl de
   kaart zacht lift en de eigen rand naar goud warmt. holdwise-polish.php zet
   .hw-goudkader automatisch op elke kaart in een raster, dus elk blok op
   elke pagina spreekt dezelfde taal. Uitzetten per blok kan met data-hw-skip
   op het raster of het blok zelf. */
.hw-goudkader {
  position: relative;
  transition:
    transform var(--hw-kalm) var(--hw-ease),
    box-shadow var(--hw-kalm) var(--hw-ease),
    border-color var(--hw-goud-traag) var(--hw-ease);
}
.hw-goudkader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold, #C9A84C);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--hw-ease);
  pointer-events: none;
}
.hw-goudkader:hover {
  transform: translateY(-4px);
  box-shadow: var(--hw-schaduw-lift);
  border-color: var(--gold, #C9A84C);
}
.hw-goudkader:hover::after {
  transform: scaleX(1);
}
/* Donkere secties: iets lichter goud zodat de lijn ademt op navy */
.section-dark .hw-goudkader::after { background: #E0C477; }

/* ── 3. Knoppen: subtiele gouden sheen die eenmaal overtrekt ────────────── */
.btn,
.btn-cta,
.hw-cta-btn,
.nav-desk .cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after,
.btn-cta::after,
.hw-cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 62%);
  transform: translateX(-120%);
  transition: transform 700ms var(--hw-ease);
  pointer-events: none;
}
.btn:hover::after,
.btn-cta:hover::after,
.hw-cta-btn:hover::after {
  transform: translateX(120%);
}
.btn:hover,
.btn-cta:hover,
.hw-cta-btn:hover {
  transform: translateY(-1px);
}
.btn,
.btn-cta,
.hw-cta-btn {
  transition:
    transform var(--hw-snel) var(--hw-ease),
    background var(--hw-kalm) var(--hw-ease),
    color var(--hw-kalm) var(--hw-ease),
    border-color var(--hw-kalm) var(--hw-ease),
    box-shadow var(--hw-kalm) var(--hw-ease);
}

/* ── 4. Tabellen en lijstrijen: warm creme bij aanraken ─────────────────── */
table tbody tr {
  transition: background-color var(--hw-snel) var(--hw-ease);
}
table tbody tr:hover {
  background-color: var(--creme-dim, #F2EBDC);
}

/* ── 5. Artikellinks: rustige kleurgang in plaats van een sprong ────────── */
main a,
.article-content a {
  transition: color var(--hw-snel) var(--hw-ease), border-color var(--hw-snel) var(--hw-ease);
}

/* ── 6. Sectiereveal: eenmalig, zacht, alleen op verzoek (.hw-reveal) ───── */
.hw-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 640ms var(--hw-ease),
    transform 640ms var(--hw-ease);
  transition-delay: var(--hw-vertraging, 0ms);
}
.hw-reveal.hw-in {
  opacity: 1;
  transform: translateY(0);
}
/* Zonder JavaScript blijft alles gewoon zichtbaar. */
html.hw-geen-js .hw-reveal,
html:not(.hw-js) .hw-reveal {
  opacity: 1;
  transform: none;
}

/* ── 7. Beelden: haast onmerkbare verstilling bij hover ─────────────────── */
.cr-card img,
.kb-card img {
  transition: transform 900ms var(--hw-ease);
}
.cr-card:hover img,
.kb-card:hover img {
  transform: scale(1.015);
}

/* ── Rust voor wie daarom vraagt ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hw-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hw-goudkader, .hw-goudkader::after,
  .cr-card, .widget, .how-step, .kb-card, .hw-kaart,
  .btn, .btn-cta, .hw-cta-btn, .nav-desk .cta,
  .nav-desk a:not(.cta)::before,
  .btn::after, .btn-cta::after, .hw-cta-btn::after,
  table tbody tr, main a, .article-content a,
  .cr-card img, .kb-card img {
    transition: none;
  }
  .hw-goudkader:hover,
  .cr-card:hover, .how-step:hover, .kb-card:hover, .hw-kaart:hover,
  .btn:hover, .btn-cta:hover, .hw-cta-btn:hover {
    transform: none;
  }
}

/* ── [ULTIEM 5B] Zoeken in de header: veld + suggestiepaneel ─────────────── */
.hw-zoek { position: relative; display: inline-flex; align-items: center; }
.hw-zoek input {
  font-family: 'Manrope', system-ui, sans-serif; font-size: 12px;
  width: 150px; padding: 6px 10px 6px 28px;
  border: 1px solid var(--line, #E6DDC8); border-radius: 16px;
  background: rgba(255,255,255,.72) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7388' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 9px center/12px 12px no-repeat;
  color: var(--ink, #0D1B3E); outline: none;
  transition: width .28s var(--hw-ease, ease), border-color .28s;
}
.hw-zoek input:focus { width: 230px; border-color: var(--gold, #C9A84C); }
.hw-zoek input::placeholder { color: var(--ink-dim, #6B7388); }
.hw-zoek-uit {
  position: absolute; top: calc(100% + 10px); right: 0; width: 340px;
  max-height: 380px; overflow: auto; background: #fff;
  border: 1px solid var(--line, #E6DDC8); border-top: 2px solid var(--gold, #C9A84C);
  border-radius: 8px; box-shadow: 0 16px 44px rgba(13,27,62,.16);
  z-index: 1300; text-align: left;
}
.hw-zoek-uit a { display: block; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  color: var(--ink, #0D1B3E); text-decoration: none; border-bottom: 1px solid #F0EADA; }
.hw-zoek-uit a:last-child { border-bottom: 0; }
.hw-zoek-uit a:hover, .hw-zoek-uit a.actief { background: var(--creme, #FAF6EE); color: var(--gold-dark, #8A7638); }
.hw-zoek-uit b { color: var(--gold-dark, #A68934); }