/* hq-scene.css — single-scene HQ layout (data-office-layout="hq"). */

/* When the HQ flag is active, hide the legacy/stacked CSS-grid building. */
[data-office-layout="hq"] #roomsRow {
  display: none !important;
}

#hqScene {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: #0a0c14;
  image-rendering: pixelated;
  display: none;          /* shown by app.js when OFFICE_LAYOUT === 'hq' */
}

[data-office-layout="hq"] #hqScene {
  display: block;
}

/* Room click zones — invisible by default, neon outline on hover. */
.hq-room-zone {
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hq-room-zone:hover {
  background: color-mix(in srgb, var(--accent, #00ffff) 8%, transparent);
  border-color: var(--accent, #00ffff);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent, #00ffff) 25%, transparent);
}

.hq-hub-zone {
  cursor: default !important;
}

.hq-hub-zone:hover {
  background: rgba(0, 220, 255, 0.04);
  border-color: rgba(0, 220, 255, 0.3);
}

/* Dedicated click zones inside hub (reception desk, orchestrator stage).
   Sit above .hq-hub-zone (z-index:5 vs 1) so they catch the click first. */
.hq-clickable {
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hq-clickable:hover {
  background: color-mix(in srgb, var(--accent, #ffd93d) 12%, transparent);
  border-color: var(--accent, #ffd93d);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent, #ffd93d) 35%, transparent);
}

/* Agent wrapper — wrapper handles position transitions; inner sprite
   handles facing flip via scaleX (kept separate so child thought bubble
   doesn't get mirrored). */
.hq-agent {
  transform-origin: center center;
}
.hq-agent-sprite {
  transform-origin: center center;
}

/* Walk-cycle on inner sprite. Inline bg-image is the 6-frame walk strip
   (96×32 legacy or 192×64 premade); stretch to 600% width and step. */
.hq-agent-sprite.walking {
  background-size: 600% 100% !important;
  animation: walkCycle 1s steps(6) infinite;
}

/* Thought bubble above the agent — work-related text, fades in/out.
   Child of .hq-agent so it follows the sprite when wandering. NOT
   affected by sprite's scaleX flip (different DOM branch). */
.hq-agent-thought {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  background: rgba(10, 12, 22, 0.92);
  color: #c0c0c0;
  border: 1px solid #00ffff;
  padding: 2px 6px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
}
.hq-agent-thought.visible {
  opacity: 1;
}
/* Pointing arrow at bottom of bubble. */
.hq-agent-thought::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #00ffff;
  margin-top: -1px;
}

/* Doorway accent pulse — gentle so it doesn't compete with HUD. */
.hq-doorway {
  animation: hq-doorway-pulse 2.4s ease-in-out infinite;
}

@keyframes hq-doorway-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Animated double-door panels — slide outward on hover. The doorway gap
   in hq_bg.png is 1 tile wide × 3 tile high; the two panels split that
   horizontally. Each panel is a flat pixel-art door done with gradient
   layers (cheaper than a PNG and re-tints per accent via --accent). */
.hq-door {
  display: flex;
  overflow: hidden;
  user-select: none;
  transition: filter 0.2s ease;
  image-rendering: pixelated;
}

.hq-door .hq-door-panel {
  flex: 1;
  background:
    /* horizontal divider — gives the panel a "two-panel" look */
    linear-gradient(to bottom,
      transparent 0%, transparent 28%,
      color-mix(in srgb, var(--accent, #00ffff) 30%, #060912) 28%,
      color-mix(in srgb, var(--accent, #00ffff) 30%, #060912) 32%,
      transparent 32%, transparent 60%,
      color-mix(in srgb, var(--accent, #00ffff) 30%, #060912) 60%,
      color-mix(in srgb, var(--accent, #00ffff) 30%, #060912) 64%,
      transparent 64%, transparent 100%),
    /* base door fill — slightly tinted by accent */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--accent, #00ffff) 12%, #1c2330) 0%,
      color-mix(in srgb, var(--accent, #00ffff) 18%, #0e1422) 100%);
  border: 1px solid color-mix(in srgb, var(--accent, #00ffff) 60%, #000);
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--accent, #00ffff) 40%, transparent);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.25s ease;
  will-change: transform;
}

.hq-door .hq-door-left  { transform: translateX(0%);   }
.hq-door .hq-door-right { transform: translateX(0%);   }

.hq-door:hover .hq-door-left  { transform: translateX(-95%); opacity: 0.55; }
.hq-door:hover .hq-door-right { transform: translateX( 95%); opacity: 0.55; }

.hq-door:hover {
  filter: drop-shadow(0 0 6px var(--accent, #00ffff));
}

/* Main entrance double-door (uses existing lobby_door_*.png pattern from
   the legacy lobby — same beige + gold-handle look reads as "the building's
   front door" rather than a side passage). */
.hq-main-door {
  background-image: url(/assets/furniture/lobby_door_closed.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transition: filter 0.2s ease;
}

.hq-main-door:hover {
  background-image: url(/assets/furniture/lobby_door_open.png);
  filter: drop-shadow(0 0 8px #ffa03c);
}

/* Reception desk + NPC in the entrance pad. Reuses the existing assets
   built by scripts/build_lobby_reception.py — Amelia sprite (sit3 frame 5)
   peeks above the desk top. */
.hq-reception-desk {
  background-image: url(/assets/furniture/reception_desk.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.hq-reception-npc {
  background-image: url(/assets/furniture/reception_amelia.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: hq-reception-bob 2.4s ease-in-out infinite;
  transition: filter 0.2s ease;
}

.hq-reception-npc:hover {
  filter: drop-shadow(0 0 6px #ffa03c);
}

@keyframes hq-reception-bob {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-1px); }
}

/* Neon "ENTER" label above each doorway. */
.hq-door-sign {
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 1px;
  text-align: center;
  background: rgba(8, 10, 18, 0.85);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 2px 0;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 0 8px currentColor inset, 0 0 4px currentColor;
  text-shadow: 0 0 4px currentColor;
  animation: hq-sign-pulse 3s ease-in-out infinite;
}

@keyframes hq-sign-pulse {
  0%, 100% { box-shadow: 0 0 4px currentColor inset, 0 0 2px currentColor; }
  50%      { box-shadow: 0 0 10px currentColor inset, 0 0 6px currentColor; }
}

/* ============================================================
   HOLOGRAM — animated central pedestal projection
   ============================================================ */
.hq-hologram {
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(0, 220, 255, 0.7));
}

.hq-holo-beam {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 30%;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to top,
    rgba(0, 220, 255, 0.6) 0%,
    rgba(0, 220, 255, 0.2) 40%,
    rgba(0, 220, 255, 0) 100%);
  filter: blur(2px);
  animation: hq-holo-beam 2.4s ease-in-out infinite;
}

@keyframes hq-holo-beam {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scaleY(1.05); }
}

.hq-holo-cube {
  position: absolute;
  inset: 22%;
  transform-style: preserve-3d;
  animation: hq-holo-spin 5s linear infinite;
}

.hq-holo-face {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(120, 240, 255, 0.95);
  background: rgba(0, 60, 120, 0.18);
  box-shadow:
    inset 0 0 12px rgba(0, 220, 255, 0.4),
    0 0 6px rgba(0, 220, 255, 0.6);
}

.hq-holo-face-1 { transform: rotate(0deg); }
.hq-holo-face-2 { transform: rotate(45deg); border-color: rgba(180, 90, 255, 0.85); }
.hq-holo-face-3 { transform: rotate(22.5deg) scale(0.55); border-color: rgba(255, 200, 80, 0.8); }

@keyframes hq-holo-spin {
  0%   { transform: rotateY(0deg) rotateX(8deg); }
  100% { transform: rotateY(360deg) rotateX(8deg); }
}

.hq-holo-scanline {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 2px;
  top: 0;
  background: linear-gradient(to right,
    transparent, rgba(120, 240, 255, 0.9), transparent);
  box-shadow: 0 0 6px rgba(120, 240, 255, 0.6);
  animation: hq-holo-scan 2s linear infinite;
}

@keyframes hq-holo-scan {
  0%   { top: 0;    opacity: 1; }
  90%  { top: 95%;  opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ============================================================
   HUB WALL POSTERS — reuse lobby_poster.png, gentle hover lift
   ============================================================ */
.hq-wall-poster {
  background-image: url(/assets/furniture/lobby_poster.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(0, 220, 255, 0.3));
  animation: hq-poster-flicker 6s ease-in-out infinite;
}

@keyframes hq-poster-flicker {
  0%, 92%, 100% { filter: drop-shadow(0 0 4px rgba(0, 220, 255, 0.3)); }
  94%           { filter: drop-shadow(0 0 8px rgba(0, 220, 255, 0.6)); }
}

/* ============================================================
   STAIRCASES — silver upstairs sprite (in hq_bg.png) + UI arrows
   ============================================================ */
.hq-stairs {
  pointer-events: none;
}

.hq-stairs-hit {
  pointer-events: auto;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hq-stairs:hover .hq-stairs-hit {
  background: rgba(0, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.3);
}

.hq-stairs-arrows,
.hqf2-stairs-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(8, 10, 18, 0.85);
  border: 1px solid #00ffff;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.45),
              inset 0 0 4px rgba(0, 255, 255, 0.35);
  pointer-events: none;
  animation: hq-stairs-pulse 2.6s ease-in-out infinite;
}

.hq-stairs-arrow,
.hqf2-stairs-arrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1;
  color: #00ffff;
  text-shadow: 0 0 4px #00ffff;
}

.hq-stairs:hover .hq-stairs-arrows,
.hqf2-stairs-down:hover .hqf2-stairs-arrows {
  background: rgba(0, 255, 255, 0.12);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7),
              inset 0 0 6px rgba(0, 255, 255, 0.5);
}

@keyframes hq-stairs-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 255, 255, 0.35),
                          inset 0 0 3px rgba(0, 255, 255, 0.25); }
  50%      { box-shadow: 0 0 9px rgba(0, 255, 255, 0.65),
                          inset 0 0 6px rgba(0, 255, 255, 0.45); }
}

/* Pan container fitting — reuse same wrapper the rest of the app uses. */
[data-office-layout="hq"] .pan-container > #hqScene {
  position: absolute;
  transform-origin: 0 0;
  transition: transform 0.08s ease-out;
  will-change: transform;
  user-select: none;
}

/* ── Upper floor (etap 2026-05-26) ───────────────────────────────────── */
/* Sibling of #hqScene inside .pan-container — same positioning model so
   the crossfade overlay swap stays anchored. Hidden by default; toggled
   via .show. Opacity transition runs alongside the pan transform without
   conflict (different properties).                                      */
#hqUpperFloor {
  display: none;            /* hidden until OFFICE_LAYOUT === 'hq' enters office */
  background: #0a0c14;
  image-rendering: pixelated;
}
[data-office-layout="hq"] #hqUpperFloor {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transition: transform 0.08s ease-out, opacity 320ms ease-out;
  will-change: transform, opacity;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  z-index: 4;               /* sits above #hqScene during crossfade */
}
[data-office-layout="hq"] #hqUpperFloor.show {
  opacity: 1;
  pointer-events: auto;
}
/* When hidden (no .show), block ALL descendant clicks too — child elements
   (.hqf2-room-click, .hqf2-stairs-down) set pointer-events:auto inline, which
   would otherwise beat the parent's pointer-events:none and eat clicks meant
   for the ground floor below. */
[data-office-layout="hq"] #hqUpperFloor:not(.show),
[data-office-layout="hq"] #hqUpperFloor:not(.show) * {
  pointer-events: none !important;
}

/* Sister hide-modifier on #hqScene — used so it doesn't keep eating clicks
   while the upper floor is visible. Opacity drops in lockstep with floor2
   opacity rise → no white flash. */
[data-office-layout="hq"] #hqScene.dimmed {
  opacity: 0;
  pointer-events: none;
  transition: transform 0.08s ease-out, opacity 320ms ease-out;
}

/* ── Upper-floor room interiors (step 4) ─────────────────────────────── */
/* Name label that sits above each doorway. Reads from the corridor side. */
.hqf2-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #00ffff;
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 4px rgba(0,255,255,0.6);
  line-height: 1.6;
  padding-top: 2px;
  white-space: nowrap;
  overflow: visible;
}

/* Status dot — idle (green) / busy (pulsing orange). */
.hqf2-status {
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor, 0 0 1px #000;
}
.hqf2-status-idle { background: #2ecc71; color: #2ecc71; }
.hqf2-status-busy {
  background: #ff9f43;
  color: #ff9f43;
  animation: hqf2-busy-pulse 1.2s ease-in-out infinite;
}
@keyframes hqf2-busy-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.78); }
}

/* Room click target — invisible by default, neon outline + tint on hover. */
.hqf2-room-click {
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hqf2-room-click:hover {
  background: rgba(0, 255, 255, 0.08);
  border-color: #00ffff;
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.25);
}

/* Step-2 placeholder content — visual marker so the crossfade is debuggable
   before the actual corridor/room renderer lands in step 3. Removed once
   real layers are painted. */
.hq-floor2-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ffff;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(0,255,255,0.6);
  background:
    repeating-linear-gradient(45deg,
      rgba(0,255,255,0.04) 0 8px,
      transparent 8px 16px),
    #0a0c14;
}