/* ============================================================
   GEN-7 housing (big screens). assets/js/gen7/housing.js adds
   html.gen7 when the monitor fits the viewport and builds the
   .g7 layers around the site; everything here is scoped to that.
   Stack: .g7-bg 0 · .g7-screen 1 · .crt-root (site on the glass) 2 · .g7-still /
   .g7-gl 3 · .g7-face 4 · .g7-grain 5.
   ============================================================ */

html.gen7, html.gen7 body { height: 100%; min-height: 0; overflow: hidden; background: #050605; }
/* 1vw of the site box, not of the window: the site's fluid type reads calc(n * var(--vw, 1vw)) */
html.gen7 { --vw: 12.8px; }

/* the site: a 1280x800 box placed on the glass by a matrix3d every frame */
html.gen7 .crt-root {
  position: fixed; left: 0; top: 0;
  width: 1280px; height: 800px; min-height: 0;
  overflow: hidden; transform-origin: 0 0; z-index: 2;
  background: var(--bg);
}
html.gen7 .site-scroll {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
html.gen7 .site-scroll::-webkit-scrollbar { display: none; }
/* tube depth: dark falloff toward the glass edge */
html.gen7 .crt-root::after {
  content: ""; position: absolute; inset: 0; z-index: 9900; pointer-events: none;
  background: radial-gradient(ellipse 80% 78% at 50% 50%, transparent 64%, rgba(0, 0, 0, 0.34) 100%);
  box-shadow: inset 0 0 36px 6px rgba(0, 0, 0, 0.42);
}
/* the housing's hardware replaces the site's own chrome */
html.gen7 .status-bar, html.gen7 .hud, html.gen7 .tube-bend,
html.gen7 .crt-curvature, html.gen7 .crt-vignette, html.gen7 .site-nav-btns { display: none !important; }
html.gen7 .container { padding-top: 26px !important; padding-bottom: 48px !important; }
/* Compositor diet. The site box is placed in 3D and redrawn every frame, so every blend mode inside it costs an
   offscreen pass at full resolution per frame, and every endless animation keeps those frames coming. The glass
   brings its own glow and flicker; scanlines are plain black lines, which look the same without multiply. */
html.gen7 .crt-flicker { display: none; }
html.gen7 .crt-scanlines, html.gen7 .crt-glow { mix-blend-mode: normal; }
html.gen7 .wobble { animation: none; }

/* RESET power cycle (the collapse itself is part of the JS transform) */
html.gen7 .crt-root.g7-crt-off { animation: g7crtoff 1.5s cubic-bezier(.2, .7, .3, 1) 1; }
/* power-on alone (page load, `reboot`): the same cycle started where the tube is dark (36%) */
/* page load: the tube is dark (the site hidden, the dark .g7-screen behind it shows) until the boot powers it on */
html.gen7.g7-dark .crt-root { opacity: 0; }
/* --g7-tube stretches it (housing.js: 2 on page load) */
html.gen7 .crt-root.g7-crt-on { animation: g7crtoff calc(1.5s * var(--g7-tube, 1)) cubic-bezier(.2, .7, .3, 1) calc(-0.54s * var(--g7-tube, 1)) 1; }
@keyframes g7crtoff {
  0% { filter: brightness(1); }
  16% { filter: brightness(5); }
  28% { filter: brightness(8); }
  36% { opacity: 0; }
  58% { opacity: 1; filter: brightness(5); }
  76% { filter: brightness(1.7); }
  100% { filter: brightness(1); }
}

/* ---------- housing layers ---------- */
.g7 { display: none; }
html.gen7 .g7 { display: block; }
.g7-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: #050605 center / cover no-repeat;
}
.g7-screen {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 1280px; height: 800px; transform-origin: 0 0; background: #020302;
}
.g7-still, .g7-gl {
  position: fixed; left: 0; top: 0; z-index: 3;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.g7-still { width: 2560px; height: 1440px; max-width: none; transform-origin: 0 0; }
/* Film grain: plain alpha specks, no blend mode (see grainUrl), a new grain frame 24 times a second. Only the layer's
   transform changes: it jumps to a random offset inside one tile (the layer overhangs the window by half a tile), so
   each grain frame is a compositor move, never a repaint or an offscreen pass. */
.g7-grain {
  position: fixed; inset: -128px; z-index: 5; pointer-events: none; background-size: 256px 256px;
  will-change: transform; animation: g7grain 0.5s steps(1) infinite;
}
.g7-grain.g7-grain-still { animation: none; }
@keyframes g7grain {
  0% { transform: translate(74px, -104px); }
  8.33% { transform: translate(-91px, -80px); }
  16.67% { transform: translate(59px, -99px); }
  25% { transform: translate(-84px, 94px); }
  33.33% { transform: translate(86px, -93px); }
  41.67% { transform: translate(-65px, -14px); }
  50% { transform: translate(-97px, 75px); }
  58.33% { transform: translate(-105px, -60px); }
  66.67% { transform: translate(20px, 86px); }
  75% { transform: translate(-55px, -68px); }
  83.33% { transform: translate(62px, -79px); }
  91.67% { transform: translate(-96px, -98px); }
}

/* printed face of the bezel, authored at 34.5 px/cm (1401x1109) and mapped onto the face plane. No blend modes in
   here: the face is its own isolated group over a transparent backdrop, so multiply/screen only cost passes. */
.g7-face {
  position: fixed; left: 0; top: 0; z-index: 4;
  width: 1401px; height: 1109px; transform-origin: 0 0; pointer-events: none;
  font-family: "Space Mono", monospace; font-size: 16px; line-height: normal; letter-spacing: normal;
  color: #3a3226; text-shadow: none;
}
.g7-face .g7-abs, .g7-row, .g7-status, .g7-vfd, .g7-emb, .g7-btn { position: absolute; }
.g7-row { display: flex; align-items: center; gap: 24px; }
.g7-status { display: flex; align-items: center; gap: 9px; }
.g7-ink {
  font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #3a3226; opacity: 0.8; white-space: nowrap;
}
.g7-plate {
  font-weight: 700; font-size: 11px; letter-spacing: 0.2em; color: #a2690a;
  border: 1.5px solid #c98a12; padding: 3px 9px; white-space: nowrap;
}
.g7-led {
  display: block; width: 10px; height: 10px; border-radius: 50%; background: #3b3a33;
  box-shadow: 0 0 0 2px rgba(40, 34, 26, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.4);
  transition: background 0.12s, box-shadow 0.12s;
}
.g7-led.g7-on { background: #9dffb0; box-shadow: 0 0 0 2px rgba(40, 34, 26, 0.45), 0 0 8px #7dff95, 0 0 20px rgba(125, 255, 149, 0.55); }
.g7-led-s { width: 7px; height: 7px; }
.g7-emb { width: 300px; height: 46px; }
.g7-emb span {
  position: absolute; left: 0; top: 0;
  font-family: "Michroma", sans-serif; font-size: 34px; letter-spacing: 0.32em; white-space: nowrap;
}
.g7-emb-hi { color: rgba(255, 255, 255, 0.55); transform: translate(-1px, -1px); }
.g7-emb-sh { color: rgba(40, 30, 18, 0.35); transform: translate(1px, 2px); }
.g7-vfd {
  box-sizing: border-box; border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; padding: 0 14px;
  background: linear-gradient(180deg, #241f14, #1b170e);   /* the WebGL recess glass's black level (gen7.js vfdMat) */
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.g7-vfd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(172deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%);
}
/* Once the WebGL bezel draws the print (housing.js paintPrint), the DOM face keeps only the VFD text, now over the
   recessed windows' glass, and the invisible buttons. The hidden, untransformed copy is the print's layout source. */
.g7-printed .g7-face > :not(.g7-vfd):not(.g7-btn) { visibility: hidden; }
.g7-printed .g7-vfd { background: none; box-shadow: none; }
.g7-printed .g7-vfd::after { display: none; }
.g7-face.g7-print-src { left: -30000px; visibility: hidden; transform: none; }
.g7-vfd-g {
  font-weight: 700; font-size: 15px; letter-spacing: 0.3em; color: #9dffb0; white-space: nowrap;
  text-shadow: 0 0 6px rgba(125, 255, 149, 0.85), 0 0 14px rgba(125, 255, 149, 0.45);
}
.g7-vfd-a {
  font-weight: 700; font-size: 28px; letter-spacing: 0.12em; color: #ffc24a; white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.85), 0 0 16px rgba(255, 176, 0, 0.4);
}

/* hardware buttons: invisible hit areas over the rendered toggle and RESET, amber ring + tooltip on hover/focus */
.g7-btn {
  padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 6px; outline: none; pointer-events: auto; transition: box-shadow 0.18s;
}
.g7-btn:hover, .g7-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 194, 74, 0.95), 0 0 24px 5px rgba(255, 176, 0, 0.45);
  animation: g7pulse 1.3s ease-in-out infinite;
}
.g7-btn:active { box-shadow: 0 0 0 2px #ffd27a, inset 0 0 16px rgba(0, 0, 0, 0.55); animation: none; }
@keyframes g7pulse { 50% { box-shadow: 0 0 0 2px rgba(255, 194, 74, 0.55), 0 0 12px 2px rgba(255, 176, 0, 0.22); } }
.g7-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(4px);
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 10px; letter-spacing: 0.24em;
  color: #ffcf6a; background: rgba(18, 14, 9, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 176, 0, 0.5), 0 0 14px rgba(255, 176, 0, 0.25);
  padding: 5px 9px; border-radius: 2px; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s, transform 0.15s; pointer-events: none;
}
.g7-btn:hover .g7-tip, .g7-btn:focus-visible .g7-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .g7-btn:hover, .g7-btn:focus-visible, .g7-grain { animation: none; }
}