/* Hero animation wrapper */
.hero-animated {
  position: relative;
  overflow: hidden;
  height: 100dvh;
}

/* Black overlay */
.hero-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: var(--wp--preset--color--primary-accent);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reverse reveal animation */
.hero-overlay.revealing {
  animation: revealFromBottom 1.8s linear forwards;
}

@keyframes revealFromBottom {
  0% {
    clip-path: inset(0 0 0 0); /* Fully covers background */
  }
  100% {
    clip-path: inset(0 0 100% 0); /* Fully revealed */
  }
}

/* Cloned logo (centered, flies to real position) */
.hero-logo-clone {
  opacity: 0;
  transition: opacity 1.4s ease, transform 1s ease;
  position: absolute;
  z-index: 10000;
  max-width: none;
  max-height: none;
}

.hero-logo-clone.visible {
  opacity: 1;
}

/* Initially hide everything */
.hero-content {
  opacity: 0;
  pointer-events: none;
}

/* When revealed */
.hero-content.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Headings */
.hero-line {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 0.8s ease-out forwards;
}
.hero-line:nth-of-type(1) { animation-delay: 0.2s; }
.hero-line:nth-of-type(2) { animation-delay: 0.6s; }

/* Paragraphs */
.hero-text {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 0.8s ease-out forwards;
}
.hero-text:nth-of-type(1) { animation-delay: 1s; }
.hero-text:nth-of-type(2) { animation-delay: 1.4s; }

/* Buttons - hide both WordPress and OpenTable buttons by default */
.hero-animated .hero-content .wp-block-button__link,
.hero-animated .hero-content .ot-button {
  opacity: 0;
  transform: translateY(20px);
  animation: buttonIn 0.6s ease-out forwards;
  animation-play-state: paused; /* important */
}

/* WordPress button (book an event) - second button */
.hero-animated .hero-content .wp-block-button:nth-child(1) .wp-block-button__link.animate {
  animation-delay: 2.5s;
  animation-play-state: running;
}

.hero-animated .hero-content .wp-block-button:nth-child(2) .wp-block-button__link.animate {
  animation-delay: 2.5s;
  animation-play-state: running;
}

/* OpenTable button - animate at same time or before the book an event button */
.hero-animated .hero-content .ot-button.animate {
  animation-delay: 2s; /* Appears first */
  animation-play-state: running;
}

/* Alternative: if you want them both at the same time, use 2.5s for both */
/* .hero-animated .hero-content .ot-button.animate {
  animation-delay: 2.5s;
  animation-play-state: running;
} */

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ===== COOKIE BANNER DELAY ===== */
/* Hide cookie banner initially on pages with hero animation */
body:has(.hero-animated) #cmplz-cookiebanner-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Show banner when ready */
body:has(.hero-animated) #cmplz-cookiebanner-container.show-banner {
  opacity: 1;
  pointer-events: auto;
}

/* Fallback for browsers that don't support :has() */
/* Replace YOUR_PAGE_ID with your actual page IDs */
body.home #cmplz-cookiebanner-container,
body.page-id-YOUR_PAGE_ID #cmplz-cookiebanner-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body.home #cmplz-cookiebanner-container.show-banner,
body.page-id-YOUR_PAGE_ID #cmplz-cookiebanner-container.show-banner {
  opacity: 1;
  pointer-events: auto;
}