/* ============================================================
   BULLTRAFFIC — Components
   Glassmorphism · Yellow Glow · Rich Interactions
   ============================================================ */

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary,.btn-ghost,.btn-phantom,.btn-gold {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; border:none; border-radius:var(--r);
  transition:all var(--t); user-select:none; white-space:nowrap; position:relative; overflow:hidden;
}
.btn-sm  { padding:8px 16px; font-size:13px; }
.btn-md  { padding:11px 22px; }
.btn-lg  { padding:14px 28px; font-size:15px; }
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-phantom:focus-visible,.btn-gold:focus-visible {
  outline:2px solid var(--y); outline-offset:3px;
}

/* PRIMARY — yellow, black text, glow on hover */
.btn-primary {
  background: var(--y);
  color: #000;
  padding: 11px 22px;
  font-weight: 700;
  box-shadow: 0 0 0 transparent;
}
.btn-primary::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 60%);
  opacity:0;transition:opacity var(--t-fast);
}
.btn-primary:hover {
  background: var(--y-light);
  transform: translateY(-2px);
  box-shadow: 0 0 32px var(--y-25), 0 4px 16px rgba(0,0,0,0.3);
}
.btn-primary:hover::before { opacity:1; }
.btn-primary:active { transform:none; box-shadow:0 0 16px var(--y-25); }

/* GHOST — glass border, yellow glow on hover */
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--t2);
  border: 1px solid var(--b2);
  padding: 10px 22px;
  backdrop-filter: blur(10px);
}
.btn-ghost::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(245,197,24,0.08) 0%,transparent 100%);
  opacity:0;transition:opacity var(--t);
}
.btn-ghost:hover {
  color: var(--t1);
  border-color: var(--by);
  box-shadow: 0 0 20px var(--y-10), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-ghost:hover::before { opacity:1; }
.btn-ghost span,.btn-ghost svg { position:relative; z-index:1; }

/* PHANTOM — text style */
.btn-phantom {
  background:transparent; color:var(--t2); padding:10px 16px;
  border:1px solid transparent;
}
.btn-phantom:hover { color:var(--t1); border-color:var(--b1); }

/* GOLD = PRIMARY */
.btn-gold {
  background:var(--y); color:#000; padding:11px 22px; font-weight:700;
}
.btn-gold:hover {
  background:var(--y-light);
  transform:translateY(-2px);
  box-shadow:0 0 32px var(--y-25), 0 4px 16px rgba(0,0,0,0.3);
}

/* ================================================================
   CARDS — GLASSMORPHISM BASE
   ================================================================ */

/* NEO */
.card-neo {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  padding: clamp(20px,3vw,32px);
  transition: border-color var(--t), transform var(--t-med), box-shadow var(--t);
  position: relative;
  overflow: hidden;
}
.card-neo::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
}
.card-neo::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% -20%, var(--y-5) 0%, transparent 60%);
  opacity:0; transition:opacity var(--t);
}
.card-neo:hover {
  border-color: var(--by);
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 40px var(--y-5);
}
.card-neo:hover::after { opacity:1; }

/* CORNER */
.card-corner {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--b1);
  border-radius: var(--r-xl);
  padding: clamp(20px,3vw,32px);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t-med), box-shadow var(--t);
}
.card-corner::before,.card-corner::after,
.card-corner .corner-br,.card-corner .corner-bl { display:none; }
/* Yellow top-glow line on hover */
.card-corner > .card-glow-top {
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--y),transparent);
  opacity:0; transition:opacity var(--t);
}
.card-corner:hover {
  border-color:var(--by);
  transform:translateY(-3px);
  box-shadow:0 8px 40px rgba(0,0,0,0.4),0 0 40px var(--y-5);
}
.card-corner:hover > .card-glow-top { opacity:1; }

/* SLASH — same as corner */
.card-slash {
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--b1);
  border-radius:var(--r-xl);
  padding:clamp(20px,3vw,28px);
  position:relative;
  overflow:hidden;
  transition:border-color var(--t),transform var(--t-med),box-shadow var(--t);
}
.card-slash::before { display:none; }
.card-slash:hover { border-color:var(--by); transform:translateY(-3px); box-shadow:0 8px 40px rgba(0,0,0,0.4); }

/* TERMINAL */
.card-terminal {
  background:rgba(8,8,8,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--b2);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.terminal-header {
  display:flex;align-items:center;gap:6px;
  padding:10px 16px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid var(--b1);
}
.terminal-dot{width:10px;height:10px;border-radius:50%}
.terminal-dot.red{background:#ff5f57}.terminal-dot.yellow{background:#febc2e}.terminal-dot.green{background:#28c840}
.terminal-title { font-family:var(--mono);font-size:11px;color:var(--t4);margin-left:6px; }
.terminal-body { padding:20px;font-family:var(--mono);font-size:13px;line-height:1.75; }
.terminal-prompt { color:var(--y); }
.terminal-output { color:var(--t2); }
.terminal-value { color:var(--y); }
.terminal-comment { color:var(--t4); }

/* ================================================================
   FORMS
   ================================================================ */
.form-terminal {
  background:rgba(8,8,8,0.7);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--b2);
  border-radius:var(--r-xl);
  overflow:hidden;
}
.form-terminal-header { padding:12px 20px;background:rgba(255,255,255,0.03);border-bottom:1px solid var(--b1); }
.form-terminal-body { padding:clamp(24px,3vw,40px); }
.form-field { position:relative;margin-bottom:24px; }
.form-field-row {
  display:flex;align-items:baseline;gap:0;
  border-bottom:1px solid var(--b2);
  transition:border-color var(--t),box-shadow var(--t);
  padding-bottom:8px;
}
.form-field-row:focus-within {
  border-bottom-color:var(--y);
  box-shadow:0 1px 0 var(--y-25);
}
.form-prompt { font-family:var(--mono);font-size:13px;color:var(--y);flex-shrink:0;margin-right:8px;padding-top:2px;text-shadow:0 0 10px var(--y-40); }
.form-label { font-family:var(--mono);font-size:11px;color:var(--t4);flex-shrink:0;margin-right:12px;padding-top:2px;letter-spacing:0.06em; }
.form-input,.form-textarea,.form-select { flex:1;background:transparent;border:none;outline:none;font-family:var(--mono);font-size:13px;color:var(--t1);padding:0;resize:none;width:100%; }
.form-input::placeholder,.form-textarea::placeholder { color:var(--t4); }
.form-select option { background:var(--bg-solid);color:var(--t1); }
.form-textarea { min-height:80px;display:block; }
.form-range-wrap { display:flex;flex-direction:column;gap:8px; }
.form-range-label { display:flex;justify-content:space-between;align-items:center; }
.range-value { font-family:var(--mono);font-size:12px;color:var(--y);text-shadow:0 0 8px var(--y-40); }
input[type="range"].form-range { -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--b2);border-radius:1px;outline:none; }
input[type="range"].form-range::-webkit-slider-thumb { -webkit-appearance:none;width:16px;height:16px;background:var(--y);border-radius:50%;cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 10px var(--y-40); }
input[type="range"].form-range::-moz-range-thumb { width:14px;height:14px;background:var(--y);border-radius:50%;cursor:pointer;border:none; }
.form-dropzone {
  border:1px dashed var(--b2);border-radius:var(--r-lg);padding:24px;text-align:center;cursor:pointer;
  transition:all var(--t);background:rgba(255,255,255,0.02);
}
.form-dropzone:hover,.form-dropzone.is-dragover {
  border-color:var(--y);background:var(--y-5);
  box-shadow:0 0 24px var(--y-10);
}
.form-dropzone-icon { color:var(--t4);margin:0 auto 8px; }
.form-dropzone-text { font-family:var(--mono);font-size:11px;color:var(--t4);letter-spacing:0.06em; }
.btn-submit {
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;
  background:var(--y);color:#000;
  font-family:var(--sans);font-size:14px;font-weight:700;
  border:none;border-radius:var(--r);cursor:pointer;
  transition:all var(--t);
}
.btn-submit:hover:not(:disabled) { background:var(--y-light);transform:translateY(-2px);box-shadow:0 0 32px var(--y-25); }
.btn-submit:disabled { opacity:0.5;cursor:not-allowed; }
.btn-submit.is-loading { background:rgba(255,255,255,0.05);border:1px solid var(--b2);color:var(--t2); }
.btn-submit.is-success { background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:var(--green); }
.btn-submit.is-error   { background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:var(--red); }

/* ================================================================
   SECTION NUMBER BG
   ================================================================ */
.section-number-bg { display:none; }