/* ===============================
   BUSO.dk Under-Construction Stylesheet
   (self-hosted fonts; imprint fills viewport)
   =============================== */

/* --- Font faces (replace filenames with your own) --- */
@font-face { font-family: "BUSO-Mono"; src: url("assets/fonts/mainframe-opto.ttf") format("truetype"), url("assets/fonts/mainframe-opto.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "BUSO-Sans"; src: url("assets/fonts/LCD14.otf") format("opentype"), url("assets/fonts/LCD14.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "BUSO-Tech"; src: url("assets/fonts/TurretRoad-Regular.ttf") format("truetype"), url("assets/fonts/TurretRoad-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "BUSO-Display"; src: url("assets/fonts/Paraaminobenzoic.otf") format("opentype"), url("assets/fonts/Paraaminobenzoic.otf") format("opentype"); font-display: swap; }

:root{
  --mono: "BUSO-Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --teal: #62c6bf;
  --grey: #9aa1a1;
  --bg-black: #000;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg-black);
  color:var(--teal);
  overflow:hidden;
  font-family:var(--mono);
  letter-spacing:0.02em;
}

/* Stage */
.stage{ position:fixed; inset:0; background:#000; }

/* Background image layer (fills screen) */
.bg{
  position:absolute; inset:0;
  background:#000 center/cover no-repeat;
  opacity:0;
  transition:opacity 180ms ease-out;
}
.bg.show{ opacity:1; background-image:url("assets/img/background.png"); }

/* Overlay imprint now as a COVER background (fills screen) */
.imprint{
  position:absolute; inset:0;
  opacity:0;
  background: url("assets/img/overlayimprint.png") center/cover no-repeat;
}
.imprint.flicker{ animation:flickerFade 1100ms steps(20,end) forwards; }

@keyframes flickerFade{
  0%{opacity:0;}
  12%{opacity:1;}
  20%{opacity:.15;}
  30%{opacity:1;}
  45%{opacity:.4;}
  55%{opacity:1;}
  66%{opacity:.5;}
  82%{opacity:1;}
  100%{opacity:1;}
}

/* Terminal output */
.term{
  position:absolute;
  left:clamp(14px,4vw,48px);
  top:clamp(12px,3.5vw,40px);
  right:clamp(14px,4vw,48px);
  max-width:1200px;
  font-size: clamp(9px, 0.6vw + 4px, 14px);
  line-height:1.4;
  text-shadow:0 0 4px rgba(98,198,191,.65);
  white-space:pre-wrap;
  pointer-events:none;
}
.term--grey{ color:var(--grey); }

/* Blinking block cursor */
.cursor{
  display:inline-block; width:.6em; height:1.1em; transform:translateY(.15em);
  background:var(--teal);
  margin-left:2px;
  animation:blink 800ms steps(1,end) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Fail window overlay (respect intrinsic size but fit small screens) */
.fail{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none; }

.fail img{
  width:auto; height:auto;
  max-width:clamp(480px, 62vw, 1200px);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.9));
}
.fail.show{ animation:failIn 24ms ease-out forwards; }
@keyframes failIn{ from{opacity:0; transform:scale(.985);} to{opacity:1; transform:scale(1);} }

/* Small screen + portrait mode */
@media (orientation: portrait) {
  .term {
    font-size: clamp(7px, 2.0vw, 10px);  /* smaller font to avoid wrapping */
    line-height: 1.25;                   /* tighten spacing a touch */
  }

  .fail img {
    max-width: 70vw;   /* scale down to fit */
    height: auto;
    transform: translateX(-50%); /* stay centered horizontally */
  }
}

/* Hide fail window on small portrait devices */
@media (orientation: portrait) {
  .fail {
    display: none !important;
  }
}