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

body{
    font-family:'Cormorant Garamond',serif;
    width:100%;
    height:100vh;
    overflow:hidden;
    background:radial-gradient(circle at center,#16211a 0%,#0b0f0c 100%);
    color:#f4f1e8;
    position:relative
}
.noise{
    position:fixed;
    inset:0;
    opacity:.05;
    pointer-events:none;
    background:url("https://grainy-gradients.vercel.app/noise.svg");
    animation:noiseMove .3s infinite
}
@keyframes noiseMove{
    0%{transform:translate(0,0)}
    25%{transform:translate(2px,-2px)}
    50%{transform:translate(-2px,2px)}
    75%{transform:translate(1px,1px)}
    100%{transform:translate(0,0)}
}
.particles-container{
    position:absolute;
    inset:0;
    pointer-events:none
}
.particle{
    position:absolute;
    width:2px;
    height:2px;
    background:rgba(255,255,255,.3);
    border-radius:50%;
    animation:floatParticle linear infinite
}
.p1{left:10%;animation-duration:14s}
.p2{left:25%;animation-duration:18s}
.p3{left:40%;animation-duration:11s}
.p4{left:55%;animation-duration:15s}
.p5{left:70%;animation-duration:17s}
.p6{left:90%;animation-duration:12s}

@keyframes floatParticle{
    from{transform:translateY(100vh);opacity:0}
    20%{opacity:1}
    to{transform:translateY(-20vh);opacity:0}
}
.intro{
    position:absolute;
    inset:0;
    background:#050805;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:20;
    overflow:hidden;
    animation:introFade 2s ease forwards;
    animation-delay:6.5s
}
@keyframes introFade{
    to{opacity:0;visibility:hidden}
}
.bird-draw{
    width:700px;
    max-width:90vw;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 0 25px rgba(255,255,255,.08))
}
.bird-draw path,
.bird-draw circle{
    fill:none;
    stroke:#f5f1e8;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    animation:drawBird 5.5s ease forwards
}
.bird-draw circle{
    fill:#f5f1e8;
    stroke:none;
    opacity:0;
    animation:eyeAppear .5s ease forwards;
    animation-delay:4.5s
}
@keyframes drawBird{
    to{stroke-dashoffset:0}
}
@keyframes eyeAppear{
    to{opacity:1}
}
.intro-overlay{
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);
    filter:blur(40px);
    animation:pulseGlow 4s ease-in-out infinite
}
@keyframes pulseGlow{
    0%,100%{transform:scale(1);opacity:.4}
    50%{transform:scale(1.15);opacity:.7}
}
.intro-title,
.intro-sub{
    opacity:0;
    z-index:2;
    animation:introText 2s ease forwards
}
.intro-title{
    margin-top:40px;
    font-size:18px;
    letter-spacing:12px;
    font-weight:300;
    animation-delay:4.8s
}
.intro-sub{
    margin-top:18px;
    font-size:12px;
    letter-spacing:5px;
    color:rgba(255,255,255,.4);
    animation-delay:5.3s
}
@keyframes introText{
    to{opacity:1}
}
.main-content{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    opacity:0;
    animation:showMain 2s ease forwards;
    animation-delay:5.2s
}
@keyframes showMain{
    to{opacity:1}
}
.bird-container{
    width:280px;
    height:280px;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    margin-bottom:40px;
    box-shadow:0 0 120px rgba(255,255,255,.06);
    animation:birdFloat 6s ease-in-out infinite
}
.bird-container::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08)
}
.bird-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.2) contrast(1.05) brightness(.95)
}
@keyframes birdFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}
h1{
    font-size:64px;
    font-weight:300;
    letter-spacing:2px;
    margin-bottom:20px;
    text-align:center
}
.subtitle{
    font-size:20px;
    opacity:.65;
    margin-bottom:50px;
    text-align:center;
    line-height:1.6
}
.input-group{
    display:flex;
    gap:30px;
    align-items:center;
    margin-bottom:35px
}
.input-group span{
    opacity:.5;
    font-size:18px
}
input{
    width:260px;
    padding:18px 22px;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.15);
    background:transparent;
    color:#f4f1e8;
    font-size:18px;
    outline:none;
    transition:.4s
}
input:focus{
    border-bottom:1px solid rgba(255,255,255,.5)
}
input::placeholder{
    color:rgba(255,255,255,.25)
}
button{
    background:transparent;
    border:1px solid rgba(255,255,255,.2);
    color:#f4f1e8;
    padding:18px 40px;
    cursor:pointer;
    font-size:15px;
    letter-spacing:4px;
    transition:.4s;
    margin-top:10px
}
button:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.4);
    transform:translateY(-3px)
}
.resultado-box{
    margin-top:60px;
    text-align:center;
    opacity:0;
    transform:translateY(20px);
    transition:1s
}
.resultado-box.show{
    opacity:1;
    transform:translateY(0)
}
.resultado-box small{
    display:block;
    margin-bottom:15px;
    letter-spacing:6px;
    font-size:12px;
    opacity:.5
}
.resultado-box h2{
    font-size:54px;
    font-weight:300;
    letter-spacing:8px
}
.paywall{
    margin-top:30px;
    opacity:0;
    transition:1s;
    pointer-events:none
}
.paywall.show{
    opacity:1;
    pointer-events:all
}
.paywall button{
    border:1px solid rgba(255,215,120,.25);
    color:#ffd978
}
@media(max-width:900px){
    h1{font-size:42px}
    .input-group{
        flex-direction:column
    }
    input{
        width:90vw
    }
    .bird-container{
        width:220px;
        height:220px
    }
}
.letra {
    display: inline-block;
    transition: transform 0.6s ease, background-color 0.6s ease, color 0.6s ease;
    border-radius: 2px;
    margin: 0 4px;
    width: 0.6em;         
    text-align: center;    
}
.oculta {
    background-color: #f4f1e8;
    color: transparent;
    transform: rotateX(0deg);
}
.revelada {
    background-color: transparent;
    color: #f4f1e8;
    transform: rotateX(360deg);
}