/* world-apps.css: the door between a world and the apps built from it.

   Two subjects on this site are both a world and a shelf of software:
   /worlds/islam/ with /al-islam/, and /worlds/star-wars/ with /star-wars/.
   world-apps-link.html puts the crossing in the hero of all four pages, and
   these are its rules.

   WHY ITS OWN STYLESHEET. The world pages load fanpages.css and could have
   had this inside it, but the two apps pages do not and should not: that
   file is the whole fan-page system (heroes, tiles, peeks, galleries) and
   the apps pages would be pulling all of it to style one button. So the
   crossing is self-contained here, repeating the few lines of the
   .fan-iface shape it is modeled on rather than inheriting them, and all
   four pages load this one small file instead.

   It paints entirely with --a, the page's own accent, which every one of
   the four already sets: green on Al-Islam, yellow on Star Wars. */

.fan-cross { margin: 0.2rem 0 1.5rem; }

.fan-cross-btn {
  display: inline-grid; grid-template-columns: auto auto; align-items: center;
  column-gap: 1rem; row-gap: 0.2rem;
  padding: 0.7rem 0.8rem 0.7rem 1.1rem; border-radius: 14px;
  color: var(--ink); text-decoration: none;
  /* a step louder than the interface pills beside it: this is the one
     control in the hero that leads to the other half of the subject */
  background: color-mix(in srgb, var(--a, #f5c63c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--a, #f5c63c) 62%, transparent);
  transition: border-color .25s, background .25s,
              transform .25s var(--ease, cubic-bezier(.16,1,.3,1));
}
.fan-cross-k {
  grid-column: 1; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--a, var(--gold));
}
.fan-cross-btn b {
  grid-column: 1; font-family: var(--sans); font-weight: 600;
  font-size: 1rem; letter-spacing: -0.01em;
}
.fan-cross-a {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.85rem; color: var(--a, var(--gold));
  background: color-mix(in srgb, var(--a, #f5c63c) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--a, #f5c63c) 55%, transparent);
  transition: transform .25s var(--ease, cubic-bezier(.16,1,.3,1));
}

@media (hover: hover) {
  .fan-cross-btn:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--a, #f5c63c) 24%, transparent);
    border-color: color-mix(in srgb, var(--a, #f5c63c) 85%, transparent);
  }
  .fan-cross-btn:hover .fan-cross-a { transform: translateX(3px); }
}

/* The rest of Who I Am, under the main button on /al-islam/: five more
   places to go, each one a word, because five more full buttons would have
   out-shouted the one that matters. */
.fan-cross-more {
  list-style: none; margin: 0.65rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
}
.fan-cross-more a {
  display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--a, #f5c63c) 28%, transparent);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--ink-dim, var(--mute)); text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
@media (hover: hover) {
  .fan-cross-more a:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--a, #f5c63c) 12%, transparent);
    border-color: color-mix(in srgb, var(--a, #f5c63c) 60%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fan-cross-btn, .fan-cross-a { transition: none; }
  .fan-cross-btn:hover { transform: none; }
  .fan-cross-btn:hover .fan-cross-a { transform: none; }
}