/* ============================================================
   Motion system — Fijnbakkerij Bouman
   One language: shared easing/duration tokens, reveal variants,
   marquee, scroll progress. Warm & restrained. (Custom cursor en
   magnetic buttons zijn bewust verwijderd — agency-gimmicks die
   niet bij een dorpsbakker passen.)
   Builds on the .reveal observer (+ .settled self-heal) in site.js.
   ============================================================ */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .15s;
  --dur-base: .45s;
  --dur-slow: .7s;
  --stagger: .08s;
}

/* ---- Reveal: retune base easing to the token language ------ */
.reveal.in {
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* scale-in */
.reveal.r-scale { transform: scale(.95); }
.reveal.r-scale.in { transform: none; }

/* clip-rise — heading rises from behind a mask (inner span = .clip-i) */
.r-clip { overflow: hidden; padding-bottom: .08em; }
.reveal.r-clip { opacity: 1; transform: none; }
.r-clip > .clip-i {
  display: block; transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.reveal.r-clip.in > .clip-i,
.reveal.r-clip.settled > .clip-i { transform: none; }

/* image wipe — clip-path curtain + inner zoom-out ("double layer") */
.r-img {
  opacity: 1 !important; transform: none !important;
  clip-path: inset(0 0 101% 0);
  transition: clip-path var(--dur-slow) var(--ease-out);
}
.reveal.r-img.in, .reveal.r-img.settled { clip-path: inset(0 0 0 0); }
.r-img > image-slot, .r-img > img {
  display: block; transform: scale(1.16);
  transition: transform 1.1s var(--ease-out);
}
.reveal.r-img.in > image-slot, .reveal.r-img.in > img,
.reveal.r-img.settled > image-slot, .reveal.r-img.settled > img { transform: none; }

/* ---- Infinite marquee band -------------------------------- */
.marquee-band {
  background: var(--ink); color: var(--bg);
  padding: 22px 0; overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.marquee { display: flex; overflow: hidden; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
  display: flex; flex: none; gap: 0; align-items: center;
  white-space: nowrap; will-change: transform;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem);
  padding: 0 1.1rem; display: inline-flex; align-items: center; gap: 1.1rem;
}
.marquee__track span::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block;
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* variant A: de band wordt een rode merkband, echo van de gevelbelettering */
[data-direction="bouman"] .marquee-band {
  background: #A31716; color: #FFF6EA;
  border-block-color: rgba(255,246,234,.22);
}
[data-direction="bouman"] .marquee__track span::after { background: rgba(255,246,234,.55); }

/* ---- Scroll progress -------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--accent); z-index: 200; pointer-events: none;
  will-change: transform;
}

/* ---- Drawer menu: stagger nav items ----------------------- */
.drawer__panel nav a {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.drawer.open .drawer__panel nav a { opacity: 1; transform: none; }
.drawer.open .drawer__panel nav a:nth-child(1) { transition-delay: .06s; }
.drawer.open .drawer__panel nav a:nth-child(2) { transition-delay: .12s; }
.drawer.open .drawer__panel nav a:nth-child(3) { transition-delay: .18s; }
.drawer.open .drawer__panel nav a:nth-child(4) { transition-delay: .24s; }
.drawer.open .drawer__panel nav a:nth-child(5) { transition-delay: .30s; }

/* ---- Subtle warm background glow -------------------------- */
.bg-glow {
  position: fixed; z-index: 0; pointer-events: none;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent), transparent 68%);
  filter: blur(90px); opacity: .06;
  top: 8%; right: -6%;
}

/* ---- Back to top ------------------------------------------ */
.to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--bg); border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), background-color .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent-2); }
@media (max-width: 720px) { .to-top { bottom: 86px; right: 16px; } }

/* ---- Reduced motion: kill switch -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .r-img { clip-path: none !important; }
  .r-img > *, .reveal.r-clip > .clip-i, .reveal.r-scale { transform: none !important; transition: none !important; }
  .marquee__track { animation: none !important; }
  .scroll-progress, .bg-glow { display: none !important; }
  .drawer__panel nav a { opacity: 1 !important; transform: none !important; }
  .to-top { transition: opacity .2s; transform: none; }
}