/* Atelier aan de Streepen: beweging en accenten.
   Alle beweging staat uit bij prefers-reduced-motion. Verbergen voor een animatie gebeurt alleen
   onder html.beweging (gezet door beweging.js), dus zonder script is alles gewoon zichtbaar. */

/* ---------- Iets meer geel en rood als accent ---------- */
:root {
  --rand-kleur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='24' viewBox='0 0 56 24'%3E%3Ccircle cx='28' cy='12' r='4' fill='%23C8392B'/%3E%3Cpath d='M20 12c-4-5-10-6-15-3 4 1 8 3 15 3z' fill='%2348B030'/%3E%3Cpath d='M36 12c4 5 10 6 15 3-4-1-8-3-15-3z' fill='%2348B030'/%3E%3C/svg%3E");
}
.rand, .rand--rood { background-image: var(--rand-kleur); }
.pagina-kop .bloem, .held__bloem--klein { --motif-a: var(--rood); --motif-b: var(--luik); }
.op-luik .bloem { --motif-a: var(--geel); --motif-b: var(--op-luik); }
.tijdlijn b { color: var(--geel); }
.kanalen .icoon { color: var(--geel); }
.voet h2 { color: var(--geel); }
.voet a { text-decoration-color: var(--geel); }
.actiebalk a:last-child { background: var(--geel); color: var(--inkt); }
.maken__lijst button[aria-selected="true"] .icoon { color: var(--geel); }
.routes a:hover .rond { background: var(--geel); border-color: var(--geel); color: var(--inkt); }
.op-luik .knop { --knop-bg: var(--geel); --knop-fg: var(--inkt); }
.op-luik .knop:hover { background: var(--geel-diep); }
/* ---------- Voortgangsstreep in de logokleuren ---------- */
.voortgang {
  position: fixed; inset: 0 0 auto 0; height: 5px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--blad-fel) 0 33%, var(--gras) 33% 66%, var(--logogroen) 66% 94%, var(--geel) 94% 97%, var(--rood) 97%);
  transform: scaleX(var(--voortgang, 0)); transform-origin: left center;
}

/* ---------- Kop krimpt bij scrollen (alleen breed scherm) ---------- */
@media (min-width: 64.01rem) {
  .kop__rij { transition: min-height 0.4s var(--uit); }
  .kop .merk--logo img { transition: height 0.4s var(--uit); }
  .kop.is-gescrold .kop__rij { min-height: 4.25rem; }
  .kop.is-gescrold .merk--logo img { height: 2.8rem; }
}

/* ---------- Levende logostroken ---------- */
@media (prefers-reduced-motion: no-preference) {
  .golven .g1 { animation: golf-in 1.4s var(--uit) both, deinen 9s ease-in-out 1.4s infinite alternate; }
  .golven .g2 { animation: golf-in 1.4s var(--uit) 0.12s both, deinen 11s ease-in-out 1.5s infinite alternate-reverse; }
  .golven .g3 { animation: golf-in 1.4s var(--uit) 0.24s both, deinen 13s ease-in-out 1.6s infinite alternate; }
}
@keyframes deinen { from { translate: -1.5% 0; } to { translate: 1.5% 4px; } }
.golven svg { overflow: visible; }
.golven path { transform-origin: center; }
.golven .g1, .golven .g2, .golven .g3 { scale: 1.05 1; }

/* ---------- Binnenkomen bij scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .beweging .onthul { opacity: 0; translate: 0 28px; }
  .beweging .onthul.in {
    opacity: 1; translate: 0 0;
    transition: opacity 0.8s var(--uit), translate 0.9s var(--uit), rotate 0.9s var(--uit), scale 0.9s var(--uit);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .beweging .onthul--polaroid { rotate: var(--draai, -5deg); scale: 0.9; }
  .beweging .onthul--polaroid.in { rotate: 0deg; scale: 1; }
  .beweging .onthul--zij { translate: -40px 0; }
  .beweging .onthul--zij.in { translate: 0 0; }
}

/* ---------- Kantelende tegels met glans ---------- */
.tegel { transform-style: preserve-3d; will-change: transform; }
.tegel__glans {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.38), transparent 55%);
  transition: opacity 0.3s;
}
.tegel:hover .tegel__glans { opacity: 1; }
.tegel .bloem { transition: rotate 1.2s var(--uit); }
.tegel:hover .bloem { rotate: 180deg; }

/* ---------- Magnetische knoppen ---------- */
.knop { translate: var(--mx, 0) var(--my, 0); transition: transform 0.25s var(--uit), background-color 0.2s, box-shadow 0.25s var(--uit), translate 0.35s var(--uit); }

/* ---------- Werkgalerij en foto's ---------- */
@media (prefers-reduced-motion: no-preference) {
  .werk__open img { transition: transform 0.7s var(--uit), filter 0.5s; }
  .werk__open:hover img { transform: scale(1.06) rotate(-1deg); }
  .werk__item { transition: rotate 0.5s var(--uit); }
  .werk__item:hover { rotate: 0.8deg; }
}

/* ---------- Tabbladen: foto met een verfveeg ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .maken__paneel.is-nieuw .foto img { animation: verf-veeg 0.9s var(--uit) both; }
}
@keyframes verf-veeg {
  from { clip-path: inset(0 100% 0 0 round 14px); filter: saturate(1.6); }
  to { clip-path: inset(0 0 0 0 round 14px); filter: none; }
}

/* ---------- Vloeiende overgang tussen pagina's ---------- */
@view-transition { navigation: auto; }
.kop { view-transition-name: kop; }
::view-transition-old(root) { animation: pagina-uit 0.3s var(--uit) both; }
::view-transition-new(root) { animation: pagina-in 0.55s var(--uit) both; }
@keyframes pagina-uit { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pagina-in { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .voortgang { display: none; }
}
.kanalen a { translate: var(--mx, 0) var(--my, 0); transition: background-color 0.2s, transform 0.3s var(--uit), translate 0.35s var(--uit); }