/* ---------------------------------------------------------------------------
   agentic montage
   ---------------------------------------------------------------------------
   Five layers, back to front: the montage plates, the state columns, the
   chrome (rules, timecodes, mark), the locator and subtitle, the footer.
--------------------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color: #d8d8d8;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
body.idle { cursor: none; }
#stage { position: fixed; left: 0; top: 0; right: 0; height: 100%; height: 100dvh; }

/* ---- layer 1 : the montage ---- */
.plate {
  position: absolute; inset: -8%;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: contrast(1.35) brightness(.55);
  opacity: 0; transition: opacity 2.4s linear;
  will-change: transform, opacity;
}
/* the pages are already greyscale; only the generated stand-ins need it */
.plate.gen { filter: grayscale(1) contrast(1.35) brightness(.55); }
.plate.on { opacity: .46; }
/* on a landscape screen a portrait page letterboxes to under half the width,
   so open the plate out past the frame and let the drift crop it */
@media (min-aspect-ratio: 1/1) { .plate { inset: -26%; } }

/* ---- layer 2 : state columns ---- */
.cols { position: absolute; left: 0; right: 0; top: 35px; bottom: 30px;
        display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.col { overflow: hidden; position: relative; contain: content; }
.col .inner { position: absolute; bottom: 0; left: .9rem; right: .9rem; }
.col span { display: block; font-size: 8.5px; line-height: 1.42; color: #6a6a6a;
            white-space: nowrap; overflow: hidden; }
.col span.hot { color: #b6b6b6; }
.col:nth-child(1), .col:nth-child(4) { opacity: .85; }
.col:nth-child(2), .col:nth-child(3) { opacity: .5; }

/* ---- layer 3 : chrome ---- */
.rule { position: absolute; background: #262626; }
.rule.v { top: 0; bottom: 0; width: 1px; }
.rule.h { left: 0; right: 0; height: 1px; top: 34px; }
.r1 { left: 25%; } .r2 { left: 50%; } .r3 { left: 75%; }

.tc { position: absolute; top: 10px; font-size: 10px; letter-spacing: .04em; color: #b4b4b4; }
.tc small { display: block; font-size: 8px; color: #5c5c5c; letter-spacing: .12em; margin-top: 2px; }
.tc1 { left: 25.8%; } .tc2 { left: 50.8%; } .tc3 { left: 75.8%; }
#mark { position: absolute; left: 1rem; top: 10px; font-size: 10px; letter-spacing: .22em; color: #e8e8e8; }

/* ---- layer 4a : the locator ------------------------------------------------
   Pinned under the top rule rather than stacked on the subtitle, so it holds
   still while the subtitle grows and shrinks underneath it.
--------------------------------------------------------------------------- */
#locator {
  position: absolute; left: 8vw; top: 52px; width: clamp(268px, 34vw, 470px);
  display: flex; align-items: flex-end; gap: 1.15rem;
}
#globe {
  flex: none; width: clamp(168px, 17vw, 252px); padding: 5px;
  border: 1px solid #2c2c2c; background: rgba(0,0,0,.34);
}
#map { display: block; width: 100%; height: auto; }
#grat { fill: none; stroke: #fff; stroke-width: .3; opacity: .1; }
#equator { fill: none; stroke: #fff; stroke-width: .35; opacity: .18; }
#land { fill: rgba(255,255,255,.15); stroke: rgba(255,255,255,.34); stroke-width: .28;
        stroke-linejoin: round; }
#hop { stroke: #e8e8e8; stroke-width: .5; opacity: .45; transition: stroke-dashoffset 1.4s ease-out; }
#pin { transition: transform 1.4s cubic-bezier(.5, 0, .15, 1); }
#pin .ret { stroke: #fff; stroke-width: .3; opacity: .3; }
#pin .halo { fill: none; stroke: #fff; stroke-width: .7;
             transform-box: fill-box; transform-origin: center;
             animation: ping 2.8s ease-out infinite; }
#pin .dot { fill: #fff; }
@keyframes ping {
  0%   { transform: scale(.35); opacity: .8; }
  75%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
#locator.blind #pin, #locator.blind #hop { display: none; }

#where { flex: 1 1 auto; min-width: 0; padding-bottom: 2px; }
#where hr { border: 0; border-top: 1px solid #2c2c2c; margin-bottom: .5rem; }
/* all four lines carry the same weight of white; the hierarchy is size and
   tracking, not brightness, so the block stays readable over a pale scan */
#where span { display: block; color: #e8e8e8; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
#wplace { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
#wregion { margin-top: 3px; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; }
#wcoord { margin-top: 5px; font-size: 8.5px; letter-spacing: .1em;
          font-variant-numeric: tabular-nums; }
/* the same string the footer carries, so the two read as one record */
#wdate { margin-top: 3px; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; }

/* the document family of the page on screen, captioned under the map itself —
   FBI HQ FILE, NASA APOLLO, USG UAP REPORTS, … — same white, same tracking */
#wfamily { margin-top: 5px; padding-top: 4px; border-top: 1px solid #2c2c2c;
           font-size: 8px; letter-spacing: .22em; text-transform: uppercase;
           color: #e8e8e8; text-align: center; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }

/* ---- layer 4b : the subtitle ---- */
#caption { position: absolute; left: 8vw; right: 34vw; top: 50%; transform: translateY(-50%);
           contain: layout paint; }
#sub {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 0 26px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.8);
}
#sub b { font-weight: 400; opacity: 0; transition: opacity .34s linear; }
#sub b.on { opacity: 1; }

/* ---- layer 5 : footer ---- */
#bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; overflow: hidden;
  border-top: 1px solid #262626; display: flex; align-items: center;
  font-size: 9px; letter-spacing: .16em; color: #6e6e6e; text-transform: uppercase;
  background: rgba(0,0,0,.6);
}
#bar div { padding: 0 1rem; border-right: 1px solid #1c1c1c; height: 100%;
           display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
#bar div:last-child { border: 0; }
#bar #release { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#bar #docid { margin-left: auto; min-width: 0; flex: 0 1 auto; display: block; line-height: 30px;
              overflow: hidden; text-overflow: ellipsis; }
i { display: inline-block; width: 5px; height: 5px; background: #444; font-style: normal;
    transition: background .2s linear; }
i.up { background: #d8d8d8; }

/* promoted so a moving plate underneath never repaints them */
#vign, #scrim, #scan { position: absolute; inset: 0; pointer-events: none;
                       transform: translateZ(0); contain: strict; }
#vign { background: radial-gradient(ellipse at 40% 50%, transparent 30%, rgba(0,0,0,.72) 100%); }
#scrim { background: linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,0) 62%); }
#scan { opacity: .07;
        background: repeating-linear-gradient(to bottom, #fff 0 1px, transparent 1px 3px); }

/* ---- chrome hidden : projection mode ---- */
body.bare .cols, body.bare .rule, body.bare .tc, body.bare #mark,
body.bare #bar, body.bare #hint { opacity: 0; pointer-events: none; }
.cols, .rule, .tc, #mark, #bar { transition: opacity .5s linear; }

/* ---- hint + pause + gate ---- */
#hint {
  position: absolute; right: 1rem; top: 12px; font-size: 8.5px; letter-spacing: .18em;
  color: #5c5c5c; text-transform: uppercase; transition: opacity .8s linear;
}
#hint.gone { opacity: 0; }
#hint .touch { display: none; }
@media (hover: none) {
  #hint .keys { display: none; }
  #hint .touch { display: inline; }
}
#paused {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .4em; color: #e8e8e8; text-transform: uppercase;
  background: rgba(0,0,0,.55); z-index: 5;
}
body.halted #paused { display: flex; }
body.halted #pin .halo { animation-play-state: paused; }
#gate {
  position: fixed; inset: 0; z-index: 10; background: #000; color: #d8d8d8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
  cursor: pointer; text-align: center; padding: 2rem;
}
#gate h1 { font-size: 11px; font-weight: 400; letter-spacing: .5em; color: #e8e8e8; }
#gate p { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: #5c5c5c; }
#gate.gone { display: none; }

/* ---- narrow screens ---- */
@media (max-width: 760px) {
  .cols { grid-template-columns: repeat(2, 1fr); bottom: 26px; opacity: .5; }
  .col:nth-child(n+3) { display: none; }
  .col:nth-child(1) { opacity: .8; }
  .col .inner { left: .6rem; right: .6rem; }
  .col span { font-size: 7px; line-height: 1.5; }
  .r1 { left: 50%; }
  .r2, .r3 { display: none; }
  .tc1 { left: auto; right: 1rem; text-align: right; }
  .tc2, .tc3 { display: none; }
  #mark { font-size: 9px; letter-spacing: .16em; }
  #hint { top: auto; bottom: 38px; right: 1rem; }
  #locator { left: 6vw; right: 6vw; top: 46px; width: auto; gap: .8rem; }
  #globe { width: 40vw; max-width: 190px; padding: 4px; }
  /* a long place name wraps here rather than losing its second half */
  #wplace { font-size: 9px; letter-spacing: .12em; white-space: normal; line-height: 1.3; }
  #wregion, #wdate { font-size: 7.5px; letter-spacing: .16em; }
  #wcoord { font-size: 7.5px; }
  #wfamily { font-size: 7px; letter-spacing: .16em; }
  #caption { left: 6vw; right: 6vw; top: auto; bottom: 20%; transform: none; }
  #sub {
    font-size: clamp(19px, 5.6vw, 34px); line-height: 1.12;
    text-shadow: 0 0 18px rgba(0,0,0,.98), 0 0 44px rgba(0,0,0,.9);
  }
  #vign { background: radial-gradient(ellipse at 50% 45%, transparent 20%, rgba(0,0,0,.8) 100%); }
  #scrim { background: linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,0) 62%); }
  #bar { height: 26px; font-size: 8px; }
  #bar #release { display: none; }   /* the id and the gate are what a phone has room for */
  #bar div { padding: 0 .8rem; }
  /* flex-basis 0 rather than shrink-from-content: the id takes only the
     space left over, so the back link can never be pushed off the edge */
  #bar #docid { margin: 0; flex: 1 1 0; padding: 0 .8rem; line-height: 26px; text-align: right; }
}

@media (max-aspect-ratio: 1/1) {
  #scrim { background: linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,0) 62%); }
}

@media (max-height: 520px) {
  #locator { top: 46px; }
  #globe { width: clamp(140px, 14vw, 190px); }
  #caption { top: auto; bottom: 12%; right: 8vw; transform: none; }
  #sub { font-size: clamp(17px, 3.2vw, 30px); line-height: 1.12; }
  #hint { top: 12px; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .plate { transition-duration: .01ms; }
  #pin { transition-duration: .01ms; }
  #hop { transition-duration: .01ms; }
  #pin .halo { animation: none; opacity: .5; }
}