/* ─────────────────────────────────────────────────────────────────
 * Site-wide SOON access gate (assets/js/home-soon-gate.js)
 *
 * Visual language strictly mirrors .asterrvn-home-os-window--portfolio:
 *   - solid #000 backdrop (no neon, no radial glow)
 *   - thin rgba(255,255,255,0.12) borders
 *   - mono 12px / line-height 1.7, letter-spacing 0
 *   - single static titlebar marker (no traffic lights)
 *   - no copy hints at the easter-egg passphrase — the visitor reads
 *     this as a generic "OS in standby" window.
 * ─────────────────────────────────────────────────────────────── */

html.asterrvn-soon-locked {
  background: #000;
}

html.asterrvn-soon-locked body {
  /* Hide background page chrome until the gate decides what to do. */
  visibility: hidden;
}

html.asterrvn-soon-locked .asterrvn-soon-gate,
html.asterrvn-soon-locked .asterrvn-soon-gate * {
  visibility: visible;
}

.asterrvn-soon-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  font-family: var(--mono, "Departure Mono", monospace);
  color: var(--text, #c8d0db);
  font-size: 12px;
  line-height: 1.7;
  font-weight: normal;
}

/* Backdrop: pure black + the looping "system illusion" video used on the
 * hero/portfolio views, plus a faint scanline texture on top. No radial
 * gradient, no neon glow. */
.asterrvn-soon-gate__scrim {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  /* isolate stacking so ::after / illusion can't escape above the window */
  isolation: isolate;
}

.asterrvn-soon-gate__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.022) 0,
    rgba(255, 255, 255, 0.022) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* Re-use the global .system-illusion-layer geometry but keep it inside the
 * gate scrim instead of bleeding to the body. */
.asterrvn-soon-gate__illusion {
  position: absolute;
}

/* ─── window: cloned dimensions/colors of portfolio shell ────────── */

.asterrvn-soon-gate__window {
  position: relative;
  /* lift above scrim + scanlines + illusion video */
  z-index: 1;
  width: min(560px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
  box-shadow:
    0 0 0 1px #000,
    0 10px 28px rgba(0, 0, 0, 0.75);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  animation: asterrvn-soon-gate-in 220ms ease-out both;
}

@keyframes asterrvn-soon-gate-in {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── titlebar (matches portfolio shell) ────────────────────────── */

.asterrvn-soon-gate__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 8px 7px;
  background: #050505;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
}

.asterrvn-soon-gate__mod {
  display: block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  user-select: none;
}

.asterrvn-soon-gate__title {
  flex: 1;
  min-width: 0;
  color: var(--text, #c8d0db);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  font-weight: normal;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── path strip ─────────────────────────────────────────────────── */

.asterrvn-soon-gate__path {
  padding: 6px 10px 7px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  color: #777;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #030303;
}

/* ─── body ───────────────────────────────────────────────────────── */

.asterrvn-soon-gate__body {
  padding: 12px 14px 16px;
  background: #030303;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── boot logs: muted, sequential reveal ───────────────────────── */

.asterrvn-soon-gate__logs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asterrvn-soon-gate__log-row {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  color: #8a8a8a;
  white-space: pre;
  opacity: 0;
  animation: asterrvn-soon-gate-log-in 200ms ease-out forwards;
}

.asterrvn-soon-gate__log-row:nth-child(1) { animation-delay: 60ms; }
.asterrvn-soon-gate__log-row:nth-child(2) { animation-delay: 160ms; }
.asterrvn-soon-gate__log-row:nth-child(3) { animation-delay: 260ms; }
.asterrvn-soon-gate__log-row:nth-child(4) { animation-delay: 360ms; }

.asterrvn-soon-gate__log-row--accent {
  color: #d8d8d8;
}

@keyframes asterrvn-soon-gate-log-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ─── hero: large glowing SOON wordmark ─────────────────────────── */

.asterrvn-soon-gate__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 0 26px;
  user-select: none;
}

.asterrvn-soon-gate__headline {
  font-family: inherit;
  font-size: 76px;
  line-height: 1;
  letter-spacing: 0.18em;
  /* mirror letter-spacing on the right edge for proper centering */
  padding-left: 0.18em;
  font-weight: normal;
  color: #b8dcff;
  text-shadow:
    0 0 6px rgba(124, 200, 255, 0.7),
    0 0 22px rgba(60, 180, 255, 0.5),
    0 0 56px rgba(40, 160, 255, 0.32);
  animation: asterrvn-soon-gate-glow 3.4s ease-in-out infinite;
  /* Mobile easter-egg surface: clickable but with no visual hint that it
   * is. Suppress the iOS blue tap rectangle and disable text selection. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/* Tiny acknowledge pulse on each tap — too subtle to read as progress
 * by an outside visitor, just enough confirmation for a tap-fest. */
.asterrvn-soon-gate__headline--tap {
  animation:
    asterrvn-soon-gate-glow 3.4s ease-in-out infinite,
    asterrvn-soon-gate-tap 140ms ease-out 1;
}

@keyframes asterrvn-soon-gate-tap {
  0% { transform: scale(1); }
  50% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes asterrvn-soon-gate-glow {
  0%, 100% {
    color: #b8dcff;
    text-shadow:
      0 0 6px rgba(124, 200, 255, 0.7),
      0 0 22px rgba(60, 180, 255, 0.5),
      0 0 56px rgba(40, 160, 255, 0.32);
  }
  50% {
    color: #e0efff;
    text-shadow:
      0 0 10px rgba(160, 220, 255, 0.85),
      0 0 32px rgba(80, 200, 255, 0.6),
      0 0 76px rgba(40, 170, 255, 0.4);
  }
}

/* ─── meta footer (build / eta) ─────────────────────────────────── */

.asterrvn-soon-gate__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  color: #777;
}

.asterrvn-soon-gate__meta-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.asterrvn-soon-gate__meta-key {
  color: #5e5e5e;
  min-width: 56px;
}

.asterrvn-soon-gate__meta-sep {
  color: #3a3a3a;
}

.asterrvn-soon-gate__meta-val {
  color: #d8d8d8;
}

/* ─── accept fade-out on successful unlock ──────────────────────── */

.asterrvn-soon-gate__window--accept {
  animation:
    asterrvn-soon-gate-in 220ms ease-out both,
    asterrvn-soon-gate-accept 420ms ease-out 80ms forwards;
}

@keyframes asterrvn-soon-gate-accept {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
  60% {
    opacity: 1;
    filter: brightness(1.08);
  }
  100% {
    opacity: 0;
    transform: translateY(-3px);
    filter: brightness(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .asterrvn-soon-gate__window,
  .asterrvn-soon-gate__log-row,
  .asterrvn-soon-gate__window--accept {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .asterrvn-soon-gate__headline {
    animation: none !important;
    color: #b8dcff !important;
  }
}

@media (max-width: 560px) {
  .asterrvn-soon-gate__headline {
    font-size: 56px;
    letter-spacing: 0.16em;
    padding-left: 0.16em;
  }
}