/* =========================================================
   Jarvis boot-sequence + HUD overlay — for prosjekt-undersider
   ========================================================= */

/* Full-screen boot overlay */
.jarvis-boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0A0E1A;
  color: #06B6D4;
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(40px, 10vw, 140px);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1);
  overflow: hidden;
}
.jarvis-boot__line {
  margin: 0 0 10px;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
  position: relative;
  z-index: 2;
}
.jarvis-boot__line.is-shown {
  opacity: 1;
  transform: translateX(0);
}
.jarvis-boot__line--ok { color: #4ADE80; }
.jarvis-boot__line--warn { color: #FBBF24; }
.jarvis-boot__line--ready {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-top: 22px;
  color: #F0FDFA;
}
.jarvis-boot__cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  background: #06B6D4;
  vertical-align: middle;
  margin-left: 8px;
  animation: jarvisBlink 0.8s steps(1) infinite;
  box-shadow: 0 0 12px #06B6D4;
}
@keyframes jarvisBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.jarvis-boot.is-done {
  opacity: 0;
  pointer-events: none;
}

/* Subtile scan-lines på boot */
.jarvis-boot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(6, 182, 212, 0.03) 0px,
    rgba(6, 182, 212, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Grid pattern på boot */
.jarvis-boot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* HUD corner badge — fixed top-right med pulserende dot */
.jarvis-hud {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(6, 182, 212, 0.45);
  color: #06B6D4;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(.2, .7, .2, 1) 0.3s;
  pointer-events: none;
}
.jarvis-hud.is-shown { opacity: 1; }
.jarvis-hud__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #06B6D4;
  box-shadow: 0 0 10px #06B6D4;
  animation: jarvisPulse 1.4s ease-in-out infinite;
}
@keyframes jarvisPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}

/* HUD back-link top-left */
.jarvis-back {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(6, 182, 212, 0.45);
  color: #06B6D4;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(.2, .7, .2, 1) 0.3s,
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.jarvis-back.is-shown { opacity: 1; }
.jarvis-back:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: #06B6D4;
  color: #67E8F9;
}

/* Disable on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .jarvis-boot { display: none; }
  .jarvis-hud, .jarvis-back { opacity: 1; transition: none; }
}