/* ============================================================
   Beweging — alles wat de site rustig tot leven brengt.
   Laadt na site.css, vóór een eventueel thema.
   Zonder JavaScript of met "minder beweging" blijft alles
   gewoon zichtbaar en stil.
   ============================================================ */

/* ---------- Filmkorrel over de hele pagina ---------- */

.korrel {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.035;
  mix-blend-mode: multiply;
}

body.thema-nacht .korrel { opacity: 0.055; mix-blend-mode: screen; }

/* ---------- Openingsbeweging van de hero ---------- */

.woord { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  body.intro-loopt .woord,
  body.intro-loopt .intro {
    opacity: 0;
    transform: translateY(0.45em);
    animation: opkomst 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }

  body.intro-loopt .intro { transform: translateY(14px); }
}

@keyframes opkomst {
  to { opacity: 1; transform: none; }
}

/* ---------- Lijntje onderaan de hero ---------- */

.hero__lijn {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  width: 1px;
  height: 64px;
  overflow: hidden;
  isolation: isolate;
  transform: translateX(-50%);
  background: rgba(243, 239, 231, 0.18);
  transition: opacity 0.6s ease;
  pointer-events: none;
}

body.is-gescrold .hero__lijn { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero__lijn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(198, 178, 142, 0), rgba(198, 178, 142, 0.95));
    animation: zakken 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
}

@keyframes zakken {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

@media (max-width: 860px) { .hero__lijn { display: none; } }

/* ---------- Beeld dat van onder naar boven openschuift ---------- */

@media (prefers-reduced-motion: no-preference) {
  .verschijn--beeld {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .verschijn--beeld.is-zichtbaar { clip-path: inset(0 0 0 0); }

  .verschijn--beeld img,
  .verschijn--beeld picture img {
    transform: scale(1.07);
    transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .verschijn--beeld.is-zichtbaar img,
  .verschijn--beeld.is-zichtbaar picture img { transform: none; }

  /* De trage hover-zoom mag dit niet in de weg zitten. */
  .discipline.verschijn--beeld:hover img { transform: scale(1.04); }
  .galerij figure.verschijn--beeld:hover img { transform: scale(1.04); }
}

/* ---------- Knoppen: vulling loopt van links binnen ---------- */

body:not(.beheer) .knop {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s ease, border-color 0.45s ease;
}

body:not(.beheer) .knop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--inkt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body:not(.beheer) .knop:hover { background: transparent; color: var(--ivoor); }
body:not(.beheer) .knop:hover::before { transform: scaleX(1); }

body:not(.beheer) .knop--licht::before { background: var(--inkt); }
body:not(.beheer) .knop--licht:hover { background: var(--ivoor); color: var(--ivoor); }

body:not(.beheer) .op-donker .knop--lijn::before,
body:not(.beheer) .hero .knop--lijn::before { background: var(--ivoor); }
body:not(.beheer) .op-donker .knop--lijn:hover,
body:not(.beheer) .hero .knop--lijn:hover { background: transparent; color: var(--inkt); }

body:not(.beheer) .op-licht .knop--lijn::before,
body:not(.beheer) .op-wit .knop--lijn::before,
body:not(.beheer) .op-diep .knop--lijn::before { background: var(--inkt); }
body:not(.beheer) .op-licht .knop--lijn:hover,
body:not(.beheer) .op-wit .knop--lijn:hover,
body:not(.beheer) .op-diep .knop--lijn:hover { background: transparent; color: var(--ivoor); }

/* ---------- Navigatie: streepje groeit onder de link ---------- */

.nav a { position: relative; }

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 860px) { .nav a::after { display: none; } }

/* ---------- Tekstlinks ---------- */

.tekstlink { position: relative; }

/* ---------- Films ---------- */

.film__start img { transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease; }
.film__start:hover img { transform: scale(1.03); }

/* ---------- Tellers die oplopen ---------- */

.teller__getal { font-variant-numeric: tabular-nums; }