html,body{
margin:0;height:100%;overflow:hidden;
font-family:Helvetica,Arial,sans-serif;
background:#eef2f5;
}
.bg{
position:fixed;inset:0;
background:url('hero.jpeg') center center/cover no-repeat;
animation:zoom 18s ease-in-out infinite alternate;
filter:saturate(1.08);
}
.overlay{
position:fixed;inset:0;
backdrop-filter: blur(2px);
background:radial-gradient(circle at center,rgba(255,255,255,.05),rgba(255,255,255,.25));
}
.content{
position:absolute;inset:0;
display:flex;flex-direction:column;
justify-content:center;align-items:center;
color:#5a5a5a;
text-align:center;
}
.logo{
font-size:9vw;
letter-spacing:.25em;
font-weight:200;
animation:float 8s ease-in-out infinite;
text-shadow:0 8px 20px rgba(255,255,255,.8);
}
.subtitle,.tag{
letter-spacing:.5em;
margin-top:20px;
}
.line{
width:1px;height:120px;
background:linear-gradient(transparent,#c9b38a,transparent);
margin:25px 0;
animation:pulse 4s infinite;
}
.ripple{
position:absolute;
left:50%;top:70%;
width:20px;height:20px;
border-radius:50%;
border:1px solid rgba(255,255,255,.8);
transform:translate(-50%,-50%);
animation:ripple 5s infinite;
}
@keyframes zoom{
from{transform:scale(1);}
to{transform:scale(1.08);}
}
@keyframes float{
50%{transform:translateY(-12px);}
}
@keyframes pulse{
50%{opacity:.3;}
}
@keyframes ripple{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.8);}
100%{box-shadow:0 0 0 220px rgba(255,255,255,0);}
}