/* Chrome: aftelstrip, kopbalk, merk, mobiel menu, footer, animaties */

/* Aftelstrip */
.aftelstrip {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  background: var(--kleur-goud); color: var(--kleur-op-goud);
  font-size: .875rem; font-weight: 700; letter-spacing: .06em;
  padding: .625rem var(--ruimte-rand); text-align: center;
}
@media (max-width: 780px) { .aftelstrip { font-size: .75rem; padding-right: 4.5rem; } }

/* Merk */
.merk { display: inline-flex; align-items: center; gap: .75rem; color: var(--kleur-goud); }
.merk__naam { display: flex; flex-direction: column; gap: 2px; }
.merk__de { font-size: .625rem; font-weight: 700; letter-spacing: .32em; color: var(--kleur-goud); }
.merk__woord { font-family: var(--font-kop); font-size: 1.75rem; line-height: 1; color: var(--kleur-creme); }
.merk.is-groot .merk__woord { font-size: 2rem; }
.merkschild { color: var(--kleur-goud); animation: sint-gloed 4s ease-in-out infinite alternate; }
@keyframes sint-gloed {
  from { filter: drop-shadow(0 0 5px rgba(217,179,106,.35)) drop-shadow(0 0 14px rgba(217,179,106,.18)); }
  to   { filter: drop-shadow(0 0 9px rgba(217,179,106,.6)) drop-shadow(0 0 22px rgba(217,179,106,.32)); }
}
/* Intro-animatie: schild klapt open, S schrijft zichzelf, strik stuitert */
.merkschild__schild, .merkschild__s, .merkschild__strik { transform-box: fill-box; }
.merkschild.speel .merkschild__schild { transform-origin: left center; animation: sint-schild 1s var(--soepel) both; }
.merkschild.speel .merkschild__s { stroke: #191231; stroke-width: 1.4; stroke-dasharray: 150; animation: sint-s 1.2s .6s ease both; }
.merkschild.speel .merkschild__strik { transform-origin: center bottom; animation: sint-strik .9s 1.5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes sint-schild { 0% { opacity: 0; transform: rotateY(88deg); } 55% { opacity: 1; transform: rotateY(-16deg); } 78% { transform: rotateY(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes sint-s { 0% { fill-opacity: 0; stroke-dashoffset: 150; } 60% { fill-opacity: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; } }
@keyframes sint-strik { 0% { opacity: 0; transform: translateY(8px) scale(.2); } 45% { opacity: 1; transform: translateY(-7px) scale(1.32); } 70% { transform: translateY(2px) scale(.9); } 100% { opacity: 1; transform: none; } }

/* Kopbalk */
.kopbalk { background: var(--kleur-diep); border-bottom: 1px solid var(--kleur-rand-donker); position: relative; z-index: 40; }
.kopbalk__binnen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.125rem; }
.hoofdmenu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.hoofdmenu a {
  color: var(--kleur-tekst); font-size: .875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.hoofdmenu a:hover, .hoofdmenu .current-menu-item > a { color: var(--kleur-goud); }
.kopbalk__acties { display: flex; align-items: center; gap: .875rem; }
.kopbalk__wagen {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; border-radius: var(--radius-pil);
  border: 1px solid var(--kleur-rand); color: var(--kleur-creme);
}
.kopbalk__wagen:hover { border-color: var(--kleur-goud); color: var(--kleur-goud); }
.kopbalk__aantal {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: var(--radius-pil);
  background: var(--kleur-goud); color: var(--kleur-op-goud);
  font-size: .6875rem; font-weight: 700; padding-inline: 5px;
}

/* Mobiel menu */
.menuknop {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0; border-radius: var(--radius-pil);
  background: var(--kleur-paneel); border: 1.5px solid var(--kleur-goud); cursor: pointer;
}
.menuknop span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--kleur-goud); transition: transform .3s ease, opacity .2s ease; }
html.menu-open .menuknop span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
html.menu-open .menuknop span:nth-child(2) { opacity: 0; }
html.menu-open .menuknop span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menuscherm { position: fixed; inset: 0; z-index: 90; background: rgba(10,6,24,.6); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
html.menu-open .menuscherm { opacity: 1; pointer-events: auto; }
.mobielmenu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(272px, 78vw);
  background: var(--kleur-paneel); border-left: 1px solid var(--kleur-rand);
  transform: translateX(100%); transition: transform .32s var(--soepel), visibility .32s;
  display: flex; flex-direction: column; padding: 5.25rem 1.625rem 1.625rem; overflow-y: auto;
  visibility: hidden;
}
html.menu-open .mobielmenu { transform: none; visibility: visible; }
.mobielmenu__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobielmenu__lijst a {
  display: block; font-family: var(--font-kop); font-size: 1.0625rem; color: #E4DCEE;
  padding: .5625rem 0; border-bottom: 1px solid rgba(62,49,99,.55);
}
.mobielmenu__lijst a:hover { color: var(--kleur-goud); }
.mobielmenu__cta { margin-top: 1.25rem; font-size: .875rem; padding: .75rem 1.125rem; }
.mobielmenu__contact { margin-top: auto; padding-top: 1.5rem; color: var(--kleur-placeholder); font-size: .75rem; line-height: 1.7; }
@media (max-width: 900px) {
  .kopbalk__nav { display: none; }
  .menuknop { display: flex; }
}

/* Footer */
.voet { border-top: 1px solid var(--kleur-rand); background: var(--kleur-diep); }
.voet__binnen { display: flex; flex-direction: column; align-items: center; gap: 1.375rem; padding-block: 3.5rem 2.5rem; text-align: center; }
.voet__lijst { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; list-style: none; margin: 0; padding: 0; }
.voet__lijst a { color: var(--kleur-tekst); font-size: .875rem; font-weight: 600; }
.voet__contact { color: var(--kleur-tekst); font-size: .875rem; margin: 0; }
.voet__contact a { color: var(--kleur-tekst); }
.voet__contact a:hover { color: var(--kleur-goud); }
.voet__afsluiter { margin-top: .5rem; color: var(--kleur-goud); }
.voet__slot { color: var(--kleur-gedempt); font-size: .8125rem; margin: 0; border-top: 1px solid var(--kleur-rand); width: 100%; padding-top: 1.25rem; }
.voet__slot a { color: var(--kleur-gedempt); }

/* Reveal-animaties */
.rv { opacity: 0; transform: translateY(34px) scale(1.01); transition: opacity 1.5s var(--soepel), transform 1.5s var(--soepel); will-change: opacity, transform; }
.rv.zichtbaar { opacity: 1; transform: none; }
.rv-tekst { opacity: 0; transform: translateY(42px); transition: opacity 1.9s var(--soepel), transform 1.9s var(--soepel); }
.rv-tekst.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-tekst { opacity: 1 !important; transform: none !important; transition: none !important; }
  .merkschild, .merkschild__schild, .merkschild__s, .merkschild__strik { animation: none !important; opacity: 1 !important; }
  .knop::after { animation: none !important; }
}