.header-gradient-woods {
  /* Force the header gradient to be fully transparent so the hero video shows through */
  background-color: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure the logo stays on top of the hero video */
.clapat-logo-woods {
  position: relative !important;
  z-index: 10 !important;
}

/* Logo theme toggles — both images overlayed, JS will set theme by toggling .theme-dark/.theme-light on #clapat-logo */
#clapat-logo a {
  position: relative;
  display: inline-block;
}
#clapat-logo img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: opacity 220ms ease, transform 280ms ease;
  backface-visibility: hidden;
}
#clapat-logo img.white-logo {
  opacity: 0;
  transform: translateZ(0) scale(1);
}
#clapat-logo img.black-logo {
  opacity: 1;
}
#clapat-logo.theme-dark img.white-logo {
  opacity: 1;
}
#clapat-logo.theme-dark img.black-logo {
  opacity: 0;
}
#clapat-logo.theme-light img.white-logo {
  opacity: 0;
}
#clapat-logo.theme-light img.black-logo {
  opacity: 1;
}

/* Ensure both images don't affect layout — JS will measure natural size and set inline container size to avoid shifts */
@media (prefers-reduced-motion: reduce) {
  #clapat-logo img { transition: none !important; }
}

/* Make sure hero video sits underneath the header/logo but above page background */
.bg-video-woods {
  /* Use fixed full-viewport sizing to avoid letterboxing */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 120vh !important; /* Extra height for parallax scrolling */
  min-width: 100vw !important;
  object-fit: cover !important;
  object-position: center center !important;
  /* transform handled by JS for parallax effect */
  margin: 0 !important;
  z-index: 5 !important; /* Keep it under the header */
}

/* Make the hero container cover the viewport (video already fixed) */
.bg-gif-woods {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  z-index: 0 !important; /* place under content/overlay */
  pointer-events: none !important;
}

/* Remove previous centering transform rules to prevent letterboxing */
.bg-gif-woods .bg-video-woods {
  /* no-op: the fixed .bg-video-woods rules above apply */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 120vh !important; /* Extra height for parallax scrolling */
  object-fit: cover !important;
  object-position: center center !important;
  /* transform handled by JS for parallax effect */
  margin: 0 !important;
  z-index: 5 !important;
}

/* Keep header fixed above the video on all devices */
.clapat-header-woods {
  position: fixed !important;
  z-index: 100 !important;
  background: transparent !important;
}

/* Override the original bg-overlay to prevent black bars and ensure full coverage */
.bg-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: transparent !important;
  z-index: 11 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Centered caption over the hero video */
.bg-woods-caption {
  position: fixed !important;
  inset: 0 !important; /* top:0; right:0; bottom:0; left:0 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important; /* above the video (z-index:5) and below header */
  pointer-events: none !important;
  padding: 0 32px !important;
  text-align: center !important;
}

.bg-woods-caption .bg-woods-title {
  font-family: 'Montserrat', sans-serif !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 4.8vw, 64px) !important;
  line-height: 1.05 !important;
  text-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
  margin: 0 !important;
  letter-spacing: -0.2px !important;
}

/* Make sure caption is readable on very small screens */
@media (max-width: 420px) {
  .bg-woods-caption .bg-woods-title {
    font-size: 20px !important;
    padding: 0 12px !important;
  }
}

/* Enhanced masked reveal animation (isolated to caption) */
.bg-woods-caption .bg-woods-title {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* Mask is hidden by default so text remains visible if animation doesn't run */
.bg-woods-caption .bg-woods-title::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(14, 20, 20, 0.85) !important; /* dark mask used for reveal */
  z-index: 2 !important;
  transform: translateX(110%) !important; /* off-screen by default */
  opacity: 0 !important;
  transition: transform 900ms cubic-bezier(.2,.9,.3,1) 350ms, opacity 900ms cubic-bezier(.2,.9,.3,1) 350ms !important;
  pointer-events: none !important;
}

/* When we want to use the mask, add the mask class first (only via JS). This places the mask over the text. */
.bg-woods-title--mask::before {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* Primary animation: fade/slide/scale of the text + mask slides out */
.bg-woods-title--animate {
  opacity: 1 !important; /* text stays visible during mask animation */
  transform: translateY(0) scale(1) !important;
  will-change: opacity, transform !important;
  animation: woodsReveal 900ms cubic-bezier(.2,.9,.3,1) 350ms both !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;
}

/* when both mask and animate are present, move mask away to reveal */
.bg-woods-title--mask.bg-woods-title--animate::before {
  transform: translateX(110%) !important; /* slide mask away */
  opacity: 0 !important;
}

@keyframes woodsReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Keep final masked state if script sets played class */
.bg-woods-caption--played .bg-woods-title::before {
  transform: translateX(110%) !important;
  transition: none !important;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .bg-woods-title--animate, .bg-woods-caption--played .bg-woods-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bg-woods-caption .bg-woods-title::before { display: none !important; }
}

/* Optional utility to re-trigger the animation with JS if desired */
.bg-woods-caption--replay .bg-woods-title--animate {
  animation: woodsReveal 900ms cubic-bezier(.2,.9,.3,1) 350ms both;
}