/* =====================================
 PREMIUM HERO EFFECTS
 STANDARD LANDING
===================================== */
/* TITLE */
.sl-hero-title{
position:relative;
font-size:clamp(2rem,5vw,4.2rem);
font-weight:900;
line-height:1.15;
letter-spacing:-1px;
color:white;
overflow:hidden;
opacity:0;
animation:
slTitleShow 1.2s ease forwards;
}
.sl-hero-title span{
display:block;
color:#ffd54f;
}
/* появление слева */
@keyframes slTitleShow{
from{
opacity:0;
transform:
translateX(-80px);
}
to{
opacity:1;
transform:
translateX(0);
}
}
/* =====================================
 PREMIUM SLOW LIGHT SHINE
===================================== */
.sl-hero-title{
    position:relative;
    overflow:hidden;
}
.sl-hero-title span{
text-shadow:
0 0 10px rgba(255,213,79,.6),
0 0 25px rgba(255,193,7,.35);
}
.sl-hero-title{
color:#ffffff;
animation:
slTitleShow 1.2s ease forwards,
slTextGlow 6s ease-in-out infinite;
}
/* золотая строка */
.sl-hero-title span{
color:#ffd54f;
animation:
slGoldGlow 6s ease-in-out infinite;
}
/* основная надпись */
@keyframes slTextGlow{
0%{
text-shadow:
0 0 0 rgba(255,255,255,0);
}
50%{
text-shadow:
0 0 8px rgba(255,255,255,.35),
0 0 18px rgba(255,255,255,.2);
}
100%{
text-shadow:
0 0 0 rgba(255,255,255,0);
}
}
/* золотое свечение */
@keyframes slGoldGlow{
0%{
text-shadow:
0 0 5px rgba(255,213,79,.2);
}
50%{
text-shadow:
0 0 12px rgba(255,213,79,.65),
0 0 28px rgba(255,193,7,.35);
}
100%{
text-shadow:
0 0 5px rgba(255,213,79,.2);
}
}
/* =====================================
 FLOATING GLASS BADGES
===================================== */
.sl-tech-badges{
position:absolute;
right:7%;
top:25%;
width:260px;
height:350px;
}
.sl-badge{
position:absolute;
padding:12px 20px;
background:
rgba(255,255,255,.15);
border:
1px solid rgba(255,255,255,.35);
border-radius:50px;
color:white;
font-weight:700;
font-size:15px;
backdrop-filter:blur(10px);
box-shadow:
0 10px 35px rgba(0,0,0,.25);
animation:
slFloat 5s ease-in-out infinite;
}
@keyframes slFloat{
0%,100%{
transform:
translateY(0);
}
50%{
transform:
translateY(-18px);
}
}
/* positions */
.badge-html{
top:0;
right:20px;
animation-delay:0s;
}
.badge-css{
top:70px;
right:90px;
animation-delay:.6s;
}
.badge-js{
top:140px;
right:10px;
animation-delay:1s;
}
.badge-php{
top:210px;
right:100px;
animation-delay:1.4s;
}
.badge-seo{
top:270px;
right:30px;
animation-delay:1.8s;
}
.badge-responsive{
top:120px;
left:0;
animation-delay:2s;
}
.badge-ai{
top:40px;
left:20px;
animation-delay:2.5s;
}
/* MOBILE */
@media(max-width:900px){
.sl-tech-badges{
position:relative;
right:auto;
top:auto;
margin:40px auto 0;
height:250px;
}
}
@media(max-width:600px){
.sl-hero-title{
text-align:center;
}
.sl-tech-badges{
transform:
scale(.85);
}
}