/* Intro K.A.T.E.C : lettres découpées sur une vidéo de chantier, puis zoom dans le T */
html.ki-lock { overflow: hidden; }

.ki {
  position: fixed; inset: 0; z-index: 9999;
  background: #000; overflow: hidden; isolation: isolate;
  cursor: pointer;
  transition: opacity .7s ease;
}
.ki.ki-out { opacity: 0; pointer-events: none; }

.ki-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Le masque : noir partout, blanc dans les lettres ; multiply laisse passer la vidéo dans le blanc */
.ki-mask {
  position: absolute; inset: 0;
  background: #000; mix-blend-mode: multiply;
  display: grid; place-items: center;
  will-change: transform;
  transition: transform 1.7s cubic-bezier(.75, 0, .95, .35);
}
.ki-word {
  font-family: var(--ki-font, sans-serif);
  font-weight: var(--ki-weight, 700);
  font-size: clamp(3.2rem, 17vw, 22rem);
  line-height: 1; letter-spacing: .01em; white-space: nowrap;
  color: #fff;
  opacity: 0; transform: scale(.94);
  transition: opacity .9s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.ki.ki-in .ki-word { opacity: 1; transform: scale(1); }

.ki-skip {
  position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  font: inherit; font-size: .9rem; padding: .45rem .9rem; cursor: pointer;
  backdrop-filter: blur(4px);
}
.ki-skip:hover, .ki-skip:focus-visible { background: rgba(255,255,255,.28); outline: none; }