/* ==========================================================================
   components.css — Hands of Luxury Clean
   --------------------------------------------------------------------------
   Herbruikbare componenten. Buttons, cards, FAQ items, review cards,
   section titles, trust strips, CTA blocks, reveal animations, etc.
   Wordt op alle reguliere pagina's geladen.

   Alle kleurwaarden via tokens zodat licht/dark thema automatisch werkt.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

.hol-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hol-space-2xs);
  padding: var(--hol-space-sm) var(--hol-space-lg);
  font-family: var(--hol-font-body);
  font-size: var(--hol-fs-sm);
  font-weight: var(--hol-fw-medium);
  letter-spacing: var(--hol-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--hol-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--hol-duration-fast) var(--hol-ease-standard),
    color            var(--hol-duration-fast) var(--hol-ease-standard),
    border-color    var(--hol-duration-fast) var(--hol-ease-standard),
    transform       var(--hol-duration-fast) var(--hol-ease-standard);
  text-decoration: none;
  white-space: nowrap;
}

.hol-button:hover {
  transform: translateY(-1px);
}

.hol-button--primary {
  background: var(--hol-color-ink);
  color: var(--hol-color-on-deep);
}

.hol-button--primary:hover {
  background: var(--hol-color-accent);
}

.hol-button--accent {
  background: var(--hol-color-accent);
  color: var(--hol-color-bg);
}

.hol-button--accent:hover {
  background: var(--hol-color-accent-hover);
}

.hol-button--ghost {
  background: transparent;
  color: var(--hol-color-ink);
  border-color: var(--hol-color-ink);
}

.hol-button--ghost:hover {
  background: var(--hol-color-ink);
  color: var(--hol-color-on-deep);
}

.hol-button--ghost-light {
  background: transparent;
  color: var(--hol-color-on-deep);
  border-color: var(--hol-color-on-deep);
}

.hol-button--ghost-light:hover {
  background: var(--hol-color-on-deep);
  color: var(--hol-color-ink);
}

/* Ghost gold — past in het dark theme */
.hol-button--ghost-gold {
  background: transparent;
  color: var(--hol-color-accent);
  border-color: var(--hol-color-accent);
}

.hol-button--ghost-gold:hover {
  background: var(--hol-color-accent);
  color: var(--hol-color-bg);
}

.hol-button--small {
  padding: var(--hol-space-xs) var(--hol-space-md);
  font-size: var(--hol-fs-xs);
}

.hol-button--large {
  padding: var(--hol-space-md) var(--hol-space-xl);
  font-size: var(--hol-fs-base);
}

/* --- Section title ------------------------------------------------------ */

.hol-section-title {
  display: flex;
  flex-direction: column;
  gap: var(--hol-space-sm);
  max-width: 720px;
  margin-bottom: var(--hol-space-2xl);
}

.hol-section-title--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.hol-section-title__eyebrow {
  font-size: var(--hol-fs-xs);
  font-weight: var(--hol-fw-medium);
  letter-spacing: var(--hol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hol-color-accent);
}

.hol-section-title__heading {
  font-size: var(--hol-fs-3xl);
  line-height: var(--hol-lh-tight);
  letter-spacing: var(--hol-tracking-tight);
}

.hol-section-title__intro {
  font-size: var(--hol-fs-md);
  color: var(--hol-color-ink-soft);
  line-height: var(--hol-lh-normal);
  max-width: 60ch;
}

/* --- Cards -------------------------------------------------------------- */

.hol-card {
  display: flex;
  flex-direction: column;
  background: var(--hol-color-card-bg);
  border: 1px solid var(--hol-color-card-border);
  border-radius: var(--hol-radius-lg);
  overflow: hidden;
  transition:
    transform   var(--hol-duration-base) var(--hol-ease-standard),
    box-shadow  var(--hol-duration-base) var(--hol-ease-standard),
    border-color var(--hol-duration-base) var(--hol-ease-standard);
}

.hol-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hol-shadow-lg);
  border-color: var(--hol-color-line);
}

.hol-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hol-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hol-duration-slower) var(--hol-ease-standard);
}

.hol-card:hover .hol-card__media img {
  transform: scale(1.04);
}

.hol-card__body {
  padding: var(--hol-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--hol-space-sm);
  flex: 1;
}

.hol-card__title {
  font-size: var(--hol-fs-xl);
  letter-spacing: var(--hol-tracking-snug);
}

.hol-card__text {
  color: var(--hol-color-ink-soft);
}

/* --- Trust strip -------------------------------------------------------- */

.hol-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hol-space-md) var(--hol-space-2xl);
  align-items: center;
  justify-content: center;
  padding-block: var(--hol-space-lg);
  border-block: 1px solid var(--hol-color-line-soft);
}

.hol-trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--hol-space-2xs);
  font-size: var(--hol-fs-xs);
  letter-spacing: var(--hol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hol-color-ink-mute);
}

.hol-trust-strip__icon {
  width: 16px;
  height: 16px;
  color: var(--hol-color-accent);
  flex-shrink: 0;
}

/* --- FAQ ---------------------------------------------------------------- */

.hol-faq {
  display: flex;
  flex-direction: column;
}

.hol-faq__item {
  border-top: 1px solid var(--hol-color-line);
}

.hol-faq__item:last-child {
  border-bottom: 1px solid var(--hol-color-line);
}

.hol-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hol-space-md);
  padding: var(--hol-space-lg) 0;
  font-family: var(--hol-font-display);
  font-size: var(--hol-fs-lg);
  text-align: left;
  color: var(--hol-color-ink);
}

.hol-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}

.hol-faq__icon::before,
.hol-faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--hol-color-accent);
  transition: transform var(--hol-duration-base) var(--hol-ease-standard);
}

.hol-faq__icon::after {
  transform: rotate(90deg);
}

.hol-faq__item[data-open="true"] .hol-faq__icon::after {
  transform: rotate(0deg);
}

.hol-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hol-duration-base) var(--hol-ease-standard);
}

.hol-faq__item[data-open="true"] .hol-faq__answer {
  grid-template-rows: 1fr;
}

.hol-faq__answer-inner {
  overflow: hidden;
}

.hol-faq__answer-text {
  padding-bottom: var(--hol-space-lg);
  color: var(--hol-color-ink-soft);
  line-height: var(--hol-lh-normal);
}

/* --- Review card -------------------------------------------------------- */

.hol-review {
  display: flex;
  flex-direction: column;
  gap: var(--hol-space-md);
  padding: var(--hol-space-xl);
  background: var(--hol-color-card-bg);
  border: 1px solid var(--hol-color-card-border);
  border-radius: var(--hol-radius-lg);
}

.hol-review__stars {
  display: flex;
  gap: 2px;
  color: var(--hol-color-accent);
}

.hol-review__quote {
  font-family: var(--hol-font-display);
  font-size: var(--hol-fs-lg);
  line-height: var(--hol-lh-snug);
  color: var(--hol-color-ink);
}

.hol-review__author {
  display: flex;
  flex-direction: column;
  gap: var(--hol-space-3xs);
  margin-top: auto;
}

.hol-review__name {
  font-weight: var(--hol-fw-semi);
  color: var(--hol-color-ink);
}

.hol-review__meta {
  font-size: var(--hol-fs-xs);
  color: var(--hol-color-ink-mute);
  letter-spacing: var(--hol-tracking-wide);
  text-transform: uppercase;
}

/* --- CTA block ---------------------------------------------------------- */

.hol-cta-block {
  display: flex;
  flex-direction: column;
  gap: var(--hol-space-lg);
  align-items: center;
  text-align: center;
  padding: var(--hol-space-3xl) var(--hol-space-xl);
  background: var(--hol-color-bg-deep);
  color: var(--hol-color-on-deep);
  border-radius: var(--hol-radius-xl);
}

.hol-cta-block__eyebrow {
  font-size: var(--hol-fs-xs);
  letter-spacing: var(--hol-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hol-color-accent-soft);
}

.hol-cta-block__title {
  font-size: var(--hol-fs-3xl);
  color: var(--hol-color-on-deep);
  max-width: 18ch;
}

.hol-cta-block__text {
  max-width: 50ch;
  color: var(--hol-color-on-deep-soft);
}

.hol-cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hol-space-sm);
  justify-content: center;
  margin-top: var(--hol-space-sm);
}

/* ==========================================================================
   REVEAL ANIMATION SYSTEM
   --------------------------------------------------------------------------
   Twee systemen naast elkaar:

   1. .hol-reveal — legacy (fade up), gebruikt door microcement/marmerlook.
   2. .rv / .rv-left / .rv-right / .rv-scale — v5 systeem met richtingen.

   Beide worden geactiveerd door .is-visible via IntersectionObserver in JS.
   ========================================================================== */

/* --- Legacy reveal (backward compatible) -------------------------------- */

.hol-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--hol-duration-slow) var(--hol-ease-out),
    transform var(--hol-duration-slow) var(--hol-ease-out);
  will-change: opacity, transform;
}

.hol-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- V5 reveal system --------------------------------------------------- */

.rv {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   var(--hol-duration-slower) var(--hol-ease-out-heavy),
    transform var(--hol-duration-slower) var(--hol-ease-out-heavy);
  will-change: opacity, transform;
}

.rv-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity   var(--hol-duration-slower) var(--hol-ease-out-heavy),
    transform var(--hol-duration-slower) var(--hol-ease-out-heavy);
  will-change: opacity, transform;
}

.rv-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity   var(--hol-duration-slower) var(--hol-ease-out-heavy),
    transform var(--hol-duration-slower) var(--hol-ease-out-heavy);
  will-change: opacity, transform;
}

.rv-scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity   var(--hol-duration-slower) var(--hol-ease-out-heavy),
    transform var(--hol-duration-slower) var(--hol-ease-out-heavy);
  will-change: opacity, transform;
}

.rv.is-visible,
.rv-left.is-visible,
.rv-right.is-visible,
.rv-scale.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto; /* Reset will-change na animatie — voorkomt onnodige GPU-lagen */
}

/* Stagger delay utilities — voor gestaffelde reveals */
.rv-d1 { transition-delay: 100ms; }
.rv-d2 { transition-delay: 200ms; }
.rv-d3 { transition-delay: 300ms; }
.rv-d4 { transition-delay: 400ms; }
.rv-d5 { transition-delay: 500ms; }

/* --- Image reveal (clip-path wipe) -------------------------------------- */

.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--hol-duration-cinematic) var(--hol-ease-out-heavy);
}

.img-reveal.is-visible {
  clip-path: inset(0);
}

/* --- Gold shimmer text -------------------------------------------------- */

.gd-shimmer {
  background: var(--hol-gold-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Gold line-draw ----------------------------------------------------- */

.line-draw {
  position: relative;
}

.line-draw::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--hol-color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hol-duration-slower) var(--hol-ease-out-heavy);
}

.line-draw.is-visible::after {
  transform: scaleX(1);
}

/* --- Scroll progress bar ------------------------------------------------ */

.hol-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--hol-color-accent);
  z-index: calc(var(--hol-z-sticky) + 1);
  transition: none;
  pointer-events: none;
}

/* ==========================================================================
   REDUCED MOTION — schakel alle animaties uit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hol-reveal,
  .rv,
  .rv-left,
  .rv-right,
  .rv-scale,
  .img-reveal,
  .line-draw::after {
    transition: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .img-reveal {
    clip-path: inset(0);
  }

  .line-draw::after {
    transform: scaleX(1);
  }
}