Folder highlights
Portfolio content showcases Lokesh Balineni as a Video Editor & Graphic Designer with sections for YouTube, food promos, thumbnails, and political edits using Adobe tools.

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
--accent:#8b5cf6;
--accent2:#22d3ee;
--border:rgba(255,255,255,.15);
}



/* ================= INTRO HERO ================= */

.intro-hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* big headline */
.intro-title{
  font-size:clamp(38px, 7vw, 82px);
  font-weight:800;
  letter-spacing:1px;
  color:#fff;
}

.intro-title span{
  background:linear-gradient(90deg,#8b5cf6,#22d3ee);
  -webkit-background-clip:text;
  color:transparent;
}

/* subtitle */
.intro-sub{
  margin-top:14px;
  font-size:20px;
  opacity:.85;
}

/* scroll link */
.scroll-down{
  margin-top:40px;
  font-size:16px;
  text-decoration:none;
  color:#cbd5f1;
  border:1px solid rgba(255,255,255,.25);
  padding:14px 26px;
  border-radius:999px;
  transition:.25s;
}

.scroll-down:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-3px);
}





/* ================= BODY ================= */

body{
font-family:Inter,Arial;
color:#e5e7eb;
background:
radial-gradient(circle at 15% 20%, #1f2937 0%, transparent 40%),
radial-gradient(circle at 85% 30%, #312e81 0%, transparent 45%),
radial-gradient(circle at 40% 80%, #0f766e 0%, transparent 40%),
#070b12;
}

/* ================= LOADER ================= */

#loader{
position:fixed;
inset:0;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:.8s;
}

.loader-text{
font-size:40px;
letter-spacing:6px;
animation:pulse 1.2s infinite;
}

@keyframes pulse{
0%,100%{opacity:.3}
50%{opacity:1}
}

/* ================= HEADER ================= */

.header{
position:sticky;
top:0;
background:rgba(0,0,0,.45);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
padding:16px 20px;
z-index:100;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.logo{
font-weight:700;
text-decoration:none;
color:#fff;
}

.nav nav a{
margin-left:16px;
text-decoration:none;
color:#cbd5f1;
font-size:14px;
}

/* ================= SECTIONS ================= */

.page{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:60px 20px;
position:relative;
z-index:1;
}

.page > *{
width:100%;
max-width:1100px;
}

/* ================= HERO TEXT ================= */

.hero h1{
font-size:clamp(32px,6vw,54px);
background:linear-gradient(90deg,#fff,var(--accent2));
-webkit-background-clip:text;
color:transparent;
}

/* ================= BUTTON ================= */

.btn{
display:inline-block;
margin-top:24px;
padding:14px 28px;
border-radius:12px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
text-decoration:none;
color:white;
font-weight:600;
}

/* ================= GRID ================= */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;
width:100%;
margin-top:30px;
}

/* ================= CARDS ================= */

.card{
background:rgba(255,255,255,.06);
border:1px solid var(--border);
padding:28px;
border-radius:18px;
text-decoration:none;
color:white;
transition:.25s;
}

.card:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.12);
}

/* ================= VIDEO GRID ================= */

.video-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:22px;
padding:30px 0;
width:100%;
}

.video-grid iframe,
.video-grid video{
width:100%;
aspect-ratio:16/9;
border-radius:14px;
background:#000;
}

/* ================= GALLERY ================= */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
padding:30px 0;
width:100%;
}

.gallery img{
width:100%;
border-radius:14px;
}

/* ================= CONTACT ================= */

.contact-card{
max-width:520px;
width:100%;
display:flex;
flex-direction:column;
gap:14px;
}

.contact-card input,
.contact-card textarea{
padding:14px;
border-radius:10px;
border:1px solid var(--border);
background:#0f172a;
color:white;
}

/* ================= FOOTER ================= */

.footer{
text-align:center;
padding:40px;
opacity:.6;
border-top:1px solid var(--border);
}

/* ================= FLOATING LOGOS ================= */

.bg-logos{
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
overflow:hidden;
}

.bg-logos img{
position:absolute;
width:90px;
opacity:.22;
filter:blur(.4px) brightness(1.3)
drop-shadow(0 0 25px rgba(139,92,246,.5));
animation:logoLoop linear infinite;
}

.bg-logos img:nth-child(1){left:8%;animation-duration:28s;}
.bg-logos img:nth-child(2){left:30%;animation-duration:34s;animation-delay:-8s;}
.bg-logos img:nth-child(3){left:65%;animation-duration:30s;animation-delay:-14s;}
.bg-logos img:nth-child(4){left:85%;animation-duration:38s;animation-delay:-4s;}

@keyframes logoLoop{
0%{transform:translateY(120vh) rotate(0deg);}
100%{transform:translateY(-20vh) rotate(360deg);}
}

/* ================= ABOUT CENTER PANEL ================= */

.about-box{
position:relative;
min-height:calc(100vh - 90px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.about-box::before{
content:"";
position:absolute;
width:min(1200px, 94%);
height:560px;
border-radius:36px;
border:1.5px solid rgba(255,255,255,0.65);
box-shadow:
0 0 0 1px rgba(255,255,255,0.08) inset,
0 0 80px rgba(120,140,255,0.18);
}

.about-box h1{
position:absolute;
top:60px;
left:50%;
transform:translateX(-50%);
background:rgba(10,15,35,.95);
padding:10px 26px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.5);
font-size:20px;
letter-spacing:2px;
color:#fff;
}

.about-box p,
.about-box .btn{
max-width:720px;
position:relative;
z-index:2;
}

.about-box .btn{
width:420px;
max-width:80%;
}

/* ================= WHITE WHAT I EDIT SECTION ================= */

.white-section{
background:#ffffff;
color:#111;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:60px 40px;
text-align:center;
border-radius:28px;
box-shadow:0 30px 80px rgba(0,0,0,0.25);
}

.white-section h2{
color:#111;
}

.white-section .grid{
max-width:1000px;
margin:40px auto;
}

.white-section .card{
background:#f3f4f8;
color:#111;
border:1px solid rgba(0,0,0,0.08);
}

.white-section .card:hover{
background:#e7e9f2;
transform:translateY(-6px);
}

.white-section .btn{
color:#fff;
}



/* ===== DESIGN WORK GRID FIX ===== */

.gallery img{
  width:100%;
  height:260px;            /* same height for all */
  object-fit:contain;      /* show full image */
  background:#fffff;      /* empty area fill */
  border-radius:16px;
  padding:10px;
}



/* AE moving grid */

body::before{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(rgba(168,85,247,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(168,85,247,.06) 1px, transparent 1px);
background-size:80px 80px;
animation:gridMove 18s linear infinite;
z-index:-3;
}

@keyframes gridMove{
0%{background-position:0 0, 0 0;}
100%{background-position:80px 80px, 80px 80px;}
}




/* ================= MAIL FRAME ================= */

.mail-frame::before{
content:"";
position:absolute;
width:min(900px, 92%);
height:620px;
border-radius:28px;
border:1.5px solid rgba(255,255,255,.45);
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 0px rgba(139,92,246,.18);
z-index:0;
pointer-events:none;
}