/*---------------------------------------------------------------------------------
Pure CSS animated text highlight/underline effect — Credit: jerome@vadon.fr
---------------------------------------------------------------------------------*/
/* === Moteur commun === */
.textEffect {
  --hl: 244 207 16; /* couleur par défaut */

  --t: 10%;   /* thickness (coverage %) */
  --d: 0s;    /* durée */
  --f: 5;     /* feather % */

  --mt: 0;    /* top margin % of leftover */
  --mb: 0;    /* bottom margin % of leftover */

  --o1: 0.25;
  --o2: 0.50;
  --o3: 0.90;

  --r1: -2deg;
  --r2:  1.6deg;
  --r3: -1deg;

  --i2: 12;

  /* DERIVED */
  --L:  calc(100% - var(--t));
  --ff: calc(var(--t) * var(--f) / 100);
  --TopPad: calc(var(--L) * var(--mt) / 100);
  --BotPad: calc(var(--L) * var(--mb) / 100);
  --S: var(--TopPad);
  --E: calc(100% - var(--BotPad));
  --Inset2: calc(var(--t) * var(--i2) / 100);

  background-image:
    /* TOP pass (L→R) */
    linear-gradient(
      calc(180deg + var(--r3)),
      transparent 0%,
      transparent var(--S),
      rgb(var(--hl) / var(--o3)) calc(var(--S) + var(--ff)),
      rgb(var(--hl) / var(--o3)) calc(var(--E) - var(--ff)),
      transparent var(--E),
      transparent 100%
    ),
    /* MIDDLE pass (R→L) */
    linear-gradient(
      calc(180deg + var(--r2)),
      transparent 0%,
      transparent calc(var(--S) + var(--Inset2)),
      rgb(var(--hl) / var(--o2)) calc(var(--S) + var(--Inset2) + var(--ff)),
      rgb(var(--hl) / var(--o2)) calc(var(--E) - var(--Inset2) - var(--ff)),
      transparent calc(var(--E) - var(--Inset2)),
      transparent 100%
    ),
    /* BOTTOM pass (L→R) */
    linear-gradient(
      calc(180deg + var(--r1)),
      transparent 0%,
      transparent var(--S),
      rgb(var(--hl) / var(--o1)) var(--S),
      rgb(var(--hl) / var(--o1)) var(--E),
      transparent calc(var(--E) + var(--ff)),
      transparent 100%
    );

  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 0% 100%, 0% 100%, 0% 100%;
  background-position:
    left 0 top 0,
    right 0 top 0,
    left 0 top 0;

  display: inline;
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;

  animation: marker3-seq var(--d) ease-out forwards;
}
/* Animation */
@keyframes marker3-seq {
  0%   { background-size: 0% 100%, 0% 100%, 0% 100%; }
  28%  { background-size: 0% 100%, 0% 100%, 104% 100%; }
  34%  { background-size: 0% 100%, 0% 100%, 104% 100%; }
  66%  { background-size: 0% 100%, 104% 100%, 104% 100%; }
  72%  { background-size: 0% 100%, 104% 100%, 104% 100%; }
  100% { background-size: 104% 100%, 104% 100%, 104% 100%; }
}
/* Highlight = plein derrière */
.textEffect--highlight {
	--t: 70%;
	--mt: 80;
	--mb: 45;
}
/* Underline = trait fin en bas */
.textEffect--underline {
    --t: 3%;
    --mt: 92;
    --mb: 5;
    height: 2.2ch;
    --o1: 0.50;
    --o2: 0.50;
    --o3: 0.50;
}