/* --------------------------------- Top banner animation -------------------------------------------------*/
      #top_banner{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 12px 20px;
        z-index: 9999;
        pointer-events: none; /* let inner content control interactivity */
      }




      /* visible state when scrolled */
      #logo_background.visible {
        opacity: 1;
        transform: translateY(0);
      }




      /* scrolled content (hidden initially, shown with white background) */
      #logo_content_scrolled{
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 9999;
        pointer-events: auto;
        position: fixed;
        left: 27px;
        top: 22px;
        
        /* keep padding on the container so content doesn't move */
        padding: 15px 20px;
        border-radius: 8px;

        /* don't transform the container itself — only the background pseudo element will scale */
        transform: none;
        opacity: 1;
        transition: none;
        pointer-events: auto;
        overflow: visible;
      }

      /* background pseudo element that scales horizontally without deforming content */
      #logo_content_scrolled::before{
        content: "";
        position: absolute;
        inset: 0;                       /* fill the container including padding area */
        background: #fff;
        border-radius: inherit;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transform: scaleX(0);           /* start collapsed */
        transform-origin: left center;  /* scale from the left */
        transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .6s ease;
        z-index: 0;                     /* behind the content */
        pointer-events: none;
      }

      /* ensure the actual content sits above the pseudo background */
      #logo_content_scrolled > * {
        position: relative;
        z-index: 1;
      }

      /* show background when visible */
      #logo_content_scrolled.visible::before{
        transform: scaleX(1);
        opacity: 1;
      }

      /* hide initial version when scrolled */
      #logo_content_initial.hidden{
        display: none;
      }

      /* content that stays visible */
      #logo_content{
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 9999;
        pointer-events: auto;
        position: fixed;

      }

      /* small logo img */
  
/* ------------------ End Top banner animation ---------------------*/



/* ------------------ Hero headline animation ---------------------*/


      .hero-headline { display:inline-block; white-space:pre-wrap; } /* container helper */

      .headline-word{
        display: inline-block;
        transform: translateX(15%);
        opacity: 0;
        will-change: transform, opacity;
        white-space: nowrap;  /* prevent word wrap */
      }

      @keyframes slideInRtoL {
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .headline-word.is-animated{
        animation-name: slideInRtoL;
        animation-duration: 1.5s;  /* increased for testing */
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.22,1,0.36,1);
      }

      /* accessibility: respect reduced motion */
      @media (prefers-reduced-motion: reduce){
        .headline-word,
        .headline-word.is-animated{
          transform: none;
          opacity: 1;
          animation: none !important;
        }
      }
/* ------------------ end hero headline animation ---------------------*/





/* ----------------------------- Title h2 word slide-up animation ------------------------------*/
                              .title-word {
                                display: inline-block;
                                transform: translateY(30%);       /* initial offset */
                                opacity: 0;
                                will-change: transform, opacity;
                                white-space: normal;
                                vertical-align: baseline;
                                line-height: inherit;
                                overflow: visible;
                                margin-right: 0.12em;             /* control the gap — lower to tighten */

                                /* prepare for shared gradient alignment (JS will set background-position/size) */
                                background-repeat: no-repeat;
                                -webkit-background-clip: text;
                                background-clip: text;
                                -webkit-text-fill-color: transparent;
                                color: transparent;
                              }

                              @keyframes slideUp {
                                to {
                                  transform: translateY(0);
                                  opacity: 1;
                                }
                              }

                              .title-word.is-animated {
                                animation-name: slideUp;
                                animation-duration: 1.2s;
                                animation-fill-mode: both;
                                animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
                              }

                              /* ensure ancestor containers won't clip descenders during animation */
                              #title,
                              #main_text,
                              #main_text_container,
                              #content_container {
                                overflow: visible;
                              }

                              /* parent h2 keeps the gradient across the whole sentence */


                              /* remove margin on the last word to avoid trailing gap */
#title h2 .title-word:last-child {
  margin-right: 0;
}

/* respect reduced motion for both headline and title animations */
                              @media (prefers-reduced-motion: reduce) {
                                .title-word,
                                .title-word.is-animated,
                                .headline-word,
                                .headline-word.is-animated {
                                  transform: none;
                                  opacity: 1;
                                  animation: none !important;
                                }
                              }
/* ----------------------------- END title h2 word slide-up animation ------------------------------*/