/* ===========================================
   Custom interaction CSS, niet verwerkt door Tailwind
   Gelinkt via <link> in BaseLayout.astro
   =========================================== */

/* Scroll-reveal */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-reveal="fade-up"] { transform: translateY(28px); }
  [data-reveal="fade-left"] { transform: translateX(28px); }
  [data-reveal="fade-right"] { transform: translateX(-28px); }
  [data-reveal="scale-in"] { transform: scale(0.97); }

  [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
}

/* Header theme, dark hero (default): white text, scrolled: dark text */
[data-header-theme="dark"] .header-text { color: #ffffff; }
[data-header-theme="dark"] .header-link { color: rgba(255,255,255,0.75); }
[data-header-theme="dark"] .header-link:hover { color: #ffffff; }
[data-header-theme="dark"] .header-bar { background: #ffffff; }

/* Header theme, light hero: dark text */
[data-header-theme="light"] .header-text { color: #2C2824; }
[data-header-theme="light"] .header-link { color: #7A7169; }
[data-header-theme="light"] .header-link:hover { color: #2C2824; }
[data-header-theme="light"] .header-bar { background: #2C2824; }

/* Scrolled state, dark theme: crème tekst op near-black */
.header-scrolled .header-text { color: #F0EAE2; }
.header-scrolled .header-link { color: #A79C90; }
.header-scrolled .header-link:hover { color: #F0EAE2; }
.header-scrolled .header-bar { background: #F0EAE2; }

/* Sticky header background, brand-950 #141110 */
.header-scrolled,
.nav-is-open {
  background: rgba(20, 17, 16, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Nav open, menu heeft donkere bg */
.nav-is-open .header-text { color: #F0EAE2; }
.nav-is-open .header-link { color: #A79C90; }
.nav-is-open .header-bar { background: #F0EAE2; }

/* Mobile nav */
.nav-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.nav-menu.is-open {
  grid-template-rows: 1fr;
}
.nav-menu > div {
  overflow: hidden;
}

.nav-toggle .bar-top    { transition: transform 0.3s ease; }
.nav-toggle .bar-mid    { transition: opacity 0.3s ease; }
.nav-toggle .bar-bottom { transition: transform 0.3s ease; }

.nav-toggle[aria-expanded="true"] .bar-top {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bar-mid {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .bar-bottom {
  transform: translateY(-8px) rotate(-45deg);
}

/* FAQ accordion */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-panel.is-open {
  max-height: 1400px;
}
.faq-chevron {
  transition: transform 0.3s ease;
}
.faq-trigger[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}

/* Scroll-parallax: grote beelden driften een fractie langzamer dan de pagina.
   Puur CSS (scroll-driven animation), dus geen scroll-jank en automatisch
   uitgeschakeld in browsers zonder support of met reduced-motion. Nooit op een
   element zetten dat zelf al een transform-animatie heeft (data-reveal,
   hero-entrance): die zouden elkaar overschrijven. Een .img-zoom-container mag
   wél: de hover-zoom staat daar op de img erbinnen, niet op de container. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-parallax] {
      animation: parallax-drift linear both;
      animation-timeline: view();
    }
    @keyframes parallax-drift {
      from { transform: translateY(1.25rem); }
      to   { transform: translateY(-1.25rem); }
    }
  }
}

/* Uitklapbare reviews op /ervaringen: lange teksten klappen dicht tot zeven
   regels zodat het kolommenblok visueel gelijk oogt. De class gaat er via
   JavaScript op; zonder JavaScript staat de volledige tekst er gewoon. */
.review-tekst.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}
/* Zonder JavaScript werkt de "Lees verder"-knop niet, dus dan gaat de clamp
   uit en staat de hele tekst er. Bewust via deze mediaquery en niet via een
   <noscript> in de head: daar laat de Astro-compiler de <body>-tag op vallen. */
@media (scripting: none) {
  .review-tekst.is-clamped {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }
}

/* Sticky mobile CTA */
#sticky-cta {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
#sticky-cta.is-visible {
  transform: translateY(0);
}
@media (max-width: 1023px) {
  body { padding-bottom: 5rem; }
  body.no-sticky { padding-bottom: 0; }
}

/* Button hover/active */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: scale(0.98);
}

/* Card hover, lift + shadow */
.card-hover {
  will-change: transform;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.1);
}

/* Pricing card hover */
.pricing-hover {
  will-change: transform;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.pricing-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.1);
}

/* FAQ item wrapper hover, kleurt de hele kaart */
.faq-item {
  transition: background 0.12s ease-out;
}
.faq-item:hover {
  background: rgba(43, 37, 35, 0.6); /* brand-800 */
}
/* Op een crème sectie zou die donkere hover als een flits werken. */
.faq-item--licht:hover {
  background: rgba(232, 223, 214, 0.7); /* brand-200 */
}

/* Anton is single-weight (400), voorkom synthetische vetting en te krappe
   tracking uit de fontSize-tokens. Hogere specificiteit dan .text-* utilities. */
body .font-display {
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Stats counter */
.counter {
  display: inline-block;
}

/* Link underline animation */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s ease;
}
.link-underline:hover::after {
  width: 100%;
}

/* ===========================================
   Visual polish, zie .claude/rules/visual-polish.md
   =========================================== */

/* Section curve dividers */
.section-curve-top {
  position: relative;
}
.section-curve-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 48px;
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 48h1440V0C1200 32 960 48 720 48S240 32 0 0v48z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 48h1440V0C1200 32 960 48 720 48S240 32 0 0v48z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  z-index: 1;
}

.section-curve-bottom {
  position: relative;
}
.section-curve-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 48px;
  background: inherit;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1440v48C1200 16 960 0 720 0S240 16 0 48V0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1440v48C1200 16 960 0 720 0S240 16 0 48V0z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  z-index: 1;
}

/* Hero entrance. JS-gestuurd (initHeroEntrance zet .is-in), niet als pure
   CSS-animatie: die start bij het laden van de stylesheet en is op mobiel
   vaak al klaar vóór de eerste paint, waardoor de hero statisch leek. Met
   .is-in via requestAnimationFrame speelt hij pas ná de echte paint, ook na
   client-side navigaties. */
@media (prefers-reduced-motion: no-preference) {
  [data-hero] .hero-entrance {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-hero] .hero-image-entrance {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
    transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
  }
  [data-hero] .hero-entrance.is-in,
  [data-hero] .hero-image-entrance.is-in {
    opacity: 1;
    transform: none;
  }
  /* Zonder JavaScript komt .is-in er nooit op; toon de hero dan gewoon. */
  @media (scripting: none) {
    [data-hero] .hero-entrance,
    [data-hero] .hero-image-entrance {
      opacity: 1;
      transform: none;
    }
  }
}

/* Accent glow, alleen op expliciete instructie */
.accent-glow {
  position: relative;
}
.accent-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, var(--accent-glow-color, rgba(212,132,124,0.04)) 0%, transparent 70%);
  pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .nav-menu,
  .nav-toggle .bar-top,
  .nav-toggle .bar-mid,
  .nav-toggle .bar-bottom,
  .faq-panel,
  .faq-chevron,
  #sticky-cta,
  .btn,
  [data-hero] .hero-entrance,
  [data-hero] .hero-image-entrance {
    transition: none !important;
    animation: none !important;
  }
  [data-reveal],
  [data-hero] .hero-entrance,
  [data-hero] .hero-image-entrance {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Marquee (bewegende woordenband) ================================= */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  min-width: 100%;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* === Beeld-hover: zachte inzoom binnen een vaste uitsnede =========== */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}
.img-zoom:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .img-zoom img { transition: none; }
  .img-zoom:hover img { transform: none; }
}

/* === Galerij: sloom schuivende fotoband ============================== */
/* Zelfde truc als de woordenband: twee identieke sporen naast elkaar. Het
   eerste schuift precies één eigen breedte weg terwijl het tweede binnenkomt,
   dus de lus is naadloos en er is geen sprong.
   De tegels houden hun eigen verhouding (hoogte vast, breedte vrij), zodat
   staande en liggende foto's elkaar afwisselen in plaats van allemaal tot
   hetzelfde formaat te worden bijgesneden. */
.galerij-band {
  display: flex;
  overflow: hidden;
  user-select: none;
}
.galerij-banden {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.galerij-band__spoor {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: 0.875rem;
  padding-right: 0.875rem;
  /* Per rij een eigen duur via --galerij-duur. Beide rijen schuiven dezelfde
     kant op; het kleine snelheidsverschil leest als diepte. Tegen elkaar in
     laten lopen trekt de aandacht naar het mechaniek in plaats van de foto's. */
  animation: galerij-schuif var(--galerij-duur, 70s) linear infinite;
  will-change: transform;
}
@keyframes galerij-schuif {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* Hover pauzeert alleen de rij waar je naar kijkt. De knop pauzeert alles. */
.galerij-band:hover .galerij-band__spoor,
.galerij-band:focus-within .galerij-band__spoor,
.galerij-banden.is-paused .galerij-band__spoor {
  animation-play-state: paused;
}

.galerij-band__tegel {
  flex: 0 0 auto;
  height: 9.5rem;
  border: 1px solid #2B2523;
}
@media (min-width: 640px)  { .galerij-band__tegel { height: 13rem; } }
@media (min-width: 1024px) { .galerij-band__tegel { height: 16rem; } }

.galerij-band__tegel img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
}

/* Zonder animatie blijven het twee gewone, met de hand scrollbare stroken.
   Het tweede spoor is dan dubbele content en gaat eruit. */
@media (prefers-reduced-motion: reduce) {
  .galerij-band {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .galerij-band::-webkit-scrollbar { display: none; }
  .galerij-band__spoor { animation: none; }
  .galerij-band__spoor[aria-hidden='true'] { display: none; }
}