/* Intro: a jack-in boot log over a moving grid floor, the name resolves with a glitch,
   then a yellow and magenta wipe crosses the screen and leaves the page behind it. */

.intro { display: none; }

[data-intro-state="play"] .intro,
[data-intro-state="exit"] .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow: hidden;
  background: var(--void);
}

/* If the script never runs, the overlay clears itself instead of blocking the page. */
[data-intro-state="play"] .intro { animation: intro-failsafe 0.3s 8s forwards; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

.intro__grid {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -8%;
  height: 62%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cyan) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 30%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 92%);
  mask-image: linear-gradient(to top, #000 25%, transparent 92%);
  animation: grid-run 0.9s linear infinite;
}
@keyframes grid-run { to { background-position: 0 56px, 0 0; } }

.intro__log {
  position: absolute;
  top: calc(28px + env(safe-area-inset-top, 0px));
  left: max(28px, env(safe-area-inset-left, 0px));
  right: max(28px, env(safe-area-inset-right, 0px));
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.intro__log .ok { color: var(--cyan); }
.intro__log .wait { color: var(--yellow); }
.intro__log .val { color: var(--pale); }
.intro__log .cursor { display: inline-block; width: 0.6em; background: var(--cyan); animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.intro__card {
  position: absolute;
  left: max(28px, env(safe-area-inset-left, 0px));
  right: max(28px, env(safe-area-inset-right, 0px));
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transform: translateY(-30%);
  opacity: 0;
}
.intro.is-name .intro__card { opacity: 1; }

.intro__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  padding: 2px 10px;
  background: var(--yellow);
  color: var(--ink);
}
.intro__kicker:empty { display: none; }

.intro__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 10vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--pale);
  overflow-wrap: anywhere;
}
/* The intro always splits the name, even when the ambient glitch effect is off. */
.intro__name { text-shadow: 4px 0 var(--magenta), -4px 0 var(--cyan); }
.intro.is-name .intro__name { animation: name-in 0.7s steps(7) both; }
@keyframes name-in {
  0% { clip-path: inset(0 100% 0 0); text-shadow: 14px 0 var(--magenta), -14px 0 var(--cyan); }
  60% { clip-path: inset(0 0 0 0); text-shadow: 8px 0 var(--magenta), -8px 0 var(--cyan); }
  100% { clip-path: inset(0 0 0 0); text-shadow: 4px 0 var(--magenta), -4px 0 var(--cyan); }
}
.intro.is-name .intro__name::before,
.intro.is-name .intro__name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  text-shadow: none;
  pointer-events: none;
}
.intro.is-name .intro__name::before { color: var(--cyan); animation: slice-a 0.5s 0.25s steps(3) 2 both; }
.intro.is-name .intro__name::after { color: var(--magenta); animation: slice-b 0.5s 0.25s steps(3) 2 both; }

.intro__role {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  color: var(--cyan);
  min-height: 1.6em;
}

.intro__progress {
  position: absolute;
  left: max(28px, env(safe-area-inset-left, 0px));
  right: max(28px, env(safe-area-inset-right, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  height: 2px;
  background: var(--line);
}
.intro__progress span {
  display: block;
  height: 100%;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s linear;
}

.intro__skip {
  position: absolute;
  right: max(28px, env(safe-area-inset-right, 0px));
  bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line-hi);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  cursor: pointer;
}
.intro__skip:hover { color: var(--pale); border-color: var(--muted); }
.intro__skip kbd { font-family: inherit; padding: 0 4px; border: 1px solid var(--line-hi); }

/* ---------- exit wipe ---------- */

.intro__wipe {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -15%;
  width: 130%;
  transform: translateX(-120%) skewX(-14deg);
  pointer-events: none;
}
.intro__wipe--y { z-index: 3; background: var(--yellow); }
.intro__wipe--m { z-index: 2; background: var(--desk); }

[data-intro-state="exit"] .intro { animation: intro-clear 0.95s forwards; }
[data-intro-state="exit"] .intro > :not(.intro__wipe) { animation: intro-hide 0.95s forwards; }
[data-intro-state="exit"] .intro__wipe--y { animation: wipe 0.95s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
[data-intro-state="exit"] .intro__wipe--m { animation: wipe 0.95s 0.07s cubic-bezier(0.7, 0, 0.3, 1) forwards; }

@keyframes wipe {
  0% { transform: translateX(-120%) skewX(-14deg); }
  46% { transform: translateX(0) skewX(-14deg); }
  100% { transform: translateX(120%) skewX(-14deg); }
}
@keyframes intro-clear { 0%, 45% { background-color: var(--void); } 46%, 100% { background-color: transparent; } }
@keyframes intro-hide { 0%, 45% { visibility: visible; } 46%, 100% { visibility: hidden; } }

/* Season 2: the same boot on worn film. */
[data-palette="s2"] .intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--pale);
  opacity: 0;
  animation: film-flicker 2.6s steps(1) infinite;
}
@keyframes film-flicker { 0%, 100% { opacity: 0; } 31% { opacity: 0.04; } 33% { opacity: 0; } 72% { opacity: 0.06; } 73% { opacity: 0; } }

/* ---------- page entrance after the wipe ---------- */

.is-entering .dossier { animation: enter-left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.is-entering .win { animation: enter-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.is-entering .win--posts { animation-delay: 0.08s; }
.is-entering .win--works { animation-delay: 0.16s; }
@keyframes enter-left { from { transform: translateX(-24px); opacity: 0.2; } }
@keyframes enter-up { from { transform: translateY(24px); opacity: 0.2; } }

@media (max-width: 759px) {
  .intro__log { font-size: var(--t-xs); }
  .intro__card { transform: translateY(-10%); }
  .intro__skip { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}