/* TouchTraks Cinematic Video Scroll */
#tt-video-story {
  --tt-green: #15C14A;
  position: relative;
  width: 100%;
  background: #07100b;
  color: #fff;
  font-family: inherit;
}

#tt-video-story .tt-stage {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #07100b;
}

#tt-video-story .tt-video-stack,
#tt-video-story .tt-shade {
  position: absolute;
  inset: 0;
}

#tt-video-story .tt-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}

#tt-video-story .tt-video.active {
  opacity: 1;
}

#tt-video-story .tt-shade {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(3,10,6,.94) 0%,
    rgba(3,10,6,.72) 43%,
    rgba(3,10,6,.15) 100%
  );
  pointer-events: none;
}

#tt-video-story .tt-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(24px, 8vw, 120px);
  width: min(560px, 78%);
  transform: translateY(-50%);
}

#tt-video-story .tt-eyebrow {
  color: var(--tt-green);
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 700;
}

#tt-video-story .tt-number {
  margin-top: 28px;
  color: var(--tt-green);
  font-size: 14px;
  letter-spacing: 2px;
}

#tt-video-story .tt-number span {
  color: rgba(255,255,255,.65);
}

#tt-video-story .tt-heading {
  color: #fff;
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 1.06;
  font-weight: 750;
  margin: 16px 0;
}

#tt-video-story .tt-description {
  color: rgba(255,255,255,.86);
  font-size: 17px;
  line-height: 1.8;
  max-width: 490px;
}

#tt-video-story .tt-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

#tt-video-story .tt-feature {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 12px;
}

#tt-video-story .tt-feature::before {
  content: "✓";
  color: var(--tt-green);
  margin-right: 8px;
}

#tt-video-story .tt-progress {
  width: min(360px, 100%);
  height: 3px;
  margin-top: 30px;
  background: rgba(255,255,255,.25);
}

#tt-video-story .tt-progress span {
  display: block;
  width: 11.11%;
  height: 100%;
  background: var(--tt-green);
  transition: width .3s ease;
}

#tt-video-story .tt-hint {
  margin-top: 22px;
  color: rgba(255,255,255,.8);
  font-size: 10px;
  letter-spacing: 2px;
}

#tt-video-story .tt-hint span {
  color: var(--tt-green);
  font-size: 18px;
  margin-left: 8px;
}

@media (max-width: 767px) {
  #tt-video-story .tt-stage {
    height: 85vh;
    min-height: 600px;
  }

  #tt-video-story .tt-shade {
    background: linear-gradient(
      0deg,
      rgba(3,10,6,.96) 0%,
      rgba(3,10,6,.72) 58%,
      rgba(3,10,6,.18) 100%
    );
  }

  #tt-video-story .tt-copy {
    top: auto;
    bottom: 35px;
    left: 22px;
    width: calc(100% - 44px);
    transform: none;
  }

  #tt-video-story .tt-heading {
    font-size: clamp(34px, 9vw, 48px);
  }

  #tt-video-story .tt-description {
    font-size: 14px;
    line-height: 1.65;
  }

  #tt-video-story .tt-feature {
    font-size: 11px;
    padding: 8px 10px;
  }
}


/* TouchTraks About Location Animation */
.tt-about-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.tt-about-section .tt-about-location {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.tt-about-section .tt-about-location svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 18px rgba(21, 193, 74, .8));
    animation: ttPinBlink 1.5s infinite ease-in-out;
}

.tt-about-section .tt-about-location::before,
.tt-about-section .tt-about-location::after {
    content: "";
    position: absolute;
    inset: 30%;
    border: 3px solid #15C14A;
    border-radius: 50%;
    animation: ttPinPulse 2s infinite ease-out;
}

.tt-about-section .tt-about-location::after {
    animation-delay: 1s;
}

@keyframes ttPinPulse {
    0% {
        transform: scale(.5);
        opacity: .9;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

@keyframes ttPinBlink {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 12px #15C14A);
    }
    50% {
        opacity: .55;
        filter: drop-shadow(0 0 32px #15C14A);
    }
}

@media (max-width: 767px) {
    .tt-about-section .tt-about-location {
        width: 180px;
        height: 180px;
    }
}