/*
  Custom styles for the hero-to-header transition.
  In a local setup, you would typically move these into your `css/input.css`
  file under an @layer base directive if using a framework like Tailwind CSS.
*/

.is-hero .main-layout {
    opacity: 0;
    visibility: hidden;
}

.is-hero .hero-overlay {
    opacity: 1;
    visibility: visible;
}

.main-layout {
    opacity: 1;
    visibility: visible;
}

.hero-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}