/* Immersive Search Overlay */
.immersive-overlay.modal-overlay {
  display: block;
  z-index: 900;
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed;
  inset: 0;
  z-index: 900 !important;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

body.immersive-search-active .immersive-overlay.modal-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* 
   Immersive Animations & Keyframes 
   Includes vertical translation (15vh) and motion blur effect
*/

/* Transition helpers for smooth layout revert */
.app-header {
  transition:
    max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s;
}

@keyframes immersive-in {
  0% {
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
  50% {
    filter: blur(4px);
  }
  100% {
    transform: translateY(15vh) scale(1.3);
    filter: blur(0px);
  }
}

@keyframes immersive-out {
  0% {
    transform: translateY(15vh) scale(1.3);
    filter: blur(0px);
  }
  50% {
    filter: blur(4px);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Active State */
body.immersive-search-active .app-header {
  /* Layout Props */
  width: 600px !important; /* Enforce fixed width base */
  max-width: 90vw !important; /* Constrain width */
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 1001 !important;
  border-radius: 12px;

  /* Use active animation for transform + blur */
  /* We maintain the final transform state here in case animation finishes */
  transform: translateY(15vh) scale(1.3);
  animation: immersive-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Exiting State (triggered via JS) */
body.immersive-search-exiting .app-header {
  /* Ensure it stays on top while exiting */
  z-index: 1001 !important;
  pointer-events: none;

  /* Animate back to original */
  animation: immersive-out 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  /* Note: Layout properties (max-width) will revert via transition on .app-header 
     because this class does not enforce them. This allows sync between transform and width. */
}

/* Hide other header elements */
body.immersive-search-active .header-actions,
body.immersive-search-active .app-header h1 {
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revert mechanism for elements */
body.immersive-search-exiting .header-actions,
body.immersive-search-exiting .app-header h1 {
  /* Transition handles the fade back in automatically when 'active' is removed */
}

body.immersive-search-active .header-center {
  width: 100%;
}

body.immersive-search-active .search-suggestions {
  max-height: 50vh;
}

body.immersive-search-active .app-container {
  z-index: auto !important;
  transform: none !important;
}