:root {
  --koudker-paper: var(--paper, #ced7ec);
  --koudker-ink: var(--ink, #4e1d35);
  --koudker-carbon: var(--carbon, #4e1d35);
  --koudker-focus: var(--accent, #4e1d35);
  --koudker-brass: var(--brass, #b1ccf0);
  --koudker-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Signature Koudkèr : le texte existe et reste lisible avant tout script. */
[data-ink-entry] {
  position: relative;
  isolation: isolate;
}

.koudker-motion-ready [data-ink-entry] {
  animation: koudker-ink-dry 720ms var(--koudker-motion-ease) both;
}

@keyframes koudker-ink-dry {
  from {
    opacity: 0.72;
    transform: translate3d(0, 0.12em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Le signal est dessiné, décoratif et ne remplace jamais le libellé du lien. */
.fiche,
.projects-page .project-row {
  position: relative;
  transition:
    opacity 260ms var(--koudker-motion-ease),
    background-color 260ms var(--koudker-motion-ease),
    color 260ms var(--koudker-motion-ease);
}

.fiche__signal,
.project-row__signal {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--koudker-brass);
  pointer-events: none;
  opacity: 0.56;
  transform: translate3d(-0.35rem, 0.35rem, 0) scale(0.82);
  transform-origin: center;
  transition: opacity 240ms var(--koudker-motion-ease), transform 280ms var(--koudker-motion-ease);
}

.fiche__signal {
  top: -0.35rem;
  right: 0;
}

.project-row__signal {
  top: clamp(1.5rem, 4vw, 3.25rem);
  right: clamp(1.25rem, 4vw, 3.25rem);
  color: var(--koudker-focus);
}

.project-row--client .project-row__signal {
  color: var(--koudker-brass);
}

.fiche__signal svg,
.project-row__signal svg {
  width: 1.45rem;
  height: 1.45rem;
  overflow: visible;
}

.fiche__signal path,
.project-row__signal path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

#projets .fiche:focus-within .fiche__signal,
.projects-page .project-row:focus-within .project-row__signal {
  opacity: 1;
  transform: none;
}

#projets .fiche:focus-within .fiche__img img,
.projects-page .project-row:focus-within .project-row__media img {
  transform: scale(1.025);
}

@media (hover: hover) and (pointer: fine) {
  #projets .trip__col:has(.fiche:hover) .fiche:not(:hover),
  #projets .trip__col:has(.fiche:focus-within) .fiche:not(:focus-within),
  .projects-page .section .shell:has(.project-row:hover) .project-row:not(:hover),
  .projects-page .section .shell:has(.project-row:focus-within) .project-row:not(:focus-within) {
    opacity: 0.72;
  }

  #projets .fiche:hover .fiche__signal,
  .projects-page .project-row:hover .project-row__signal {
    opacity: 1;
    transform: none;
  }

  #projets .fiche:hover .fiche__img img,
  .projects-page .project-row:hover .project-row__media img {
    transform: scale(1.025);
  }
}

@media (hover: none), (pointer: coarse) {
  .fiche__signal,
  .project-row__signal {
    opacity: 1;
    transform: none;
  }
}

/* Page handoff : une feuille carbone courte, jamais un écran de chargement. */
.koudker-page-transition {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: var(--koudker-carbon);
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 300ms var(--koudker-motion-ease);
}

.koudker-page-transition::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--koudker-brass);
}

html.koudker-leaving .koudker-page-transition {
  transform: scaleY(1);
}

html.koudker-arriving .koudker-page-transition {
  transform: scaleY(1);
  transform-origin: 50% 0;
  transition: none;
}

html.koudker-arriving.koudker-arrive-active .koudker-page-transition {
  transform: scaleY(0);
  transition: transform 280ms var(--koudker-motion-ease);
}

[data-page-transition]:focus-visible {
  outline: 2px solid var(--koudker-focus);
  outline-offset: 4px;
}

.ch--encre [data-page-transition]:focus-visible,
.ch--carbone [data-page-transition]:focus-visible,
.project-row--client [data-page-transition]:focus-visible {
  outline-color: var(--koudker-brass);
}

@media (prefers-reduced-motion: reduce) {
  .koudker-motion-ready [data-ink-entry],
  .fiche,
  .projects-page .project-row,
  .fiche__signal,
  .project-row__signal,
  .koudker-page-transition {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }

  .koudker-page-transition { display: none; }
}