/* ── Fonts ──────────────────────────────────────────────────────── */
@font-face {
  font-family: 'MDHelvetica';
  src: url('../fonts/Helvetica.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MDVerdana';
  src: url('../fonts/Verdana.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'MDVerdana';
  src: url('../fonts/VerdanaBold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'FuturaStdBook';
  src: url('../fonts/FuturaStdBook.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body { background: #b8d8ee; }

/* ── Full-page sky background ───────────────────────────────────── */
#bg {
  position: fixed;
  inset: 0;
  background: url('../images/Sky-BG.jpg') center top / cover no-repeat;
  z-index: 0;
  opacity: 0;   /* faded in by JS */
}

/* ── Page container ─────────────────────────────────────────────── */
#page {
  position: relative;
  z-index: 1;
  width: 960px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 20px;
}

/* ── FLV logo placeholder (top-left) ───────────────────────────── */
#logo {
  position: absolute;
  top: 15px;
  left: calc(50% - 445px + 20px); /* mirrors mainLogo.x=20 in container */
  width: 220px;
  height: 80px;
  opacity: 0;   /* faded in by JS once video loads, if ever */
}
#logo-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Building wrapper ───────────────────────────────────────────── */
#building-wrapper {
  position: relative;
  width: 890px;
  height: 638px;
  margin: 0 auto;
  overflow: hidden; /* prevents 3D wall content from escaping the building image bounds */
  opacity: 0;   /* faded in by JS */
}

#building-img {
  display: block;
  width: 890px;
  height: 638px;
  position: relative;
  z-index: 1;
}

/* MASSIVE / DYNAMIC chrome text overlays — already perspective-rendered in the source PNGs.
   z-index 4 keeps them ABOVE the scrolling labels, so text passes behind the chrome.

   EXACT placement derived from the original FLA (source of truth), NOT eyeballed:
   these two bitmaps live in the MDMainText symbol (Symbol 19.xml), placed at native
   scale (BitmapFill matrix a≈d≈20 ⇒ 1:1, no scaling). MDMainText itself is placed by
   Main.as at mainContainer (125, 51); the building (mainBldg) is at mainContainer (0,0),
   so the building-wrapper's top-left IS building-space (0,0) and these coords map directly.
     MASSIVE (bitmap17, 304×158): local (0, 2)   → building (125, 53)
     DYNAMIC (bitmap16, 360×154): local (346, 0) → building (471, 51) */
#massive-txt {
  position: absolute;
  width: 304px;
  height: auto;
  left: 125px;
  top: 53px;
  z-index: 4;
  pointer-events: none;
}

#dynamic-txt {
  position: absolute;
  width: 360px;
  height: auto;
  left: 471px;
  top: 51px;
  z-index: 4;
  pointer-events: none;
}

/* ── 3D scene container ─────────────────────────────────────────── */
/* Sits above the building image (z1) but below the chrome text (z4). */
#scene-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/*
 * Each wall is a zero-size anchor at the building's top-left (0,0). Its
 * `transform` (a five3D homography expressed as matrix3d, set in main.js)
 * maps wall-local coordinates directly to building screen coordinates — the
 * scene origin (445,549), viewDistance 1000, container z=168, and the
 * rotationX/Y are all baked into the matrix. No CSS `perspective` is used;
 * the matrix carries the perspective divide itself.
 *
 * Wall-local coordinate ranges (mirroring the five3D drawRect + masks):
 *   right wall: x ∈ [0, 890]   (ridge at x=0, extends right)
 *   left  wall: x ∈ [-900, 0]  (ridge at x=0, extends left)
 * Rows are positioned at their five3D y (negative, e.g. biological y=-460).
 */
.wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* ── Menu row (one per item per wall) ───────────────────────────── */
/*
 * Each row is the five3D wall MASK: an overflow-hidden box in wall-local space.
 * Right rows: left:0   width:890  → reveals wall-local x ∈ [0, 890].
 * Left  rows: left:-900 width:900 → reveals wall-local x ∈ [-900, 0].
 * The row clips its scrolling text in flat wall-local 2D BEFORE the wall's
 * matrix3d projects it, so clipping is reliable and the ridge (x=0) and the
 * outer cube edges land exactly where five3D put them.
 */
.menu-row {
  position: absolute;
  height: 100px;       /* matches five3D mask height (drawRect ...,100) */
  overflow: hidden;
  pointer-events: none;
}

/* Outer layer: scroll transform (GSAP translateX) + horizontal motion blur
   (filter url(#mblur), toggled by JS). Opacity is the fade-in / faux alpha. */
.menu-row-text {
  position: absolute;
  top: 0;
  left: 0;   /* GSAP translateX scrolls from here; left edge = row-local x=0 */
  white-space: nowrap;
}

/* Inner layer: the text itself, its colour and the white halo glow.
   Base filter kept in sync with BASE_GLOW in main.js (which drives it once created). */
.menu-row-glow {
  display: inline-block;
  font-family: 'Helvetica Neue', 'MDHelvetica', Helvetica, Arial, sans-serif;
  font-size: 60px;
  line-height: 60px;
  white-space: nowrap;
  user-select: none;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.55)) drop-shadow(0 0 11px rgba(255,255,255,0.35));
}

/* Clickable items: normal weight */
.menu-row-glow.enabled {
  pointer-events: auto;
  cursor: pointer;
}

/* Decorative items: italic, slightly smaller (alpha set to 0.5 in JS) */
.menu-row-glow.faux {
  font-style: italic;
  font-size: 45px;
  line-height: 45px;
  pointer-events: none;
}

/* Hover glow is driven by glow() in main.js (HOVER_GLOW), not CSS. */

/* ── Ticker bar ─────────────────────────────────────────────────── */
#ticker-bar {
  width: 890px;
  height: 20px;
  margin: 17px auto 0;   /* 17px gap after 638px building to reach y=655 */
  overflow: hidden;
  background: rgba(180,210,230,0.25);
  opacity: 0;            /* faded in by JS */
}

#ticker-inner {
  position: relative;
  height: 100%;
  white-space: nowrap;
}

.ticker-track {
  display: inline-block;
  position: relative;
  top: 3px;
  font-family: 'MDVerdana', Verdana, sans-serif;
  font-size: 10px;
  color: #1a2a3a;
}

/* ── Footer navigation ──────────────────────────────────────────── */
/* Exact reconstruction of footerMenu (md_main.fla Symbol 41): a 1071×21px
   strip filled at 1:1 with bitmap20.jpg (the light-blue glassy gradient), with
   8 absolutely-positioned text links and 7 vertical divider rules. The strip is
   1071px wide — wider than the 890px building — and is centred on the building
   (= page centre), exactly as Main.as places mainFooter (centred, overflowing
   the building, clipped by the stage). Here body{overflow-x:hidden} clips it. */
#footer-nav {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 1071px;
  height: 21px;
  margin-top: 0;         /* flush below the ticker bar, as in the original */
  background: url('../images/footer_menu_bg.jpg') center / 1071px 21px no-repeat;
  opacity: 0;            /* faded in by JS */
}

/* Text links — Futura Std Book 13px, tinted #426473 at rest (the footerMenu
   colorTransform), #5192d1 on hover (overColor). line-height:21px vertically
   centres the 13px text in the strip, matching the source's ~4px glyph top. */
#footer-nav a {
  position: absolute;
  top: 0;
  height: 21px;
  line-height: 21px;
  font-family: 'FuturaStdBook', 'Futura Std', Futura, sans-serif;
  font-size: 13px;
  letter-spacing: -0.45px;
  /* The extracted FuturaStdBook.ttf has a degenerate space glyph (advance 100/1024
     em ≈ 1.27px) — a JPEXS subset artifact — so word gaps nearly vanish ("SiteMap").
     The original render (frames/2.png) shows ~5px word gaps; +3.5px word-spacing
     restores that exactly (verified against the font metrics + ground-truth render). */
  word-spacing: 3.5px;
  white-space: nowrap;
  color: #426473;
  text-decoration: none;
}
#footer-nav a:hover { color: #5192d1; }

/* Divider rules — Symbol 40: a 1px-wide, 13px-tall vertical line in #426473,
   placed at y≈3 (instance ty 2.95) between each pair of links. */
#footer-nav .footer-div {
  position: absolute;
  top: 3px;
  width: 1px;
  height: 13px;
  background: #426473;
  pointer-events: none;
}

/* ── Copyright ──────────────────────────────────────────────────── */
#copyright {
  width: 960px;
  margin: 0 auto;
  text-align: right;
  font-family: 'MDVerdana', Verdana, sans-serif;
  font-size: 9px;
  color: #3a5f6e;
  padding: 3px 0;
  opacity: 0;            /* faded in by JS */
}