/* ==========================================
   HERO BANNER
========================================== */
#hero-banner {
  position: relative;
  width: 100%;
  height: 35vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  margin-top: 0;
  color: rgb(3, 3, 3);
}

/* ==========================================
   ALL BACKGROUND LAYERS (shared styles)
========================================== */
.hero-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  will-change: transform, opacity;
  background-repeat: no-repeat;   /* ✅ prevents tiling/stacked duplicates */
  will-change: transform, opacity;
}

/* ==========================================
   1️⃣ FIRST BANNER (ZOOM OUT)
========================================== */
.hero-bg.first-bg {
  z-index: 1;
  background-image: url("../images/banner-dog-prints-snow.jpg");
  background-size: 125%; /* start zoomed in */
  animation: firstBannerZoom 12s ease-out forwards;
}

@keyframes firstBannerZoom {
  from {
    background-size: 125%;
  }
  to {
    background-size: 100%;
  }
}

/* ==========================================
   2️⃣ SECOND BANNER (FADE IN + RISE + ZOOM)
========================================== */
.hero-bg.second-bg {
  z-index: 2;
  background-image: url("../images/banner-snow.jpg");
  opacity: 0;
  opacity: 0;
transform: scale(1.05);
transform-origin: center top;

}

#hero-banner.show-second .second-bg {
  animation: secondBannerReveal 12s ease-out forwards;
}

@keyframes secondBannerReveal {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* ==========================================
   3️⃣ FOURTH BANNER → appears third in sequence (FADE IN + RISE + ZOOM)
========================================== */
.hero-bg.fourth-bg {
  z-index: 2;
  background-image: url("../images/Zuzu-banner-snow-2.jpg");
  opacity: 0;
  opacity: 0;
transform: scale(1.05);
transform-origin: center top;

}

#hero-banner.show-fourth .fourth-bg {
  animation: fourthBannerReveal 12s ease-out forwards;
}

@keyframes fourthBannerReveal {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* ==========================================
   4️⃣ VIDEO → fades in last
========================================== */
#hero-video.third-bg {
  display: block !important;     /* prevents “won’t play unless display:block” */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}

/* Fade in video when JS sets display: block and opacity: 1 */
#hero-video.third-bg.visible {
  opacity: 1;
}

/* Fade-in animation for video */
@keyframes videoFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ==========================================
   HERO CONTENT (TEXT) — fades in AFTER first banner starts
========================================== */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 8s ease, transform 8s ease;
  will-change: opacity, transform;
}

#hero-banner.show-text .hero-content {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================
   HERO TEXT STYLES (YOUR ORIGINAL)
========================================== */
.hero-content h1 {
  font-size: 4.5rem;
  font-family: "Playfair Display", serif;
  color: #333;
  margin-bottom: 5px;
  margin-top: 0.5rem;
  text-shadow:
    -1px -1px 0 #CD7F32,
     1px -1px 0 #CD7F32,
    -1px  1px 0 #CD7F32,
     1px  1px 0 #CD7F32;
}

.hero-content .pet-paws {
  font-size: 4.5rem;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #333;
  margin-bottom: 5px;
  margin-top: 0.5rem;
  text-shadow:
    -1px -1px 0 #CD7F32,
     1px -1px 0 #CD7F32,
    -1px  1px 0 #CD7F32,
     1px  1px 0 #CD7F32;
  opacity: 1 !important;
  filter: 
    drop-shadow(0 0 5px #f7eec8)
    drop-shadow(0 0 10px #cae2f5)
    drop-shadow(0 0 15px #99cdf8)
    drop-shadow(0 0 20px #6db0f3);
  transition: filter 2.5s ease, opacity 2s ease;
}

.hero-content h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem;
  font-style: italic; 
  font-weight: 400;
  color: #2b2b2b;
  margin-top: 0.5rem;
  margin-bottom: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
  filter:
    drop-shadow(0 0 1px #f7eec8)
    drop-shadow(0 0 2px #cae2f5)
    drop-shadow(0 0 3px #99cdf8)
    drop-shadow(0 0 4px #6db0f3);
}


.hero-title span {
  display: block;        /* forces second line */
}


/* ==========================================
   HERO BUTTON
========================================== */
#hero-banner button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
}

/* ==========================================
   MOBILE: SHOW ONLY FIRST BANNER IMAGE
========================================== */
@media (max-width: 767px) {

  /* Hide all other hero layers on mobile */
  #hero-banner .second-bg,
  #hero-banner .fourth-bg,
  #hero-banner #hero-video {
    display: none !important;
  }

  /* Force the paw-print banner to fill the hero */
  #hero-banner .first-bg {
    display: block !important;
    background-size: cover;
    background-position: center center;
    animation: none !important;     /* stop zoom animation on phone */
    transform: none !important;
  }

  /* Adjust hero height for mobile */
  #hero-banner {
    height: 55vh;        /* tweak if needed */
    min-height: 300px;
  }
}