.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 48;
}

.hero-mask {
  border-radius: 40px;
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-scale:hover {
  transform: scale(1.02);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-infinite-scroll {
  display: flex;
  width: max-content;
  animation: scroll 25s linear infinite;
}

.animate-infinite-scroll:hover {
  animation-play-state: paused;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.timeline-line {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-line.active {
  transform: scaleY(1);
}

.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background-color: currentColor;
  margin-left: 3px;
  vertical-align: middle;
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  from,
  to {
    background-color: transparent;
  }
  50% {
    background-color: currentColor;
  }
}

/* Responsive and Device Compatibility Adjustments */

/* Tablet & Mobile Layout Fixes */
@media (max-width: 1024px) {
  /* Compact Navbar Padding for touch screens */
  nav > div:first-child {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Make brand name a bit more compact to prevent overflow */
  nav .font-headline-md {
    font-size: 1.5rem !important;
  }

  /* Make mobile menu drawer fixed and scrollable so all items and download button fit on any screen height */
  #mobileMenu {
    position: fixed !important;
    top: 57px !important; /* height of header */
    left: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 57px) !important;
    overflow-y: auto !important;
    z-index: 49 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* Small Mobile Screens (Portrait - under 420px) */
@media (max-width: 420px) {
  /* Prevent large display headings from wrapping awkwardly or overflowing */
  .text-display-hero-mobile {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }

  /* Adjust section padding for smaller screens */
  .py-section-padding-mobile {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Explicit slim height for scroll progress bar */
#scrollProgress {
  height: 3px !important;
}