/* ---------------------------------------------------- */
/* GLOBAL HERO BASE                                      */
/* ---------------------------------------------------- */

.hero {
  position: relative;
  min-height: 600px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
  background: #0a0a0a;
}

/* FULL-WIDTH HERO IMAGE */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;           /* ALWAYS full width */
  height: 100%;          /* Fill screen height */
  object-fit: cover;     /* Cover whole hero */
  display: block;

  /* Soft zoom */
  opacity: 1 !important;
  animation: heroSoftZoom 1.8s ease-out forwards;

  filter: brightness(.55);
  z-index: 1;
}

@keyframes heroSoftZoom {
  0% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------- */
/* HERO CONTENT                                          */
/* ---------------------------------------------------- */

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  padding: 0 1rem;
  margin-top: 220px;     /* same visual placement as before */
}

.hero h1,
.hero p,
.hero .btn-primary {
  position: relative;
}

/* Text animations */
.hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpText 1s ease-out forwards 0.3s;
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 2rem;
  color: #ddd;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpText 1s ease-out forwards 0.6s;
}

.btn-primary {
  background: var(--btn-primary);
  color: #000;
  padding: .75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: .25s;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpText 1s ease-out forwards 0.9s;
}

@keyframes fadeUpText {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------- */
/* LIGHT SWEEP EFFECT                                    */
/* ---------------------------------------------------- */

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 300%;
  height: 100%;
  background: linear-gradient(
    70deg,
    transparent 40%,
    rgba(255,255,255,0.35) 50%,
    transparent 60%
  );
  animation: lightSweep 6s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

@keyframes lightSweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* ---------------------------------------------------- */
/* RESPONSIVE — IMAGE REMAINS FULL WIDTH                 */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
  .hero {
    height: 90vh;
    padding: 0 1.5rem;
  }

  .hero-content {
    max-width: 90%;
    margin-top: 180px;
  }
}

@media (max-width: 600px) {
  .hero {
    height: auto;          /* Allow full-height image */
    min-height: 550px;     /* Optional safety floor */
    padding: 0;            /* Keep clean edges */
  }

  .hero-bg {
    height: auto;          /* Keeps full logo visible */
    width: 100%;
    object-fit: contain;   /* No cropping at all */
  }

  .hero-content {
    position: absolute;
    bottom: 12%;
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 85vh;
  }

  .hero-content {
    margin-top: 140px;
  }

  .btn-primary {
    padding: .65rem 1.2rem;
    font-size: .95rem;
  }
}

/* ---------------------------------------------------- */
/* PAGE-SPECIFIC HERO HEADINGS                           */
/* ---------------------------------------------------- */

.about-hero .hero-content h1,
.projects-hero .hero-content h1,
.contact-hero .hero-content h1,
.jobs-hero .hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.about-hero .hero-content p,
.projects-hero .hero-content p,
.contact-hero .hero-content p,
.jobs-hero .hero-content p {
  font-size: 1.25rem;
  color: #ccc;
}