/* BSC: Custodial Program. A splash on the amber CRT terminal, in the voice of an underground program: it keys
   in WISHLIST NOW / TO JOIN THE PROGRAM, then index.html hands over to Steam. Quiet and procedural, no show. */

@font-face { font-family: 'Share Tech Mono'; src: url('/fonts/ShareTechMono-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --amber: #ffb43a;
  --hot: #ffd27a;
  --dim: #a8741f;
  --bg: #0b0703;
  --glow: 0 0 2px rgba(255, 180, 58, 0.9), 0 0 10px rgba(255, 150, 30, 0.35);
}

/* Mouse pointers: amber pixel arrow; inverted over the button. */
html {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 2v17l4.5-4.5 3 6.5 3-1.4-3-6.4H16z' fill='%23ffb43a' stroke='%230b0703' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, default;
}
a {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 2v17l4.5-4.5 3 6.5 3-1.4-3-6.4H16z' fill='%230b0703' stroke='%23ffb43a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, pointer;
}

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #000;
  color: var(--amber);
  font: 16px/1.5 'Share Tech Mono', 'Courier New', monospace;
  text-shadow: var(--glow);
}
::selection { background: var(--amber); color: var(--bg); }

/* The tube: everything on screen. It powers on like a CRT (a bright line opening into the picture). Its own stacking
   context, so the wallpaper and the canvas (negative z) sit under the text. */
#tube {
  position: fixed;
  inset: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at center, rgba(26, 16, 6, 0.9) 0%, rgba(11, 7, 3, 0) 70%),
    var(--bg);
  animation: power-on 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#tube::after {   /* the lamp: hot while the picture is still a line */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #ffe3b0;
  opacity: 0;
  animation: lamp 0.42s ease-out both;
}
@keyframes power-on {
  0% { transform: scale(0, 0.006); }
  35% { transform: scale(1, 0.006); }
  100% { transform: none; }
}
@keyframes lamp { 0%, 35% { opacity: 0.85; } 100% { opacity: 0; } }

/* The backrooms wallpaper, its real pattern (assets/wall.png: one 128 px repeat of the reference texture, at 2x),
   printed in amber on the dark tube instead of olive on yellow: big chevrons staggered column to column, a chain of
   small ones between thin stripes. ::after is a second print shown only inside a soft band that sweeps across now
   and then. */
#wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;   /* how strong the wallpaper shows: the one knob */
  background: url(/assets/wall.png) 0 0 / 60px 60px;
}
#wall::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background: inherit;
  -webkit-mask: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%) 100% 0 / 250% 100% no-repeat;
          mask: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%) 100% 0 / 250% 100% no-repeat;
  animation: shine 10s ease-in-out infinite;
}
@keyframes shine {
  0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  60%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

/* the tesseract (index.html) */
#fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }

/* Header bar, inverted like an old text UI */
.topbar {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 3px 12px;
  background: var(--amber);
  color: var(--bg);
  text-shadow: none;
  letter-spacing: 0.12em;
}
.topbar .right { margin-left: auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: bold; letter-spacing: 0.3em; }
.mark {
  width: 18px;
  height: 21px;
  background: var(--bg);
  -webkit-mask: url(/assets/bsc_mark.svg) center / contain no-repeat;
          mask: url(/assets/bsc_mark.svg) center / contain no-repeat;
}

/* The splash: one centred column. Not positioned: the canvas finds #spot through offsetTop/offsetLeft from the tube. */
.splash {
  flex: 1;
  width: 640px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-bottom: 3vh;
}
#spot { height: clamp(110px, 25vh, 240px); margin-bottom: 1.5vh; }

/* WISHLIST NOW / TO JOIN THE PROGRAM: the largest lines, keyed in by index.html, then steady with the cursor
   blinking after them. The second line is sized and spaced out to the first one's width, a lockup. */
.hero {
  margin: 3.4vh 0 0;
  font-weight: normal;   /* an h1, but the mono font has no bold */
  white-space: nowrap;
  font-size: min(54px, 9vw);
  line-height: 1.1;
  text-shadow: 0 0 2px rgba(255, 180, 58, 0.9), 0 0 16px rgba(255, 150, 30, 0.45);
}
.hero > span { display: block; }
#hero { letter-spacing: 0.08em; }
#join { margin-top: 0.12em; font-size: 0.43em; letter-spacing: 0.33em; text-shadow: var(--glow); }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin: 0 calc(-0.6em - 3px) 0 3px;   /* takes no room in the line: it never wraps alone, the text stays centred */
  vertical-align: -0.15em;
  background: var(--amber);
  box-shadow: var(--glow);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { visibility: hidden; } }
/* while typing (index.html): the next letter is the cursor block, the rest holds its place unseen */
.caret { background: var(--amber); color: transparent; text-shadow: none; box-shadow: var(--glow); }
.rest { visibility: hidden; }

/* Transfer bar: a bordered track the amber blocks fill, nothing else */
.load { margin-top: 3.4vh; }
.bar { height: 14px; padding: 3px; border: 1px solid var(--dim); }
#fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--amber) 0 calc(5% - 3px), transparent 0 5%);   /* 20 blocks */
  clip-path: inset(-4px 100% -4px -4px);   /* index.html opens it block by block */
  filter: drop-shadow(0 0 3px rgba(255, 150, 30, 0.6));
}

/* The button: straight to Steam (and the way through without JavaScript) */
.go {
  display: block;
  margin-top: 2.6vh;
  padding: 14px 0;
  font-size: 19px;
  letter-spacing: 0.22em;
  -webkit-text-stroke: 0.5px currentColor;   /* the mono font has no bold: a stroke fattens it */
  text-decoration: none;
  color: var(--bg);
  background: var(--amber);
  text-shadow: none;
  box-shadow: 0 0 12px rgba(255, 150, 30, 0.3);
}
.go:hover, .go:focus-visible { background: var(--hot); outline: none; }

/* The timeline (index.html T): WISHLIST NOW types from 0.63 s, the bar and button come up around it */
.load { animation: rise 0.35s ease-out 0.665s both; }
.go { animation: rise 0.35s ease-out 0.84s both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* CRT: scanlines, a curved-glass vignette, and a slow faint wave of light drifting down */
.crt {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.65) 100%);
}
/* the wave moves by transform (GPU, no repaint): two screens tall, slides down one screen and loops */
.crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -100vh;
  height: 200vh;
  background: repeating-linear-gradient(transparent 0, rgba(255, 190, 90, 0.035) 25vh, transparent 50vh, transparent 100vh);
  animation: wave 12s linear infinite;
}
@keyframes wave { from { transform: translateY(0); } to { transform: translateY(100vh); } }

/* Reduced motion: no power-on and nothing rising; the page is simply there, then Steam. */
@media (prefers-reduced-motion: reduce) {
  #tube, #tube::after, .load, .go, .cursor, .crt::after, #wall::after { animation: none; }
  #wall::after { opacity: 0; }
}

/* Phones */
@media (max-width: 819px) {
  .topbar span:nth-child(2) { display: none; }
  .splash { padding: 0 4px 2vh; }
  #spot { height: clamp(100px, 21vh, 200px); }
  .go { font-size: 16px; letter-spacing: 0.16em; }
}