/* SoulCraft v10 — Lab index only. Mirrors the About / Contact page geometry. */
body.is-lab-mode { overflow: hidden; }

body.is-lab-mode .content-frame,
body.is-lab-mode .content-frame.fx-about,
body.is-lab-mode .content-frame.fx-archive,
body.is-lab-mode .content-frame.fx-journal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  background: #fff !important;
  z-index: 10;
}

body.is-lab-mode .content-panel.lab-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.is-lab-mode .content-frame.show-content .lab-panel.is-active {
  animation: labPageIn 440ms ease both !important;
}

@keyframes labPageIn { from { opacity: 0; } to { opacity: 1; } }

.lab-inner {
  position: absolute;
  z-index: 3;
  top: clamp(30px, 4.1vh, 62px);
  left: clamp(54px, 8.55vw, 132px);
  color: #111;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
  letter-spacing: .018em;
}

body.is-lab-mode .lab-panel .content-kicker {
  margin: 0 0 clamp(24px, 2.9vh, 42px) !important;
  font-size: clamp(8px, .56vw, 10px) !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  font-weight: 600;
}

body.is-lab-mode .lab-panel h1 {
  margin: 0 0 clamp(22px, 2.6vh, 34px) !important;
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  font-weight: 400 !important;
}

body.is-lab-mode .lab-panel p:not(.content-kicker) {
  margin: 0 !important;
  font-size: clamp(9px, .64vw, 11px) !important;
  line-height: 1.65 !important;
  letter-spacing: .018em !important;
}

.lab-entry-list {
  list-style: none;
  margin: clamp(42px, 5.4vh, 72px) 0 0;
  padding: 0;
}

.lab-entry { margin: 0; padding: 0; }

.lab-entry-link {
  display: grid;
  grid-template-columns: 48px minmax(170px, 250px) minmax(170px, 1fr);
  align-items: baseline;
  column-gap: 20px;
  color: inherit;
  text-decoration: none;
  font-size: clamp(9px, .64vw, 11px);
  line-height: 1.65;
  letter-spacing: .018em;
  transition: opacity 180ms ease;
}

.lab-entry-number { opacity: .48; }
.lab-entry-meta { opacity: .48; }

.lab-entry-link:hover .lab-entry-title,
.lab-entry-link:focus-visible .lab-entry-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lab-entry-link:focus-visible { outline: 1px solid currentColor; outline-offset: 7px; }

body.is-lab-mode .fixed-index-menu,
body.is-lab-mode .site-copyright { z-index: 40; }

@media (max-width: 860px) {
  body.is-lab-mode { overflow-y: auto; }
  body.is-lab-mode .content-frame { overflow-y: auto !important; }
  .lab-inner { top: 45px; left: 8vw; width: 84vw; }
  .lab-entry-link { grid-template-columns: 42px 1fr; row-gap: 6px; }
  .lab-entry-meta { grid-column: 2; }
}

/* Lab detail remains inside the same document so the site's fullscreen state is preserved. */
body.is-lab-detail-open {
  overflow: hidden !important;
}

.lab-detail-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.lab-detail-layer.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease;
}

.lab-detail-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}


/* Lab 001 transition — left-to-right reveal with the same brief monochrome
   static texture used at the site entrance. */
.lab-detail-layer {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  visibility: visible;
  transition: clip-path 520ms cubic-bezier(.65,0,.2,1);
}
.lab-detail-layer.is-visible { clip-path: inset(0 0 0 0); }
.lab-detail-layer.is-closing {
  clip-path: inset(0 100% 0 0);
  transition-duration: 460ms;
}
.lab-detail-frame { opacity: 0; transition: opacity 240ms ease 390ms; }
.lab-detail-layer.is-visible .lab-detail-frame { opacity: 1; }

.lab-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
  clip-path: inset(0 100% 0 0);
}
.lab-transition-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .38;
  image-rendering: pixelated;
  filter: contrast(1.15);
}
.lab-transition-layer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: rgba(17,17,17,.62);
  box-shadow: -5px 0 18px rgba(17,17,17,.12);
}
.lab-transition-layer--open.is-running {
  animation: labTransitionOpen 760ms cubic-bezier(.65,0,.2,1) both;
}
.lab-transition-layer--close {
  clip-path: inset(0 0 0 0);
}
.lab-transition-layer--close .lab-transition-noise { opacity: .22; }
.lab-transition-layer--close.is-running {
  animation: labTransitionClose 520ms cubic-bezier(.65,0,.2,1) both;
}
@keyframes labTransitionOpen {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  62% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes labTransitionClose {
  0% { clip-path: inset(0 0 0 100%); opacity: 0; }
  30% { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-transition-layer,
  .lab-transition-noise,
  .lab-detail-layer,
  .lab-detail-frame { animation: none !important; transition-duration: 1ms !important; }
}

/* v8 — Lab entry uses the exact visual rhythm following the site's ENTER click:
   short hold, full-screen monochrome noise, white pause, then detail fade-in. */
.lab-entry-link.is-activating {
  opacity: 0;
  transition: opacity 220ms ease;
}
.lab-enter-transition {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  background: #fff;
}
.lab-enter-transition__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
.lab-enter-transition.is-noise .lab-enter-transition__noise {
  opacity: 1;
}
.lab-enter-transition.is-white .lab-enter-transition__noise {
  opacity: 0;
}
.lab-detail-layer--enter-sequence {
  clip-path: none;
  opacity: 0;
  transition: opacity 360ms ease;
}
.lab-detail-layer--enter-sequence.is-visible {
  clip-path: none;
  opacity: 1;
}
.lab-detail-layer--enter-sequence .lab-detail-frame {
  opacity: 1;
  transition: none;
}
.lab-detail-layer--enter-sequence.is-closing {
  clip-path: none;
  opacity: 0;
  transition: opacity 420ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .lab-entry-link.is-activating,
  .lab-detail-layer--enter-sequence {
    transition-duration: 1ms !important;
  }
}