/* Basic setup */
body {
  font-family: 'Open Sans', sans-serif;
}

/* Z-index fixes */
#vid_67dd623ca717767129782ca3 {
    position: relative;
    z-index: 1;
}

/* --- Button Styles & Animations --- */
#delayed-button {
    /* Base fixed state + initial hidden animation state */
    position: fixed;
    bottom: 3rem; /* 48px - Tailwind bottom-12 */
    left: 50%;
    z-index: 50;
    opacity: 0;
    transform: translateX(-50%) translateY(100px); /* Start below */
    /* Include top/bottom transitions for smoother docking changes if needed */
    transition: transform 0.8s ease-out, opacity 0.8s ease-out, top 0.3s ease-out, bottom 0.3s ease-out;
    /* Ensure it's above footer trigger initially */
    will-change: transform, opacity, position, top, bottom; /* Hint for performance */
}

#delayed-button.visible {
    /* Animation target state when becoming visible */
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Slide up to final fixed position */
}

#delayed-button.is-docked {
    /* State when near/above footer */
    position: absolute;
    bottom: auto; /* Override fixed bottom */
     /* 'top' will be set dynamically by JS */
    /* Optionally remove transitions when docked for instant positioning */
     transition: none;
}


/* --- Glow Animation (Green) --- */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px 2px rgba(22, 163, 74, 0.5); }
  50% { box-shadow: 0 0 15px 6px rgba(22, 163, 74, 0.7); }
}

.glow-animation {
  border-radius: 0.5rem;
  animation: glow 2.5s infinite ease-in-out;
  display: inline-block;
}

/* Button Focus Style */
#delayed-button button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.4);
}

/* --- Footer Trigger --- */
#footer-trigger {
  position: absolute; /* Positioned relative to the document flow */
  bottom: 0; /* Aligns with where the bottom of the content would be */
  width: 100%;
  height: 1px; /* Needs some height to be observed */
  pointer-events: none; /* Non-interactive */
  visibility: hidden; /* Not visible */
}

/* Ensure footer has some context for absolute positioning if needed */
#page-footer {
    position: relative;
}