/* ============================================================
   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: 10.24px; }

/* the site: a 1024x640 box placed on the glass by a matrix3d every frame. 1024 px is the site's tablet width, so its
   type comes out 1.25x larger on the glass than at desktop width (1280) */
html.gen7 .crt-root {
  position: fixed; left: 0; top: 0;
  width: 1024px; height: 640px; min-height: 0;
  overflow: hidden; transform-origin: 0 0; z-index: 2;
  background: #000;   /* the unlit tube around the picture (.site-scroll) */
}
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; }
/* The convex tube. The lit picture is painted on the scroll box's own background (it stays put while the content
   scrolls): a touch above the unlit tube's black, with a soft falloff into a black margin 13 px wide at the sides and
   10 px at the top and bottom. The content runs on over that margin to the glass edge, so scrolling never cuts it at
   the picture's edge; .container's padding keeps it inside the picture at rest. housing.js points --g7-warp at its
   barrel displacement filter once the filter's maps have loaded, which bends the content and the picture's edge
   together. */
html.gen7 .site-scroll {
  background: #0b140c;
  box-shadow: inset 13px 0 11px -2px #000, inset -13px 0 11px -2px #000, inset 0 10px 11px -2px #000, inset 0 -10px 11px -2px #000;
  filter: var(--g7-warp, 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 29px 5px rgba(0, 0, 0, 0.42);
}
/* the housing's hardware replaces the site's own chrome: the bezel prints GATTACA GEN-7 / TERM 0299 above the glass and
   its toggle and RESET take over the nav buttons, so the site's whole top nav goes */
html.gen7 .status-bar, html.gen7 .hud, html.gen7 .tube-bend,
html.gen7 .crt-curvature, html.gen7 .crt-vignette, html.gen7 .site-nav { display: none !important; }
/* no nav above the content; the site's own padding plus the picture's black margin (.site-scroll) */
html.gen7 .container { padding: 42px 42px 48px !important; }
/* the tablet layout: crt.css switches it on by window width (max-width: 1024px), which the box's width never reaches
   here, so the rule is repeated for the box */
html.gen7 .hero-grid { grid-template-columns: 1fr !important; }
/* a post's lead image keeps the share of the picture it has at desktop size, so the title still shows at rest */
html.gen7 .post-figure { max-height: 416px !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: 1024px; height: 640px; 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, #2d2618, #231e11);   /* 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; }
}