/* The way in: a cartridge boot. Four plates in the order a Game Boy Advance shows them — the small print, the
   maker's card, a burst of flat colour with something running across it, and then the title, which waits for you.
   It is shown once a session, the site behind it is already loaded, and any click or key skips forward, so it is
   never standing between anybody and their money. The numbers on the title plate are the same ones the Markets
   page shows, so it cannot claim anything the site does not. */

#intro { position: fixed; inset: 0; z-index: 200; background: #000; color: #fffbff; cursor: default; overflow: hidden;
  font-family: var(--pixel); -webkit-tap-highlight-color: transparent; }
#intro.gate, #intro.armed { cursor: pointer; }    /* the only two plates that are listening for anything */
/* pressing start blows the screen out to white first, and the site is already behind it when the white clears */
#intro.go { animation: bootOut .3s steps(6, end) .1s forwards; pointer-events: none; }
@keyframes bootOut { to { opacity: 0; } }

/* every plate fills the screen; only the one matching the phase is up */
#intro .bp { position: absolute; inset: 0; display: none; place-items: center; align-content: center; justify-items: center;
  text-align: center; padding: 24px; gap: 18px; }
#intro[data-phase="1"] .bp-cr, #intro[data-phase="2"] .bp-gf, #intro[data-phase="3"] .bp-sweep, #intro[data-phase="4"] .bp-title { display: grid; }

/* the pixel grid over the top, so the whole thing reads as a screen rather than a web page */
#intro .scan { position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .26) 0 2px, transparent 2px 4px),
              radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%); }
/* Sits outside the boot screen, not inside it, so it is not dimmed by the screen fading away underneath it:
   the white comes up, the boot is taken down behind the white, and the white clears onto the site. */
.bootflash { position: fixed; inset: 0; z-index: 300; background: #fffbff; opacity: 0; pointer-events: none;
  animation: bootFlash .62s steps(10, end) forwards; }
@keyframes bootFlash { 0% { opacity: 0; } 11% { opacity: 1; } 32% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bootflash { animation: none; opacity: 0; } }

/* ---------- 1. the small print ---------- */
#intro .bp-cr { background: #000; animation: fadeUp .5s steps(5, end) both; }
#intro .bp-cr p { margin: 0; font-size: clamp(9px, 1.5vw, 13px); line-height: 2.2; color: #d6d3ce; }
#intro .bp-cr p.big { color: #fffbff; font-size: clamp(13px, 2.4vw, 20px); }
/* what the site is, in two sentences: sized between the line above it and the small print, and narrow enough to read as a paragraph (40ch of a 7.5px pixel font is 300px, so it fits a 375px phone inside the plate's padding) */
#intro .bp-cr p.sum { margin: -6px 0 0; font-size: clamp(7.5px, 1.25vw, 10.5px); line-height: 1.7; color: #b5b2b8; max-width: 40ch; }
#intro .bgo { margin: 26px 0 0; font-size: clamp(8px, 1.6vw, 12px); color: #fffbff; animation: blink 1.1s steps(2, end) infinite; }
#intro:not(.gate) .bgo { visibility: hidden; }

/* ---------- 2. the maker's card ---------- */
#intro .bp-gf { background: linear-gradient(180deg, #081808 0%, #103800 38%, #215900 62%, #317100 82%, #4a9200 100%);
  animation: fadeUp .45s steps(5, end) both; }
#intro .gfmark { width: 76px; height: 104px; border-radius: 6px; background: #fffbff; position: relative;
  box-shadow: 0 0 0 4px #081808, 0 12px 0 rgba(8, 24, 8, .5); animation: rise .9s steps(9, end) both; }
#intro .gfmark::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 26px; border-radius: 3px;
  background: linear-gradient(180deg, #ff3021, #ce1810 60%, #7b1810); box-shadow: 0 0 0 2px #3a0805; }
#intro .gfmark::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 46px; border-radius: 3px;
  background: repeating-linear-gradient(0deg, #d6d3ce 0 3px, #fffbff 3px 8px); box-shadow: 0 0 0 2px #52516b; }
@keyframes rise { from { transform: translateY(26px); opacity: 0; } }
#intro .gfname { margin: 0; font-size: clamp(14px, 2.8vw, 26px); color: #fffbff; letter-spacing: 0;
  text-shadow: 3px 3px 0 #081808; animation: fadeUp .5s steps(5, end) .35s both; }
#intro .gfsub { margin: 0; font-size: clamp(8px, 1.5vw, 12px); color: #a5e35a; text-shadow: 2px 2px 0 #081808;
  animation: fadeUp .5s steps(5, end) .6s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 3. flat colour, with something running across it ---------- */
#intro .bp-sweep { background: #ff3021; overflow: hidden; }
#intro .bp-sweep i { position: absolute; inset: 0; transform: translateX(100%); }
#intro .bp-sweep i.c1 { background: #ce1810; animation: sweep 1.1s steps(9, end) 0s both; }
#intro .bp-sweep i.c2 { background: #a5e35a; animation: sweep 1.1s steps(9, end) .55s both; }
#intro .bp-sweep i.c3 { background: #fffb6b; animation: sweep 1.1s steps(9, end) 1.1s both; }
@keyframes sweep { 0% { transform: translateX(100%); } 55% { transform: translateX(0); } 100% { transform: translateX(0); } }
/* the speed lines the intro draws over the flat colour */
#intro .bp-sweep .streaks { position: absolute; inset: -20%; z-index: 4; opacity: .3;
  background: repeating-linear-gradient(112deg, #fffbff 0 5px, transparent 5px 46px);
  animation: streak .9s steps(7, end) infinite; }
@keyframes streak { to { transform: translateX(-46px); } }
/* a slab crossing the plate, the way a sprite crosses the intro */
#intro .bp-sweep b { position: absolute; z-index: 5; width: 74px; height: 102px; border-radius: 6px; background: #3a0805;
  box-shadow: inset 0 0 0 5px #fffbff, 0 8px 0 rgba(0, 0, 0, .3); animation: cross 1.25s steps(14, end) infinite; }
#intro .bp-sweep b::before { content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 18px; border-radius: 2px; background: #fffbff; }
#intro .bp-sweep b.r1 { top: 26%; animation-delay: 0s; }
#intro .bp-sweep b.r2 { top: 54%; animation-delay: .62s; transform: scale(.7); }
@keyframes cross { from { left: -14%; } to { left: 110%; } }

/* ---------- 4. the title, which waits ---------- */
#intro .bp-title {
  gap: 10px; animation: fadeUp .5s steps(5, end) both;
  background:
    radial-gradient(circle at 30% 32%, rgba(255, 58, 40, .45) 0 5px, transparent 6px) 0 0 / 26px 26px,
    radial-gradient(circle at 72% 68%, rgba(123, 24, 16, .6) 0 6px, transparent 7px) 13px 8px / 26px 26px,
    radial-gradient(circle at 48% 84%, rgba(206, 24, 16, .4) 0 4px, transparent 5px) 7px 19px / 26px 26px,
    linear-gradient(180deg, #f71810 0%, #ce1810 44%, #7b1810 100%);
}
/* the burst behind the title, and the slab standing in it where the box creature would be */
#intro .bp-title::before { content: ""; position: absolute; inset: -40%; z-index: 0; opacity: .14; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 251, 255, .9) 0deg 3.5deg, transparent 3.5deg 15deg);
  animation: turn 34s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
#intro .sil { position: absolute; z-index: 1; width: min(42vw, 260px); height: min(56vh, 372px); transform: rotate(-8deg);
  border: 6px solid #7b186b; border-radius: 14px; opacity: .5;
  box-shadow: inset 0 0 0 6px rgba(58, 8, 5, .45), 0 0 0 6px rgba(58, 8, 5, .3);
  animation: pulseSil 2.6s steps(4, end) infinite; }
#intro .sil::before, #intro .sil::after { content: ""; position: absolute; border: 5px solid #7b186b; }
#intro .sil::before { left: 9%; right: 9%; top: 7%; height: 13%; border-radius: 4px; }
#intro .sil::after { left: 9%; right: 9%; top: 26%; bottom: 8%; border-radius: 6px; }
@keyframes pulseSil { 50% { opacity: .74; } }

#intro .blogo { position: relative; z-index: 2; margin: 0; font-size: clamp(22px, 6.4vw, 62px); line-height: 1.1; letter-spacing: 0;
  color: #fff329; text-transform: none;
  text-shadow:
    -3px 0 #2848b8, 3px 0 #2848b8, 0 -3px #2848b8, 0 3px #2848b8,
    -3px -3px #2848b8, 3px -3px #2848b8, -3px 3px #2848b8, 3px 3px #2848b8,
    0 7px #101a4a, 0 10px rgba(0, 0, 0, .4);
  animation: drop .55s steps(6, end) both; }
@keyframes drop { from { transform: translateY(-26px); opacity: 0; } }
#intro .bver { position: relative; z-index: 2; margin: 2px 0 0; font-size: clamp(9px, 1.9vw, 16px); color: #fffbff;
  text-shadow: 3px 3px 0 #3a0805; animation: fadeUp .5s steps(5, end) .25s both; }

/* the save box: what this place has actually done, in the panel a saved game is listed in */
#intro .bsave { position: relative; z-index: 2; margin-top: 12px; min-width: min(320px, 86vw); display: grid; gap: 7px;
  padding: 13px 15px; background: #fffbff; color: #293031; border: 3px solid #52516b; border-radius: 9px;
  box-shadow: inset 0 0 0 2px #d6d3ce, 4px 4px 0 rgba(20, 6, 4, .55); animation: fadeUp .5s steps(5, end) .45s both; }
#intro .bsave div { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; font-size: 8.5px; line-height: 1.7; }
#intro .bsave b { font-family: var(--mono); font-size: 13px; color: #293031; }
#intro .bsave.empty-yet { display: none; }

#intro .bstart { position: relative; z-index: 2; margin: 16px 0 0; font-size: clamp(10px, 2.1vw, 17px); color: #fffbff;
  text-shadow: 3px 3px 0 #3a0805; animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#intro .bcopy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; margin: 0; font-size: clamp(6px, 1.1vw, 9px);
  color: #fffbff; text-shadow: 2px 2px 0 #3a0805; }
#intro .bhint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 38px; margin: 0; font-size: clamp(5.5px, 1vw, 8px);
  color: #ffc394; text-shadow: 2px 2px 0 #3a0805; }

@media (prefers-reduced-motion: reduce) {
  #intro *, #intro::before { animation: none !important; }
  #intro .bp-sweep .streaks, #intro .bp-sweep b { display: none; }
  #intro.go { animation: none !important; opacity: 0; }
}