/* ======================================================
   HOME.CSS
   Page-specific styles only
   Shared styles are handled by common.css
====================================================== */


/* ===================== HERO SECTION ===================== */
#home{
  position:relative;
}

#home::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left,
    rgba(94,234,212,.08),
    transparent 35%),
    radial-gradient(circle at bottom right,
    rgba(6,182,212,.08),
    transparent 35%);
  pointer-events:none;
}

#home h1{
  line-height:1.1;
}

#home p{
  color:var(--text-muted);
}


/* ===================== HERO BUTTONS ===================== */
#home a{
  min-width:210px;
  transform:translateY(0);
  box-shadow:0 0 0 transparent;
  transition:
    background-color .35s ease,
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
  will-change:transform,background-color,color,box-shadow;
}

#home a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(94,234,212,.18);
}

/* ===================== BACKGROUND ===================== */
body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-family:'Inter',sans-serif;
  background:var(--bg-color);
  color:var(--text-color);
  transition:background .35s ease,color .35s ease;
}


/* ===================== LOGO SECTION ===================== */
#logo img{
  margin:auto;
  filter:drop-shadow(0 0 22px rgba(94,234,212,.28));
  animation:
    logoEnter 1.2s ease forwards,
    logoFloat 5s ease-in-out infinite 1.2s;
  opacity:0;
}

@keyframes logoEnter{
  0%{
    opacity:0;
    transform:translateY(28px) scale(.82);
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes logoFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }
}


/* ===================== ABOUT ===================== */
#about p{
  color:var(--text-muted);
  max-width:760px;
}


/* ===================== SERVICES ===================== */
#services .glass-card{
  min-height:220px;
}

#services h3{
  letter-spacing:.3px;
}

#services p{
  color:var(--text-muted);
}


/* ===================== PROJECTS ===================== */
#projects .glass-card{
  min-height:280px;
}

#projects p{
  color:var(--text-muted);
}

#projects a{
  font-weight:600;
}

#projects a:hover{
  letter-spacing:.4px;
}


/* ===================== RATING ===================== */
#rating span{
  cursor:pointer;
  transition:
    transform .25s ease,
    color .25s ease;
}

#rating span:hover{
  transform:scale(1.18);
}

#ratingMsg{
  min-height:28px;
}


/* ===================== SECTION SPACING ===================== */
section{
  position:relative;
}


/* ===================== MOBILE ===================== */
@media (max-width:768px){

  #home h1{
    font-size:2.5rem;
  }

  #home a{
    min-width:100%;
  }

  #services .glass-card,
  #projects .glass-card{
    min-height:auto;
  }

}