/* =====================================================================
   Portfólio · Início (perfil direto sobre a foto, com a música)
   Sem cartão: foto, nome e bio ficam sobre a parte escura da foto da
   cruz. O nome usa a Archivo larga dos títulos; a frase e o versículo
   usam EB Garamond itálico, a letra de Bíblia impressa. Os dados de
   contato levam ícones vermelhos no lugar dos emojis.
   Foto de fundo: "Silhueta da cruz", de Greg Rosenke (Unsplash, uso
   gratuito). A cruz fica à direita; o perfil ocupa a esquerda.
   ===================================================================== */

.fe {
    --sombra-texto: 0 1px 2px rgba(0, 0, 0, .85), 0 0 22px rgba(0, 0, 0, .55);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 6rem 0 3rem;
}
.fe-fundo {
    position: absolute;
    inset: -12% 0;
    z-index: -2;
    background: #0b0d12 url("https://images.unsplash.com/photo-1561448817-f17eed390089?w=2000&q=70&auto=format&fit=crop") 72% 45% / cover no-repeat;
    filter: grayscale(.3) contrast(1.12) brightness(.62);
    transform: translate3d(0, var(--desloc, 0px), 0) scale(1.04);
    will-change: transform;
}
/* Sem cartão, a leitura vem do escuro à esquerda, onde fica o texto */
.fe::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .7) 0, transparent 22%, transparent 78%, #000 100%),
        radial-gradient(38rem 26rem at 78% 48%, rgba(215, 15, 27, .26), transparent 70%),
        linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .86) 34%, rgba(0, 0, 0, .5) 56%, rgba(0, 0, 0, .12) 74%, rgba(0, 0, 0, .45) 100%);
    pointer-events: none;
}
.fe-grade { width: 100%; }

/* ---------- Perfil ---------- */
.fe-perfil {
    max-width: 46rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--texto);
    text-shadow: var(--sombra-texto);
}
.fe-perfil-topo { display: flex; align-items: center; gap: clamp(1.25rem, .6rem + 2vw, 2rem); margin-bottom: 1.3rem; }

/* Anel de "story" em vermelho, girando devagar */
.fe-avatar {
    position: relative;
    --av: clamp(148px, 104px + 5vw, 184px);
    flex: 0 0 auto;
    width: var(--av);
    height: var(--av);
    padding: 4px;
    border-radius: 50%;
}
.fe-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff3b3b, #d70f1b 30%, #ff3b3b 55%, #ffffff 78%, #ff3b3b);
    animation: fe-anel 6s linear infinite;
}
.fe-avatar img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #000;
    object-fit: cover;
    object-position: 50% 30%;
}
@keyframes fe-anel { to { transform: rotate(1turn); } }

.fe-perfil-id { min-width: 0; }
.fe-nome {
    font-family: var(--fonte);
    font-stretch: 125%;
    font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--branco);
    text-wrap: balance;
}
.fe-categoria {
    margin: .7rem 0 0;
    font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
    font-weight: 500;
    color: #c9c9cf;
}

/* Frase: a voz da página, em itálico de Bíblia */
.fe-lema {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .7rem;
    font-family: var(--serifa);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
    line-height: 1.1;
    color: var(--branco);
}
.fe-lema-texto { transition: opacity .18s ease; }
.fe-lema-texto.trocando { opacity: 0; }
/* "Ver tradução", como o Instagram mostra embaixo de texto em outra língua */
.fe-traduzir {
    display: block;
    margin: -.3rem 0 .9rem;
    padding: .25rem 0;
    border: 0;
    background: none;
    color: #c9c9cf;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}
.fe-traduzir:hover { color: var(--branco); text-decoration: underline; text-underline-offset: .2em; }
.fe-cruz { width: .8em; height: .8em; stroke-width: 2.6; color: var(--vermelho); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }

/* Versículo: citação com fio vermelho e a referência embaixo */
.fe-versiculo blockquote { margin: 0; }
.fe-versiculo {
    margin: 0 0 1.2rem;
    padding: .1rem 0 .1rem 1.15rem;
    border-left: 2px solid var(--vermelho-forte);
}
.fe-versiculo p {
    margin: 0;
    max-width: 24em;
    text-wrap: balance;
    font-family: var(--serifa);
    font-style: italic;
    font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
    line-height: 1.45;
    color: #f2f2f4;
}
.fe-versiculo figcaption { margin-top: .5rem; }
/* #ff6b6b: o --vermelho não chega a 4,5:1 onde a foto clareia o fundo */
.fe-versiculo cite { font-style: normal; font-size: 1rem; font-weight: 600; color: #ff6b6b; }

/* Cidade, telefone e e-mail */
.fe-dados {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.05rem;
}
.fe-dados li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fe-dados .icone { color: var(--vermelho); }
.fe-dados a { color: var(--branco); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.fe-dados a:hover { text-decoration: underline; text-decoration-color: var(--vermelho); text-underline-offset: .2em; }

/* ---------- Música embaixo da bio (player do Spotify, sem vídeo) ---------- */
.fe-musica { max-width: 30rem; margin-top: 1.5rem; text-shadow: none; }
.fe-musica-rotulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .4rem;
    font-size: .95rem;
    color: #c9c9cf;
}
.fe-spotify {
    position: relative;
    height: 80px;
    overflow: hidden;
    border-radius: 12px;
    background: #1d1d1f;
    outline: 1px solid rgba(255, 255, 255, .14);
}
.fe-spotify iframe {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}
.fe-spotify.pronto iframe { opacity: 1; pointer-events: auto; }
/* Aparece enquanto o player carrega e fica como saída se ele não abrir */
.fe-spotify-reserva {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 0 1rem;
    color: #f5f5f5;
    font-size: .85rem;
    text-decoration: none;
}
.fe-spotify-reserva:focus-visible { outline-offset: -4px; }
.fe-spotify-reserva .icone { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; color: var(--vermelho); }
.fe-spotify-reserva span { display: grid; min-width: 0; color: #a8a8a8; }
.fe-spotify-reserva strong { color: #f5f5f5; font-size: .95rem; }
.fe-spotify.pronto .fe-spotify-reserva { visibility: hidden; }

.fe-ondas { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }
.fe-ondas i { width: 3px; height: 45%; border-radius: 2px; background: #ff3b3b; transform-origin: bottom; }
.fe-ondas i:nth-child(2) { height: 85%; }
.fe-ondas i:nth-child(3) { height: 60%; }
.fe-ondas i:nth-child(4) { height: 100%; }
[data-musica="tocando"] .fe-ondas i { animation: fe-onda .8s ease-in-out infinite alternate; }
[data-musica="tocando"] .fe-ondas i:nth-child(2) { animation-delay: -.3s; }
[data-musica="tocando"] .fe-ondas i:nth-child(3) { animation-delay: -.55s; }
[data-musica="tocando"] .fe-ondas i:nth-child(4) { animation-delay: -.15s; }
@keyframes fe-onda { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ---------- Botões do perfil ---------- */
.fe-botoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    max-width: 30rem;
    margin-top: 1.5rem;
    text-shadow: none;
}
.fe-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: .5rem .7rem;
    border-radius: 12px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s, box-shadow .2s, transform .2s var(--saida);
}
.fe-botao:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px #fff; }
.fe-botao:active { transform: scale(.97); }
/* O hover escurece: clarear derrubava o contraste do texto abaixo de 4,5:1 */
.fe-botao.primario { background: var(--vermelho-forte); box-shadow: none; }
.fe-botao.primario:hover { background: #c20d18; }


.fe-credito {
    position: absolute;
    right: var(--margem);
    bottom: 1rem;
    margin: 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .62);
}
.fe-credito a { color: inherit; }
.fe-credito a:hover { color: var(--branco); }

/* ---------- Entrada: o fundo acende e o perfil vem em cascata ---------- */
.js .fe-fundo { opacity: 0; transition: opacity 1.4s ease; }
.js .fe-perfil-topo,
.js .fe-lema,
.js .fe-traduzir,
.js .fe-versiculo,
.js .fe-dados,
.js .fe-botoes,
.js .fe-musica { opacity: 0; transform: translateY(14px); }
.js .fe-avatar { opacity: 0; transform: scale(.88); }
.js.carregou .fe-fundo { opacity: 1; }
.js.carregou .fe-perfil-topo,
.js.carregou .fe-lema,
.js.carregou .fe-traduzir,
.js.carregou .fe-versiculo,
.js.carregou .fe-dados,
.js.carregou .fe-botoes,
.js.carregou .fe-musica,
.js.carregou .fe-avatar {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .8s var(--saida);
}
.js.carregou .fe-perfil-topo { transition-delay: .15s; }
.js.carregou .fe-avatar { transition-delay: .25s; }
.js.carregou .fe-lema { transition-delay: .45s; }
.js.carregou .fe-traduzir { transition-delay: .52s; }
.js.carregou .fe-versiculo { transition-delay: .6s; }
.js.carregou .fe-dados { transition-delay: .75s; }
.js.carregou .fe-botoes { transition-delay: .9s; }
.js.carregou .fe-musica { transition-delay: 1.05s; }

/* ---------- Controle flutuante da música ---------- */
.musica-flutuante {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: .65rem;
    max-width: calc(100vw - 2rem);
    padding: .45rem .85rem .45rem .45rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(17, 17, 19, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .9);
    color: var(--branco);
    text-align: left;
    transition: opacity .4s, transform .5s var(--saida), border-color .3s;
}
.musica-flutuante .fe-ondas {
    justify-content: center;
    align-items: center;
    width: 2.3rem;
    height: 2.3rem;
    padding: .55rem .5rem;
    border-radius: 50%;
    background: var(--vermelho-forte);
}
.musica-flutuante .fe-ondas i { background: #fff; align-self: flex-end; }
.mf-texto { display: grid; min-width: 0; line-height: 1.2; }
.mf-texto strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-texto small { font-size: .78rem; color: var(--apagado); }
.mf-acao { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--apagado); }
.musica-flutuante:hover { border-color: rgba(255, 59, 59, .6); }
.musica-flutuante:hover .mf-acao { color: var(--branco); }
.musica-flutuante[data-estado="carregando"] { opacity: .6; }
.musica-flutuante[data-estado="erro"] { display: none; }
/* Ainda sem som: um pulso discreto chama o primeiro toque */
.musica-flutuante[data-estado="parado"]::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(255, 59, 59, .55);
    animation: mf-pulso 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes mf-pulso { 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 59, 59, 0); } }
.js .musica-flutuante { opacity: 0; transform: translateY(20px); }
.js.carregou .musica-flutuante { opacity: 1; transform: none; }
.js.carregou .musica-flutuante[data-estado="carregando"] { opacity: .6; }
/* Some enquanto o player do início está na tela (é ele quem toca ali) */
.js.carregou .musica-flutuante.recolhido {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity .3s, transform .4s var(--saida), visibility 0s .4s;
}

/* Notebook com a barra do navegador (tela útil baixa): menos respiro */
@media (min-width: 861px) and (max-height: 760px) {
    .fe { padding-top: 5.5rem; }
    .fe-perfil-topo { margin-bottom: 1rem; }
    .fe-lema { margin-bottom: .5rem; }
    .fe-versiculo { margin-bottom: .9rem; }
    .fe-botoes { margin-top: 1.1rem; }
}
/* Monitor grande: o perfil cresce junto, para não virar uma ilhota */
@media (min-width: 1500px) and (min-height: 900px) {
    .fe-perfil { max-width: 54rem; font-size: 1.25rem; }
    .fe-avatar { --av: 208px; }
    .fe-nome { font-size: clamp(3.6rem, 1.4rem + 2.4vw, 4.4rem); }
    .fe-categoria { font-size: 1.35rem; }
    .fe-lema { font-size: clamp(2.8rem, 1.2rem + 1.9vw, 3.3rem); }
    .fe-versiculo p { font-size: 1.6rem; }
    .fe-dados { font-size: 1.15rem; }
    .fe-musica,
    .fe-botoes { max-width: 34rem; }
    .fe-botao { min-height: 3.2rem; font-size: 1.08rem; }
}
@media (max-width: 860px) {
    .fe { flex-direction: column; justify-content: center; padding: 6rem 0 3rem; }
    .fe-fundo { background-position: 74% 40%; }
    /* No celular a cruz fica atrás do texto: véu mais escuro por igual */
    .fe::after {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, .55) 22%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .9) 85%, #000 100%),
            radial-gradient(26rem 20rem at 72% 26%, rgba(215, 15, 27, .22), transparent 70%);
    }
    /* Embaixo do perfil, para não ficar atrás do botão flutuante */
    .fe-credito { position: static; margin-top: 1.4rem; text-align: center; }
}
@media (max-width: 560px) {
    /* Foto em cima do nome, para a foto crescer */
    .fe-perfil-topo { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
    .fe-avatar { --av: clamp(148px, 44vw, 184px); }
    .fe-perfil { font-size: 1.05rem; }
    .fe-dados { flex-direction: column; gap: .5rem; }
}
@media (max-width: 420px) {
    .fe-botoes { gap: .45rem; }
    .fe-botao { font-size: .9rem; padding: .5rem .35rem; }
    .musica-flutuante { right: .75rem; bottom: .75rem; }
}

/* E-mail inteiro numa linha até 320 px */
@media (max-width: 340px) {
    .fe-dados { font-size: .95rem; }
}
/* No toque, telefone e e-mail ganham área de 44 px sem mudar o desenho */
@media (pointer: coarse) {
    .fe-dados { row-gap: 1.1rem; }
    .fe-dados a { padding-block: .6rem; margin-block: -.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fe-fundo { transform: none; }
    .fe-avatar::before,
    [data-musica="tocando"] .fe-ondas i,
    .musica-flutuante::after { animation: none; }
    .js .fe-perfil-topo,
    .js .fe-avatar,
    .js .fe-lema,
    .js .fe-traduzir,
    .js .fe-versiculo,
    .js .fe-dados,
    .js .fe-botoes,
    .js .fe-musica { transform: none; }
    /* Sem movimento, tudo aparece de uma vez */
    .js.carregou .fe-perfil-topo,
    .js.carregou .fe-avatar,
    .js.carregou .fe-lema,
    .js.carregou .fe-traduzir,
    .js.carregou .fe-versiculo,
    .js.carregou .fe-dados,
    .js.carregou .fe-botoes,
    .js.carregou .fe-musica { transition-delay: 0s; }
}