/* =========================
   Terminal Background
   ========================= */
.hero{
  position:relative;
  overflow:hidden;
}

.terminal-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.7;
  will-change:transform;
}

.hero .container{
  position:relative;
  z-index:1;
}

.term-line{
  position:absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:12px;
  white-space:nowrap;
  color: rgba(255,255,255,.28);
  opacity:0;
  transform:translateY(14px);
  animation:term-float 6s ease-out forwards;
}

.term-line .dim{
  color: rgba(148,163,184,.25);
}

@keyframes term-float{
  0%{ opacity:0; transform:translateY(18px); }
  10%{ opacity:1; transform:translateY(0); }
  80%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-30px); }
}

/* =========================
   Snow Canvas
   ========================= */
.bg-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;

  /* Put snow above the terminal layer but below content */
  z-index: 1;

  /* More visible but still subtle */
  opacity: .45;
}

/* =========================
   Status Dot (neutral)
   ========================= */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;             /* green */
  display: inline-block;
  position: relative;
  margin-right: 10px;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
  animation: dot-breathe 2.4s ease-in-out infinite;
}

/* Beacon ring */
.status-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.30);
  transform: scale(0.6);
  opacity: 0;
  animation: status-ping 1.4s ease-out infinite;
}

@keyframes dot-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.08); filter: brightness(1.15); }
}

@keyframes status-ping {
  0%   { transform: scale(0.6); opacity: 0.65; }
  70%  { opacity: 0.12; }
  100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot,
  .status-dot::after {
    animation: none;
  }
}

/* =========================
   Scroll Reveal
   ========================= */
/* TEMP FIX (makes site visible immediately) */

.reveal {
  opacity: 1 !important;
  transform: none !important;
}


@media (prefers-reduced-motion: reduce){
  .terminal-bg,
  .bg-canvas { display:none; }

  .js .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}