/* ------------------------------
   Aryan Portfolio - style.css
   ------------------------------
   - Clean, dark-modern look
   - No flickering gradients on home
   - Glassmorphism cards, floating tech icons
   - Responsive
--------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
  --bg: #0b0c10;
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.06);
  --accent: #00d4ff;
  --accent-2: #7b61ff;
  --muted: #a8b3bd;
  --glass-border: rgba(255,255,255,0.08);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins',sans-serif;
  background: linear-gradient(180deg, #07080b 0%, var(--bg) 100%);
  color:#eef2f6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}

/* NAV */
.navbar{
  position:fixed;left:0;right:0;top:0;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4%;
  background: rgba(6,7,10,0.45);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  z-index:999;
}
.logo{font-weight:700;color:var(--accent);letter-spacing:0.6px}
.nav-links{display:flex;gap:18px;list-style:none}
.nav-links a{
  color: #e6eef6;
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:500;
  transition:all .18s ease;
}
.nav-links a:hover{background:rgba(255,255,255,0.02);color:var(--accent)}

/* MAIN LAYOUT */
section{padding:80px 4%}
@media(min-width:900px){section{padding:100px 6%}}

/* HOME */
.home{
  min-height:calc(100vh - 68px);
  display:flex;
  align-items:center;
  gap:40px;
  padding-top:90px;
  justify-content:center;
}
.hero-content{
  max-width:680px;
  text-align:left;
}
.home h2{
  font-size:2.8rem;
  margin-bottom:10px;
  letter-spacing:0.6px;
  color:#fff;
}
.home h2 span{color:var(--accent); text-shadow:0 6px 20px rgba(0,212,255,0.08)}
.home h3{font-size:1.25rem;color:var(--muted);height:28px;margin-bottom:18px;}

/* static hero image on right */
.hero-img img{
  width:280px;
  max-width:42vw;
  opacity:0.98;
  filter: drop-shadow(0 14px 30px rgba(11,12,16,0.7));
  transform: translateY(0);
  transition: transform .6s cubic-bezier(.2,.9,.3,1);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:8px;
  border: 1px solid rgba(255,255,255,0.02);
}
.hero-img img:hover{transform: translateY(-10px)}

/* BUTTON */
.btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#061014;
  padding:10px 18px;border-radius:999px;font-weight:600;text-decoration:none;
  box-shadow:0 8px 28px rgba(123,97,255,0.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,212,255,0.14)}

/* ABOUT */
.about{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border-radius:16px;
  padding:48px;
  margin-top:20px;
  display:flex;flex-direction:column;gap:22px;
  box-shadow: 0 6px 30px rgba(2,4,6,0.6);
  border: 1px solid var(--glass-border);
}
.about-container{
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;
}
.about-img{
  width:180px;height:180px;border-radius:14px;
  object-fit:cover;border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:6px;
}
.about-text{flex:1;min-width:260px}
.about-text h2{font-size:1.6rem;margin-bottom:10px;color:var(--accent)}
.about-text p{color:var(--muted);margin-bottom:14px}

/* WHY ME - styled bullets */
.why-me{margin-top:10px}
.why-me h3{margin-bottom:8px;color:var(--accent-2)}
.why-me ul{list-style:none;padding-left:0}
.why-me li{
  background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
  padding:10px;border-radius:10px;margin-bottom:8px;color:var(--muted);
  display:flex;gap:12px;align-items:flex-start;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.01);
}

/* TECH STACK - floating orbit */
.skills{
  margin-top:18px;padding:48px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
  border:1px solid var(--glass-border);
}
.skills h2{color:var(--accent);margin-bottom:18px}
.floating-icons{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center;
  padding:18px;
  position:relative;
  min-height:120px;
}
.floating-icons img{
  width:60px;height:60px;object-fit:contain;border-radius:10px;padding:8px;background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  animation: floaty 6s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .18s;
}
.floating-icons img:hover{transform:translateY(-8px) scale(1.06);box-shadow:0 18px 44px rgba(0,212,255,0.06)}
/* staggered animation delays */
.floating-icons img:nth-child(1){animation-delay:0s}
.floating-icons img:nth-child(2){animation-delay:.4s}
.floating-icons img:nth-child(3){animation-delay:.8s}
.floating-icons img:nth-child(4){animation-delay:1.2s}
.floating-icons img:nth-child(5){animation-delay:1.6s}
.floating-icons img:nth-child(6){animation-delay:2s}
.floating-icons img:nth-child(7){animation-delay:2.4s}

@keyframes floaty{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

/* PROJECTS */
.projects{margin-top:26px;padding:28px;border-radius:14px;border:1px solid var(--glass-border);background:var(--card)}
.projects h2{color:var(--accent)}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.project-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;padding:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px;transition:transform .36s}
.project-card:hover{transform:translateY(-8px);box-shadow:0 18px 44px rgba(0,0,0,0.6)}
.project-card:hover img{transform:scale(1.06)}
.project-card h3{margin-bottom:6px}
.project-card p{color:var(--muted);font-size:.95rem;margin-bottom:10px}
.project-card .btn{display:inline-block}

/* EXPERIENCE - expanded timeline */
.experience{margin-top:26px;padding:28px;border-radius:14px;border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.experience h2{color:var(--accent)}
.timeline{display:flex;flex-direction:column;gap:18px;margin-top:12px}
.timeline-item{
  display:flex;gap:16px;align-items:flex-start;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);
}
.timeline-dot{
  width:12px;height:12px;border-radius:50%;background:linear-gradient(180deg,var(--accent),var(--accent-2));margin-top:6px;flex-shrink:0;
  box-shadow:0 8px 22px rgba(123,97,255,0.12);
}
.timeline-content h3{margin-bottom:6px}
.timeline-content p{color:var(--muted);font-size:.95rem}

/* TESTIMONIALS - optional small */
.testimonials{margin-top:26px;padding:20px;border-radius:14px;background:var(--card);border:1px solid var(--glass-border)}
.testimonial-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.testimonial{max-width:360px;padding:18px;border-radius:10px;background:rgba(255,255,255,0.02);color:var(--muted);font-style:italic}

/* CONTACT */
/* .contact{margin-top:26px;padding:26px;border-radius:14px;border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.contact h2{color:var(--accent)}
form{max-width:680px;margin:0 auto;display:grid;gap:12px;grid-template-columns:1fr 1fr}
form input,form textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);
  background:transparent;color:#eaf2f8;outline:none;font-size:0.95rem;
}
form textarea{grid-column:1 / -1;resize:vertical;min-height:120px}
form .btn{grid-column:1 / -1;justify-self:start;margin-top:6px}
#response{color:var(--accent);font-weight:600;margin-top:10px;text-align:center} */
/* CONTACT */
.contact {
  margin-top: 60px;
  padding: 80px 6%;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  text-align: center;
}

.contact h2 {
  color: var(--accent);
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.contact p {
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 50px;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* FORM GRID */
form {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 20px 24px;
  grid-template-columns: 1fr 1fr;
}

form input,
form textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: #eaf2f8;
  outline: none;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

form input:focus,
form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
}

form textarea {
  grid-column: 1 / -1;
  resize: vertical;
  min-height: 130px;
}

form .btn {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 10px;
  padding: 12px 30px;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.35);
  transition: all 0.25s ease;
}

form .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.55);
}

#response {
  color: var(--accent);
  font-weight: 600;
  margin-top: 20px;
  text-align: center;
}

/* RESPONSIVE FORM */
@media (max-width: 768px) {
  form {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact {
    padding: 60px 5%;
  }

  .contact h2 {
    font-size: 1.9rem;
  }
}


/* FOOTER */
footer{padding:26px 4%;text-align:center;color:var(--muted);margin-top:24px;border-top:1px solid rgba(255,255,255,0.02)}

/* REVEAL ANIM */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.active{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-content{text-align:center}
  .home{flex-direction:column;padding-top:90px}
  .hero-img img{width:220px}
  .about-container{flex-direction:column;align-items:center;text-align:center}
  form{grid-template-columns:1fr}
  .nav-links{display:none}
}

/* ===========================
   SOCIAL ICONS STYLING
   (added by assistant)
   =========================== */
.social-links {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.social-links a {
  color: var(--accent);
  font-size: 2rem;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.social-links a:hover {
  color: var(--accent-2);
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 0 16px rgba(123, 97, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 8px var(--accent-2);
}

/* Optional: animate icons when .reveal becomes active */
.reveal .social-links a {
  opacity: 0;
  transform: translateY(10px);
}
.reveal.active .social-links a {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.36s cubic-bezier(.2,.9,.3,1);
}
/* === Social Icons Styling === */
.social-links {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.social-links a {
  color: var(--accent);
  font-size: 1.9rem;
  transition: all 0.25s ease;
}

.social-links a:hover {
  color: var(--accent-2);
  transform: translateY(-4px) scale(1.1);
}
.social-links a:hover {
  color: var(--accent-2);
  transform: translateY(-4px) scale(1.1);
  text-shadow: 0 0 12px var(--accent-2);
}