/* ===========================================================
   HELEN OLIVEIRA CÍLIOS
   LINKS.CSS — mini página de links (link da bio)
   Visual replicado do Linktree atual dela: fundo escuro,
   foto grande no topo com fade, tipografia em tom rosé.
=========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    /* fundo */
    --lt-page:#1c1519;
    --lt-card:#0a090b;

    /* tom rosé/cobre do Linktree */
    --lt-rose:#c78d7c;
    --lt-rose-bright:#d6a292;
    --lt-rose-soft:#b0857a;

    /* botões */
    --lt-btn-bg:rgba(255,255,255,.035);
    --lt-btn-border:rgba(214,162,146,.28);
    --lt-btn-border-hover:rgba(214,162,146,.6);

    --transition:.3s ease;

}

html{
    background:var(--lt-page);
}

body{

    font-family:'Poppins',sans-serif;
    background:var(--lt-page);
    color:var(--lt-rose);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    -webkit-font-smoothing:antialiased;

}

body::before{

    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(ellipse 800px 600px at 50% 0%, rgba(120,84,96,.55), transparent 65%),
        radial-gradient(ellipse 700px 500px at 50% 100%, rgba(88,64,78,.4), transparent 60%);
    pointer-events:none;
    z-index:0;

}

/* =========================
   CARD
========================= */

.lt-card{

    position:relative;
    z-index:1;
    width:100%;
    max-width:440px;
    margin:0 auto;
    background:var(--lt-card);
    border-radius:26px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    flex:1;

}

/* =========================
   FOTO DO TOPO
========================= */

.lt-hero{

    position:relative;
    width:100%;
    aspect-ratio:7/6;
    /* sem isso o min-height:auto do flex deixa a altura intrínseca
       da imagem vencer o aspect-ratio */
    min-height:0;
    flex:0 0 auto;

}

.lt-hero img{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
    display:block;

}

/* fade da foto pro fundo escuro, mesma técnica do Linktree:
   não é recorte, é degradê sobreposto na base da imagem */
.lt-hero::after{

    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(10,9,11,.25) 0%,
        rgba(10,9,11,0) 22%,
        rgba(10,9,11,0) 48%,
        rgba(10,9,11,.75) 78%,
        var(--lt-card) 100%
    );
    pointer-events:none;

}

.lt-share{

    position:absolute;
    top:16px;
    right:16px;
    z-index:2;
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:rgba(20,18,22,.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:#f0ded6;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition);

}

.lt-share:hover{

    background:rgba(40,34,40,.8);

}

.lt-share svg{

    width:18px;
    height:18px;

}

/* =========================
   CONTEÚDO
========================= */

.lt-body{

    position:relative;
    z-index:1;
    padding:0 22px 30px;
    text-align:center;
    margin-top:-14px;

}

.lt-name{

    font-size:clamp(1.5rem,6.4vw,1.85rem);
    font-weight:600;
    letter-spacing:.01em;
    color:var(--lt-rose);
    margin-bottom:12px;

}

.lt-bio{

    font-size:.82rem;
    font-weight:400;
    line-height:1.6;
    color:var(--lt-rose-soft);
    max-width:330px;
    margin:0 auto 28px;

}

/* =========================
   BOTÕES
========================= */

.lt-links{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.lt-row{

    position:relative;

}

.lt-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:62px;
    padding:12px 48px;
    border-radius:999px;
    border:1px solid var(--lt-btn-border);
    background:var(--lt-btn-bg);
    color:var(--lt-rose-bright);
    text-decoration:none;
    transition:var(--transition);

}

.lt-btn:hover,
.lt-btn:focus-visible{

    border-color:var(--lt-btn-border-hover);
    background:rgba(255,255,255,.07);

}

.lt-btn-label{

    display:block;
    font-size:.92rem;
    font-weight:500;
    line-height:1.35;

}

.lt-btn-sub{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:.7rem;
    font-weight:300;
    line-height:1.4;
    color:var(--lt-rose-soft);
    margin-top:3px;

}

/* ícones 3D dos botões, todos normalizados num quadro 96x96 */
.lt-btn-icon{

    width:24px;
    height:24px;
    object-fit:contain;
    flex-shrink:0;

}

.lt-sub-icon{

    width:12px;
    height:12px;
    flex-shrink:0;

}

/* miniatura circular à esquerda, igual ao Linktree */
.lt-thumb{

    position:absolute;
    left:9px;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    /* já é um recorte quadrado no rosto (helen-avatar.webp),
       não precisa reposicionar aqui */
    object-fit:cover;

}

/* três pontinhos à direita */
.lt-dots{

    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:none;
    background:transparent;
    color:var(--lt-rose-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    cursor:pointer;
    transition:var(--transition);

}

.lt-dots:hover{

    background:rgba(255,255,255,.07);
    color:var(--lt-rose-bright);

}

.lt-dots svg{

    width:17px;
    height:17px;

}

/* =========================
   REDES SOCIAIS
========================= */

.lt-social{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    margin-top:30px;

}

.lt-social a{

    color:var(--lt-rose-bright);
    display:flex;
    transition:var(--transition);

}

.lt-social a:hover,
.lt-social a:focus-visible{

    color:#ecc4b5;
    transform:translateY(-2px);

}

/* imagem não herda color, o feedback de hover aqui é o brilho */
.lt-social a:hover img,
.lt-social a:focus-visible img{

    filter:brightness(1.12);

}

.lt-social img{

    width:26px;
    height:26px;
    object-fit:contain;
    display:block;
    transition:filter var(--transition);

}

/* =========================
   RODAPÉ
========================= */

.lt-foot{

    position:relative;
    z-index:1;
    width:100%;
    max-width:440px;
    text-align:center;
    padding:22px 24px 30px;
    color:var(--lt-rose-soft);
    font-size:.7rem;
    font-weight:300;
    line-height:1.7;

}

.lt-foot a{

    color:var(--lt-rose-soft);
    text-decoration:none;

}

.lt-foot a:hover{

    color:var(--lt-rose-bright);
    text-decoration:underline;

}

/* =========================
   FOCO ACESSÍVEL
========================= */

a:focus-visible,
button:focus-visible{

    outline:2px solid var(--lt-rose-bright);
    outline-offset:3px;

}

/* =========================
   TELAS MAIORES
========================= */

@media (min-width:520px){

    body{
        padding:26px 20px;
    }

    .lt-card{
        flex:0 0 auto;
    }

}

/* aviso de link copiado */
.lt-toast{

    position:fixed;
    left:50%;
    bottom:26px;
    transform:translateX(-50%) translateY(12px);
    z-index:5;
    background:rgba(28,24,28,.95);
    border:1px solid var(--lt-btn-border);
    color:var(--lt-rose-bright);
    font-size:.76rem;
    padding:10px 18px;
    border-radius:999px;
    opacity:0;
    pointer-events:none;
    transition:.25s ease;

}

.lt-toast.is-on{

    opacity:1;
    transform:translateX(-50%) translateY(0);

}

/* =========================================================
   1. ENTRADA ESCALONADA
   A foto aparece de imediato e o conteúdo sobe em sequência.
   Tudo assenta em menos de 1s e nada bloqueia o toque.
========================================================= */

@keyframes lt-rise{

    from{
        opacity:0;
        transform:translateY(14px);
    }
    to{
        opacity:1;
        transform:none;
    }

}

.lt-name,
.lt-bio,
.lt-row,
.lt-social,
.lt-foot{

    animation:lt-rise .35s cubic-bezier(.22,.68,.36,1) both;

}

.lt-name   { animation-delay:.05s; }
.lt-bio    { animation-delay:.10s; }
.lt-row:nth-child(1){ animation-delay:.16s; }
.lt-row:nth-child(2){ animation-delay:.21s; }
.lt-row:nth-child(3){ animation-delay:.26s; }
.lt-row:nth-child(4){ animation-delay:.31s; }
.lt-row:nth-child(5){ animation-delay:.36s; }
.lt-social { animation-delay:.42s; }
.lt-foot   { animation-delay:.47s; }

/* =========================================================
   2. RETORNO AO TOQUE
   No celular não existe hover, sem isso o toque não dá
   nenhum sinal de que foi registrado.
========================================================= */

.lt-btn{

    transition:background .3s ease, border-color .3s ease, transform .13s ease;

}

.lt-btn:active{

    transform:scale(.975);

}

.lt-dots:active,
.lt-social a:active,
.lt-share:active{

    transform:scale(.9);

}

/* =========================================================
   3. REFLEXO NO BOTÃO DE AGENDAR
   Devolve o destaque do botão principal sem mudar a cor
   dele. Anima só transform, que roda na GPU, e fica parado
   a maior parte do ciclo.
========================================================= */

.lt-btn-shine{

    /* sem isso o reflexo se posiciona pela .lt-row, não pelo botão */
    position:relative;
    overflow:hidden;

}

.lt-btn-shine::after{

    content:'';
    position:absolute;
    top:-25%;
    bottom:-25%;
    left:0;
    width:36%;
    background:linear-gradient(
        100deg,
        transparent 0%,
        rgba(247,219,203,.20) 50%,
        transparent 100%
    );
    transform:translateX(-200%) skewX(-16deg);
    animation:lt-sheen 6s ease-in-out 1.4s infinite;
    pointer-events:none;

}

@keyframes lt-sheen{

    0%, 72%{
        transform:translateX(-200%) skewX(-16deg);
    }
    100%{
        transform:translateX(420%) skewX(-16deg);
    }

}

/* =========================================================
   4. GRÃO NO CARD
   Disfarça o banding do degradê da foto sumindo no preto e
   dá um acabamento de revista.
========================================================= */

.lt-card::after{

    content:'';
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:.05;
    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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;

}

/* =========================================================
   ACESSIBILIDADE
   Quem tem "reduzir movimento" ligado no aparelho recebe a
   página pronta, sem animação nenhuma.
========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-delay:0ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

}