.container {
  transition: padding-top 300ms ease-in-out, padding-bottom 300ms ease-in-out;
}

.w-12 {
  transition: width 300ms ease-in-out, height 300ms ease-in-out;
}

.text-xl {
  transition: font-size 300ms ease-in-out, line-height 300ms ease-in-out;
}

.text-2xl {
  transition: font-size 300ms ease-in-out, line-height 300ms ease-in-out;
}

.md\:text-3xl {
  transition: font-size 300ms ease-in-out, line-height 300ms ease-in-out;
}

.text-sm {
  transition: font-size 300ms ease-in-out, line-height 300ms ease-in-out;
}

.w-6 {
  transition: width 300ms ease-in-out, height 300ms ease-in-out;
}



/* Base styles for the header with comprehensive transitions */
header {
  transition: 
    opacity 300ms ease-in-out, 
    transform 300ms ease-in-out, 
    height 300ms ease-in-out; /* Ensures smooth height changes during shrink/expand */
  transform-origin: top; /* Anchors slide animation from the top edge */
  opacity: 1; /* Explicit default for reliable transitions */
  transform: translateY(0); /* Explicit default for reliable transitions */
  /* Assuming position: fixed; top: 0; width: 100%; z-index: high; is already set */
}

/* Hidden state: slide up and fade out (from shrunk height) */
header.hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none; /* Prevents interactions during exit animation */
}

/* Shrunk state: compact sizing with transitioned children (your existing rules preserved) */
.shrunk .container {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: padding-top 300ms ease-in-out, padding-bottom 300ms ease-in-out; /* Ensure this is on .container base */
}

.shrunk .w-12,
.shrunk .w-6 {
  transition: width 300ms ease-in-out, height 300ms ease-in-out;
}

.shrunk .text-xl,
.shrunk .text-2xl,
.shrunk .md\:text-3xl,
.shrunk .text-sm {
  transition: font-size 300ms ease-in-out, line-height 300ms ease-in-out;
}

/* Content adjustment when header is hidden */
body.header-hidden .container {
  padding-top: 0 !important;
  transition: padding-top 300ms ease-in-out; /* Smooth content shift */
}