/**
 * Terminal blast — layer, terminal visuals, and keyframes. Pairs with
 * /js/terminal-blast.js. Loaded site-wide from BaseLayout so any download
 * link can blast, not just the ones on /download.
 *
 * Everything here is namespaced tb-*. Do NOT rename these to the mt-* classes
 * used by mini-terminal.css: that file styles a different component (the real
 * skin preview on the homepage showcase, gallery, and detail pages) and owns a
 * generic `.mt-bar`. Sharing the names means the blast and the skin previews
 * silently fight over each other's styles on every page that has both.
 */

.tb-explosion {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}

/* ── The mini terminal itself (blast + /download's ambient floaters) ── */

.tb-term {
  pointer-events: none;
}

.tb-inner {
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 10%, transparent);
  overflow: hidden;
}

.tb-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.tb-bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: block;
}

.tb-bar span {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.35rem;
  color: color-mix(in srgb, var(--accent) 60%, transparent);
  letter-spacing: 0.05em;
}

.tb-body {
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* <s> is used for the fake code lines — strip the strikethrough it implies. */
.tb-body s {
  display: block;
  height: 2px;
  width: 80%;
  border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  text-decoration: none;
}

/* ── Animations ── */

/* Explosion burst — lands visible, no fade */
@keyframes tb-burst {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.7) rotate(var(--tr));
    opacity: var(--final-opacity, 0.3);
  }
}

/* Post-burst gentle drift */
@keyframes tb-drift {
  0%, 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.7) rotate(var(--tr)); }
  50%      { transform: translate(calc(-50% + var(--tx) + 15px), calc(-50% + var(--ty) - 20px)) scale(0.7) rotate(var(--tr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-explosion { display: none; }
}