/* ENG-828: the landing page's lead-in to mentors, explore and portfolio reviews.
   landing_transition_controller.js adds the overlay; arrival_reveal_controller.js the
   card reveal on the page it leads to. */

/* The white screen and the wordmark: in and up a little, then down and away. The
   white stays while the next page loads behind it. */
.kx-lead-in {
  position: fixed; inset: 0; z-index: 10000; background: #fff;
  display: grid; place-items: center;
  animation: kx-lead-in-cover 0.31s ease-out both;
}
.kx-lead-in__mark {
  font-weight: 800; letter-spacing: -0.02em; color: #0e0e0f;
  font-size: clamp(2rem, 5vw, 3.25rem);
  animation: kx-lead-in-mark 1.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes kx-lead-in-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes kx-lead-in-mark {
  /* in and up a little (0.55s), a beat (0.275s), then a slower drop away (0.825s) */
  0%   { opacity: 0; transform: translateY(0) scale(0.9); }
  33.3% { opacity: 1; transform: translateY(0) scale(1.06); }
  50%  { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 0; transform: translateY(32vh) scale(1.06); }
}

/* The page it leads to: each card wipes open from the top, one after another -- the
   same reveal the /mentors grid uses (kxb-card-reveal). */
.kx-arrive {
  animation: kx-arrive 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--kx-arrive-i, 0) * 0.07s);
}
@keyframes kx-arrive {
  from { clip-path: inset(0 0 100% 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-lead-in, .kx-lead-in__mark, .kx-arrive { animation: none; }
}