/* Shokunin easter egg (owner review 2026-10-03) ─────────────────
   The pre-2026-09-25 overlay, restored as a native <dialog>: page ground at
   92% with a blur behind, the copy in a 720 column, and 職人 filling the
   room behind it. The glyph is a Three.js object (shokunin-glyph.js); until
   it loads, and without WebGL, the type glyph stands in at the old 4%. */

.shokunin {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--sc-color-surface-page) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--sc-p-space-24));
  backdrop-filter: blur(var(--sc-p-space-24));
  color: var(--sc-color-text-primary);
  overflow: hidden;
  opacity: 0;
  transition:
    opacity var(--sc-motion-entrance-duration) var(--sc-motion-entrance-easing),
    overlay var(--sc-motion-entrance-duration) allow-discrete,
    display var(--sc-motion-entrance-duration) allow-discrete;
}

.shokunin[open] { opacity: 1; }

@starting-style {
  .shokunin[open] { opacity: 0; }
}

.shokunin::backdrop { background: transparent; }

/* The glyph: the room behind the copy. */
.shokunin__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.shokunin__glyph {
  width: min(96vw, calc(var(--sc-p-space-120) * 10));
  aspect-ratio: 2 / 1.1;
  display: block;
}

/* Type stand-in until the object draws (and the no-WebGL path). */
.shokunin__kanji {
  position: absolute;
  font-family: var(--sc-p-font-family-sans);
  font-size: clamp(14rem, 38vw, 28rem);
  font-weight: var(--sc-p-font-weight-light);
  line-height: 1;
  color: var(--sc-color-text-primary);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

.shokunin__glyph[data-glyph-ready] + .shokunin__kanji { visibility: hidden; }

.shokunin__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 45rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sc-p-space-24);
  padding: var(--sc-p-space-64) clamp(var(--sc-p-space-16), 4vw, var(--sc-p-space-48));
  pointer-events: none;
}

.shokunin__inner > * { pointer-events: auto; }

.shokunin__label {
  margin: 0;
  font-family: var(--sc-p-font-family-mono);
  font-size: var(--sc-p-font-size-13);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sc-color-brand-accent-ink);
}

.shokunin__lede {
  margin: 0;
  max-width: 22ch;
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-32);
  font-weight: var(--sc-p-font-weight-light);
  line-height: var(--sc-p-font-line-height-snug);
  letter-spacing: -0.02em;
}

.shokunin__body {
  margin: 0;
  max-width: 56ch;
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-16);
  line-height: var(--sc-p-font-line-height-relaxed);
  color: var(--sc-color-text-secondary);
}

.shokunin__tagline {
  margin: var(--sc-p-space-16) 0 0;
  font-family: var(--sc-p-font-family-mono);
  font-size: var(--sc-p-font-size-13);
  letter-spacing: 0.01em;
}

/* Entrance: the copy rises a step behind the room (Cinematic: the room
   first, then the words that explain it). */
.shokunin[open] .shokunin__inner > * {
  animation: shokunin-rise var(--sc-motion-entrance-duration) var(--sc-motion-entrance-easing) both;
  animation-delay: calc(var(--sc-motion-reveal-duration) + var(--i, 0) * var(--sc-board-roll-stagger) * 5);
}

@keyframes shokunin-rise {
  from { opacity: 0; transform: translateY(var(--sc-p-space-16)); }
  to { opacity: 1; transform: none; }
}

/* Close: a text control, five states. */
.shokunin__close {
  position: absolute;
  top: var(--sc-p-space-24);
  right: clamp(var(--sc-p-space-16), 4vw, var(--sc-p-space-48));
  z-index: 2;
  min-height: var(--sc-p-space-48);
  padding: 0 var(--sc-p-space-8);
  border: 0;
  background: none;
  font-family: var(--sc-p-font-family-mono);
  font-size: var(--sc-p-font-size-13);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sc-color-text-secondary);
  cursor: pointer;
  transition: color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.shokunin__close:hover { color: var(--sc-color-text-primary); }
.shokunin__close:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
  border-radius: var(--sc-radius-control);
}
.shokunin__close:active { transform: scale(var(--sc-motion-press-scale)); }
.shokunin__close:disabled { color: var(--sc-color-text-disabled); }

/* The footer's way in: a single 職, quiet until found. */
.footer__egg {
  display: inline-grid;
  place-items: center;
  min-width: var(--sc-p-space-48);
  min-height: var(--sc-p-space-48);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-14);
  color: var(--sc-color-text-secondary);
  cursor: pointer;
  transition: color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}
.footer__egg:hover { color: var(--sc-color-brand-accent-ink); }
.footer__egg:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
  border-radius: var(--sc-radius-control);
}
.footer__egg:active { transform: scale(var(--sc-motion-press-scale)); }
.footer__egg:disabled { color: var(--sc-color-text-disabled); cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .shokunin { transition: none; }
  .shokunin[open] .shokunin__inner > * { animation: none; }
  .shokunin__close, .footer__egg { transition: none; }
  .shokunin__close:active, .footer__egg:active { transform: none; }
}