/* BUILD16-VISUAL-SPLASH-001 / BUILD16-SPLASH-CALLOUT-001 -- the approved
   landscape artwork IS the homepage. Hovering or keyboard-focusing a
   doorway reveals a compact, translucent callout positioned beside that
   doorway, inside the artwork itself -- pure CSS adjacent-sibling
   :hover/:focus, no JavaScript at all for show/hide. Clicking/pressing
   Enter on the doorway navigates immediately via its own native href --
   the doorways are plain hyperlinks and nothing here ever intercepts
   that click. Callouts use pointer-events:none so they can never sit in
   front of the hyperlink they describe. PROVISIONAL PUBLIC-REVIEW ARTWORK
   (assets/images/threshold/splash-provisional.png) -- not final
   production art; see assets/images/threshold/README.md. */

/* ---- Minimal splash header -------------------------------------------
   Root / carries only the Genesis AiX identity and a quiet Feedback
   control -- no primary nav, no theme bar, no profile chip, no
   Historical Prototype button. The painting and its four doorways are
   the navigation; deeper pages keep the full site menu. */
.splash-header-minimal .header-row { grid-template-columns: auto 1fr; }
.splash-header-minimal .header-actions { justify-self: end; }

.splash-scene { position: relative; width: 100%; overflow: hidden; background: #0b0d10; line-height: 0; }
.splash-artwork { display: block; width: 100%; height: auto; }

.splash-hotspots { position: absolute; inset: 0; line-height: normal; }
.splash-door {
  position: absolute;
  display: block;
  border-radius: 14px;
  outline-offset: 4px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.splash-door:hover, .splash-door:focus-visible {
  background: radial-gradient(ellipse at center, rgba(255, 222, 150, .3), rgba(255, 222, 150, 0) 72%);
  box-shadow: 0 0 46px 12px rgba(255, 210, 120, .32) inset;
}
.splash-door:focus-visible { outline: 2px solid #ffd88a; }

/* Each destination's hotspot rectangle must never overlap another's --
   an earlier pass had .splash-door-ecosystem's box (top 3%-61%) covering
   the entire area under .splash-door-enterprise (39%-63%) and
   .splash-door-developers (39%-62%) too; since Ecosystem is last in DOM
   order it painted on top and silently captured hover/focus meant for the
   other two. Ecosystem's box is now confined to the citadel + upper path,
   ending well above where the two arches begin. tests/visual-splash.test.cjs
   asserts these four rectangles are pairwise non-overlapping. */
.splash-door-labs        { left: 7%;  top: 38%; width: 18%; height: 28%; }
.splash-door-enterprise  { left: 58%; top: 39%; width: 14%; height: 24%; }
.splash-door-developers  { left: 76%; top: 39%; width: 15%; height: 23%; }
.splash-door-ecosystem   { left: 56%; top: 3%;  width: 42%; height: 33%; border-radius: 6px; }

/* ---- Local, in-artwork callouts ---------------------------------------
   Each callout is the very next sibling of its doorway, so a single
   adjacent-sibling selector shows it exactly while that doorway is
   hovered/focused and hides it the instant that stops being true -- no
   JS, no race condition, no locked state. pointer-events:none keeps the
   callout from ever intercepting a click meant for the doorway beneath
   or beside it. */
.splash-callout {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(9, 11, 14, .92);
  border: 1px solid rgba(255, 210, 120, .35);
  color: #f2f0ea;
  font-size: .82rem;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.splash-callout strong { display: block; font-size: .92rem; margin-bottom: 4px; color: #fff; }
.splash-callout span { display: block; color: #c6ced4; }
.splash-callout .splash-callout-cta { color: #ffb238; font-weight: 700; margin-top: 5px; }

.splash-door-labs:hover + .splash-callout-labs,
.splash-door-labs:focus + .splash-callout-labs,
.splash-door-enterprise:hover + .splash-callout-enterprise,
.splash-door-enterprise:focus + .splash-callout-enterprise,
.splash-door-developers:hover + .splash-callout-developers,
.splash-door-developers:focus + .splash-callout-developers,
.splash-door-ecosystem:hover + .splash-callout-ecosystem,
.splash-door-ecosystem:focus + .splash-callout-ecosystem {
  opacity: 1;
  visibility: visible;
}

.splash-callout-labs       { left: 1%;  top: 42%; width: 27%; }
.splash-callout-enterprise { left: 38%; top: 42%; width: 27%; }
.splash-callout-developers { left: 71%; top: 42%; width: 27%; }
.splash-callout-ecosystem  { left: 29%; top: 5%;  width: 34%; }

.splash-mobile-nav { display: none; }

@media (max-width: 540px) {
  .splash-hotspots { display: none; }
  .splash-scene { max-height: 42vh; }
  .splash-artwork { height: 42vh; width: 100%; object-fit: cover; object-position: 40% 28%; }
  .splash-mobile-nav {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 16px 16px 18px; line-height: normal;
  }
  .splash-mobile-nav a {
    flex: 1 1 auto; min-height: 44px; padding: 11px 14px;
    border-radius: 10px; background: var(--surface-2, #1a1d22); color: var(--ink, #f2f0ea);
    text-decoration: none; font: 700 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    border: 1px solid var(--line, rgba(255, 255, 255, .14));
    display: flex; align-items: center; justify-content: center; text-align: center;
  }
  .splash-mobile-nav a:hover, .splash-mobile-nav a:focus-visible { border-color: #ffb238; }
  .splash-mobile-nav a:focus-visible { outline: 2px solid #ffd88a; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-door, .splash-callout, .splash-mobile-nav a {
    transition: none !important;
  }
}