/* =============================================================
   bio.hybridvelocity.com — folha de estilo da página
   Tokens extraídos do :root do site da h|ve. Não invente cores aqui.
   Usada tanto pela página pública (index.html) quanto pelo preview
   da tela de configuração (admin.html), para que o que se vê no
   Founder OS seja exatamente o que vai ao ar.
   ============================================================= */

.hve-bio{
  /* ---- marca h|ve (verbatim do site) ---- */
  --ink:#0a0a0a;
  --muted:#8d8d8d;
  --subtle:#b6b6b6;
  --accent:#b15f2c;
  --bar:#ff6d04;
  --hero-from:#ecebe9;
  --hero-to:#c9c9c9;
  --r-card-sm:1.25rem;
  --r-pill:9999px;

  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Onest,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;

  --logo-src:url("logo-hve.png");

  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(168deg,var(--hero-from) 0%,#dedcd9 46%,var(--hero-to) 100%);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.hve-bio *{box-sizing:border-box}

/* ============ atmosfera atrás do vidro ============ */
.hve-bio .halo{position:absolute;border-radius:50%;filter:blur(52px);pointer-events:none;z-index:0}
.hve-bio .halo-a{
  width:270px;height:270px;top:-70px;right:-90px;
  background:radial-gradient(circle,rgba(255,109,4,.5),rgba(255,109,4,0) 70%);
  animation:hve-drift-a 19s ease-in-out infinite;
}
.hve-bio .halo-b{
  width:240px;height:240px;bottom:40px;left:-100px;
  background:radial-gradient(circle,rgba(177,95,44,.42),rgba(177,95,44,0) 70%);
  animation:hve-drift-b 23s ease-in-out infinite;
}
@keyframes hve-drift-a{50%{transform:translate(-40px,52px) scale(1.14)}}
@keyframes hve-drift-b{50%{transform:translate(46px,-38px) scale(1.1)}}

/* o wordmark que o vidro desfoca */
.hve-bio .watermark{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  left:50%;top:250px;transform:translateX(-50%);text-align:center;
}
.hve-bio .wm-main{
  font-size:150px;font-weight:900;letter-spacing:-.07em;line-height:.8;
  color:rgba(10,10,10,.075);
  display:flex;align-items:center;justify-content:center;
}
.hve-bio .wm-main i{font-style:normal;color:rgba(255,109,4,.2);padding:0 .04em}
.hve-bio .wm-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(10,10,10,.14);margin-top:14px;padding-left:.42em;
}

/* ============ superfície rolável ============ */
.hve-bio .bio{
  position:relative;z-index:1;
  height:100%;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
  display:flex;flex-direction:column;
  padding:0 18px 26px;
}
.hve-bio .bio::-webkit-scrollbar{display:none}

/* ============ header + logo morph ============ */
.hve-bio .bio-head{
  position:sticky;top:0;z-index:5;
  margin:0 -18px;padding:14px 18px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(240,239,236,0);
  transition:background .32s,box-shadow .32s,backdrop-filter .32s;
}
.hve-bio .bio-head.stuck{
  background:rgba(243,242,240,.72);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 rgba(10,10,10,.06),0 8px 22px -14px rgba(10,10,10,.3);
}

/* sprite 1454×257 fatiado em 5 — mesma mecânica do site */
.hve-bio .logo-morph{
  --lm-h:2.25rem;
  --lm-k:calc(var(--lm-h) / 257);
  height:var(--lm-h);
  display:inline-flex;align-items:center;flex:0 0 auto;
}
.hve-bio .logo-morph i{
  display:block;flex:0 0 auto;height:var(--lm-h);
  background-image:var(--logo-src);
  background-repeat:no-repeat;
  background-size:calc(1454 * var(--lm-k)) var(--lm-h);
  transition:width .55s cubic-bezier(.22,1,.36,1),
             margin .55s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.22,1,.36,1),
             opacity .3s;
}
.hve-bio .logo-morph .lm-h     {width:calc(95  * var(--lm-k));background-position:calc(-50  * var(--lm-k)) 0}
.hve-bio .logo-morph .lm-ybrid {width:calc(439 * var(--lm-k));background-position:calc(-151 * var(--lm-k)) 0}
.hve-bio .logo-morph .lm-bar   {width:calc(32  * var(--lm-k));background-position:calc(-653 * var(--lm-k)) 0;margin-inline:calc(64 * var(--lm-k))}
.hve-bio .logo-morph .lm-ve    {width:calc(204 * var(--lm-k));background-position:calc(-746 * var(--lm-k)) 0}
.hve-bio .logo-morph .lm-locity{width:calc(473 * var(--lm-k));background-position:calc(-962 * var(--lm-k)) 0}

.hve-bio .logo-morph.is-compact .lm-ybrid,
.hve-bio .logo-morph.is-compact .lm-locity{width:0;opacity:0}
.hve-bio .logo-morph.is-compact .lm-bar{margin-inline:calc(23 * var(--lm-k));transform:scaleY(4.5)}

.hve-bio .head-pill{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent);
  display:flex;align-items:center;gap:6px;
  padding:6px 11px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-pill);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  white-space:nowrap;
}
.hve-bio .dot{width:5px;height:5px;border-radius:50%;background:var(--bar);flex:0 0 auto}
.hve-bio .dot.live{animation:hve-pulse 2.4s ease-in-out infinite}
@keyframes hve-pulse{50%{opacity:.35;transform:scale(.8)}}

/* ============ identidade ============ */
.hve-bio .bio-hero{padding:16px 4px 18px}
.hve-bio .hero-eyebrow{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--accent);
  display:flex;align-items:center;gap:7px;margin:0 0 10px;
}
.hve-bio h1{
  font-size:25px;font-weight:900;line-height:1.08;letter-spacing:-.038em;
  margin:0 0 9px;text-wrap:balance;
}
.hve-bio h1 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--accent);letter-spacing:-.01em;
}
.hve-bio .hero-sub{
  font-size:12.5px;line-height:1.45;color:#4a4744;margin:0;max-width:34ch;
}

/* ============ cartões de vidro ============ */
.hve-bio .links{display:flex;flex-direction:column;gap:9px;padding:4px 0 0}

.hve-bio .link{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 20px;
  align-items:center;gap:13px;
  padding:13px 15px;
  text-decoration:none;color:inherit;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--r-card-sm);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 2px rgba(10,10,10,.04),0 10px 26px -18px rgba(10,10,10,.4);
  transition:transform .26s cubic-bezier(.22,1,.36,1),background .26s,border-color .26s,box-shadow .26s;
  overflow:hidden;
  max-height:78px;opacity:1;
}
.hve-bio .link:hover,.hve-bio .link:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 2px 4px rgba(10,10,10,.05),0 18px 34px -20px rgba(10,10,10,.5);
}
.hve-bio .link:focus-visible{outline:2px solid var(--bar);outline-offset:2px}
.hve-bio .link:active{transform:translateY(0)}

/* o primário é o único que gasta a cor da marca */
.hve-bio .link.primary{
  background:linear-gradient(135deg,rgba(255,109,4,.93),rgba(207,128,71,.9));
  border-color:rgba(255,140,60,.6);
  color:#fff;
  box-shadow:0 2px 4px rgba(151,80,31,.2),0 14px 30px -16px rgba(177,95,44,.75);
}
.hve-bio .link.primary:hover,.hve-bio .link.primary:focus-visible{
  background:linear-gradient(135deg,rgba(255,124,26,.97),rgba(214,137,82,.95));
  border-color:rgba(255,160,90,.75);
  box-shadow:0 3px 6px rgba(151,80,31,.24),0 22px 40px -18px rgba(177,95,44,.85);
}

.hve-bio .l-ico{
  width:38px;height:38px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:11px;
  background:rgba(10,10,10,.045);color:var(--ink);
}
.hve-bio .l-ico svg{width:18px;height:18px;display:block}
.hve-bio .link.primary .l-ico{background:rgba(255,255,255,.2);color:#fff}

.hve-bio .l-txt{min-width:0}
.hve-bio .l-title{
  display:block;
  font-size:14.5px;font-weight:700;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hve-bio .l-sub{
  display:block;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;
}
.hve-bio .link.primary .l-sub{color:rgba(255,255,255,.82)}

.hve-bio .l-arrow{color:var(--subtle);display:grid;place-items:center;transition:transform .26s,color .26s}
.hve-bio .l-arrow svg{width:16px;height:16px;display:block}
.hve-bio .link:hover .l-arrow{transform:translateX(3px);color:var(--accent)}
.hve-bio .link.primary .l-arrow{color:rgba(255,255,255,.85)}
.hve-bio .link.primary:hover .l-arrow{color:#fff}

/* saída quando o campo é esvaziado (usado no preview do admin) */
.hve-bio .link.is-off{
  max-height:0;opacity:0;
  margin-top:-9px;padding-top:0;padding-bottom:0;border-width:0;
  pointer-events:none;
  transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .2s,padding .34s,margin .34s,border-width .34s;
}

/* ============ vazio e rodapé ============ */
.hve-bio .empty-state{
  display:none;
  padding:22px 18px;text-align:center;
  background:rgba(255,255,255,.42);
  border:1px dashed rgba(10,10,10,.16);
  border-radius:var(--r-card-sm);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.hve-bio .empty-state.on{display:block}
.hve-bio .empty-state p{margin:0;font-size:12.5px;color:#5c5854;line-height:1.5}
.hve-bio .empty-state b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}

.hve-bio .bio-foot{margin-top:auto;padding:26px 4px 0;text-align:center}
.hve-bio .foot-rule{
  height:1px;margin-bottom:16px;
  background:linear-gradient(90deg,transparent,rgba(10,10,10,.13),transparent);
}
.hve-bio .foot-name{font-size:12px;font-weight:700;letter-spacing:-.01em;color:#3e3b38}
.hve-bio .foot-meta{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--subtle);margin-top:6px;
}

@media (prefers-reduced-motion:reduce){
  .hve-bio *,.hve-bio *::before,.hve-bio *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}