/* ==========================================================================
   HeartandHome Page Transitions
   Smooth fade + gentle slide between pages when navigating via the menu.
   ========================================================================== */

/* --- Transition overlay: sits behind content, covers the viewport --- */

.hh-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--hh-bg-cream, #FAF8F5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hh-transition-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* --- Prevent FOUC: hide content until JS entrance animation runs ----------
   CSS loads before DOM renders, so content starts invisible.
   The JS entrance animation (hh-page-entering) reveals it smoothly.
   After animation completes, hh-transitions-ready keeps it visible.
   -------------------------------------------------------------------------- */

#main-content,
.et-l--body,
#et-main-area,
.et-l--header,
.et-l--footer,
#main-footer {
  opacity: 0;
}

/* After JS has initialized, keep content visible (post-animation) */
body.hh-transitions-ready #main-content,
body.hh-transitions-ready .et-l--body,
body.hh-transitions-ready #et-main-area,
body.hh-transitions-ready .et-l--header,
body.hh-transitions-ready .et-l--footer,
body.hh-transitions-ready #main-footer {
  opacity: 1;
}

/* --- Page content entrance animation --- */

.hh-page-entering #main-content,
.hh-page-entering .et-l--body,
.hh-page-entering #et-main-area {
  animation: hhPageFadeIn 0.5s cubic-bezier(0.0, 0, 0.2, 1) both;
}

/* Also animate the header subtly — keeps it feeling connected */
.hh-page-entering .et-l--header {
  animation: hhHeaderFadeIn 0.4s cubic-bezier(0.0, 0, 0.2, 1) both;
}

/* Footer entrance (slightly delayed for a cascading feel) */
.hh-page-entering .et-l--footer,
.hh-page-entering #main-footer {
  animation: hhPageFadeIn 0.5s cubic-bezier(0.0, 0, 0.2, 1) 0.08s both;
}

@keyframes hhPageFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hhHeaderFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Reduced motion: disable all transition animations for a11y --- */

@media (prefers-reduced-motion: reduce) {
  .hh-transition-overlay {
    transition: none !important;
  }

  /* Disable entrance animations */
  .hh-page-entering #main-content,
  .hh-page-entering .et-l--body,
  .hh-page-entering #et-main-area,
  .hh-page-entering .et-l--header,
  .hh-page-entering .et-l--footer,
  .hh-page-entering #main-footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Prevent keyframes from running */
  @keyframes hhPageFadeIn {
    from, to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes hhHeaderFadeIn {
    from, to {
      opacity: 1;
    }
  }
}