/* DueHalo public build log. Builds on site.css. */

.bl-wrap { max-width: 900px; position: relative; }
.bl-wrap::before {
  content: ""; position: absolute; left: 50%; top: -120px; width: min(1000px, 150vw); height: 760px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(61, 214, 140, .12), transparent 70%); pointer-events: none; z-index: -1;
}
.bl-head h1 { font-size: clamp(40px, 6.4vw, 80px); max-width: 820px; }
.bl-stats { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.bl-stats > div { flex: 1 1 140px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--hair); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.bl-stats b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 44px; letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(90deg, var(--green), var(--teal-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bl-stats span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

.bl-section { margin-top: 96px; }
.bl-section h2 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -0.035em; }

.bl-timeline { list-style: none; margin: 26px 0 0; padding: 0; position: relative; }
.bl-timeline::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), var(--green) 20%, var(--amber) 60%, var(--coral)); opacity: .45; }
.bl-row { position: relative; display: grid; grid-template-columns: 24px 112px 1fr; gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.bl-dot { width: 24px; height: 24px; border-radius: 50%; background: #000; align-self: center;
  box-shadow: inset 0 0 0 2px var(--c), 0 0 14px -2px var(--c); display: grid; place-items: center; transition: transform .4s var(--spring); }
.bl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bl-row:hover .bl-dot { transform: scale(1.15); }
.bl-next .bl-dot::after { animation: bl-pulse 1.8s ease-in-out infinite; }
@keyframes bl-pulse { 50% { transform: scale(1.5); opacity: .5; } }
.bl-when { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.bl-ver { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--c); }
.bl-line { color: var(--text); font-size: 16.5px; line-height: 1.5; }
.bl-locked { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.bl-locked svg, .bl-post-more svg { width: 14px; height: 14px; flex: none; }

.bl-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }
.bl-post { display: flex; flex-direction: column; color: var(--text); text-decoration: none; transition: transform .45s var(--spring), border-color .3s; }
.bl-post:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--hair-2); }
.bl-post-meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.bl-post h3 { margin-top: 12px; font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
.bl-post p { flex: 1; }
.bl-post-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-2); }
.bl-note { margin: 18px 0 0; color: var(--text-3); font-size: 14px; }

.bl-final { text-align: center; padding: 56px 28px; }
.bl-final p { max-width: 520px; margin: 14px auto 0; }
.bl-final .btn { margin-top: 26px; }

.bl-tzs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.bl-tz { position: relative; padding: 24px 24px 26px; transition: transform .45s var(--spring), border-color .3s; }
.bl-tz:hover { transform: translateY(-4px); border-color: var(--hair-2); }
.bl-tz h3 { margin-top: 16px; font-size: 26px; letter-spacing: -0.03em; }
.bl-tz.is-soon h3 { background: linear-gradient(90deg, var(--text), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bl-tz p { margin-top: 8px; }
.bl-tz-lock { position: absolute; right: 20px; top: 22px; color: var(--text-3); }
.bl-tz-lock svg { width: 16px; height: 16px; }
.bl-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(245, 241, 230, .06); color: var(--text-3); }
.bl-chip.soon { background: rgba(217, 241, 84, .12); color: var(--lime); }
.bl-line .bl-locked { margin-left: 10px; vertical-align: 1px; }

@media (max-width: 700px) {
  .bl-tzs { grid-template-columns: 1fr; }
  .bl-row { grid-template-columns: 24px 1fr; row-gap: 4px; }
  .bl-ver { grid-column: 2; }
  .bl-line { grid-column: 2; }
  .bl-posts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bl-next .bl-dot::after { animation: none; } }