/* houten button background random gekozen gekoppeld aan JS buttonwood.js */

.btn-wood {
  /* CSS variabelen */
  --wood-bg: none;
  --hover-lift: 3px;
  --hover-darken: 0.92;

  /* Parallax settings */
  --grain-x: 50%;
  --grain-y: 50%;
  --grain-shift: 5px; /* hoe sterk de shift is */

  /* Fallback */
  background-color: #4a3a2a;
  background-image: var(--wood-bg, none);
  background-size: cover;
  background-position: var(--grain-x) var(--grain-y);

  /* padding: 14px 28px; */
  border: none;
  border-radius:22px;
  color: #fff;
  cursor: pointer;

  transition:
    transform 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease,
    background-position 380ms ease;

  /* box-shadow: 0 1px 2px rgba(0,0,0,0.25); */
}

/* Hover: lift + donkerder + grain parallax */
.btn-wood:hover {
  transform: translateY(calc(var(--hover-lift) * -1));
  filter: brightness(var(--hover-darken));
  /* box-shadow: 0 6px 14px rgba(0,0,0,0.35); */

  /* parallax: verschuif de grain subtiel */
  background-position:
    calc(var(--grain-x) + var(--grain-shift))
    calc(var(--grain-y) - var(--grain-shift));
}

/* Active: terug “indrukken” */
.btn-wood:active {
  transform: translateY(0);
  filter: brightness(0.85);
 /*  box-shadow: 0 2px 4px rgba(0,0,0,0.4); */

  /* kleine tegen-shift */
  background-position:
    calc(var(--grain-x) - 1px)
    calc(var(--grain-y) + 1px);
}

/* Focus zichtbaar (alleen keyboard) */
.btn-wood:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.55),
    0 0 0 6px rgba(0,0,0,0.35),
    0 6px 14px rgba(0,0,0,0.35);
}

.btn-wood {
  /* Fallback kleur (altijd zichtbaar) */
  background-color: #4a3a2a;

  /* Fallback image = none */
  background-image: var(--wood-bg, none);

  background-size: cover;
  background-position: var(--grain-x, 50%) var(--grain-y, 50%);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-wood {
    transition: none;
  }
  .btn-wood:hover,
  .btn-wood:active {
    transform: none;
    background-position: var(--grain-x) var(--grain-y);
  }
}