/* GENERAL */
body { background-color:#101c22; font-family: 'Inter', sans-serif; color:white; scroll-behavior: smooth; }

/* INTRO */
#intro {
  position: fixed; inset:0; display:flex; justify-content:center; align-items:center; z-index:50; background:#101c22;
}
.light-sweep-text {
  font-size:64px; font-weight:900; text-transform:uppercase;
  background: linear-gradient(135deg,#101c22 40%,#fff 50%,#101c22 60%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: sweep 3s ease-in-out infinite;
}
@keyframes sweep { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* NAVBAR */
#navbar { position:fixed; top:0; left:0; width:100%; z-index:50; background:rgba(16,28,34,0.8); backdrop-filter:blur(6px); padding:1rem 0; display:flex; justify-content:center; transition: all 0.3s;}
#navbar.scrolled { padding:0.5rem 0; box-shadow:0 4px 6px rgba(0,0,0,0.4); background:rgba(16,28,34,0.95);}
.nav-container { max-width:1200px; display:flex; justify-content:space-between; align-items:center; width:100%; padding:0 1.5rem;}
.logo img { height:40px; }z
.logo span { margin-left:0; font-weight:700; color:white; }
#menu { display:flex; gap:1.5rem; }
#menu.hidden { display:none; }
.nav-link { color:white; transition:.3s; }
.nav-link:hover, .nav-active { color:yellow; font-weight:700; }

/* HERO */
#hero { height:100vh; position:relative; display:flex; justify-content:center; align-items:center; text-align:center;}
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-content h1 { font-size:3rem; font-weight:900; text-transform:uppercase;}
.hero-content p { margin-top:1.5rem; font-size:1.2rem; color:#d1d5db;}
.hero-buttons { margin-top:2rem; display:flex; justify-content:center; gap:1rem;}
.btn-yellow { background:#facc15; color:black; padding:.75rem 1.5rem; border-radius:.375rem; font-weight:600; transition:.3s;}
.btn-yellow:hover { background:#eab308;}
.btn-border { border:1px solid white; padding:.75rem 1.5rem; border-radius:.375rem; transition:.3s;}
.btn-border:hover { background:white; color:black;}

/* STUDIO */
.studio-container { display:flex; flex-direction:column; gap:2.5rem; max-width:1200px; margin:0 auto; padding:3rem 1.5rem;}
.studio-text { flex:1;}
.studio-image { flex:1;}
.studio-image img { width:100%; border-radius:.5rem; box-shadow:0 10px 20px rgba(0,0,0,0.4);}
@media(min-width:768px){.studio-container{flex-direction:row}.studio-image{margin-left:6rem;}}

/* SERVICES */
.services-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; margin-top:2rem;}
.service-card { background:rgba(16,28,34,.4); padding:2rem; border-radius:.75rem; border:1px solid #374151;}
@media(min-width:768px){.services-grid{grid-template-columns:repeat(3,1fr);}}

/* PROCESS */
.process-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin-top:2rem;}
.process-step { background:rgba(16,28,34,.5); padding:1.5rem; border-radius:.5rem; box-shadow:0 5px 10px rgba(0,0,0,0.4);}
@media(min-width:768px){.process-grid{grid-template-columns:repeat(3,1fr);}}

/* PROJECTS */
.projects-grid { display:grid; grid-template-columns:1fr; gap:1.5rem;}
.projects-grid img { border-radius:.5rem; box-shadow:0 5px 15px rgba(0,0,0,0.4);}
@media(min-width:768px){.projects-grid{grid-template-columns:repeat(3,1fr);}}

/* Standardize Project Image Sizes */
.project-card {
  @apply relative overflow-hidden rounded-lg shadow-lg aspect-square bg-gray-800;
}
.project-card img {
  @apply w-full h-full object-cover transition-transform duration-500 hover:scale-110;
}
/* Filter Button Styling */
.filter-btn {
  @apply px-4 py-2 border border-gray-600 rounded-full text-sm transition hover:bg-yellow-400 hover:text-black hover:border-yellow-400;
}
.filter-btn.active {
  @apply bg-yellow-400 text-black border-yellow-400;
}
/* CONTACT */
#contact { text-align:center; padding:3rem 1.5rem;}
#contact p { margin-top:.5rem; color:#d1d5db;}
#contact .btn-yellow { margin-top:1.5rem;}

/* FOOTER */
footer { text-align:center; padding:1.5rem; font-size:.875rem; color:#9ca3af; border-top:1px solid #374151; }

/* FADE IN */
.fade-in { opacity:0; transition:opacity 1s; }
.fade-in-visible { opacity:1; }