/* ======================================================================
   VIDEO BRIEF — full-bleed black "film slate" theme
   Palette   #0a0a0b bg · #141416 panel · #232326 border · #f2f0ea text
             #8c8c92 muted · #ffb020 accent (gate amber) · #ff3b3b rec red
   Type      Bebas Neue (display) / Inter (body) / JetBrains Mono (utility)
   Signature REC-dot timecode header + amber projector-gate progress rule
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

.vbf-wrap{
	--bg:#0a0a0b; --panel:#141416; --panel-hi:#1b1b1e; --border:#28282c;
	--text:#f2f0ea; --muted:#8c8c92; --accent:#ffb020; --accent-ink:#120b00;
	--rec:#ff3b3b; --radius:2px;
	position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
	width:100vw; background:var(--bg); color:var(--text);
	font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
	-webkit-font-smoothing:antialiased;
}
.vbf-wrap *,.vbf-wrap *::before,.vbf-wrap *::after{box-sizing:border-box}

/* subtle film-grain atmosphere */
.vbf-wrap::before{
	content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vbf-inner{max-width:840px;margin:0 auto;padding:0 24px 96px;position:relative}

/* ---------- top slate bar + timecode ---------- */
.vbf-progress{position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 78%,transparent);padding-top:36px;margin-bottom:56px}
.vbf-progress-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.vbf-brand-mark{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.vbf-brand-mark i{color:var(--accent);font-style:normal;margin:0 6px}
.vbf-timecode{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--text)}
.vbf-timecode b{color:var(--accent);font-weight:600}
.vbf-rec-dot{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 rgba(255,59,59,.6);animation:vbfPulse 1.8s infinite}
@keyframes vbfPulse{
	0%{box-shadow:0 0 0 0 rgba(255,59,59,.55)}
	70%{box-shadow:0 0 0 7px rgba(255,59,59,0)}
	100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}
}
.vbf-progress-bar{height:2px;background:var(--border);position:relative;overflow:hidden}
.vbf-progress-bar span{display:block;height:100%;background:var(--accent);transition:width .35s cubic-bezier(.65,0,.35,1)}
@media (prefers-reduced-motion:reduce){.vbf-rec-dot{animation:none}.vbf-progress-bar span{transition:none}}

/* ---------- steps ---------- */
.vbf-step{display:none}
.vbf-step.vbf-active{display:block;animation:vbfRise .4s cubic-bezier(.16,1,.3,1)}
@keyframes vbfRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.vbf-step h2{
	font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(34px,5vw,52px);
	letter-spacing:.01em;text-transform:uppercase;margin:0 0 6px;line-height:1;color:var(--text);
}
.vbf-step > h2::after{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-top:16px}
.vbf-step h3{
	font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--muted);margin:34px 0 14px;padding-top:26px;border-top:1px solid var(--border);
}
.vbf-sub{margin:16px 0 28px;color:var(--muted);font-size:15px;line-height:1.6;max-width:60ch}

/* ---------- text fields ---------- */
.vbf-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.vbf-full{grid-column:1/-1}
@media(max-width:640px){.vbf-grid{grid-template-columns:1fr}}

.vbf-field label{
	display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.vbf-req{color:var(--accent)}
.vbf-field input[type=text],.vbf-field input[type=url],.vbf-field textarea{
	width:100%;padding:11px 2px;background:transparent;border:none;border-bottom:1px solid var(--border);
	border-radius:0;font-size:15.5px;font-family:'Inter',sans-serif;color:var(--text);transition:border-color .2s;
}
.vbf-field textarea{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;resize:vertical;background:var(--panel)}
.vbf-field input::placeholder,.vbf-field textarea::placeholder{color:#5a5a60}
.vbf-field input:focus,.vbf-field textarea:focus{outline:none;border-color:var(--accent)}
.vbf-field input.vbf-error,.vbf-field textarea.vbf-error{border-color:var(--rec)}

/* ---------- uploads ---------- */
.vbf-uploads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:640px){.vbf-uploads{grid-template-columns:1fr}}
.vbf-dropzone{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;
	padding:16px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--panel);
	text-align:center;cursor:pointer;font-size:12.5px;color:var(--muted);transition:border-color .2s,background .2s;
}
.vbf-dropzone::before{content:"⤓";font-size:18px;color:var(--muted)}
.vbf-dropzone:hover,.vbf-dropzone.vbf-dragover{border-color:var(--accent);background:var(--panel-hi)}
.vbf-dropzone:hover::before{color:var(--accent)}
.vbf-dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.vbf-dropzone u{color:var(--accent);text-decoration:none}
.vbf-file-name{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;color:var(--text);word-break:break-all}

/* ---------- selectable cards ---------- */
.vbf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
@media(max-width:700px){.vbf-cards{grid-template-columns:1fr}}
.vbf-card{
	position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 18px;text-align:left;
	border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--radius);
	background:var(--panel);cursor:pointer;font-family:'Inter',sans-serif;font-size:14px;color:var(--text);
	transition:border-color .18s,background .18s,transform .18s;
}
.vbf-card b{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.vbf-card span{color:var(--muted);line-height:1.5;font-size:13.5px}
.vbf-card:hover{border-color:#3a3a40;background:var(--panel-hi);transform:translateY(-1px)}
.vbf-card.vbf-selected{border-color:var(--accent);border-left-color:var(--accent);background:var(--panel-hi)}
.vbf-card.vbf-selected::after{
	content:"✓";position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;
	background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;
	display:flex;align-items:center;justify-content:center;
}
.vbf-voices audio{width:100%;margin-top:4px;filter:invert(1) hue-rotate(180deg) brightness(1.05);border-radius:20px}

/* ---------- pill choices ---------- */
.vbf-pills{display:flex;flex-wrap:wrap;gap:8px}
.vbf-pills button{
	padding:9px 18px;border:1px solid var(--border);border-radius:99px;background:transparent;
	cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;
	text-transform:uppercase;color:var(--muted);transition:all .15s;
}
.vbf-pills button:hover{border-color:var(--accent);color:var(--text)}
.vbf-pills button.vbf-selected{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* ---------- nav ---------- */
.vbf-nav{display:flex;justify-content:space-between;align-items:center;margin-top:44px;gap:12px;padding-top:28px;border-top:1px solid var(--border)}
.vbf-nav button{
	padding:14px 30px;border-radius:99px;font-size:12.5px;font-weight:600;letter-spacing:.08em;
	text-transform:uppercase;cursor:pointer;font-family:'JetBrains Mono',monospace;
	transition:opacity .15s,background .15s,color .15s;
}
.vbf-back{background:transparent;border:1px solid var(--border);color:var(--text)}
.vbf-back:hover{border-color:var(--text)}
.vbf-next,.vbf-submit{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink)}
.vbf-next:hover,.vbf-submit:hover{opacity:.88}
.vbf-submit:disabled{opacity:.5;cursor:wait}

/* ---------- message ---------- */
.vbf-message{margin-top:24px;padding:15px 18px;border-radius:var(--radius);font-size:14.5px;font-family:'Inter',sans-serif}
.vbf-message.vbf-success{background:rgba(255,176,32,.08);color:var(--accent);border:1px solid rgba(255,176,32,.35)}
.vbf-message.vbf-fail{background:rgba(255,59,59,.08);color:#ff8080;border:1px solid rgba(255,59,59,.35)}

/* ---------- focus visibility for accessibility ---------- */
.vbf-wrap a:focus-visible,.vbf-wrap button:focus-visible,.vbf-wrap input:focus-visible,.vbf-wrap textarea:focus-visible{
	outline:2px solid var(--accent);outline-offset:2px;
}