:root {
    --title-height: 1em;
    
    --title-width: 1.5em;
    --title-width-club-type-1: 8.05em;
    --title-width-club-type-2: 6.4em;
    --title-width-club-type-3: 7.2em;
    --title-width-club-type-4: 7.15em;
    --title-width-club-type-5: 8.35em;
    --title-width-club-type-6: 7.45em;
    --title-width-club-type-7: 8.4em;
    --title-width-club-type-8: 9.8em;
    --animation-duration: 20s;
}

/* --- Video Hero --- */
.hero-flex {
  display:flex; 
  align-items: center;
  height: 100%;
  }
.hero-text {
  margin:0;
  padding:0;
  height:auto;
  }

.video-header {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  padding-top:70px;
}

.video-header .video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.video-header .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* optional: for readability */
  z-index: 1;
}

.video-header .container,
.video-header .hero-text {
  position: relative;
  z-index: 2;
  color: #fff;
}

.animated-title {
    align-self: start;
    
    display: flex;
    gap: 0.25em;
    justify-content: left;
    align-items: center;
    
    position: relative;
    
    height: var(--title-height);
    width: var(--title-width);
    white-space: nowrap;
    overflow: hidden;
    
    animation-duration: var(--animation-duration);
    animation-iteration-count: infinite;
    animation-name: expand;
}

.animated-title::after {
    content: '';
    
    position: absolute;
    top: 1px;
    right: 0px;
    
    width: 2px;
    height: calc(100% - 2px);
    background-color: white;
    
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: subtle-glow;
}

@keyframes subtle-glow {
    from {
        box-shadow: 0 0 1px 0px rgb(255, 255, 255, 0.3);
    }
    to {
        box-shadow: 0 0 1px 1px rgb(255, 255, 255, 0.3);
    }
}

@keyframes expand {
    0% {
        width: var(--title-width);
    }
    1% {
        width: var(--title-width);
    }
    
    3% {
        width: var(--title-width-club-type-1);
    }
    12.27% {
        width: var(--title-width-club-type-1);
    }
    
    
    14.27% {
        width: var(--title-width);
    }
    15.27% {
        width: var(--title-width);
    }
    17.27% {
        width: var(--title-width-club-type-2);
    }
    26.54% {
        width: var(--title-width-club-type-2);
    }
    
    
    28.54% {
        width: var(--title-width);
    }
    29.54% {
        width: var(--title-width);
    }
    30.54% {
        width: var(--title-width-club-type-3);
    }
    39.81% {
        width: var(--title-width-club-type-3);
    }
    
    
    41.81% {
        width: var(--title-width);
    }
    42.81% {
        width: var(--title-width);
    }
    44.81% {
        width: var(--title-width-club-type-4);
    }
    54.08% {
        width: var(--title-width-club-type-4);
    }
    
    
    56.08% {
        width: var(--title-width);
    }
    57.08% {
        width: var(--title-width);
    }
    59.08% {
        width: var(--title-width-club-type-5);
    }
    68.35% {
        width: var(--title-width-club-type-5);
    }
    
    
    70.35% {
        width: var(--title-width);
    }
    71.35% {
        width: var(--title-width);
    }
    73.35% {
        width: var(--title-width-club-type-6);
    }
    82.62% {
        width: var(--title-width-club-type-6);
    }
 
    
    83.62% {
        width: var(--title-width);
    }
    84.62% {
        width: var(--title-width);
    }
    86.62% {
        width: var(--title-width-club-type-7);
    }
    97% {
        width: var(--title-width-club-type-7);
    }
    99% {
        width: var(--title-width);
    }
    100% {
        width: var(--title-width);
    }
    

}
.h1-club-type {
    height: calc(var(--title-height) * 2);
    
    align-self: start;
    
    display: flex;
    flex-direction: column;
    
    position: relative;
    
    animation-duration: var(--animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: steps(2, jump-none);
    animation-name: switch;
    
    & > div {
        height: var(--title-height);
        display: flex;
        align-items: center;
    }
}

@keyframes switch {
    3% {
        top: 0;
    }
    12.27% {
        top: 0;
    }
    17.27% {
        top: -100%;
    }
    26.54% {
        top: -100%;
    }
    30.54% {
        top: -200%;
    }
    39.81% {
        top: -200%;
    }
    44.81% {
        top: -300%;
    }
    54.08% {
        top: -300%;
    }
    59.08% {
        top: -400%;
    }
    68.35% {
        top: -400%;
    }
    73.35% {
        top: -500%;
    }
    82.62% {
        top: -500%;
    }
    85.62% {
        top: -600%;
    }
    97% {
        top: -600%;
    }
}