/* =============================================================
   BUNCHIN banner — scoped styles for the "now building" window
   on the you-gen.com portfolio.

   This is BUNCHIN's OWN visual language (flat black + active-yellow
   + pixel face), deliberately preserved. Everything is namespaced
   .bn-* and the fonts are self-hosted under assets/bunchin/fonts so
   they never collide with the paper-site type system.
   ============================================================= */

@font-face {
  font-family: "BN GenEi M Gothic 2";
  src: url("assets/bunchin/fonts/GenEiMGothic2-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "BN GenEi M Gothic 2";
  src: url("assets/bunchin/fonts/GenEiMGothic2-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "BN DenkiChip";
  src: url("assets/bunchin/fonts/DenkiChip.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "BN JetBrains Mono";
  src: url("assets/bunchin/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "BN JetBrains Mono";
  src: url("assets/bunchin/fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

.yk-building {
  --bn-black: #050505;
  --bn-panel: #0A0A0A;
  --bn-ink: #F7F3EA;
  --bn-mut: #9C9C9C;
  --bn-mut3: #5A5A5A;
  --bn-yellow: #FFE45C;
  --bn-accent: #FF8A3D;
  --bn-mono: "BN JetBrains Mono", ui-monospace, monospace;
  --bn-pixel: "BN DenkiChip", "BN JetBrains Mono", monospace;
  --bn-disp: "BN GenEi M Gothic 2", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ---- The framed window (the clickable banner) ---- */
.bn-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 56px;
  overflow: hidden;
  text-decoration: none;
  color: var(--bn-ink);
  background: var(--bn-black);
  /* "額装" — paper-site hairline + a hard bottom edge like the device shell */
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px -32px rgba(5, 5, 5, 0.55);
  padding: 56px 64px;
  cursor: pointer;
  transition: box-shadow 320ms var(--ease-quiet);
}
.bn-banner:hover {
  box-shadow: 0 30px 70px -30px rgba(5, 5, 5, 0.7);
}
.bn-banner:focus-visible {
  outline: 2px solid var(--bn-yellow);
  outline-offset: 3px;
}

/* faint terminal grid backdrop */
.bn-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(#0d0d0d 1px, transparent 1px),
    linear-gradient(90deg, #0d0d0d 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
}

/* ---- Device panel (the LCD enclosure) ---- */
.bn-panel {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 300px;
  background: var(--bn-panel);
  border: 1.5px solid #1F1F1F;
  border-bottom: 3px solid #000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 20px;
}
.bn-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--bn-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--bn-mut3);
}
.bn-chrome-r {
  display: flex;
  align-items: center;
  gap: 9px;
}
.bn-blip {
  width: 9px;
  height: 9px;
  background: var(--bn-yellow);
  animation: bn-blip 1.06s steps(1) infinite;
}
@keyframes bn-blip {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.bn-lcd {
  position: relative;
  aspect-ratio: 5 / 3;
  background: #000;
  border: 1px solid #161616;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}
.bn-lcd::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
}

/* pixel eyes */
.bn-face { display: flex; }
.bn-eyes {
  display: flex;
  gap: 34px;
}
.bn-eye {
  display: grid;
  grid-template-columns: repeat(6, 9px);
  grid-auto-rows: 9px;
  gap: 3px;
  transition: transform 110ms steps(2, end);
  transform-origin: center;
}
.bn-face.bn-blink .bn-eye { transform: scaleY(0.14); }
.bn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bn-yellow);
}
.bn-dot.bn-off { background: transparent; }
.bn-dot.bn-acc { background: var(--bn-accent); }

.bn-sig {
  font-family: var(--bn-pixel);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--bn-yellow);
  line-height: 1;
}

/* ---- Copy block (right) ---- */
.bn-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.bn-kicker {
  font-family: var(--bn-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bn-mut);
}
.bn-wordmark {
  font-family: var(--bn-pixel);
  font-size: 30px;
  letter-spacing: 0.06em;
  color: var(--bn-ink);
  line-height: 1;
}
.bn-head {
  font-family: var(--bn-disp);
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--bn-ink);
}
.bn-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--bn-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--bn-yellow);
  color: #050505;
  border: 1.5px solid var(--bn-yellow);
  padding: 14px 22px;
  white-space: nowrap;
}
.bn-arw { transition: transform 0.15s var(--ease-quiet); }
.bn-banner:hover .bn-cta { box-shadow: inset 0 0 0 2px #050505; }
.bn-banner:hover .bn-arw { transform: translateX(3px); }

/* ---- Mincho caption below (back in the paper world) ---- */
.yk-building-caption {
  margin: 28px 0 0;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.95;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.yk-building-caption a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--sumi-300);
  padding-bottom: 1px;
  transition: color var(--dur-hover) var(--ease-quiet),
              border-color var(--dur-hover) var(--ease-quiet);
  white-space: nowrap;
}
.yk-building-caption a:hover {
  color: var(--seiji-deep);
  border-color: var(--seiji);
}
.bn-br-mobile { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bn-blip { animation: none; }
  .bn-face.bn-blink .bn-eye { transform: none; }
  .bn-arw { transition: none; }
}

/* ---- Responsive: stack device over copy on narrow screens ---- */
@media (max-width: 760px) {
  .bn-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 32px 28px 36px;
  }
  .bn-panel { width: 100%; max-width: 320px; }
  .bn-right { align-items: flex-start; }
  .bn-head { font-size: 26px; }
  .bn-cta { align-self: stretch; justify-content: center; }
  .bn-br-mobile { display: inline; }
}