/* ============ hero — full-bleed video stage, premium ============ */
.hero {
position: relative;
background: var(--ink);
min-height: 100svh;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* full-bleed looping video background */
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background: var(--ink);
}
.hero-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
}

.hero-inner {
position: relative;
z-index: 2;
flex: 1;
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: clamp(18px, 4vh, 44px) clamp(16px, 4vw, 32px) clamp(36px, 6vh, 64px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: clamp(18px, 3vh, 30px);
}

/* ---- in-hero top bar (minimal nav over the shader) ---- */
.hero-topbar {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: clamp(16px, 2.4vw, 26px) clamp(18px, 3.4vw, 40px);
}
.hero-brand {
text-decoration: none;
flex-shrink: 0;
transition: transform 0.14s ease;
}
.hero-brand:hover { transform: translateY(-1px); }

/* white pill — SVG mask cuts real holes in the letters (video shows through) */
.brand-knockout {
display: inline-block;
line-height: 0;
vertical-align: middle;
}
.brand-knockout-svg {
display: block;
width: auto;
height: clamp(40px, 4.8vw, 50px);
}
.brand-knockout-svg > rect[mask] {
fill: #fff;
}

.hero-topnav {
display: flex;
align-items: center;
gap: clamp(4px, 1vw, 10px);
padding: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
}
.hero-topnav a {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--ink);
text-decoration: none;
padding: 8px 16px;
border-radius: 999px;
transition: background 0.16s ease, color 0.16s ease;
}
.hero-topnav a:hover { color: var(--el); background: rgba(255, 255, 255, 0.6); }

.hero-topcta {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.htb-ghost {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--ink);
text-decoration: none;
padding: 10px 16px;
border-radius: 999px;
transition: color 0.16s ease, background 0.16s ease;
}
.htb-ghost:hover { color: var(--el); background: rgba(255, 255, 255, 0.5); }
.htb-signin {
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--ink);
background: #fff;
border: none;
border-radius: 999px;
padding: 11px 22px;
cursor: pointer;
box-shadow: 0 8px 24px rgba(17, 18, 26, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.htb-signin:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17, 18, 26, 0.3); }

/* signed-in pill in the hero bar (avatar + handle, links to profile) */
#hero-auth { display: inline-flex; align-items: center; }
.htb-user {
font-family: var(--font-body);
font-weight: 800;
font-size: 14px;
color: var(--ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border-radius: 999px;
padding: 5px 16px 5px 5px;
box-shadow: 0 8px 24px rgba(17, 18, 26, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.htb-user:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17, 18, 26, 0.28); }
.htb-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
flex: none;
display: grid;
place-items: center;
background: var(--el);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
}
.htb-user-handle { white-space: nowrap; }

/* search field in the always-visible hero bar */
.hero-search { flex-shrink: 1; min-width: 0; }
.hero-search input { width: clamp(120px, 13vw, 180px); }

@media (max-width: 860px) {
.hero-topnav { display: none; }
.htb-ghost { display: none; }
.hero-search { display: none; }
}

/* ---- head: headline aligned to prompt box width ---- */
.hero-head {
width: 100%;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0 clamp(14px, 2.2vw, 20px);
box-sizing: border-box;
}

/* ---- hero prompt card (quiet white shell; prompt bar stays liquid glass) ---- */
.hero-glass {
position: relative;
width: 100%;
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(10px, 2vw, 14px);
padding: clamp(14px, 2.2vw, 20px);
border-radius: 28px;
background: #fff;
border: 1px solid rgba(26, 26, 46, 0.08);
box-shadow: 0 16px 48px rgba(17, 18, 26, 0.08);
overflow: visible;
isolation: isolate;
}

/* light text + glassy controls over the vibrant shader */
.hero-glass .hero-eyebrow {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-glass .he-dot { background: #fff; }
.hero-glass .hero-sub {
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 14px rgba(17, 18, 26, 0.4);
}

/* prompt bar — liquid glass capsule */
.hero-glass .pbar {
background: rgba(17, 18, 26, 0.38);
border: 2px solid var(--el);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 0 0 3px rgba(43, 107, 255, 0.28),
0 12px 34px rgba(17, 18, 26, 0.14);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
}
.hero-glass .pbar:focus-within {
border-color: var(--el);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 0 0 4px rgba(43, 107, 255, 0.42),
0 12px 34px rgba(17, 18, 26, 0.14);
}
.hero-glass #prompt-input { color: #fff; }
.hero-glass #prompt-input::placeholder { color: rgba(255, 255, 255, 0.58); }

/* clear frosted pill — matches footer version-chip / slop.game wordmark family */
.hero-glass .gen-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(17, 18, 26, 0.1);
color: var(--ink);
padding: 11px 22px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: background 0.14s ease, box-shadow 0.14s ease;
}
.hero-glass .gen-btn:hover {
background: rgba(255, 255, 255, 0.92);
transform: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 4px 14px rgba(17, 18, 26, 0.12);
}
.hero-glass .gen-btn:active {
transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.hero-glass .gen-btn.done {
background: var(--y);
color: var(--ink);
border-color: rgba(17, 18, 26, 0.12);
}

.hero-glass .prompt-kbd {
color: var(--soft);
background: var(--wh);
border-color: var(--line);
}

@media (max-width: 600px) {
.hero-glass { border-radius: 28px; padding: 22px 16px; }
}

/* ---- eyebrow ---- */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft);
background: var(--wh);
border: 2px solid var(--ink);
border-radius: 999px;
padding: 7px 15px;
box-shadow: var(--soft1);
margin-bottom: 6px;
}
.he-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--el);
animation: hePulse 1.8s ease-out infinite;
}
@keyframes hePulse {
0% { box-shadow: 0 0 0 0 rgba(43,107,255,.55); }
100% { box-shadow: 0 0 0 9px rgba(43,107,255,0); }
}
@media (prefers-reduced-motion: reduce) { .he-dot { animation: none; } }

/* slogan = main hero headline (white pill, video through letter cut-outs) */
.hero-slogan {
margin: 0;
width: 100%;
font-size: inherit;
line-height: 0;
}

.hero-slogan-knockout {
display: block;
width: 100%;
line-height: 0;
}

.hero-slogan-knockout-svg {
display: block;
width: 100%;
height: auto;
}

.hero-sub {
max-width: 48ch;
margin: 12px auto 0;
font-family: var(--font-display);
font-size: clamp(16px, 2vw, 19px);
font-weight: 800;
color: #fff;
line-height: 1.55;
text-shadow:
0 2px 24px rgba(17, 18, 26, 0.62),
0 1px 5px rgba(17, 18, 26, 0.48);
}

/* ---- prompt command bar (premium pill) ---- */
.hero-console {
width: 100%;
max-width: 760px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

/* ---- prompt shell ---- */
.prompt-shell {
position: relative;
width: 100%;
border-radius: 22px;
}

.prompt-kbd {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: 8px;
padding: 6px 9px;
margin-left: 4px;
}
@media (max-width: 600px) { .prompt-kbd { display: none; } }

.pbar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
background: rgba(255, 255, 255, 0.1);
border: 2px solid var(--el);
border-radius: 22px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 3px rgba(43, 107, 255, 0.22);
padding: 14px 14px 12px;
text-align: left;
transition: box-shadow .2s ease, border-color .2s ease;
}
.pbar:focus-within {
border-color: var(--el);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 4px rgba(43, 107, 255, 0.35);
}
.pbar.shake { animation: shake .4s ease; }

#prompt-input {
flex: 1;
min-width: 0;
width: 100%;
border: none;
outline: none;
resize: none;
background: none;
font-family: var(--font-body);
font-weight: 600;
font-size: clamp(16px, 1.9vw, 18px);
line-height: 1.5;
color: var(--ink);
padding: 4px 6px 2px;
min-height: 44px;
max-height: 168px;
text-align: left;
}
#prompt-input::placeholder { color: #9A9AAE; }

.pbar-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
align-self: flex-end;
padding-bottom: 1px;
}

/* compact "+" model picker */
.model-switch--compact {
position: relative;
display: inline-flex;
}
.model-switch--compact::after { display: none; }

.model-pick--sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.model-more-btn {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 2px solid var(--ink);
border-radius: 50%;
background: #F3F4FB;
color: var(--ink);
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.model-more-btn:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 2px 2px 0 var(--ink);
}
.model-switch--compact.open .model-more-btn {
background: var(--ink);
color: var(--y);
}

.model-menu {
position: absolute;
right: 0;
bottom: calc(100% + 8px);
z-index: 20;
min-width: min(280px, 88vw);
max-height: min(320px, 50vh);
overflow-y: auto;
padding: 8px;
border: 2px solid var(--ink);
border-radius: 14px;
background: var(--wh);
box-shadow: 4px 4px 0 var(--ink);
}

.model-menu-label {
margin: 0 0 6px;
padding: 2px 8px 4px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--soft);
}

.model-menu-list {
display: flex;
flex-direction: column;
gap: 4px;
}

.model-menu-opt {
display: flex;
align-items: flex-start;
gap: 6px;
width: 100%;
text-align: left;
padding: 8px 10px;
border: 1.5px solid transparent;
border-radius: 10px;
background: transparent;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
line-height: 1.35;
color: var(--ink);
cursor: pointer;
transition: background .12s ease, border-color .12s ease;
}
.model-menu-opt:hover {
background: #F3F4FB;
border-color: var(--line);
}
.model-menu-opt.active {
background: var(--ink);
color: var(--y);
border-color: var(--ink);
}
.model-menu-opt-label { flex: 1; min-width: 0; }
.model-menu-lock { flex-shrink: 0; font-size: 11px; line-height: 1.35; }

.hero-glass .model-more-btn {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(255, 255, 255, 0.45);
color: var(--ink);
}
.hero-glass .model-more-btn:hover { background: #fff; }
.hero-glass .model-switch--compact.open .model-more-btn {
background: var(--y);
color: var(--ink);
border-color: var(--y);
}

.gen-btn {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
background: var(--mt);
color: var(--ink);
border: 2px solid var(--ink);
border-radius: 999px;
padding: 11px 24px;
box-shadow: 3px 3px 0 var(--ink);
transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
white-space: nowrap;
}
.gen-btn:hover { background: #62ffc0; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.gen-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.gen-btn:disabled { cursor: wait; opacity: .85; }
.gen-btn.done { background: var(--y); color: var(--ink); }

/* hint chips */
.hint-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.hint-lead {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
color: var(--soft);
opacity: .65;
}
.hint-chip {
font-family: var(--font-body);
font-weight: 800;
font-size: 13px;
color: var(--ink);
background: var(--wh);
border: 2px solid var(--ink);
border-radius: 999px;
padding: 7px 14px;
white-space: nowrap;
box-shadow: var(--soft1);
transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
}
.hint-chip:hover { transform: translateY(-2px); background: var(--el); color: #fff; box-shadow: 3px 3px 0 var(--ink); }

.hero-studio-cta {
margin: 2px 0 0;
width: 100%;
text-align: center;
}
.hero-studio-cta a {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
color: var(--soft);
text-decoration: none;
transition: color .15s;
}
.hero-studio-cta a b { color: var(--el); font-weight: 700; }
.hero-studio-cta a:hover { color: var(--ink); }

/* ---- creator rewards promo / advertisement ---- */
.hero-promo {
width: 100%;
max-width: min(820px, calc(100% - 32px));
margin: clamp(28px, 4vw, 40px) auto 0;
border: var(--bw) solid var(--ink);
border-radius: calc(var(--r) + 4px);
box-shadow: var(--shb);
overflow: hidden;
text-align: left;
}

.hp-prize {
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 22px);
flex-wrap: wrap;
padding: clamp(16px, 2.2vw, 20px) clamp(18px, 2.4vw, 24px);
background: linear-gradient(115deg, #fff4a8 0%, var(--y) 46%, #ffcf3a 100%);
}

.hp-badge {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
letter-spacing: 0.03em;
color: #fff;
background: var(--ink);
border-radius: 999px;
padding: 7px 14px;
white-space: nowrap;
}
.hp-badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mt);
box-shadow: 0 0 0 0 rgba(61, 255, 176, 0.7);
animation: hpPulse 1.6s ease-out infinite;
}
@keyframes hpPulse {
0% { box-shadow: 0 0 0 0 rgba(61, 255, 176, 0.7); }
100% { box-shadow: 0 0 0 8px rgba(61, 255, 176, 0); }
}

.hp-copy { flex: 1; min-width: 200px; }
.hp-head {
margin: 0;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
font-size: clamp(20px, 3.2vw, 30px);
line-height: 1.04;
letter-spacing: -0.01em;
color: var(--ink);
}
.hp-amount { color: var(--pk); }
.hp-sub {
margin: 5px 0 0;
font-size: clamp(13px, 1.5vw, 14.5px);
font-weight: 700;
line-height: 1.4;
color: var(--ink);
opacity: 0.8;
}

.hp-cta {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(14px, 1.6vw, 16px);
color: #fff;
background: var(--pk);
border: 2.5px solid var(--ink);
border-radius: 999px;
padding: 12px 22px;
box-shadow: 3px 3px 0 var(--ink);
white-space: nowrap;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hp-cta:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.hp-partner {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px clamp(18px, 2.4vw, 24px);
background: var(--ink);
}
.hp-partner-tag {
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
background: var(--mt);
border-radius: 999px;
padding: 4px 10px;
white-space: nowrap;
}
.hp-partner p {
flex: 1;
min-width: 220px;
margin: 0;
font-size: clamp(12px, 1.4vw, 13.5px);
font-weight: 600;
line-height: 1.5;
color: #c7c7df;
}
.hp-partner p b { color: #fff; font-weight: 800; }

@media (max-width: 560px) {
.hp-prize { gap: 12px; }
.hp-cta { width: 100%; text-align: center; }
}

/* ============ responsive ============ */
@media (max-width: 600px) {
.hero { padding: 22px 14px 36px; }
.hero-sub { font-size: 15px; font-weight: 800; }

.pbar {
padding: 12px;
border-radius: 18px;
}
#prompt-input { min-height: 40px; font-size: 16px; }
.pbar-actions { align-self: flex-end; flex-direction: row; gap: 8px; }
.gen-btn { flex: 1; min-width: 0; }

.hint-chip { font-size: 12px; }
}

@media (max-width: 380px) {
.hint-lead { display: none; }
}