/* concepts/us/globe-round/assets/globe.css
   Hal's conference globe, one shared component, 2026-09-28.

   The clip is the globe and its own glow only (cropped from
   conference/background-spinning-studios.mov, no baked-in text). The
   country list next to it is real HTML text in the page's own tokens, not
   video: "REVL" is the page's existing wordmark image
   (assets/revl-wordmark.svg), the active country sits beside it in White,
   and the rest of the list runs dimmed in Grey at low alpha, in the page's
   own mono caption face so it reads as one system with every other label
   on the page (.stat .l, the kickers).

   ONE COMPONENT, reused unmodified by every lettered option. Only size and
   position differ per option, and that CSS lives in build.py, scoped under
   that option's own wrapper class. Nothing here is option-specific.

   THE SQUARE NEVER SHOWS. The video is a square crop; .globe-cmp-visual
   masks it with a radial gradient so it fades to fully transparent well
   inside its own box, revealing the page's own dark ground (var(--black))
   behind rather than a video-coloured square edge. No CSS glow is added on
   top: the glow in the shot is the video's own. The gradient stops below
   are mask alpha values, not visible colour (mask-image only reads their
   opacity), so they are written in White/transparent rather than a new hex.

   MOTION. The rolling list translates a plain <ul> so the active row sits
   on the wordmark's line; prefers-reduced-motion removes the transition
   entirely (globe.js also skips the auto-advance timer and swaps the video
   for its poster frame under the same query). */

.globe-cmp{
  /* Sized like the conference cut: the country set as big as the REVL mark. */
  --globe-country-size: clamp(22px, 2.5vw, 38px);
  --globe-row-h: calc(var(--globe-country-size) * 1.45);
  --globe-rows: 7;
  /* The REVL Training lockup: REVL is the top 71% of its height, so at 1x the country size
     REVL's letters match the country's capitals. */
  --globe-word-h: calc(var(--globe-country-size) * 1.02);
  --globe-gap: calc(var(--globe-country-size) * .42);
}

.globe-cmp-visual{
  position:relative;
  /* The clip's black is lifted to the page's own #0A0A0A in the encode, so no ring shows. */
  width:100%;
  aspect-ratio:1/1;
  /* closest-side: 100% is the box's own edge, so the fade always ends exactly there. */
  /* Fully transparent well inside the box, so no square or darker disc can show on any
     screen, whatever the browser does to the video's black. */
  -webkit-mask-image: radial-gradient(circle closest-side, #FFFFFF 77%, transparent 92%);
          mask-image: radial-gradient(circle closest-side, #FFFFFF 77%, transparent 92%);
}
.globe-cmp-video,
.globe-cmp-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  /* The clip's black is darker than the page ground; lighten keeps the page's own
     dark wherever the video is darker, so no darker disc shows round the globe. */
}
.globe-cmp-poster{ display:none; }
.globe-cmp.no-video .globe-cmp-video{ display:none; }
.globe-cmp.no-video .globe-cmp-poster{ display:block; }

.globe-cmp-info{
  display:flex;
  align-items:center;
  gap:var(--globe-gap);
  margin-top:22px;
}
.globe-cmp-word{
  height:var(--globe-word-h);
  width:auto;
  display:block;
  flex:0 0 auto;
  /* centre REVL (not the whole lockup) on the country's line: TRAINING hangs below */
  transform:translateY(14%);
}

.globe-cmp-scroller{
  position:relative;
  overflow:hidden;
  height:calc(var(--globe-row-h) * var(--globe-rows));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #FFFFFF 28%, #FFFFFF 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #FFFFFF 28%, #FFFFFF 72%, transparent 100%);
}
.globe-cmp-list{
  list-style:none;
  margin:0; padding:0;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.globe-cmp-list li{
  height:var(--globe-row-h);
  display:flex;
  align-items:center;
}
.globe-cmp-c{
  font-family:var(--disp);
  font-weight:700;
  font-size:var(--globe-country-size);
  letter-spacing:0;
  text-transform:uppercase;
  line-height:1;
  color:var(--grey);
  opacity:.28;
  background:none;
  border:0;
  padding:2px 0;
  margin:0;
  cursor:pointer;
  text-align:left;
  transition:opacity .3s, color .2s;
}
.globe-cmp-c:hover,
.globe-cmp-c:focus-visible{ opacity:.85; }
.globe-cmp-c:focus-visible{ outline:1px solid var(--line); outline-offset:3px; }
.globe-cmp-c.is-active{
  color:var(--white);
  opacity:1;
}

/* Option B's "calm" single-line mode: the scroller collapses to exactly one
   row (the active line) and the dimmed rows are clipped out by that height
   rather than removed, so the same translate math in globe.js keeps working
   unchanged. */
.globe-cmp--single .globe-cmp-scroller{
  height:var(--globe-row-h);
  -webkit-mask-image:none;
          mask-image:none;
}

.globe-cmp-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  .globe-cmp-list{ transition:none; }
}

@media (max-width:760px){
  .globe-cmp{ --globe-rows:5; }
  .globe-cmp-info{ margin-top:4px; }
}