/* =========================================================
   Qi Flow Spacer
   Subtiele ademende lijn boven paragrafen met dropcap
   Variatie via nth-of-type (organisch, geen inline styles)
   Context: Traditional Chinese Medicine
   ========================================================= */

/* Basiselement */
.qi-spacer {
  /* Afmetingen */
  --qi-width: 224px;          /* standaard lengte */
  --qi-height: 1px;          /* standaard dikte */

  /* Animatie-eigenschappen */
  --qi-opacity-min: 0.25;
  --qi-opacity-max: 0.6;
  --qi-scale-min: 0.8;
  --qi-scale-max: 1.05;
  --qi-drift: 4px;
  --qi-duration: 9s;         /* standaard ademcyclus */

  width: var(--qi-width);
  height: var(--qi-height);
  margin-left: 0.15em; /* stem af op dropcap 

  /* Zachte penseellijn-illusie */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(114, 114, 114, 0.418),
    transparent
  );

  opacity: var(--qi-opacity-min);
  transform-origin: center;

  animation: qi-breath var(--qi-duration) ease-in-out infinite;
}

/* Ademhaling / stroming */
@keyframes qi-breath {
  0%, 100% {
    opacity: var(--qi-opacity-min);
    transform:
      scaleX(var(--qi-scale-min))
      translateY(0);
  }

  50% {
    opacity: var(--qi-opacity-max);
    transform:
      scaleX(var(--qi-scale-max))
      translateY(var(--qi-drift));
  }
}

/* =========================================================
   Organische variatie (automatisch, ritmisch)
   ========================================================= */

/* Iets langzamer ademen */
.qi-spacer:nth-of-type(3n) {
  --qi-duration: 11s;
}

/* Iets kortere lijn */
.qi-spacer:nth-of-type(4n) {
  --qi-width: 202px;
}

/* Rustiger én compacter */
.qi-spacer:nth-of-type(5n) {
  --qi-duration: 13s;
  --qi-width: 180px;
}

/* =========================================================
   Qi Flow Spacer — kleine variant
   Subtieler, compacter, secundair ritme
   ========================================================= */

.qi-spacer--small {
  --qi-width: 122px;
  --qi-height: 1px;

  --qi-opacity-min: 0.25;
  --qi-opacity-max: 0.45;

  --qi-scale-min: 0.95;
  --qi-scale-max: 1.02;

  --qi-drift: 1px;
  --qi-duration: 11s;

  margin: 0.8em 0 0.4em;
}


/* ============================================
   Qi fade-out bij verlaten viewport
   ============================================ */

.qi-spacer {
  animation:
    qi-breath var(--qi-duration) ease-in-out infinite,
    qi-fade 1s linear both;

  animation-timeline:
    auto,
    view();

  animation-range:
    auto,
    exit 80% exit 100%;
}

@keyframes qi-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}