/* ══════════════════════════════════════════
   COMPONENTS — Light theme
   css/components.css
══════════════════════════════════════════ */

/* ── Label ── */
.label {
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.label::before {
  content: '';
  display: block; width: 20px; height: 1.5px;
  background: var(--blue); flex-shrink: 0;
}
.label::after {
  content: attr(data-index);
  font-size: 9px; color: var(--t3);
  margin-left: auto;
}

/* ── Headings ── */
h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 10vw, 148px);
  line-height: 0.9; letter-spacing: 0.01em; color: var(--t1);
}
h1 .ruled {
  display: block;
  color: var(--blue);
}
h1 .ghost {
  display: block;
  -webkit-text-stroke: 1.5px var(--blue-dim);
  -webkit-text-fill-color: transparent; color: transparent;
}

h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95; letter-spacing: 0.01em; color: var(--t1);
}
h2 .acc { color: var(--blue); }

h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 600; letter-spacing: -0.01em; color: var(--t1); margin-bottom: 16px;
}

.body { font-size: 15px; line-height: 1.8; color: var(--t2); max-width: 500px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--blue);
  border: none; padding: 14px 32px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .22s, box-shadow .22s, background .22s;
  text-decoration: none;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.btn:hover { background: var(--blue-hi); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(26,127,232,0.35); }
.btn span { position: relative; z-index: 1; }

.btn-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t2); background: none;
  border: 1px solid var(--blue-line); padding: 13px 30px; cursor: pointer;
  transition: color .22s, border-color .22s, background .22s; text-decoration: none;
}
.btn-line:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-faint); }

/* ── Tags ── */
.tag {
  font-family: 'Space Mono', monospace; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t3); border: 1px solid var(--blue-dim);
  padding: 4px 10px; background: var(--bg0);
}
.tag.hi { color: var(--blue-hi); border-color: var(--blue-line); background: var(--blue-faint); }

/* ── Available ── */
.avail {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  color: var(--blue-hi); border: 1px solid var(--blue-line);
  padding: 6px 14px; margin-bottom: 28px; background: var(--blue-faint);
}
.avail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(26,127,232,.5); }
  50%      { opacity: .6; box-shadow: 0 0 0 6px rgba(26,127,232,0); }
}

/* ── Tick corners ── */
.ticked { position: relative; }
.ticked::before, .ticked::after,
.ticked > .tick-b-l, .ticked > .tick-b-r {
  content: ''; position: absolute; width: 16px; height: 16px;
  border-color: var(--tick); border-style: solid;
}
.ticked::before  { top:-1px;    left:-1px;  border-width:1px 0 0 1px; }
.ticked::after   { top:-1px;    right:-1px; border-width:1px 1px 0 0; }
.ticked>.tick-b-l{ bottom:-1px; left:-1px;  border-width:0 0 1px 1px; }
.ticked>.tick-b-r{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

/* ── Scroll reveal ── */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .1s; }
[data-reveal][data-d="2"] { transition-delay: .2s; }
[data-reveal][data-d="3"] { transition-delay: .3s; }
[data-reveal][data-d="4"] { transition-delay: .4s; }

/* ── Keyframes ── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes scanLine { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} }