/* ============================================================
   halfbuilt · liminal layer
   Threshold transitions, receding grid depth, fluorescent hum.
   Self-contained: defines its own --lim-* vars so it works on
   both hb-token pages and legacy pages.
   ============================================================ */

:root {
  --lim-amber:       #FF9E2C;
  --lim-line:        rgba(255, 255, 255, 0.04);
  --lim-line-strong: rgba(255, 255, 255, 0.07);
  --lim-floor-line:  rgba(255, 158, 44, 0.16);
  --lim-unit:        32px;
  --lim-sub:         8px;
}

/* ── 1. Liminal grid — spacious blueprint grid (matches /explore) ─ */
.lim-grid {
  background-color: var(--bg, #0B0C0E);
  background-image:
    linear-gradient(var(--grid-line-strong, rgba(255,255,255,0.065)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong, rgba(255,255,255,0.065)) 1px, transparent 1px),
    linear-gradient(var(--grid-line, rgba(255,255,255,0.035)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line, rgba(255,255,255,0.035)) 1px, transparent 1px);
  background-size:
    200px 200px,
    200px 200px,
    40px 40px,
    40px 40px;
}

/* ── 2. Depth — grid floor receding toward a vanishing point ─ */
.lim-floor { position: relative; overflow: hidden; }
.lim-floor::after {
  content: "";
  position: absolute;
  left: -20%; right: -20%; bottom: -1px;
  height: 52%;
  background-image:
    linear-gradient(var(--lim-floor-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lim-floor-line) 1px, transparent 1px);
  background-size: var(--lim-unit) var(--lim-unit);
  transform: perspective(380px) rotateX(60deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent 92%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent 92%);
  pointer-events: none;
}
.lim-floor > * { position: relative; z-index: 1; }

/* ── 3. Threshold — bare grid first, content pours in ─────── */
@media (prefers-reduced-motion: no-preference) {
  body > :not(script):not(style):not(#root),
  #root > * {
    animation: lim-threshold 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  body > :nth-child(1):not(#root), #root > :nth-child(1) { animation-delay: 0.10s; }
  body > :nth-child(2):not(#root), #root > :nth-child(2) { animation-delay: 0.17s; }
  body > :nth-child(3):not(#root), #root > :nth-child(3) { animation-delay: 0.24s; }
  body > :nth-child(4):not(#root), #root > :nth-child(4) { animation-delay: 0.31s; }
  body > :nth-child(5):not(#root), #root > :nth-child(5) { animation-delay: 0.38s; }
  body > :nth-child(n+6):not(#root), #root > :nth-child(n+6) { animation-delay: 0.45s; }
}
@keyframes lim-threshold {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── 4. Fluorescent hum — the lights are on, mostly ───────── */
@media (prefers-reduced-motion: no-preference) {
  html.lim-hum .lim-flicker,
  html.lim-hum .sbadge,
  html.lim-hum .sbadge__dot,
  html.lim-hum .edit-chip,
  html.lim-hum .hdr__chip,
  html.lim-hum .meter__fill {
    animation: lim-hum 8s linear infinite;
  }
  /* desync so the room doesn't blink in unison */
  html.lim-hum .sbadge        { animation-duration: 9.3s;  animation-delay: 1.2s; }
  html.lim-hum .meter__fill   { animation-duration: 11.7s; animation-delay: 2.6s; }
  html.lim-hum .lim-flicker   { animation-duration: 7.1s;  animation-delay: 0.4s; }
  /* longer-untouched rooms hum worse */
  html.lim-hum .lim-flicker--deep { animation-duration: 4.8s; animation-delay: 0.9s; }
}
@keyframes lim-hum {
  0%, 100% { opacity: 1; filter: none; }
  3.0%  { opacity: 0.78; }
  3.5%  { opacity: 1; }
  4.0%  { opacity: 0.88; filter: brightness(1.18); }
  4.5%  { opacity: 1; filter: none; }
  37.0% { opacity: 1; }
  37.3% { opacity: 0.84; }
  37.8% { opacity: 1; }
  70.0% { opacity: 1; }
  70.3% { opacity: 0.9; filter: brightness(1.12); }
  70.9% { opacity: 1; filter: none; }
}