/* 1. The H1 Text Style */
h1.hover-reveal {
  display: inline-block !important;
  position: relative !important; 
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important; 
  font-size: 25px !important; 
  font-family: inherit; 
  line-height: 1.2 !important;
  text-transform: inherit;
  z-index: 100 !important; 
  /* Removed text-shadow from transition */
  transition: color 0.3s ease !important; 
}

/* 2. The Pop-up Media */
.hover-reveal .pop-up-content {
  display: none !important; 
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 50vw !important; 
  max-width: 900px !important;
  height: auto !important;
  z-index: 50 !important; 
  pointer-events: none !important; 
}

/* 3. The Media Trigger */
.hover-reveal:hover .pop-up-content {
  display: block !important;
}

/* 4. The Text Hover Effect - BLUR REMOVED */
h1.hover-reveal:hover {
  color: #999999 !important; /* Changes text to grey instead of blurring */
  text-shadow: none !important; /* Ensures no blur shadow remains */
}

/* 5. Mobile Adjustments */
@media screen and (max-width: 768px) {
  h1.hover-reveal {
    z-index: 9999 !important;
    pointer-events: auto !important; 
  }

  .hover-reveal .pop-up-content {
    width: 70vw !important; 
    max-width: none !important; 
    z-index: 1 !important; 
    opacity: 0.6 !important; 
    pointer-events: none !important; 
  }

  .hover-reveal .pop-up-content img,
  .hover-reveal .pop-up-content video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    will-change: transform, opacity;
  }
}

.lunchbox {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    min-height: 100vh !important; 
    height: auto !important; 
}