/* ============================================================================
   CEFI — Link da Bio · estilos compartilhados (página pública + preview do painel)
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Atmosfera: gradiente suave + grão de papel sutil --------------------------- */
.bio-atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 540px at 50% -10%, var(--accent-tint), transparent 60%),
    radial-gradient(900px 500px at 110% 100%, rgba(201,162,74,.10), transparent 55%);
}
.bio-atmos::after {
  content: ""; position: absolute; inset: 0; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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)' opacity='0.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
html[data-theme="dark"] .bio-atmos::after { mix-blend-mode: screen; }

/* Coluna central ------------------------------------------------------------- */
.bio-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 540px;
  margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) clamp(1.1rem, 5vw, 1.6rem) 4rem;
}

/* Cabeçalho ------------------------------------------------------------------ */
.bio-head { text-align: center; }
.bio-avatar {
  width: 104px; height: 104px; border-radius: var(--radius-pill);
  margin: 0 auto var(--sp-3); display: grid; place-items: center; overflow: hidden;
  background: var(--surface); color: var(--heading);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line);
  font-family: var(--font-display); font-size: 2.4rem; letter-spacing: -.02em;
}
.bio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bio-title {
  font-family: var(--font-display); color: var(--heading);
  font-size: var(--step-3); line-height: 1.05; margin: 0 0 .35rem;
  letter-spacing: -.01em;
}
.bio-headline { color: var(--text-soft); font-size: var(--step-0); margin: 0 auto; max-width: 38ch; }
.bio-text { color: var(--text-soft); font-size: var(--step--1); margin: var(--sp-2) auto 0; max-width: 42ch; }

/* fiozinho decorativo */
.bio-rule {
  width: 46px; height: 2px; margin: var(--sp-3) auto var(--sp-4);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}

/* Redes sociais -------------------------------------------------------------- */
.bio-socials { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.bio-social {
  width: 42px; height: 42px; border-radius: var(--radius-pill); display: grid; place-items: center;
  color: var(--heading); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); text-decoration: none; font-size: 1.05rem;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), color .2s;
}
.bio-social:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--accent-strong); }
.bio-social img { width: 22px; height: 22px; object-fit: contain; display: block; }

/* Lista de blocos ------------------------------------------------------------ */
.bio-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }

/* botão / link */
.blk-link {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left; text-decoration: none;
  padding: 1rem 1.15rem; border-radius: var(--radius);
  /* cor travada no azul-marinho da identidade CEFI (independe do tema) */
  background: var(--c-ink-700); color: #fff; border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--spring), box-shadow .25s var(--ease), background .2s;
}
.blk-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #3a526d; }
.blk-link:active { transform: translateY(0) scale(.99); }
.blk-link .blk-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-strong); font-size: 1.15rem;
}
.blk-link .blk-body { flex: 1 1 auto; min-width: 0; }
.blk-link .blk-t { font-weight: 600; font-size: var(--step-0); display: block; }
.blk-link .blk-s { color: rgba(255,255,255,.78); font-size: var(--step--1); display: block; }
.blk-link .blk-chev { flex: 0 0 auto; color: rgba(255,255,255,.72); transition: transform .25s var(--spring); }
.blk-link:hover .blk-chev { transform: translateX(3px); }

/* ---- modo DESTAQUE "shiny" (borda animada com brilho) — botões e pastas ---- */
@property --bioGa  { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --bioGao { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --bioGp  { syntax: "<percentage>"; initial-value: 5%;      inherits: false; }
@property --bioGs  { syntax: "<color>";      initial-value: #ffffff; inherits: false; }

.blk-link.is-featured {
  --sh-bg1: #20324c;       /* gradiente navy (mais rico que o botão normal chapado) */
  --sh-bg2: #0e1d33;
  --sh-hi: #2fe9ff;        /* ciano NEON do feixe que gira */
  --sh-hi-sub: #aef6ff;
  --sh-glow: 47, 233, 255; /* rgb do neon (glow só no escuro) */
  --sh-dur: 2.4s;
  --bioGp: 8%;
  color: #fff; border: 2px solid transparent; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(140deg, var(--sh-bg1), var(--sh-bg2)) padding-box,
    conic-gradient(from calc(var(--bioGa) - var(--bioGao)),
      transparent,
      var(--sh-hi) var(--bioGp),
      var(--bioGs) calc(var(--bioGp) * 2),
      var(--sh-hi) calc(var(--bioGp) * 3),
      transparent calc(var(--bioGp) * 4)) border-box;
  box-shadow: inset 0 0 0 1px rgba(var(--sh-glow), .35), 0 0 20px -2px rgba(var(--sh-glow), .55);
  animation:
    revealUp .55s var(--ease) both,
    bioGa var(--sh-dur) linear infinite,
    neonPulse 2.1s ease-in-out infinite;
}
/* conteúdo acima dos brilhos */
.blk-link.is-featured > * { position: relative; z-index: 2; }
.blk-link.is-featured .blk-t { text-shadow: 0 0 10px rgba(var(--sh-glow), .4); }
/* SHEEN: brilho diagonal que desliza pelo botão (funciona em qualquer fundo) */
.blk-link.is-featured::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 32%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-16deg);
  animation: bioSheen 3.6s var(--ease) infinite;
}
/* brilho interno difuso (base) */
.blk-link.is-featured::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 120%, rgba(var(--sh-glow), .28), transparent 60%);
}
.blk-link.is-featured:hover { --bioGp: 22%; --bioGao: 95deg; --bioGs: var(--sh-hi-sub); }

/* === TEMA CLARO: sem glow difuso (some no fundo claro) → sheen + sombra azul definida === */
html[data-theme="light"] .blk-link.is-featured {
  --sh-bg1: #24395c;       /* botão escuro p/ destacar no creme */
  --sh-bg2: #122844;
  --sh-hi: #3fd2f0;        /* feixe ciano limpo e nítido sobre o navy */
  --sh-hi-sub: #d2f6ff;
  --bioGs: #f2feff;        /* núcleo do feixe quase branco (brilha no navy) */
  /* sombra azul-profunda definida (lift) em vez de glow neon */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -8px rgba(16,36,78,.6);
  /* sem neonPulse no claro */
  animation: revealUp .55s var(--ease) both, bioGa var(--sh-dur) linear infinite;
}
html[data-theme="light"] .blk-link.is-featured::after { background: radial-gradient(120% 140% at 50% 118%, rgba(63,210,240,.18), transparent 62%); }

@keyframes bioGa { to { --bioGa: 360deg; } }
@keyframes bioSheen { 0% { left: -40%; } 55%, 100% { left: 125%; } }
@keyframes neonPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--sh-glow), .35), 0 0 16px -3px rgba(var(--sh-glow), .5); }
  50%      { box-shadow: inset 0 0 0 1px rgba(var(--sh-glow), .55), 0 0 30px 0 rgba(var(--sh-glow), .85); }
}
@media (prefers-reduced-motion: reduce) {
  .blk-link.is-featured, .blk-link.is-featured::before { animation: none; }
  .blk-link.is-featured::before { display: none; }
}

/* pasta (abre subpágina) */
.blk-folder .blk-ico { background: var(--c-ink-700); color: #fff; }
html[data-theme="dark"] .blk-folder .blk-ico { background: var(--accent); color: var(--on-accent); }
.blk-folder .blk-count {
  flex: 0 0 auto; font-size: var(--step--1); color: #fff;
  background: rgba(255,255,255,.16); border-radius: var(--radius-pill); padding: .12rem .6rem; margin-right: .15rem;
}

/* cabeçalho de seção */
.blk-header {
  margin: var(--sp-3) 0 var(--sp-1); padding-top: var(--sp-2);
  font-family: var(--font-display); color: var(--heading); font-size: var(--step-1);
  display: flex; align-items: center; gap: .6rem;
}
.blk-header::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* texto livre */
.blk-text { color: var(--text-soft); font-size: var(--step-0); padding: .2rem .25rem; }

/* imagem / arte — formato horizontal TRAVADO 1080×500 (uniforme), sem moldura */
.blk-image { display: block; width: 100%; aspect-ratio: 1080 / 500; overflow: hidden; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.blk-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* vídeo */
.blk-video { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); background: #000; }
.blk-video iframe, .blk-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Subpágina de pasta (níveis) ----------------------------------------------- */
.bio-subhead { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.bio-back {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--heading);
  padding: .5rem .85rem; border-radius: var(--radius-pill); font: inherit; font-size: var(--step--1);
  box-shadow: var(--shadow-sm); transition: transform .2s var(--spring), box-shadow .2s;
}
.bio-back:hover { transform: translateX(-2px); box-shadow: var(--shadow-md); }
.bio-crumb { font-family: var(--font-display); color: var(--heading); font-size: var(--step-2); line-height: 1.1; }
.bio-crumb small { display: block; font-family: var(--font-body); font-size: var(--step--1); color: var(--text-soft); font-weight: 500; }

/* animação de troca de visão (mola suave) */
.bio-view { animation: viewIn .42s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* entrada escalonada dos itens */
.reveal { opacity: 0; transform: translateY(12px); animation: revealUp .55s var(--ease) forwards; }
@keyframes revealUp { to { opacity: 1; transform: none; } }

/* Rodapé --------------------------------------------------------------------- */
.bio-foot { text-align: center; margin-top: var(--sp-5); }
.bio-credit {
  display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
  text-decoration: none; color: var(--text-soft); font-size: .72rem;
  opacity: .65; transition: opacity .25s var(--ease), transform .25s var(--spring);
}
.bio-credit:hover { opacity: 1; transform: translateY(-2px); }
.bio-credit span { letter-spacing: .02em; }
.rr-logo { height: 18px; width: auto; display: block; }
/* rotaciona a versão da logo conforme o tema (clara para fundo claro, negativa para fundo escuro) */
.rr-dark { display: none; }
html[data-theme="dark"] .rr-light { display: none; }
html[data-theme="dark"] .rr-dark { display: block; }

/* Ações flutuantes (tema / compartilhar) ------------------------------------ */
.bio-actions { position: fixed; top: 14px; right: 14px; z-index: 5; display: flex; gap: .5rem; }
.bio-fab {
  width: 42px; height: 42px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--surface); color: var(--heading); border: 1px solid var(--line); cursor: pointer;
  box-shadow: var(--shadow-sm); font-size: 1.05rem;
  transition: transform .2s var(--spring), box-shadow .2s, color .2s;
}
.bio-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--accent-strong); }

/* vazio */
.bio-empty { text-align: center; color: var(--text-soft); padding: var(--sp-5) var(--sp-3); }
.bio-empty .e-ico { font-size: 2rem; opacity: .7; }

/* foco visível (a11y) */
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }

/* QR modal */
.bio-modal { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; background: rgba(20,27,36,.5); backdrop-filter: blur(4px); padding: 1.2rem; }
.bio-modal.open { display: grid; animation: viewIn .25s var(--ease); }
.bio-modal .card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-4); text-align: center; box-shadow: var(--shadow-lg); max-width: 320px; }
.bio-modal .card h3 { font-family: var(--font-display); color: var(--heading); margin: 0 0 var(--sp-2); font-weight: 400; }
.bio-modal canvas, .bio-modal img { border-radius: 12px; background: #fff; padding: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}